PCインストラクターの川上です。
ヘッダー（ブログの上にある頭も部分）にメニューバーを張り切って表示したとしても、スマホやガラケーでは見れません。
（スマホでもパソコン版にすると見れますが･･･）
そこで、記事の中にメニューリンクをすると、スマホやガラケーからもバッチリなのだと。
しかし、せっかくであれば、囲み枠で目立つようにするとどうでしょうか。
例えば、先日ウルトラ交流会でお会いしたこの方のように↓↓↓
この方と同じ囲みであれば、
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:**********"><strong>電話をかける</strong></a></div><br>ここで↑、色の指定に rbg( 0～255 , 0～255 , 0～255 ） を使っていますが、カラーコード（※1）でもOKです。
ここで使っている青色は
rgb(238, 238, 255) = #eeeeff ･･･ 背景の青色
rgb(0, 0, 255)= #0000ff ･･･ 線の青色
となりますので、（背景色：#eeeeff）
<div align="center" style="background: #eeeeff; padding: 10px; border: 1px solid #0000ff;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>と指定してもOKです。
（ただし、solidと#0000ffの間は半角スペースをお忘れなく）
また、外枠と中も文字の間隔は
padding: 10px;
としています。
もう少し間隔を詰めたい方は、数値を小さくするとよいですね。
例えば、
padding: 5px;
とか↓↓↓
<div align="center" style="background: #eeeeff; padding: 5px; border: 1px solid #0000ff;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>囲みの中の文字を中央にしないで、左に寄せた状態にするには、
align="center"
がいらないです↓↓↓
<div style="background: #eeeeff; padding: 10px; border: 1px solid #0000ff;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>また、青色だけでなく、赤系統も使いたい方がいらっしゃるかもしれませんので･･･
赤系統はこちら↓↓↓（背景色：#ffada9）
<div align="center" style="background: #ffada9; padding: 10px; border: 1px solid #ff0000;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>さらにもういっちょ！
ピンク系も↓↓↓（背景色：#ffc2d9）
<div align="center" style="background: #ffc2d9; padding: 10px; border: 1px solid #ff1493;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>おまけに緑系も↓↓↓（背景色：#CCFF99）
<div align="center" style="background: #CCFF99; padding: 10px; border: 1px solid #008000;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>もういっちょ、オレンジ系も↓↓↓（背景色：#ffffcc）
<div align="center" style="background: #ffffcc; padding: 5px; border: 1px solid #ff9933;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>また、さらに･･･
枠に影をつけたいのであれば、「width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓（ただし、IE8以前だと影は見えませんのでご注意を）
<div align="center" style="background: #ffc2d9; padding: 10px; border: 1px solid #ff1493;width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;"><a href="リンク先URL1" target=""><strong>メニュー</strong></a> / <a href="リンク先URL2" target=""><strong>アクセス</strong></a> / <a href="リンク先URL3" target=""><strong>お問い合わせ</strong></a> / <a href="tel:**********"><strong>電話をかける</strong></a></div><br>･･･で、
この方、名刺交換するなり、
「あ～、川上さんではないですか～！実は、枠囲いを検索していたら川上さんの記事（『アメブロ 記事内に枠で囲む方法』を見つけまして～^^! 参考にさせていただきました！！」
と嬉しい第一声をいただきました^^
初めて出会ったときに、こういった相手を立てる、そして思いやる行動・言動が備わっている方は、これからもどんどん伸びていくでしょうね！
期待しています、よ↓↓↓
名古屋今池の3ヶ月で脚痩せダイエット専門トレーナー 田中俊介さん！
ブログで集客したい方は、この方の読者になってブログを参考にすると、いいと思いますよ～！！
＜追記＞
リンクの文字を青色にしたい方や文字を大きくしたり小さくしたりした方はこちら（↓）の記事もご覧ください↓↓↓
リンクの文字を青色にしたい【記事のメニューバー編】
＜補足＞
クリックしたら電話がかかるようにするには、次のようなHTMLタグを書きます。
<a href="tel:09055558888">090-5555-8888</a>
＜追加パターン＞
他にもこのようなパターンもあります。
実際の感じ↓
画像で表示↓
<div align="center" style="background: #fafad2; padding: 4px; border: 1px solid #d2b48c;"><a href="リンク先URL" target=""><strong>プロフィール</strong></a> / <a href="リンク先URL" target=""><strong>ホームページ</strong></a> / <a href="リンク先URL" target=""><strong>お問い合わせ</strong></a> / <a href="リンク先URL" target=""><strong>読者登録</strong></a></div><br>影のパターンは↓↓↓
実際の感じ↓
画像で表示↓
<div align="center" style="background: #fafad2; padding: 4px; border: 1px solid #d2b48c; width: auto; margin-right: 7px; box-shadow: 5px 5px 5px #AAA;"><a href="リンク先URL" target=""><strong>プロフィール</strong></a> / <a href="リンク先URL" target=""><strong>ホームページ</strong></a> / <a href="リンク先URL" target=""><strong>お問い合わせ</strong></a> / <a href="リンク先URL" target=""><strong>読者登録</strong></a></div><br>さらにご自分のお好きな色を
さらに、ご自分専用の色で作成したい方は、色見本サイトで探してみてくださいませ^^
色見本と配色サイト
WEB色見本 原色大辞典
＜追記1＞
わたくしのようにしたい方は（笑）こちら↓
『記事の下にあるシンプルなメニューバーはどのように･･･』
＜追記2＞
こういうボタン形式にしたい方はこちら↓
『記事内のメニューバーその２』
『おお！さっそく使ってくださっている～～！』
以上、メニューリンクを囲む、でした。
LIDS澄川・ライフデザインスクール
川上 雄大
