f:id:sukecom:20160409104918j:plain

はてなブログのデザインをリニューアルしました。3年前から同じデザインテーマを使っていたのですが気になるところがチラホラありまして。テーマを変更するとCSSの設定が面倒だなぁ……と今まで目をそむけていたのですが、いい加減手を付けようと重い腰を上げてみました。

カスタマイズしながら3年使ってきたかつての人気テーマ

f:id:sukecom:20160409090723j:plain

今まで使用していたのはNishikinoというテーマ。私がはてなブログを始めた3年前は人気No.1のテーマだったように思います。シンプルなデザインでカスタマイズもしやすい構造だったため長く使っていました。

このテーマを使っていて嫌だった点が1つあって。構造上、ヘッダーとフッターを横幅いっぱいに表示できないのです。やり方はあったのかもしれないけど、私のしょぼい知識では実現できなくて。今のデザインにちょっぴり飽きてきたこともあって、思い切って新しいテーマをインストールしてみることに決めました。

人気No.1らしいInnocentというテーマをインストール

f:id:sukecom:20160409090854j:plain

インストールしたのはInnocentというテーマ。今現在、はてなブログのテーマストアで人気No.1らしい。Nishikinoばりにシンプルなデザインだけど、カスタマイズしやすい構造で作られているのが素敵。随所にボーダーが設定されていたり、あまり好みではない箇所もあったのでCSSをいじって自分好みのデザインに調整です。

グローバルメニューを横幅いっぱいに表示させることもInnocentならちょちょいのちょい。ついでにグローバルメニューに表示させる内容を整理しました。たくさん表示させたところで誰もクリックしてないだろうなと思いまして。HTMLは以下のような感じです。

<ul id="dropmenu">
<li><a href="http://blog.sukecom.net/">ホーム</a></li>
<li><a href="http://blog.sukecom.net/archive/category/Nikon D600 D610">Nikon D610</a>
<ul>
<li><a href="http://blog.sukecom.net/archive/category/AF-S%20NIKKOR%2058mm%20f%2F1.4G">AF-S NIKKOR 58mm f/1.4G</a></li>
<li><a href="http://blog.sukecom.net/archive/category/AF-S%20NIKKOR%2014-24mm%20f%2F2.8G%20ED">AF-S NIKKOR 14-24mm f/2.8G ED</a></li>
<li><a href="http://blog.sukecom.net/archive/category/AF-S NIKKOR 85mm f/1.8G">AF-S NIKKOR 85mm f/1.8G</a></li>
<li><a href="http://blog.sukecom.net/archive/category/AF-S Micro NIKKOR 60mm f/2.8G ED">AF-S Micro NIKKOR 60mm f/2.8G ED</a></li>
<li><a href="http://blog.sukecom.net/archive/category/AF-S NIKKOR 35mm f/1.8G ED">AF-S NIKKOR 35mm f/1.8G ED</a></li>
<li><a href="http://blog.sukecom.net/archive/category/TAMRON SP AF 28-75mm f/2.8 A09">TAMRON SP AF 28-75mm f/2.8 A09</a></li>
</ul>
</li>
<li><a href="http://blog.sukecom.net/archive/category/CANON PowerShot G7X">PowerShot G7X</a></li>
<li><a href="http://blog.sukecom.net/archive/category/ポートレート">ポートレート</a></li>
<li><a href="http://blog.sukecom.net/archive/category/ライフログ">ライフログ</a>
<ul>
<li><a href="http://blog.sukecom.net/archive/category/子育て">子育て</a></li>
<li><a href="http://blog.sukecom.net/archive/category/レビュー">レビュー</a></li>
<li><a href="http://blog.sukecom.net/archive/category/グルメ">グルメ</a></li>
<li><a href="http://blog.sukecom.net/archive/category/旅行">旅行</a></li>
<li><a href="http://blog.sukecom.net/archive/category/ブログカスタマイズ">ブログカスタマイズ</a></li>
</ul>
</li>
</ul>

CSSは下記のように設定しています。

/* グローバルメニュー */
#top-editarea {
background: #999999;
height: 45px;
margin: 0;
padding: 0;
}
#dropmenu {
list-style-type: none;
width: 1120px;
height: 45px;
margin: 0 auto 0 auto;
padding: 0;
}
#dropmenu li {
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#dropmenu li a {
display: block;
margin: 0;
padding: 14px 0;
background: #999999;
color: #fff;
font-size: 95%;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
#dropmenu li ul {
list-style: none;
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
#dropmenu li ul li {
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
transition: .5s;
}
#dropmenu li ul li a {
padding: 15px 10px;
background: #909090;
text-align: left;
font-size: 80%;
font-weight: normal;
}
#dropmenu > li:hover > a {
background: #ff3399
}
#dropmenu > li:hover li:hover > a {
background: #ff3399
}
#dropmenu li:hover > ul > li {
overflow: visible;
height: 40px;
}
#dropmenu li ul li ul {
top: 0;
left: 100%;
}
#dropmenu li:last-child ul li ul {
left: -100%;
width: 100%;
}
#dropmenu li ul li ul li a {
font-size: 70%;
background: #818181
}
#dropmenu li:hover ul li ul li:hover > a {
background: #ff3399
}
#dropmenu li ul li ul:before {
position: absolute;
content: "";
top: 13px;
left: -20px;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #454e08;
}
#dropmenu li:last-child ul li ul:before {
position: absolute;
content: "";
top: 13px;
left: 200%;
margin-left: -20px;
border: 5px solid transparent;
border-right-color: #454e08;
}
.ssArticlesContainer.limited {
max-height: 380px !important;
}

スマホの表示については、はてなブログのデフォルト設定をほぼそのまま使用しているのでデザインに変化はありません。グローバルナビの設定方法については以下の記事を昔書いていました。

blog.sukecom.net

フッターもシンプルにすっきりと

f:id:sukecom:20160409090728j:plain

フッターも横幅いっぱいに表示させたかったのですが、ずっと中途半端な状態で使用していました。サイドバーにカテゴリ一覧を載せると見栄えが悪いと思って、フッターに主なカテゴリー一覧を載せていたのですが、ほとんどクリックされてなかったんじゃないかしら。

f:id:sukecom:20160409090730j:plain

Innocentをインストールしたことでフッターの横幅いっぱい表示ができるようになったので、デザインをすっきりさせました。記事下に表示させていた読者登録ボタンやTwitterのフォローボタン、サイドバーに表示させていたプロフィールもフッターに集約。

HTMLは以下のように設定してみました。

<div id="footer_ed">
<div class="footer_box01">
<h3>プロフィール</h3>
<p><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/sukecom/20140901/20140901224822.jpg" alt="すけこむブログ"></p>
<p>都内在住の30歳。趣味で写真を撮ってる人。ニコンD610とキヤノンのG7Xを愛用中。家事全般が苦手な奥さんと仲良く生活。1歳の娘が可愛くて仕方ないこの頃。</p>
</div>
<div class="footer_box02">
<h3>フォローする</h3>
<ul>
<li><a href="http://blog.hatena.ne.jp/sukecom/blog.sukecom.net/subscribe" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/sukecom/20160408/20160408220328.gif" alt="はてなブログ読者登録"></a></li>
<li><a href="https://twitter.com/intent/follow?screen_name=su_bg" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/sukecom/20160408/20160408220330.gif" alt="Twitterでフォローする"></a></li>
<li><a href="http://feedly.com/i/subscription/feed/http://blog.sukecom.net/rss" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/sukecom/20160408/20160408220334.gif" alt="feedlyで購読する"></a></li>
</ul>
</div>
<div class="footer_box02">
<h3>そのほか</h3>
<ul>
<li><a href="http://sukecom.tokyo/" target="_blank"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/s/sukecom/20160408/20160408222632.gif" alt="ポートフォリオサイト"></a></li>
<li><a href="http://blog.sukecom.net/entry/2013/09/20/222601">プロフィール</a></li>
<li><a href="http://blog.sukecom.net/entry/2013/11/10/100237">運営ポリシー</a></li>
<li><a href="http://blog.sukecom.net/entry/2013/10/10/223236">モデル募集</a></li>
<li><a href="http://blog.sukecom.net/entry/2013/10/17/204256">お問い合わせ</a></li>
</ul>
</div>
<div class="footer_clear">
<address>
© 2013 すけこむブログ
</address>
</div>
</div>

CSSは下記のように設定してみましたが、この設定がベストなのか自分でもよくわかってません。ブラウザもクロームでしかチェックしてないので他のブラウザだと表示がずれてるとかあるのかも。IEとかいう旧世代の遺物は存じ上げません。

/* フッター */
#bottom-editarea {
background-color: #999999;
margin: 0;
padding: 0;
}
#footer_ed {
width: 1120px;
margin: 0 auto;
padding: 60px 0 0 0;
font-size: 90%;
}
#footer_ed h3 {
color: #fff;
font-size: 1.1em;
margin: 0 0 20px 0;
}
#footer_ed p {
color: #fff;
margin: 0;
}
#footer_ed ul {
text-align: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#footer_ed ul li {
line-height: 1.1em;
color: #fff;
margin: 0 0 25px 0;
padding: 0;
}
#footer_ed ul li a {
color: #fff;
}
#footer_ed .footer_box01 {
width: 336px;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
}
#footer_ed .footer_box01 p img {
max-width: 336px;
margin: 0 0 20px 0;
padding: 0;
}
#footer_ed .footer_box02 {
width: 300px;
float: left;
margin: 0 0 0 70px;
padding: 0;
overflow: hidden;
}
#footer_ed .footer_clear {
clear: both;
}
address {
text-align: center;
font-style: normal;
color: #fff;
margin: 0;
padding: 40px 0 40px 0;
}

まだしっくりきていない感じがするので、もう少しデザインをいじくることになりそうです。プロフィール写真もそろそろまともなものに変えようかしら。カテゴリ一覧はサイドバー表示に戻しました。

写真の表示形式も少し変更

f:id:sukecom:20160409090739j:plain

ブログを始めたばかりの頃、あまり深く考えずにメインカラムの横幅を640pxに設定しまして。写真も640pxに合わせて載せ続けていたので、今更メインカラムの横幅を広げようものなら、これまで載せた写真のサイズ全部手作業で更新しないといけないんじゃ……と少しビビッてました。

だけどCSSをいじれば写真サイズは640pxのまま、メインカラムの横幅を広げられることに気づきまして。

f:id:sukecom:20160409090740j:plain

フチあり印刷をしたかのようなデザインになるようCSSをいじってみました。imgにpaddingを設定してボーダーを表示させているだけなのですが、そんなに悪くないかも。メインカラムは640pxから710pxに広げて写真の横幅は640pxのまま。しばらくこの設定で使い続けてみようと思います。

CSSは以下を設定するだけ。お手軽です。ただメインカラムの大きさに合わせてmax-widthなどの数値は変更しないといけません。

.entry-content p img {
max-width: 640px;
max-height: 640px;
border: solid 1px #e6e6e6;
padding: 30px;
}

スマホから見たときの表示は今までと変わらずです。

はてなブログのカスタマイズ楽しい

面倒くさがって先延ばしにしていたブログデザインのリニューアル、ようやく前に進めることができました。細かいところの調整がまだ残っていたり、クリックすると一番上まで戻るやつを画面右下に表示させたいなぁと思っていますが、追々手を付けていきます。(きっとやらないパターン)

人気No.1だからという理由で使ってみたInnocentというデザインテーマ、かなり使い勝手がいいですね。人気の理由も納得。はてなブログはデザインをカスタマイズできる自由度が高くて好きです。今後もチマチマといじっていこうと思います。