wepli.2

うぇぷり どっと に

はてなブログでカスタマイズした8つのデザイン!全てのブログ初心者に捧ぐCSSとHTMLの備忘録

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

この度、WordPressから「はてなブログ」に引っ越したわけですが、やはり見た目を少し変えたくなり、ちょっとだけカスタマイズしてみました。カスタマイズした箇所を備忘録として残しておきたくなったので記事にします。

ちなみに、私はそれほどCSSやHTMLに詳しいわけではありませんので、その都度、ググって色々な方の記事を参考にして解決しました。ただ、どのカスタマイズがどの記事に書かれていたのか覚えおらず、参考記事として貼れないものもありますので、分からないものは省略してあります。今回の記事は、ブログの初心者の方に参考になればなぁと思います。

このブログの基本的なこと

まずは、このブログの基本的なことについてお話します。

はてなブログおすすめのテーマ

テーマは現時点で人気No1のWrittenにしました。シンプルでカスタマイズしやすいと感じましたし、とても自分好みのデザインだったので、ビビっときました。テーマ作者の「Joe (id:jclv)」さんには、この場を借りて感謝の意を述べさせていただきます。

はてなブログおすすめのテーマ

Written - テーマ ストア

ブログのテーマカラー

私は単なるサラリーマンなので、色の知識なんてないですが、自分で勝手にブログのテーマカラーを決めています。それは「#FF8A00」です。↓

サイトの色

この色を選んだ理由は、「どこかで見たオシャレなサイトがこの色を使っていたから」という単純なものです。メインの色以外は、下のサイトで色を選びました。メインカラー以外は適当に選びました。

配色の見本帳 | キーカラーで選ぶ配色パターン - 色見本とHTMLカラーコード

はてなブログでカスタマイズした8つのデザイン

それでは、はてなブログでカスタマイズしたところについて、細かく書いていきたいと思います。

ブログ全体の幅を広げた

まずはブログ全体に余裕を持たせたかったので、ブログ全体の幅を広げました。ディスプレイが1200px以上の時に、メインカラムとサイドバーを以下のようにしました。

  • メインカラムが773px
  • サイドバーが300px

これにより画像も大きなものを貼れるようになったので、記事のインパクトが上がったように思います。

@media screen and (min-width:1200px) {
    #container{
       width: 1137px
    }
    #container-inner{
       width: 1137px;
    }
    #content{
       width: 1137px;
    }
/* メインカラム */
    #main-inner{
       width: 773px;
    }
/* サイドバー */
    #box2{
       width: 300px;
    }
    #box2-inner{
       width: 300px;
    }

ヘッダとフッタを非表示にした

はてなブログProに申し込んでいるので、ダッシュボードの設定から「ブログにヘッダとフッタを表示しない(PC版のみ)」にチェックを入れて非表示にしました。このカスタマイズはProでないとできないようです。

ヘッダのタイトルをカスタマイズ

ヘッダのロゴをフリーフォントにした

ブログの左上のロゴを見てください。ちょっと変わったフォントだとおもいませんか?ヘッダのブログタイトルは、「Google web fonts」を使って少しだけ、カスタマイズしました。ちなみに使い方は、かの有名なOZPAさんのサイトを見て参考にさせてもらいました。

Webフォント「Google web fonts」の使い方・実装手順メモ

はてなブログでの「Google web fonts」の記述場所

はてなブログでは以下の手順で進んでコードは貼り付ければ「Google web fonts」が使えます。

  1. ダッシュボード
  2. デザイン
  3. ヘッダ
  4. タイトル下にコードを書きます。
<head>
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
</head>

ちなみに、このブログでは「Kaushan Script」というフォントにしました。CSSは以下の通りです。

    #blog-title h1{
        font-family: 'Kaushan Script', cursive;
    }

自動で目次を表示するようにした

はてなブログに自動で目次を表示

「大見出し=h3」を入れると上の画像のように、自動でブログ記事の一番上に「目次」を入れるようにカスタマイズしました。カスタマイズしたとは言え、「はてなブログ脱獄ブログ」さんのコードを貼り付けただけです(笑)
とっても簡単でした。ありがとうございました。

※ 『脱獄ブログ』さんのブログは、残念ながら閉鎖されてしまったようです。

目次の記述場所

コピペして、以下の手順でコードを貼り付ける場所へ進んで、貼り付けるだけです。

  1. ダッシュボード
  2. デザイン
  3. 記事
  4. 記事上下のカスタマイズ
  5. 記事上

贅沢を言えば、「中見出し=h4」まで表示させたいのですが、ググっても出てきません。分かる方がいましたら教えてください。よろしくお願いします。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){
        var list = "";

//大見出しを検索
        $(".entry-content h3").each(function(i){
            var idName = "section"+i;
            $(this).attr("id",idName);
            list += '<li><a href="#' + idName + '">' + $(this).text() + '</a></li>';
        });

//大見出しが2つ以上あったら目次を表示する
        if ($(".entry-content h3").length >= 2){
            $("<div class='sectionList'><h3>目次</h3><ol>" + list + "</ol></div>").prependTo(".entry-content");
        }

//スクロールを滑らかにする
        $('.sectionList a').on("click", function() {
            $('html,body').animate({scrollTop: $(this.hash).offset().top}, 600);
        return false;
        });
    });
</script>

「はてなブログ脱獄ブログ」さんで、CSSのコードも公開されていますが、そのままコピペでは丸パクリなので、CSSを少しいじりました。このブログではCSSを以下のようにしました。

article .entry-content .sectionList {
    background: #F8F8F8;
    margin: 32px 0 32px;
    padding: 15px;
    border: 1px solid #CCC;
}
article .entry-content .sectionList h3 {
    font-size: 110%;
    margin: 0;
}
article .entry-content .sectionList ol {
    margin: 10px 0 0;
    padding: 0 0 0 1.5em;
list-style: decimal;
}

/* 目次の背景色とか */
article .entry-content .sectionList {
    background: #fcf8f1;
    border: none;
}

グローバルメニューをつけた

はてなブログにグローバルメニューをつけた

グローバルメニューに関しては、完全にソース元を忘れてしまいました(笑)
とりあえず、このブログで使用しているコードを貼り付けておきます。ちなみに、 コードの記述場所は以下の通りです。

  1. ダッシュボード
  2. デザイン
  3. ヘッダ
  4. タイトル下

「herf=」に自分のブログのリンクしたいURLを貼りつけましょう。記事が多くなりカテゴリーが増えてきたら、カテゴリーをグローバルメニューに実装してもいいと思います。このブログでは、まだグローバルメニューが「Home」しかないので、記事が増えてきたら順次、メニューを増やしていく予定です。

<nav id="global">
<ul>
<li><a href="http://wepli-dot2.hatenablog.com/">Home</a></li>
</ul>
</nav>

このブログでのグローバルメニューのCSSは以下のようにしました。本当はグローバルメニューを、ブログの端から端まで表示させたいのですが、やり方がイマイチわかりませんでした。どなたか詳しい方がいましたら教えてください。

#top-editarea {
    width: 100%;
    text-shadow: inherit;
}
#global ul{
    list-style: none;
    margin: 2.6em 0;
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-   stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(   
    startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}

#global ul li{
    display: inline-block;
}

#global ul li a{
    text-decoration: none;
    display: block;
    padding: 1em;
}
#content{
    margin-top: 0;
    background: #fff; /* ☆ */
    box-shadow: inherit;
}

各記事のタイトル下に画像を入れた

下の画像を見ていただければ分かる通り、エントリータイトルの下に画像を入れて目立たせるようにしました。ちょっとしたアクセントになると思います。またブログのTOPページからも、エントリータイトル下に画像を入れたことにより、各記事の境界がしっかりした印象になりました。

hタグ下、タイトル下に画像を入れる

エントリータイトル下に画像を入れる方法

自分で画像を用意した方が愛着が沸くのでいいと思いますが、面倒くさい方やとりあえずの措置として、「このブログと同じのでいいや!」という方は、以下のコードを設定から「デザインCSS」にコピペすれば簡単に実装できます。

.entry-title {
    background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/S/SikisimaHisayuki/20150209/20150209230038.gif) repeat-x bottom left;
    font-size: 1.8em;
    margin-bottom: 26px;
    padding-bottom: 1.3em;
}

見出し=hタグをCSSで、ちょっとオシャレにカスタマイズした

見出しのhタグのカスタマイズは、以下のサイトを参考にしました。以下のサイトから気に入ったものを選んで色を少々変えた程度です。

[CSS初心者向け]ブログで良く見かけるシンプルな見出しの作り方

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

スマホ表示の「はてなブログをはじめよう!」とかを非表示にした

個人的にどうしても外したかったので、チップの日常さんの記事を参考にして非表示にしました。ありがとうございました。

【はてなブログ】スマホ用ページ下部分のプロフィール(id)とかを非表示にしてみました

はてなブログをはじめよう!とかを非表示にする方法

やり方は、チップの日常さんが書いてくれたコードをコピペで完成です。とっても簡単でした。

  1. ダッシュボード
  2. デザイン
  3. スマホアイコン
  4. ヘッダ
  5. タイトル下
  6. 「スマートフォン用にHTMLを設定する」に進み、以下のコードを貼り付けて完成
<style type="text/css">
/* プロフィールの非表示 */
.hatena-module-title{
    display:none;
}
.profile-wrapper{
    display:none;
}

/* はてなブログを始めようの非表示 */
.footer-action-wrapper{
    display:none;
}

/* はてなブログ開発ブログ等のリンクの非表示 */
.touch-item-list{
    display:none;
}
</style>

さいごに

とりあえず、はてなブログに引っ越してきて、いじったカスタマイズの一部を紹介しました。CSSなどに詳しい人にとっては「書くほどの記事じゃねぇだろう!」とのケリが飛んできそうですが、「これからブログはじめるぞ!」って人には、少しくらいは参考になったのではないかなぁと思います。
まだまだ、カスタマイズしたいところはありますが、とりあえず記事を増やしてからにしたいと思います 。なんせ、まだ5記事目なんで.....(笑)
長い記事でしたが、最後まで読んでいただき、ありがとうございました。