読者です 読者をやめる 読者になる 読者になる

ミニマリストは世界を変える!

無駄をはぶいて合理的に生きる。時間もお金も好きなことに集中。好きなことで稼ぐ、自立した女性を応援するサイト。

はてなブログのスマホ表示にグローバルナビを設置。初心者でもわかるように解説。

ブログ運営
スポンサーリンク
スマートフォンから見ている方用に、グローバルナビゲーションメニューを設置しました。下の図にある横長のバーです。

f:id:megumakou2014:20150904213736p:plain

これを置いておくと、ワンクリックてそのカテゴリの記事が見られ、読者さんが記事を探しやすくなるものです。読者の利便性を上げために、メニューがあると使いやすいと思うのでご紹介します。
※PC版も、同じものをヘッダ―にコピペするだけです

友人がきっかけで、何とか導入するまでに至る

私は、半年くらい前から何度か導入しようとしてできず(HTMLが分からないので途中で失敗し、つまづいても対処できない)すっかり諦めていました。

そんな時、友人のkei(id:keianju)さんから

「グローバルナビの簡単なサイトを見つけたので使ってみては?わからなければ教えることもできますよ?」という優しい言葉を頂いたので、再度チャレンジすることにしました。keiさん優しい・・神!!

残念ながら、keiさんお勧めのサイトは私にはハードル高くて、しかも有料?だったので違うものを探すことに・・。そういえば、以前から青野すみれ(id:aonosmile)さんが使っているシンプルなグローバルナビが気になっていたので、思いきってすみれさんに聞いてみると・・快く教えてくれました!

それがこちらのサイト→はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2

これで、念願のグローバルナビが付けられました。本当はコピペだけでできるはずなのですが、私が初心者すぎて色々つまづいたので・・他の初心者さんのために解説します。

 

まずは、元ネタをコピーして貼り付け

上記のリンクのページはてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2に飛びます。その中に、形が3種類あり「タイル型」「ナビゲーション型」「横幅可変型」と選べますので、私は「ナビゲーション型」にしました。選んだコードをコピーします。貼り付け場所は

管理画面→デザイン→スマホの絵をクリック→ヘッダ

その際に「スマートフォン用のHTMLを設定する」をボタンで選択してください。

貼り付けたら、形と色を選び、自分のサイトのカテゴリ名&カテゴリのリンクをひとつづつ貼って行きます。

※ここから、初心者が混乱するところなので注意!

 

カテゴリ名を入れ、カテゴリのリンクをコピペする

元々のコードは、カテゴリを4つ表示させていますが、私はもう1個増やしました。

<span  class="category"><a href='カテゴリのリンク'>カテゴリ名3</a></span>
|

この部分をコピーして、コピーした部分の下に挿入すればOK。これでカテゴリが5つになりました。

その次に、自分の決めたカテゴリ名を「カテゴリ名1」「カテゴリ名2」・・に入力します。私の場合、「料理」「お金」「持ち物」「働き方」「人間関係」という5つに絞りました。PC版では10以上のカテゴリがありますが、人気のある5つに絞っています。カテゴリタイトルも短くしました。

次に、そのカテゴリのURLを、`カテゴリのリンク`と書かれた部分にコピペします。例えば、「料理」カテゴリのリンクの場合、自分のサイトを表示し「料理」カテゴリを選択し、その時のURLコピペしてを張るのです。

それを、5つのカテゴリごとにやります。挿入場所を間違えないように注意!細かいですから、よく見て集中してやりましょう。私は3~4回失敗しました^^;

ここまでで、白黒ですが一応メニューはできたはずです!お疲れ様です、あと一息!

 

バランス良く配置するのに、文字を大きく、色も好きな色に

文字が小さいので、(フォントサイズ)と書かれた部分を50%→100%に直します。これでバランス良く表示されるはず。
次に色を選びます。色はこちらのサイトを参考にしました→HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

このサイトから、自分が好きな色の番号をコピーします。例えば緑なら#008000です。これを

   background-color: #000000; (背景色)
このピンク色の文字の部分に入れます。これで、自分好みの色になりました。
 

最後に、黒字で書かれている(←カテゴリの間の縦棒の色)等の、説明部分を消します。

これでできあがりです!!お疲れ様でした。あとはスマホで確認して、色など見て調整してくださいね。

 

終わりに

HTMLの知識がないけど、カスタマイズをしたい!と思っている方に読んで頂ければ嬉しいです。

お世話になったkeiさん、すみれさん、ありがとうございました。ブログは孤独な作業ですが、こうやって交流させていただいて優しい人との出会いがあるとブログライフも楽しくなるものです^^