やぎろぐ風はてなブログメニューバーのカスタマイズ方法

広告

最近、すでに稼いでいるブロガーの方のブログデザインなどを研究しているんですが、メディアクリエイターでおなじみの八木さんの「やぎろぐ」のヘッダーとメニューバーが味があっていいな〜と感じています。

ということで「やぎろぐ風はてなブログメニューバーのカスタマイズ方法」をゆるくご紹介。

www.jimpei.net

 

スポンサーリンク

テーマ選択

テーマはテーマストアのWrittenというものがつかわれているようですね。
テーマ ストア – はてなブログ

ヘッダー画像

これは完全に自分で用意してください。
今回の記事用にこちらを用意しました。

f:id:dagasoregae:20160302100459j:plain

表示サイズは幅940px 高さ200pxだそうです。
やぎろぐさんの元画像は1000px × 213pxでしたね。

ちなみにやぎろぐさんはレスポンシブデザインを選択していないようなので、スマホではスマホ表示に合わせた画像を使用しているようです。

「ダッシュボード」の「デザイン」→「カスタマイズ」タブ→「ヘッダ」を選択し、「タイトル画像」に画像ファイルをアップロードしたら、ラジオボタンの「画像だけを表示」を選択して変更を保存します。

f:id:dagasoregae:20160302103641j:plain
こんな感じ。

つぎはいよいよメニューバーをつけていきます。

メニューバーの設置

メニューバーの設置については、たぶんですがこちらのベーコンさんのブログを参考にしたんだと思います。
bacon.hatenablog.com

HTMLの追加

「ダッシュボード」の「デザイン」→「カスタマイズ」タブ→「ヘッダ」の「タイトル下」にHTMLを記述します。

<div id="cssmenu">
<ul>
<li class="active"><a href="http://blog.hatena.ne.jp/"><span>ホーム</span></a></li>
<li class="active"><a href="http://blog.hatena.ne.jp/"><span>ホーム</span></a></li>
<li class="last"><a href="https://docs.google.com/forms/d/1WXhTrDTDRzqH0arC_KC1BGWSOyQfeFx5Ha1gmG98tC0/viewform?usp=send_form"><span>お問い合わせ</span></a></li>
</ul>
</div>

引用元:はてな(無料版でもできる)ブログにヘッダーメニューをつける解説 – ベーコンさんの世界ブログ

 <li class="active"><a href="http://blog.hatena.ne.jp/"><span>ホーム</span></a></li>

こちらの「a href=”〜〜〜〜”」の部分をご自分の環境に合わせたカテゴリや記事のリンクに、「<span>〜〜〜</span>」の部分を表示させたい文字に変更してください。

あとやぎろぐさんのメニューで特徴的なのが文字の前についているアイコンですが、こちらに載っています。
shirokai.hatenablog.com

<span>の前に

<i class="blogicon-user lg"></i>

のようにかけば、「」が表示されます。

CSSの追加

ベーコンさんのブログを参考に今度はCSSを追加します。
「ダッシュボード」の「デザイン」→「カスタマイズ」タブ→「{}デザインCSS」を選択し、エディタにコードをコピペします。

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
background: #aaa;
width: auto;
margin-bottom: 0px ;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: \\&quot; \\&quot;;
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: \\\'Open Sans\\\', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: \\&quot;\\&quot;;
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: \\&quot;\\&quot;;
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last &gt; a:after,
#cssmenu ul li:last-child &gt; a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last &gt; a:after,
#cssmenu.align-right li:last-child &gt; a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #999;
}
#cssmenu ul li.last &gt; a,
#cssmenu ul li:last-child &gt; a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}

引用元:はてな(無料版でもできる)ブログにヘッダーメニューをつける解説 – ベーコンさんの世界ブログ

 

f:id:dagasoregae:20160302120301j:plain

これを入力するとこんな感じのグレーのメニューが表示されると思います。

色を変えるには

#cssmenu {
background: #aaa;
width: auto;
margin-bottom: 0px ;
}

ここのbackground:”#aaa;の「aaa」の部分をお好きなカラーコードに変更してください。

カラーコードがよくわからない方はこちらから
html-color-codes.info

はい、かわりました。
f:id:dagasoregae:20160302120738j:plain

調整

ヘッダー画像とメニューが離れていて気持ちがわるいという方は間隔を調整しましょう。
先ほど追加したCSSを編集します。
くっつける方法は何個かあります。

>|css|#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;

}|

のzoom:1;のつぎの行に

  margin-top:-33px;
margin-bottom:40px;

を追加

 

やぎろぐさんでは

CSSに

#blog-title{
height:166px;
}

を追加し、HTMLのメニューした<div id=”cssmenu”></div>の後に<br /><br />と改行を2個入れて調整しているようです。

f:id:dagasoregae:20160302123254j:plain

こんな感じになりました。

おわりに

というわけで今回はやぎろぐ風メニューバーのカスタマイズ方法をご紹介させていただきました。

はてなブログのデザイン的なところでカスタマイズできる箇所は限られているので、ページのソースを表示させれば大体わかるんですよね。

くれぐれも丸パクリはしないようにしましょう!

 

webデザイン知識を身につけておけば、ブログだけではなくwebデザイナーとして稼げるようになるので、HTMLやCSS、PHP、javascriptの知識は身につけておいて損はありません。

短期間でwebデザイナーに必要なスキルを身につけられるTechAcademyはおすすめです。

スポンサーリンク