アメブロをカスタマイズしてメニューバーを作成しても
残念ながらアメブロアプリやスマホでは表示されません。泣
だれかのブログを見ていて
気になるサービスがあっても
メニュー表や問合せフォームなどの
場所がよく分からない！なんてこと、ありませんか？
せっかく購入する気になっていても
メニュー表の場所が分からない！
どこから申込めばいいか分からない！
となってしまうと、
別に急ぎじゃないし後でいっか〜
となったが最後、すっかり忘れられて後はありません。
スマホは基本、
縦スクロールしかできないのでパソコンで見るより
情報が限られちゃうんですよね〜
なのでそんなときにおすすめなのが
記事の中にメニューリンクを設置すること！！
ということでスマホで見ても
メニューリンクが設置できるように
みんなが大好き大人可愛いデザインで作ってみました
コピペで使えるのでよかったら使ってくださいね〜♪
スマホメニューリンクの作り方
スマホで表示するためのメニューリンクは
記事の中に直接設置します！
なのでHTML編集をするので以下の順番で作成してね！！
①好きなデザインを選ぶ
②ブログ記事編集
③HTML編集で①をコピーして貼付け
④通常記事編集でいつもどおり更新
より詳しい方法はこちらを見てね。
● 記事に置きたい可愛いメニューリンク
お気にいりを見つけて
コピーして使ってくださいね
■シンプルメニューリンク
<div align="center" style="background: #ece4e1; padding: 15px; display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f7f6f5; padding: 15px; display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f5ecf4; padding: 15px ;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f7f6fb; padding: 15px; display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #e6eae6; padding: 15px; display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #d4d9df; padding: 15px; display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
■ゴールド枠付メニューリンク
<div align="center" style="background: #ece4e1; padding: 15px; border: 1px solid #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f7f6f5; padding: 15px; border: 1px solid #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f5ecf4; padding: 15px; border: 1px solid #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f7f6fb; padding: 15px; border: 1px solid #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #e6eae6; padding: 15px; border: 1px solid #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #d4d9df; padding: 15px; border: 1px solid #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
■シンプルな二重線メニューリンク
<div align="center" style="background: #fff; padding: 15px; border: 4px double #ece4e1;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #fff; padding: 15px; border: 4px double #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #fff; padding: 15px; border: 4px double #e5c1cd;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #fff; padding: 15px; border: 4px double #b2cbe4;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
■点線背景付メニューリンク
<div align="center" style="background: #ece4e1; padding: 15px; border: border:1px dashed #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f7f6f5; padding: 15px; border: 1px dashed #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f5ecf4; padding: 15px; border: 1px dashed #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #f7f6fb; padding: 15px; border: 1px dashed #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #e6eae6; padding: 15px; border: 1px dashed #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
<div align="center" style="background: #d4d9df; padding: 15px; border: 1px dashed #c1ab05;display:inline-block;"><span style="font-weight:bold; font-size:0.83em;"><a href="リンク先アドレス1" target="">メニュー</a>/<a href="リンク先アドレス2" target="">アクセス</a>/<a href="リンク先アドレス3" target="">Instagram</a>/<a href="リンク先アドレス４">ご予約・問合せ</a></span></div>
POINT
- 文字が長すぎると改行されて見える場合もあるので短めの文字がおすすめ
- 文字を小さくする場合は「font-size:0.83em」の数字の部分を小さくしてね
- 色を変更したい場合は＃◯◯◯◯◯◯の英数字部分をカラーコードページを見ながら変更してみてね
そのままコピーするだけでも使えますが、
もっとあなたのブログにあったイメージで作りたい場合は
色や形を変えてお気に入りのブログを作ってみてくださいね♡
【カラー変更の参考ページ】
WEB色見本カラーコード
● 記事に設置する方法
①ブログを書く手順で[ブログを書く]画面の下のところで
[HTML表示]に切り替えます。
スマホの場合、画面右下の［HTML編集］で画面が変わります。
②一覧の中から使いたいデザインのHTMLタグ（グレー枠内）をコピーして貼りつけます。
③通常表示に切り替えるとリンクボタンができます
もっと詳しい設置の方法はこちらを見てね。
それでは、皆さまにとって素敵な１日となりますように
最後までお読みいただきありがとうございました
もしこの記事があなたの参考になったら
ぜひいいね＆フォローをお願いします
今日もあなたにとって素敵な１日となりますように
旧アカウントからリニューアル♡
＼1,000人以上が受け取ってます／
SNSで世界観をつくる8つのプレゼント
↓ ↓ ↓ ↓ ↓
LINE公式
画像をクリックして登録♡
LINE画面が表示されない方は
@joujounetでID検索
(@も含めて検索してください)
Service
アメブロカスタマイズ／ライティング添削
ヘッダー／バナー／HP制作／インスタテンプレ作成
Instagramコンサル／Canva／LINEリッチメニュー
デュプロマ・テキスト・講座資料の作成
Lステップ代行構築／LINE運用アドバイス
SNSマーケティングをもとに幅広く
女性に響くデザインで
あなたらしさを叶えます♡
ハンドメイドやエステサロン
カフェ&レストラン・英語教室
アロマ・ネイル・婚活塾など
全国各地からご依頼・コンサルで一人一人
寄り添ったサポートを心がけています♡
＼３人のママでも理想の働き方を手に入れた方法✨／
＼インスタはこちら♡Follow Me✨／
LINE公式マーケティングやデザイン作りのヒントを発信♡
心ときめく食器とお花が作れるポーセラーツ＆フラワーインテリア
JouJouetteの教室ブログはこちら♡
ジュジュネット