【B】 はてなブログをとことんカスタマイズ！新着記事をちょこっとだけ派手に見せる方法、の巻

以前の記事で、ブログ記事を写真の一覧で見せるwebサービス
複眼RSSの使い方をご紹介させていただきました。

【B】 はてなブログに過去記事を写真で表示する、お手軽カンタンカスタマイズの巻 - HSKぐうたらジャーナル

すごく手軽にブログの見た目を変えられるし、重宝していたのです…が。
ちょっと物足りないところがぽろぽろと出てくるように。
むー。困った。
だったら自分でコードを書いちゃおう！
というわけで、拙いながらもJavascriptとCSSを書いてみました。

今回ご紹介する方法は、ちょっと手間は掛かるのですが
次のようなメリットがあります。

• 記事タイトルが画像と一緒に表示されるので、どんな記事か想像しやすい
• 最新の記事を見つけやすい、”NEW”アイコンが付く
• 広告表示一切なし！

所要時間は、本記事の設定をそのままコピペ！で約20分。
ガッツリとカスタマイズしたい！
という方にも、CSSの解説をしてありますので
比較的ラクに変更できるかと思います。お試しあれ！

では、さっそくその方法を見ていきましょう。

手順1：Javascriptのコードをコピペ＆修正する

今回は、Google Feed APIを使ってあれこれやっているのですが
細かい説明はネット上にたくさんありますので省略。
以下のコードをざざっとコピーしたら、
自分のサイトの表示したいところに貼り付けましょう。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Google Feed APIを使って過去記事一覧を表示
google.load("feeds", "1");
function initialize() {
    var feed = new google.feeds.Feed("はてなブログURL/feed");
    feed.setNumEntries(4); // 読み込む過去記事の数 = 4
    feed.load(function(result) {
        if (!result.error) {
            var container = document.getElementById("recent_feed");
            var useFeed = "";
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                var first_image = entry.content.match(/(http:){1}[\S_-]+(\.jpg)/);
                useFeed +=
                 '<div class="hsk_entry"><a  href="' + entry.link + '"><img class="hsk_entry_img" src="' + first_image[0] + '">';
                 if (i == 0) {
                     useFeed += '<img class="new_icon" src="newアイコン画像のURL">';
                 }
                 useFeed += '<div class="hsk_entry_text">' + entry.title + '</a></div></div>';
            }
        container.innerHTML = '<div class="hsk_recent_entries">' + useFeed + '</div>';
        }
    });
}
google.setOnLoadCallback(initialize);
</script>

コピペしたら、いくつか細かいところを自分のサイトに合わせて修正します。

• 6行目の「はてなブログURL」を自分のはてなブログのURLに修正します。
• 7行目で、読み込む過去記事の数を4個としていますが、必要に応じてこれを変えます。
• 18行目の「newアイコン画像のURL」を自分の好きなNEWアイコンの画像のURLに変えます。

NEWアイコンについては、ネットで探すか、もしくは
ぐうたらジャーナルと同じもので良ければ、以下の画像をご利用ください。

※ぐうたらジャーナルで使用している画像はこちら：

以下の手順でご利用ください。

1. この画像をダウンロードする
2. はてなフォトライフ等のwebサービスにアップロードする
3. 画像のURLを確認して18行目の「newアイコン画像のURL」を差し替える

手順2：CSSをコピペする

次に、デザインを整えていきましょう。
以下のCSSをまるごとコピーしたら、
はてなブログの編集画面から
「デザイン」＞「カスタマイズ」＞「デザインCSS」を選び、
自分のはてなブログのCSSにペーストして追加します。

/*---------- ページ上部の新着記事一覧 ----------*/
.hsk_recent_entries {
    margin: 0px 0px 10px 0px; /* 【A】新着記事の周りの空白 */
}

.hsk_entry {
    display: inline-block;
    width: 220px; /* 【B】ヨコ */
    height: 147px; /* 【C】タテ */
    margin: 0 5px; /* 【D】左右の間隔を設定 */
    position: relative;
    overflow: hidden;
    border-radius: 5px; /* 角丸 */
    -webkit-border-radius: 5px; /* 角丸 Safari, Chrome */
    -moz-border-radius: 5px; /* 角丸 Firefox */
}

.hsk_entry_img {
    width: 220px; /* 【B】ヨコ */
    height: 147px;  /* 【C】タテ */
    /* うまくレンダリングされないときのため二重に角丸設定 */
    -webkit-border-radius: 5px; /* 角丸 Safari, Chrome */
    -moz-border-radius: 5px; /* 角丸 Firefox */
    }

.hsk_entry_text {
    line-height: 1.5; /* 【E】行間 */
    font-size: 12px; /* 【F】文字のサイズ */
    text-align: left;
    word-break: break-all; /* 強制改行 */
    position: absolute;
    top: 86px; /* 【G】タテ147px(【C】) - (上下padding 4px)*2 - 文字領域タテ53px(【I】)) */
    padding: 4px 8px
    width: 204px; /* 【H】ヨコ220px(【B】) - (左右padding 8px * 2) */
    height: 53px; /* 【I】文字領域タテ */
    border-bottom-left-radius: 5px; /* 角丸 */
    border-bottom-right-radius: 5px; /* 角丸 */
    -webkit-border-bottom-left-radius: 5px; /* 角丸 Safari, Chrome */
    -webkit-border-bottom-right-radius: 5px; /* 角丸 Safari, Chrome */
    -moz-border-bottom-left-radius: 5px; /* 角丸 Firefox */
    -moz-border-bottom-right-radius: 5px; /* 角丸 Firefox */
    background-color: rgba(255, 255, 255, 0.7) /* 【J】文字の背景色を指定 */
}

img.hsk_entry_img:hover {
    opacity:0.8; /* マウスカーソルを合わせたときの画像の不透明度 */
}

.hsk_entry_text a {
    text-decoration: none;
    color: #333333; /*【K】タイトルの文字色 */
    font-weight: bold;
}

img.new_icon {
    position: absolute;
    top: 0; /* 【L】NEWアイコンの位置 (上からの間隔) */
    left: 0; /* 【M】NEWアイコンの位置 (左からの間隔) */
}

ここまできたら、あともう少し！です。

手順3：デザインを微調整する

最後は、デザインの微調整をして完了です。
プレビューを見ながらCSSを
ちょこちょこと修正していきましょう。

ブログのデザインに合わせて修正する可能性が高い項目には
【A】〜【M】の注釈を付けておきました。

まず、「【A】新着記事の周りの空白 」については
多くのサイトで変更が必要になるかと思います。
コピペした直後は以下のようになっていますが、
各サイトのデザインに合わせて修正してください。

また、【B】〜【M】のうち、
特にややこしそうなものについては
下に図示しましたのでご参照ください。

応用編：被はてブ数を表示する

Javascriptを少し修正すれば、こんな感じで
なてなブックマークされた数も表示することができます。

useFeed += '<div class="hsk_entry_text">' + entry.title + '</a></div></div>';

の一行を、

useFeed += '<div class="hsk_entry_text">' + entry.title + '<img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '"></a></div></div>';

と修正してみてください。

デザインがごちゃごちゃしてくるのが難点ですが
ブックマーク数が表示されることで、人気記事が分かりやすくなります。

…というわけで、今回はちょっとマニアックな
はてなブログのカスタマイズ方法についてご紹介させて頂きました。
本記事が、はてなブログのカスタマイズに情熱を燃やすみなさまの
ご参考になれば幸いです。

ではでは、またー。

よくわかるHTML5+CSS3の教科書