【THE Thor】メニューパネルにNoteやWEAR、クックパッドなどSNSやサイトのアイコンを追加表示する方法

  • ブックマーク
  • Feedly

THE ThorのメニューパネルにSNSを表示しようと思っても…。

SNSは初期設定にある「7個」しか表示できません。

登録したいのはそれじゃないSNS(やサイト)なんだけど…
なんて思って諦めていませんか?

他のSNS、例えばNoteやファッションが好きな方ならWEAR、
お料理が好きな方ならクックパッドなど。
ググってみたけど方法はないみたい…

いえいえ、実は他のSNS(やサイト)を表示させる裏技があるので、
カスタマイズの方法をシェアしますね。

メニューパネルのカスタマイズ

カラムを4つに分割する

メニュー→外観→ウィジット→「メニューパネル」を選択します。

ブロックで「カラム」と検索し、2カラムを選択します。

その2つのカラムの1つに、ブロックで「カラム」と検索し、2カラムを選択します。

 

これを右側も同じようにすると、4つのカラムが出来上がります。

通常は3つカラムしか作れないのですが、こうする事で
1ブロックに4カラムを設定できます。

ソーシャルアイコンを設定する方法

ブロックで「ソーシャル」と検索し、「ソーシャルアイコン」を
クリックして「Instagram」と検索。

Instagramのアイコンを選択します。

で、画像を選択して「中央揃え」に選択

「リンク」に、「https://www.instagram.com/(自分のアカウント名)」を入力します。

これでinstagramのアイコン設定は完了です。

同じような手順でTwitterのアイコンも設定していきましょう。

noteなどのアイコンを設定する方法

NoteやWEARのアイコンはソーシャルアイコンには設定されていないので、
上記の方法では追加ができません。

ですから、自分でググってフリー素材を探してきましょう。
(私はFigmaで自作しました)

画像が用意できたら

ブロック→「画像」を選択します。

ここに用意した画像をアップロードしていきます。

アップロードが終わったら、画像を選択し「中央揃え」に選択。

リンク先のURLを入力します。

https://note.com/(自分のアカウント名)」

これでnoteのアイコン設定は完了です。

同じような手順でWEARのアイコンも設定していきましょう。

終わったら右上の「更新」をクリックして保存します。

確かめてみましょう

ではメニュー→固定ページから、TOPページを表示して確かめてみましょう。

ちゃんとリンクが機能しているか確認できたら、終了です。
お疲れ様でした。
次は、バックのカラーを変えていきます。

メニューパネルの背景色を変更する方法

メニュー→外観→ウィジェット→「メニューパネル」を選択します。

先ほど作った「カラム全体」を選択します。

右側のネジのアイコンを選択すると設定ができるので、
設定→「色」を選択します。

「背景色」で色を選択します。

好きな色にしたい場合は「カスタムカラー」を選択すると、
好みの色に設定できますよ。
(今回はわかりやすいようにグレーを選択しました)

TOPページで確認しましょう

このようなかたちで、背景色を設定できます。

 

背景色を設定することで、SNSアイコンをデフォルトのように
目立たせることができるので、ぜひ試してみてくださいね!

フリーアイコンの入手先サイト

ちなみに、私の本業のサイトのメニューパネルはこんな感じ。

 

noteのアイコンはFigmaで手作りしましたが、その他のアイコンは、こちらから入手しました。

「www.marksign.net(外部ページへ移動)」

他にもこんなに可愛いアイコンが…。ぜひご活用ください。

お疲れ様でした。

  • ブックマーク
  • Feedly

この記事を書いた人