ブログ運営

【ブログ初心者向け】スマホのフッターアイコンにリンクを貼ってみよう!

こんにちはあんこ(@anko30213252)です。

私はWordPressのブログテーマ『JIN(ジン)』でブログを作成しています。

今回は、スマホでブログを見たときに表示されている

ピンクで囲まれた部分『スマホフッター』の設定方法を紹介します。
私の場合、スマホフッターの「ホーム🏠」「プロフィール🐎」「お問合せ✉」の設定は、
JINの設定マニュアルを見て出来たのですが、

あんこ
あんこ
Twitterのアイコンにリンクを貼る方法がどこを検索しても見つけられませんでした。

そこで、今回の記事は、

スマホフッターに

●メニューを追加する方法

●アイコンにリンクを挿入する方法

を紹介します!

あんこ
あんこ
やり方がわかればとっても簡単だからぜひやってみてね

ブログをSNSにリンクさせる利点は?


私がスマホフッターにTwitterのリンクを貼りたかったのは、
ソーシャルからのアクセスが欲しかったからです。

ブログを立ち上げても、すぐにアクセスを伸ばすことはできないですよね。
検索からの流入なんて、私のような初心者にはまだまだ先の事。
だけど、ブログを立ち上げたからにはみなさんに読んで欲しい。

そこで、どうしてもTwitterをスマホフッターに表示させてリンクを貼りたかったんです。

目的はブログとTwitterの連携からアクセスを増やす事

もちろん、Twitterだけではなく、「Instagram」や「Facebook」のリンクを貼るのもいいと思います。

あんこ
あんこ
でもスマホフッターのアイコンにリンクを貼る方法がいろいろ調べてもわかりませんでした。
(わかってしまえば超簡単なんですが)

なので、私みたいにブログの設定で迷子にならないために、スマホフッターの設定方法を紹介したいと思います。

スマホフッターの設定方法

スマホフッター用のメニューの作成

まずはじめに、スマホのフッター用のメニューを作ります。

1.新しいメニューを作成する

WP管理画面の
「外観」→「メニュー」
②「新しいメニューを作成しましょう」をクリック→「スマホメニュー」と入力します。
「メニューを作成」をクリックします。

2.フッターに表示したいメニューを追加する

私の場合は、「ホーム🏠」「プロフィール🐎」「お問合せ✉」に☑をしました。
そしてメニュー追加をクリックします。

3.アイコンを設定する

アイコンは Font Awesomeで取得できます。

アイコンを選びクリックすると、

このようなアイコンのコードが表示されます。
必要なのは黄色で囲まれた部分だけです。
しかし、この部分だけコピーしようとしてもうまくできないので、
私は、コード全部を選択して貼り付けした後に必要ないコードを消しました。

選んだアイコンコードを
説明の項目に貼り付けします。
②表示オプションをクリック
説明に☑をしてメニューを保存します。

これでスマホのフッターにメニューが追加されました!
次はとうとうTwitterのアイコンを設定してご自身のTwitterのURLのリンクを貼る方法です。

あんこ
あんこ
あともう少しだからがんばって!

スマホフッターのアイコンにリンクを貼る方法

4.Twitterをメニューに追加する。

まずリンクを貼りたい項目を追加するために、
カスタムリンクをクリックし、URLを入力します。
リンク文字列に『Twitter』と記入して
メニューに追加をクリックします。

すると、右側に「Twitter」の項目が増えました。

5.Twitterのアイコンを入力する。

次に、Twitterのカスタムリンクの▲をクリックします。
①説明の欄にTwitterのコードを入力します。
メニュー追加をクリックします。

それではスマホでブログを確認してみてください。
きちんと表示されていましたか?

設定を覚えてしまえばとっても簡単ですし、
ブログ運営をするにあたって「スマホの固定フッターの設定」は必須なのでぜひやってみてください。

フッターのカスタマイズ

あんこ
あんこ
最後まで読んでくれてありがとうございました!よかったらTwitter(@anko30213252)もフォローしてくれるとうれしいな♡