グローバルメニューの設置方法 【はてなブログ カスタマイズ】

記事を読み返そうとスマホで自分のブログを見ていて思ったんです。あれ?カテゴリが表示されてないなと。

ブログの設定やカスタマイズを見ても、カテゴリを表示するための項目が無ければメニューもない。PCサイトでははカテゴリの表示が出来ますが、やっぱりメニューは無い。

メニューが無ければせっかくアクセスしてくれても、1記事読めば帰ってしう人が多いはず。

だからPV数が少ないのか!

と、記事の質の悪さはそっちのけでPVの少なさをシステムのせいにして、せっかくだからメニューを設定することにしました。

グローバルメニューとカテゴリの設定

PCサイト用にソースを作る

「はてなブログ グローバルメニュー」で検索するとたくさんのサイトが出てきます。コピペするだけで設定出来る物もあり思った以上に簡単に出来ました。

でもなんか見た目が気に入らないし、ブログのテーマによってはきちんと表示されないこともあるみたいです。

どうせ設定するなら自分の気に入ったものにしたい! と思い立ちブックオフで本を買ってきました。

この本、中古で500円です。メニュー設定の方法も書いてあってありがたい。ただ内容が古いのか参考程度にしかなりません。2008年の出版だし仕方が無いのかな?

なにはともあれこの本を参考にメニューの作成開始。

特に苦労もせず出来あがったのが下のソース。最初は<ul id=”menu”>と書いていましたがきちんと動かず、色々調べてこのソースにたどり着きました。

<nav id=”menu”>
<ul>
<li><a href=”カテゴリのURL”>カテゴリ名</a></li>
</ul>
</nav>

カテゴリのURLとカテゴリ名を書き変えて、項目を増やしたければ「<li>~</li>」をコピーして増やします。

出来あがったソースをはてなブログカスタマイズの1.ヘッダ ⇒ 2.タイトル下に張り付けます。

次はCSSのソースを作成。最初に作ったのがこれです。

#menu ul {font-size: 0.75em;
margin-top: 0;
margin-bottom: 30px;
margin-left: 0;
padding-left: 0;
height: 30px;
background-color: #0000ff}

#menu ul li {list-style-type: none;

float: left}

#menu ul li a {display: block;
width: 120px; /*ボタンの幅*/
line-height: 30px;
text-decoration: none;
text-align: center;
color: #ffffff;
background-color: #0000ff;
border-right: 1px solid #ffffff}

#meny ul li a:last-child{border-right: 0}

#menu ul li a:hover {background-color: #017acd}

悪くは無いんだけど左側に全部寄っているのが好きじゃない。出来れば画面の幅いっぱいに広げてボタンは均等な大きさにしたいところ。

結局本じゃ分からず、「delaymania」さんのコードを使わせていただきました。ありがとうございます。
(掲載当時htpps対応されていなかったため、URLだけ掲載いたします。)

URL:http://delaymania.com/201410/web/css-table-cell-03/

コピペだけじゃ面白く無いので、カーソルが重なると色が変わるようにしています。このソースをCSSに貼ってあげれば完成。

#menu ul {
background-color: #0000ff;
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
#menu ul li {
border-right: 1px solid #fff;
display: table-cell;
vertical-align: middle;
}
#menu ul li:last-child {
border-right: 0;
}
#menu ul li a {
color: #fff;
display: block;
font-size: 12px;
text-decoration: none;
padding: 10px 0;
}
#menu ul li a:hover {
background-color: #00ffff}

#menu ul li a:hover {background-color: #017acd}

見た目はこんな感じです。

これでグローバルメニューは完成!

次はスマホにも反映させようとこのソースをそのまま使ったんですが、形が崩れてしまってどうにもなりませんでした。

スマホ画面の下にカテゴリを設定

記事を読み終わった後、画面を一番上まで戻す人は少ないだろうなと思い、画面の一番下にもカテゴリを設置することにしました。

こうすることでPVが増えるはず!

スマホの画面下に設置したカテゴリは「チップの日常」さんのソースをコピペしました。ありがとうございます。
(執筆当時https化されていなかったため、URLのみ掲載いたします。)

URL:http://chipspd.hatenadiary.jp/entry/blog-smart-categori

「チップの日常」さんのソースを使って設置したカテゴリ。

「カテゴリ選択」をタップすると。

カテゴリが開きます!これすごくいいです!

いままでは記事とお勧め記事しか紹介されていなかったブログに、グローバルメニューとカテゴリが追加されました。

でもこの機能、標準で付けてほしいなと思う。

グローバルメニューとカテゴリの設置はこれで終わり。

次にブログの見た目を変えるため、見出しを変更しました。

 見出しを変更

見出しははてなブログに引っ越してから1回も使っていませんが、せっかく機能としてあるし、きれいに使えば読みやすくなるかもしれないと思い、見た目を変えることにしました。

変更には次のサイトを参考にしています。

WEB色見本 原色大辞典

Webparkさん(URL:http://weboook.blog22.fc2.com/blog-entry-348.html)
※執筆当時hpps化されていなかったため、URLのみ掲載させていただきます。

好きなデザインを探して好きな色に変えるだけ。すごく簡単です。

ただ僕がやった時はコピペで貼っただけでは反映されません。やっぱりテーマによって違ってくるんでしょうか?

解決方法を色々調べ、h3・h4タグの前に「.entry-content」入れたら反映されるようになりました。

参考までにソースを貼っておきます。「Webpark」さんのソースを使い、色を変えて「.entry-content」を追記しています

.entry-content h3 {
position: relative;
font-size: 24px;
line-height: 1;
margin:30px -30px 10px -30px;
padding: 15px 5px 10px 20px;
border-left: 10px solid #0000cd;
}

.entry-content h3:after {
content: “”;
position: absolute;
bottom: 0px;
left: 0;
height: 0;
width: 100%;
border-bottom: 1px dashed #555;
}

カスタマイズの参考にしているサイト

カスタマイズの参考にしているサイトです。

「太陽がまぶしかったから」さんのブログパーツ、「あわせて読みたい」はすごく便利なので設定することをお勧めします。パン屑も設定しておくといいかも。

URL:http://www.du-soleil.com/entry/read-together-g-recovery
※執筆当時https化されていなかったため、URLのみ掲載させていただきます。

wepli.2」の「はてなブログでカスタマイズした8つのデザイン!すべてのブログ初心者に捧ぐCSSとHTMLの備忘録」は参考になります。

カスタマイズをしてみて思うこと

カスタマイズをしていると楽しくて時間を忘れちゃいますね。

あとトップページの記事の表示を変えたいと思っていますが、やり方が分からない。

また時間があるときにゆっくり取り組みます。

※ソースを貼っていますが、利用される時は自己責任でお願いします。

面倒な登録が不要の転職アプリ

※記事の中でも紹介しているかも。でも本当にお勧めできるアプリなんです。

次のような悩みを感じていませんか?

  • すぐ転職するわけじゃないが情報が欲しい
  • 転職を考えているが活動する時間がない
  • 仕事がつらくて、できれば辞めたいと思う
  • 転職エージェントに登録するのは抵抗がある

こういった悩みを抱えている方に紹介したいのが、ジョブクルの転職アプリ。
その理由は次の6つの特徴があるからです。

  • 面倒な登録が不要
  • 完全無料
  • チャットで転職コンシェルジュに相談できる
  • 電話や面談をする必要がない
  • 退職や転職に関する相談なら何でもOK
  • 転職エージェントと遜色のないサービスが受けられる

ぼくも転職エージェントを利用したことがありますが、電話で話したり面談で会うことが意外と億劫なんです。
「無理に勧められそう」とか「断られたらいやだな」と言う不安も感じます。
それにちょっと相談したいだけで、本当に登録していいのかどうかも悩みますよね。

そんな不安を全て取り除き、気軽に転職のプロに相談できるのがジョブクルの転職アプリです。

ぼくも実際に使ってみましたがかなり具合がいい。
なによりチャットで転職のプロに、気軽に相談できるところがすごく気に入っています。
しかもサービスの内容は転職エージェントと比べても大きな違いはありません。

気軽に相談できてしかも親切に対応してもらえる。
インターフェイスの使い勝手に少し不満はありますが、電話をする必要も、会いに行く必要もないのは大きなメリットです。
良かったら試してみてくださいね。

ジョブクル
ジョブクル
開発元:Smiloops
無料
posted withアプリーチ