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

bunoshi

働き方を考えるブログ

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

ブログ運営-はてなブログカスタマイズ ブログ運営

f:id:ranmaru-24mensou:20150823213154p:plain

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

ブログの設定やカスタマイズを見ても、カテゴリを表示するための項目が無ければメニューもない。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}

 

 出来上がりが下の画像。

 

f:id:ranmaru-24mensou:20150823191954p:plain

 

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

結局本じゃ分からず、「delaymania」さんのコードを使わせていただきました。ありがとうございます。

 

delaymania.com

 

コピペだけじゃ面白く無いので、カーソルが重なると色が変わるようにしています。このソースを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}

 

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

 

f:id:ranmaru-24mensou:20150823193035p:plain

 

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

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

 

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

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

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

スマホの画面下に設置したカテゴリは「チップの日常」さんのソースをコピペしました。ありがとうございます。

 

chipspd.hatenadiary.jp

 

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

 

f:id:ranmaru-24mensou:20150823195436p:plain

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

 

f:id:ranmaru-24mensou:20150823195505p:plain

 

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

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

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

 

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

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

 

 見出しを変更

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

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

 

CSSの擬似要素を使った見出しデザイン|Webpark

 

www.colordic.org

 

www.yukihy.com

 

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

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

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

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

 

f:id:ranmaru-24mensou:20150823200724p:plain

.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;
}

 

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

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

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

 

bulldra.hatenablog.com

 

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

 

wepli-dot2.hatenablog.com

 

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

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

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

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

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


転職30代の転職派遣から正社員ニート・フリーターから正社員働き方コラム転職サイト転職エージェント雑記ブログ運営
免責事項

Presented by bunoshi