【はてなブログ2日目】人気テーマ Innocent のカスタマイズに挑戦

【はてなブログ2日目】人気テーマ Innocent のカスタマイズに挑戦

はてなブログは今まで管理を行っていたWordpress程めちゃくちゃアクロバティックにデザインを変更できるっていう訳ではないんですが、それでもCSSで十分デザインを変更することが出来そうだったので、色々と修正をしてみました。

自分でもカスタマイズの達成感を得たかったのでビフォーアフターと、どこにどういう編集を加えたのかを書いておきます。

htmlとかcssにそこまで詳しくない私でもコピペ祭りでカスタマイズできたのでこのテーマは素晴らしいです。

カスタマイズ前

テンプレートは凄く人気だった「Innocent」というものをベースにしています。カスタマイズすることを前提に作られている様で凄くカスタマイズしやすかったです。

1-1

カスタマイズ後

2-1

結構変わりましたよね。コピペばっかりでここまで自分のブログの個性を出せるのでやっぱり優れたテーマをベースにカスタマイズするのは楽でいいです!愛着も湧きます。

いっぱい修正したい

3-1
このテンプレートの中から個性を少しずつ出していきたいのでベースは大事にしつつも細かい所を修正していきます。

  1. ヘッダーロゴの見た目を変えたい
  2. ヘッダーに背景を付けたい
  3. カテゴリトップページへリンクできるナビメニューを付けたい
  4. 記事内のカテゴリリンクがダサいので装飾したい
  5. 記事とサイドメニューの境界線が薄い線だけは寂しいので個性を持たせたい
  6. サイドメニューのProfileとかSearchとかLatestPostとかCategoryとか文字だけだと寂しいので装飾したい
  7. サイドメニューのそれぞれの要素が区切られていることが分かるようにしたい
  8. アイキャッチがアイキャッチであることを分かるようにしたい

細かく挙げるともっとありそうですが、まずはブログ自体の見た目をガラっと変えるためにわかりやすい所から変更します。

ヘッダーロゴの見た目を変えたい

ヘッダーロゴはテキストで構成されていて、なーんか味気ないので画像化してみることに。
ただ、残念なことにテーマのカスタマイズ機能でヘッダー画像をアップするとサイト説明文も消えてしまいます。
※ヘッダーの範囲を全てカバー出来るような大きなヘッダー画像を用意出来る方はカスタマイズ機能から画像追加した方がいいです。

私にはそこまでの画像を作成する能力が無かったので、少し強引な手段でサイトのテキストと画像イメージを入れ替えることに。

/* header-logoを画像化 */
#title > a {
background-image: url("http://cdn-ak.f.st-hatena.com/images/fotolife/s/sakanatech/20160318/20160318235458.png");
width: 250px;
height: 51px;
display: inline-block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

一番最初からとてつもなく強引な手ではありますが、aタグの背景に設定したい画像を背景として設定して既に埋め込まれているテキストをはるか遠くに弾き飛ばして非表示にしています。
SEO対策としてサイト名のテキストを完全に消し去ることだけはしたくなかったのでこういう対処にしました。

ヘッダーに背景を付けたい

ヘッダーの背景は当初はテクスチャ画像を探してきて、それを適用しようと思ってたんですがカスタマイズ機能の中でいい感じの画像を見つけてしまったのでそれを適用しました。

カテゴリトップページへリンクできるナビメニューを付けたい

こちらの記事を参考に作ってみました。めちゃくちゃ簡単にナビメニューを追加できたので驚き。

【参考リンク】

はてなブログのトップにナビゲーション(カテゴリ)メニューを作る!【カスタマイズ】

こちらのサイトからテンプレートとなるナビメニューのジェネレータサイト

【参考リンク】

Make Awesome Menus

なんとプレビューしながらナビメニューが作れるのでわざわざカスタマイズメニューから更新しなくてもいいです。凄く便利なWebサービスです。これが無料なんて感動的でした。

ナビメニューの実装

実装は2つの点に注意しました。

  1. タブレットまでは表示できる大きさにしたい
  2. スマホで見た時にはプルダウン式のナビメニューにしたい

1つ目については、liタグの中に入るテキスト長を工夫することとulタグのwidth調整で対処しました。

2つ目については、CSSだけでは実現が出来なかったので下記のサイトを参考にメニューを作ってみました。

【参考リンク】

レスポンシブWebデザインに対応したメニューの作り方【追記あり】

フッターエリアにこのスクリプトを追加します。

<script   src="https://code.jquery.com/jquery-2.2.2.min.js"   integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI="   crossorigin="anonymous"></script>
<script>
    $(function(){
  $("#toggle").click(function(){
    $("#nav-menu").slideToggle();
    return false;
  });
  $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#nav-menu").show();
    } else {
      $("#nav-menu").hide();
    }
  });
});
</script>

 

ジェネレータで作ったHTMLをヘッダーエリアに追加します。

<div id='cssmenu'>
    <div id="toggle"><a href="#">Menu</a></div>
    <ul id="nav-menu" class="">
   <li><a href='http://sakanatech.hatenablog.com/'><span>Top</span></a></li>
   <li><a href='#'><span>Web</span></a></li>
   <li><a href='#'><span>OtherTech</span></a></li>
   <li><a href='#'><span>Photo</span></a></li>
   <li><a href='#'><span>News</span></a></li>
   <li><a href='#'><span>Sakana</span></a></li>
   <li class='last'><a href='#'><span>SakanaTechとは</span></a></li>
</ul>
</div>

 カスタマイズしたCSSをデザインCSSエリアに追加します

/* MainNavMenu用のCSS */
 #top-editarea{
 width:100%;
 background-color:#5bc1f9;
 }
 #cssmenu{
 width:95%;
 margin:0px auto;
 }
 #cssmenu ul {
 list-style: none;
 margin: 0;
 padding: 0;
 line-height: 1;
 display: block;
 zoom: 1;
 font-size: 0;
 }
 #cssmenu ul li {
 display: inline-block;
 padding: 0;
 margin: 0;
 }
 #cssmenu ul li:nth-child(4){
 color:red;
 }
 #cssmenu ul li a {
 color: #ffffff;
 text-decoration: none;
 display: block;
 padding: 15px 25px;
 font-weight: 700;
 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;
 border-bottom:solid 2px #333333;
 }
 #cssmenu ul li a:before {
 content: "";
 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 a:after {
 content: "";
 display: block;
 position: absolute;
 right: -3px;
 top: 19px;
 height: 6px;
 width: 6px;
 background: #ffffff;
 opacity: .5;
 }
 #cssmenu ul:after {
 content: " ";
 display: block;
 font-size: 0;
 height: 0;
 clear: both;
 visibility: hidden;
 }
 #toggle {
 display: none;
 }

@media only screen and (max-width: 767px) {
 #nav-menu {
 display: none;
 }
 #nav-menu li {
 width: 100%;
 }
 #toggle {
 display: block;
 position: relative;
 width: 100%;
 background: #5bc1f9;
 }
 #toggle a {
 display: block;
 position: relative;
 padding: 12px 0 10px;
 border-bottom: 1px solid #ccc;
 color: #fff;
 text-align: center;
 text-decoration: none;
 }
 #toggle:before {
 display: block;
 content: "";
 position: absolute;
 top: 50%;
 left: 10px;
 width: 20px;
 height: 20px;
 margin-top: -10px;
 background: #fff;
 }
 #toggle a:before,
 #toggle a:after {
 display: block;
 content: "";
 position: absolute;
 top: 50%;
 left: 10px;
 width: 20px;
 height: 4px;
 background: #5bc1f9;
 }
 #toggle a:before {
 margin-top: -6px;
 }
 #toggle a:after {
 margin-top: 2px;
 }
 }

これで夢のナビメニューの完成ですね!良かった!

 

記事内のカテゴリリンクがダサいので装飾したい

これは本当にダサかったので、このサイトを見ながら色々コピペで作ってみました。

【参考リンク】

少しの労力でサイトをかっこよく!見出しのCSSデザインに役立つジェネレーター&サンプル集30個まとめ

 

記事とサイドメニューの境界線が薄い線だけは寂しいので個性を持たせたい

なんだか急に可愛くなってしまった気もしないでもないですが・・・・

/* 記事の境界線を変更 */
#main-inner {
padding-right: 54px;
border-right:none;
background-image: url("http://f.st-hatena.com/images/fotolife/s/sakanatech/20160319/20160319134930.png?1458362984");
background-repeat: no-repeat;
background-position: right top;
}
#box2-inner{
border-left:none;
}

background-repeat:repeat-yをしなかったのは、一度してみたんですがかなりくどく感じてしまったのでやめました。あんまりこういうラインが続くのって逆にコンテンツの読みやすさが失われてしまいますよね。
もちろん、スマホでは非表示ですがタブレットでは残しておきました。(なんか可愛かったので)

サイドメニューが寂しい

アイコンフォントってご存知ですか?
アイコンですがフォントなんです。コレを使って装飾していきます。
このサイトで使い方がまとめられていたので参考にさせてもらいました。

【参考リンク】

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ

/* モジュールのタイトルを装飾 */
 .hatena-module-title {
 font-family: 'Patrick Hand', cursive;
 font-size: 21px;
 letter-spacing: 0.1em;
 }
 .hatena-module-profile &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; .hatena-module-title:before{
 font-family:"blogicon";
 content:"\f016";
 font-size:2em;
 color:#333;
 }
 .hatena-module-search-box &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; .hatena-module-title:before{
 font-family:"blogicon";
 content:"\f01a";
 font-size:2em;
 color:#333;
 }
 .hatena-module-recent-entries &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; .hatena-module-title:before{
 font-family:"blogicon";
 content:"\f04d";
 font-size:2em;
 color:#333;
 }
 .hatena-module-category &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; .hatena-module-title:before{
 font-family:"blogicon";
 content:"\f022";
 font-size:2em;
 color:#333;
 }

 

 

サイドメニューのそれぞれの要素が区切られていることが分かるようにしたい

周りをぐるっとborderで囲ってしまっても良かったのですが
少し柔らかさを出すために上下だけにしました。

.hatena-module {
 font-size: 0.9375em;
 line-height: 1.5;
 border-top: solid 2px #333;
 border-bottom: solid 2px #333;
 border-radius: 12px;
 padding: 10px 10px 25px 10px;
 }
 .hatena-module {
 margin-bottom: 24px;
 }

可愛さが高まりました。いい感じです。

 

アイキャッチがアイキャッチであることを分かるようにしたい

アイキャッチには薄いグレーのborderを付けてオンマウス時に影が出るようにしました。

/* アイキャッチの装飾 */
 .recent-entries-item-inner a:hover img{
 box-shadow:3px 3px;
 filter:alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
 transition: all .6s ease;
 }
 .recent-entries-item-inner a img{
 border:1px solid #DCDCDC;
 border-radius: 5px;
 }

本当はアイキャッチ画像の上にテキストを載せてオンマウス時にテキストを非表示にして画像のみを表示させようかなと思ったんですが、冷静に考えるとスマホだとタイトルテキストが見えないので問題ありますよね。ということで諦めました。

とてつもなく長い記事になってしまった気がしますが、こんな感じでInnocentカスタマイズ出来ました。
カスタマイズ前提のテーマというのは扱いやすくて凄く良いです。はてなブログはじめたばかりでもコピペがあればなんとでもなりました。何かの参考になれば幸いです。

 

さいごに

色々調べるのに時間がかかってしまって、合計作業時間は4~5時間です。疲れました・・・。

 

らいか
今までCSSをあまり使ってこなかったツケがこんな所で来たよね
【はてなブログ2日目】人気テーマ Innocent のカスタマイズに挑戦

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて"Webのものづくりの楽しさ"に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。