【カスタム】スマホでもメニューを表示させる方法

こんばんわ。
ＩＴパパの住福です。

今回は大人気コーナー　アメブロカスタムです。
カスタム系の記事を書き始めてからというもの、読者登録数が徐々に伸びています♪少しでもお役に立てる記事を書けるよう、日々努力です！！

スマホとPCの違い

さて、今回はスマホでもメニューを表示させる方法をご紹介致します。
とはいえ、「私はもうメニューバー設置してるよ！」なんて方は沢山いらっしゃると思います。

しかし、PCでしっかり表示されていても、スマホではこんな画面になってしまい、メニューバーは見れません！

せっかくTOPページのヘッダーに設置したメニューも表示されないと意味がありませんよね？当然、アメブロはモバイル端末からのアクセスも非常に多いわけです。

その見込み客にもしっかりアッピールしたいのであれば、是非とも記事内でメニューを表示させる工夫をされてはいかがでしょうか？

アメーバがもっとレスポンシブWenデザイン化してしまえばいいのですが、現状ではそこまで実装されていませんので、以下の項目に沿ってチャンレンジしてみて下さい。

スマホでもメニューを表示させよう！

記事内でこんな表示を見たことありませんか？

これであれば、スマホでも記事内からメニューを選ぶことができます！
こちらのHTMLは下記の通りです。コピペしてつかって下さい。


<div align="center" style="background: rgb(238, 238, 255); 
padding: 10px; border: 1px solid rgb(0, 0, 255);">
<a href="リンク先URL1" target="">
<strong>メニュー</strong></a>　/　<
a href="リンク先URL2" target=""><
strong>アクセス</strong></a>　/　
<a href="リンク先URL3" 
target=""><strong>お問い合わせ<
/strong></a>　/　<a href="tel:**********" target="_blank">
<strong>電話をかける</strong></a></div>

色を変えたい場合はカラーコードを使って下さい。
ここで使っている青色は
rgb(238, 238, 255) = #eeeeff　･･･　背景の青色
rgb(0, 0, 255)= #0000ff　･･･　線の青色

ですので、ここの数値を好きなカラーコードに変えればＯＫです！
※カラーコードはコチラ

スマホ集客のコツは

ですが、この「メニュー表示」を行うことで、２番目の「シンプルな操作性」を付け加えることができます。ワンボタンで問合せなどが出来るというのは、ユーザーからすると非常に便利であり、かゆいところに手が届くという感じです。

お店でアメブロなどをやられている場合は、是非チャレンジしてみて下さい。

このようにHTMLでカスタマイズの幅を利かせることができますが、不慣れなうちは少し難しいかもしれません。

そんなときは弊社のブログカスタムに頼って下さい！無料診断も行っていますよ。無理な営業など一切ありませんので、気軽に問い合わせ下さいヽ(*´∀｀)ノ
親切丁寧にご対応させていただきます。

Next Innovation　住福純

HOME / アメブロカスタム / 売れるアメブロのつくり方 / お問合せ