コピペでスマホ向けアイコンメニューを表示する

【スマホ向け】コピペで位置固定アイコンメニューを表示する方法

※クリックで拡大できます。

このご時世、ブログへの半数以上のアクセスがスマホからになっています。

スマホはPCよりも画面が小さいために、読み終えるまで時間がかかるもの。

途中で疲れて、読むのをやめてしまう閲覧者も多いかもしれません。

そこで今回はスマホでもいろいろな記事を見てもらえるように、固定アイコンメニューの表示方法をご紹介します。

記事の読み途中でも一覧に戻れるようになるため、途中離脱が減るかもしれません。

【この記事を読むメリット】

ブログに固定のアイコンバーを表示することができる
サイトの運営意識が持てる

動線を増やす、という発想。詳しくは後程。

それでは今回のコンテンツです。

コピペでスマホ向けアイコンメニューを表示する
- HTMLとCSSをコピーする
- 動線が増えれば滞在時間は増える

HTMLとCSSをコピーする

今回はHTMLとCSSをそれぞれ編集します。

HTMLをコピペする
CSSをコピペする

それでは早速みて行きましょう。

１．HTMLをコピペする

まずはHTMLからいきましょう。

フッターと呼ばれる、ブログ最下部の足（foot)部分にコードを追加します。

手順をイメージ画像でみていきましょう。

まずはダッシュボードからデザイン画面を開きます。

スマホ向けブログアイコンメニューをコピペで

デザイン画面からカスタマイズをクリックし、フッタをクリック。

スマホ向けブログアイコンメニューをコピペで

表示された入力エリアをクリックすると編集モードになりますので、以下のコードを貼り付けます。

赤字には飛ばしたい先のURLを、青字にはアイコンの下に表示したい文字を入力しましょう。アイコンの変え方(緑字)は後程ご紹介します。

一旦こちらで保存して頂いて問題ありません。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<ul id="phone-footer" class="phone-only-disp">
<li>
<a href="URL１">
 テキスト１</a>
</li>
<li>
<a href="URL２">
 テキスト２</a>
</li>
<li>
<a href="URL３">
 テキスト３</a>
</li>
<li>
<a href="URL４">
 テキスト４</a>
</li>
</ul>

スマホ向けブログアイコンメニューをコピペで

編集が完了したら「変更を保存する」ボタンを押して作業完了です。

これでHTMLは準備完了です。CSSの編集へ進みましょう。

色文字の部分を変えるだけでメニューの設定変更ができます。

２．CSSをコピペする

次にCSSをコピペします。

初めてCSSを編集される方は、こちらの手順をご参照ください。

www.blog.biz-thinking-k.com

下記のコードをコピーして貼り付けます。

.phone-only-disp{
display:none;
}

@media screen and (max-width: 480px) {
.phone-only-disp{
display:block;
}
}

#phone-footer {
position: fixed;
left:0;
bottom:0;
width: 100%;
height:44px;
margin:0;
padding:0;
background-color:#f5f5f5;
border-top:1px solid #a9a9a9;
z-index:30;
}

#phone-footer li {
float:left;
width:25%;
background:#f5f5f5;
list-style-type:none;
text-align:center;
font-size:20px;
}

#phone-footer li a {
display: block;
color:#808080;
padding-top:10px;
padding-bottom:5px;
line-height:10px;
text-decoration:none;
}

.mini-text{
font-size:10px;
}

#phone-footer li a:hover {
text-decoration:none;
}