2019年オススメのASPは〇〇アフィリエイト! ➥詳細記事をチェックする

SNSアイコンをヘッダーやフッターに表示させる方法

SNSアイコンをヘッター表示させる方法を教えて。OK!アイコン以外にも色々載せれるよ

「SNSアイコンやお好きな記事のページ」をヘッダーやフッターメニューに表示させリンクさせる方法を紹介致します。

携帯ヘッダーにSNSアイコンなど挿入

上記がモバイル表示での完成のイメージです。テーマにより完成デザインは異なります。

パソコンでも下記の感じに設置できるようになります。

ヘッダーにSNSアイコン挿入

 

今回も例のごとく、説明がわかりやすいように解説用に作ったデモサイトを使って説明します。

また、解説の分かり易さを追求すべく、テーマはシンプルな無料テーマを使っていきます。
※普段は、ジェイコブ佐藤blogは有料テーマSANGOを使っています。

PCのヘッダーにSNSアイコンなどを表示させる方法

まずはパソコンでの表示設定からやっていきます。WordPressのダッシュボードのTOP画面を開き、左側のたくさんある項目の中の

ワードプレスTOP画面外観メニュー

外観メニューを選択

PCへっだーメニュー追加

新しいメニューを作成をクリック

メニュー名は、後で、携帯用メニューも作るので、それらと自分で区別できる名前なら何でもOKです。

メニュー作成をクリック

カスタムリンクを追加

カスタムリンク➡追加

これから左側のメニューの項目を右側に追加します。SNSなどのアイコンはカスタムリンクを使います。

例えば私のサイトのように、投稿を選ぶことで、読んで欲しい記事をヘッダーに表示させることも出来ます。

カスタムリンクをクリック

カスタムリンク

URLリンク文字列を入力する。

  • URL 例)TwitterだとTwitterの自分のアカウントのホーム画面のURL
  • リンク文字列 アイコンを表示させるためのコードを入力

URLは上記の説明だけで問題ないと思います。リンク文字列はよくわからないかと思いますが、コピペで簡単にできますので安心して下さい。

コピペするアイコンの素材はこちらから入手可能です。

私のテーマは優秀だから、きっと最新版に対応している!と自信のある方は5を選んでみて下さい。(笑)

それ以外の方は4.7から選んでみたらいいです。

私の普段利用している有料テーマSANGOはFontAwesome5に対応していました。

今説明に使っているコクーンはFontAwesome4.7のみ対応でしたので、4.7を使って説明していきます。おそらくまだまだFontAwesome5に対応しているテーマ少ないかと思います。

注意
どちらも使えない場合は残念ながらテーマが対応していないかもしれません。

FontAwesome4.7をクリックしますと以下の画面が表示されます。少し下にスクロールさせまして

FontAwesome4.7のサイト

Searchする画面があります

今回はTwitterのアイコンをゲットしたいので

Twitterと入力

注意
海外のサイトなので英語で入力しましょう。ホームアイコンが欲しいならhomeで検索したら表示されます。

Twitterアイコンを選ぶ

すると2種類見つかりました

好みのアイコンを選択

Twitterリンク文字列

Twitterアイコンのリンク文字列が

表示されますので

コピーします

カスタムリンク設定

リンク文字列に貼り付けます

<i class="fa fa-twitter-square" aria-hidden="true">Twitter</i>⇦のようにTwitter(アイコンの隣に表示させたい名前)を追加します。

URLは自分のTwitterアカウントの
ホーム画面のURLを入力

Twitterアイコン追加完了

右側の項目に上記のように追加されえばOKです

同じ要領で、YouTubeだったりホーム画面やお問い合わせなど、お好きな物を追加して下さい。全て追加が終わりましたら

PCヘッターメニュー追加保存

メニュー設定のヘッダーメニューをチェックしてメニュー保存をクリック!

これで完了です。ご自身のサイトをパソコン表示で確認下さい。しっかりツイッターなどのアイコンが表示されていると思います。

フッターにお問い合わせなどを追加する方法

では次にフッターに表示させます。フッターにはお問い合わせプライバシーポリシーを表示させてみます。フッターの設定は今からやる作業で、携帯・PCどちらにも反映されます。

※お問い合わせをお持ちでない方はこちらを参考に作り下さい。
お問い合わせが簡単に設置できるプラグインはありますか?Contactform7がオススメです。Contact Form 7|簡単に「お問い合わせ」が設置できるプラグイン

それでは設定していきます。

先程と同じくダッシュボードTOP画面左の項目の外観メニューを選択

フッターメニューを追加する

新しいメニューを作成しましょうをクリック

メニュー名はフッターメニュー

最後にメニューを作成をクリック

フッターメニューアイコン表示設定

今回は固定記事に作っておいた「お問い合わせ」と「プライバシーポリシー」をフッターに載せます。

左側の固定ページを選択、その中のお問い合わせプライバシーポリシーチェックを入れメニューに追加をクリック。

右側に上の画像のように追加されたのを確認したら、メニュー設定フッターメニューチェックを入れて、メニューを保存をクリック!

以上です!

パソコン・モバイル画面のフッターの両方に表示されているので、それぞれ確認してみて下さい。

携帯のヘッダーにSNSアイコンなどを設置する

これまでの作業をやったことにより、説明不要かもしれませんね。基本的にやることは同じです。

これまでと同じくダッシュボードTOP画面左の項目の外観メニューを選択。

新しいメニューを作成しましょうを選択➡メニュー名は携帯用ヘッダーメニューメニューを作成をクリック。

これまでと同じように、携帯のヘッダーに表示させたい物を左の項目から追加します。

  • お問い合わせは固定ページから選択してメニューに追加。
  • SNSアイコンはカスタムリンクで、URLリンク文字列を入力してメニューに追加。

右側に追加されたのを確認して、メニュー設定ヘッダーモバイルメニューチェックしてメニューを保存をクリック。

これで携帯のヘッダーに、好きなページやSNSアイコンなどの設置が完了です。

確認してみて下さい。

SNSアイコンをヘッダーやフッターに表示させる方法|まとめ

今回の行った設定の他にも、できることがあります。私のサイトの携帯表示を見て貰ったら分かりますが、モバイルヘッダーメニューをスライド表示させることもできます。

テーマによって対応してたり、しなかったり違いますので、色々いじって試してみて下さい。やり方は今回の内容をマスターすれば、全ての設定に対応できます。

参考までに、ヘッダーにSNSアイコンではなく、自分が見て欲しい記事を載せている方もよく見かけます。

例えば旅行の記事を書いていたら、北海道編、沖縄編などとヘッダーに載せるとアクセスされやすいかもしれません。

みなさんもぜひ色々試行錯誤してみて下さい。