スマートフォンや携帯向け「メニュー」を記事内に作る方法

スマートフォンや携帯だけで見ている方向けに、ブログ記事内に「メニュー」を作る方法

ブログご訪問ありがとうございます。
営業とネット集客に強い個人事業主向けビジネス心理コンサルタント漆沢英一です。

スマートフォンや携帯向けメニューの必要性

アメブロは、スマートフォンや携帯などのモバイル端末では、パソコン表示と違い、ヘッダーやメニュー・サイドパネル等は表示されません。

基本は、ブログ記事のみの表示です。

そのため、スマートフォンや携帯だけで見ている方向けに、ブログ記事内に「メニュー」を作る必要があります。

例：

ブログカスタマイズ事例／ご提供サービス一覧／お問い合わせ・お申込み／ご提供事例／お客様の声／プロフィール

モバイル端末向けメニューの6項目

必要となる項目は、以下の6項目が基本です。

提供サービスメニューのリンク
住所・アクセスへのリンク
お申込み・お問い合わせ先・連絡先のリンク
お客様感想のリンク
ホームページへのリンク
自己紹介へのリンク

記事内へコピーし張ることで使えるメニュータグ

提供サービスメニューのリンク／住所・アクセスへのリンク／お申込み・お問い合わせ先・連絡先のリンク／お客様感想のリンク／ホームページへのリンク／自己紹介へのリンク

上記メニュー例のタグは以下の通りです。

コピーしてお使いください。

<div style="border: 1px solid #ff9750;padding: 10px;margin:10px;box-shadow:5px 5px 5px #99FFFF;"><a href="★"　target="_blank" rel="noopener">提供サービスメニュー</a>／<a href="★" 　target="_blank" rel="noopener">住所・アクセスへ</a>／<a href="★" 　target="_blank" rel="noopener">お申込み・お問い合わせ先・連絡先</a>／<a href="★" 　target="_blank" rel="noopener">お客様感想</a>／<a href="★" 　target="_blank" rel="noopener">ホームページ</a>／<a href="★" 　target="_blank" rel="noopener">自己紹介</a></div>

★のところに、各メニュー記事へリンクするURLを記入してください。

URLは、リンクしたいブログ記事を表示したときにブラウザの窓にでるアドレスです。

例："https://ameblo.jp/uru-uru176/entry-12194700497.html"

点線枠のメニュータグ

提供サービスメニュー／住所・アクセスへ／お申込み・お問い合わせ先・連絡先／お客様ご感想／ホームページへ／自己紹介へ

<div class="box05"><a href="★" target="_blank" rel="noopener">提供サービスメニュー</a>／<a href="★" target="_blank" rel="noopener">住所・アクセスへ</a>／<a href="★" target="_blank" rel="noopener">お申込み・お問い合わせ先・連絡先</a>／<a href="★" target="_blank" rel="noopener">お客様感想</a>／<a href="★" target="_blank" rel="noopener">ホームページ</a>／<a href="★" target="_blank" rel="noopener">自己紹介</a></div>

枠線がピンクの影ありと影無し

提供サービスメニュー／住所・アクセスへ／お申込み・お問い合わせ先・連絡先／お客様ご感想／ホームページへ／自己紹介へ

<div style="border: 1px solid #EE82EE;padding: 10px;margin:10px;box-shadow:5px 5px 5px #FF99FF;"><a href="★" target="_blank" rel="noopener">提供サービスメニュー</a>／<a href="★" target="_blank" rel="noopener">住所・アクセスへ</a>／<a href="★" target="_blank" rel="noopener">お申込み・お問い合わせ先・連絡先</a>／<a href="★" target="_blank" rel="noopener">お客様感想</a>／<a href="★" target="_blank" rel="noopener">ホームページ</a>／<a href="★" target="_blank" rel="noopener">自己紹介</a></div>

提供サービスメニュー／住所・アクセスへ／お申込み・お問い合わせ先・連絡先／お客様ご感想／ホームページへ／自己紹介へ

<div style="border: 1px solid #EE82EE;padding: 10px;margin:10px;box-shadow:5px 5px 5px #FF99FF;"><a href="★" target="_blank" rel="noopener">提供サービスメニュー</a>／<a href="★" target="_blank" rel="noopener">住所・アクセスへ</a>／<a href="★" target="_blank" rel="noopener">お申込み・お問い合わせ先・連絡先</a>／<a href="★" target="_blank" rel="noopener">お客様感想</a>／<a href="★" target="_blank" rel="noopener">ホームページ</a>／<a href="★" target="_blank" rel="noopener">自己紹介</a></div>

ご自分の好きな色や線の種類を選んでメニューを作成して、モバイルのお客様に親切なブログ更新を行いましょう。

◇最後までお読み頂きありがとうございます。