はてなブログのテーマストアに「fake the Gridly」を投稿しました

f:id:BNorider:20130825200937p:plain 　数日前に作成して以来、自分のブログでこのテーマを運用してみて、ある程度仕様が固まったので、fake the Gridly - テーマストアに投稿することにしました。

「Gridly」テーマとは？

　このテーマは、本来はWordPress用テーマである「Gridly」（Gridly Theme Demo）を参考にして作成しています。

　詳細は、実際に本家のデモページをご覧になられるとわかると思いますが、このテーマの特徴を簡単にまとめると以下のとおりです。

1ペインのグリッドWebデザイン
トップページの1ページ内に、コンパクトに複数の記事が表示される
各記事にアイキャッチ画像を付けることができる

「Gridly」をはてなブログのテーマとして実現する際の留意点

　この「Gridly」を、はてなブログのテーマとして実現するにあたり、以下のような留意点があります。
　このテーマを採用する際はご注意ください。

「Gridly」テーマのメリットである”コンパクトに複数記事を表示”を活かすためには、各記事に「続きを読む」を付加する必要がある。
１ページの記事数は多ければ多いほどメリットが活かせる。しかしあまり多くしすぎるとトップページの読み込みが重くなる。
今回テーマストアに投稿したのはCSS部分だけのため、CSSだけでは本家のように記事上にアイキャッチ画像を表示できない。一応、以下に解決策を記述していますが、手間がかかるし、表示されなくとも問題はないため、こだわらなくてもいいと思います。
各記事には、はてなブログ標準の広告表示を残しています。これを削除すると、はてな利用規約違反になるためです（※はてなブログPROならば消すことが出来ます）
トップページの記事は、広告とSNSボタン以外のfooter部分を非表示にしているので、本来なら表示されるべきブコメやZENBACKなどは表示されません。ただし個別記事表示にすれば従来どおり表示されます。
本家の「Gridly」ではjQueryのMasonryを使用していますが、単純にCSSのfloatで処理しています。

上記、問題点の解決方法について

　問題点1.は、単純手作業で解決するしかありません。
　問題点2.は、自分はとりあえず”6記事”に設定しています。（ブログの「設定」-「詳細設定タブ」-「1ページの記事数」の設定値）
　問題点3.は、後ほど紹介するjQueryによって実現できますが、このjQueryはあくまでもアイキャッチ画像をタイトル上に移動させるだけなので、各記事にアイキャッチ画像を埋め込むのは単純手作業になります。
　問題点4.は、実はjQueryやCSSの設定で解決できるのですが、ある意味グレーなやり方（表示を消すのではなく、表示させる場所を移動させる）のため、あえて紹介しません。どうしても広告が気になるのであれば、素直にはてなブログPROにしましょう。

#13/9/27追記
　はてな利用規約が変更になり『広告の体裁や位置の改変』も禁止事項として明記されました。ですので、上記の『表示させる場所を移動させる』の記述を消しました。
　この詳細については、こちらを参照してください。

　問題点5.は「Gridly」のテーマコンセプト上、トップページで表示させてしまうとメリットが激減するため、表示させることは考えませんでした。

問題点3.の解決方法：アイキャッチ画像を記事上に表示させる

jQueryの追加

　以下のjQueryをヘッダ部分のHTML部分に記述してください。なお、今回はアイキャッチ画像のクラス名として"eyc"というクラスを割り当てていますが、これは任意で構いません。その際は、以下のクラス名"eyc"を各自書き換えてください。

<script>
$(function() {
//各記事のeycクラスが付いた画像をアイキャッチ画像として表示
  var mainent = $('#main-inner .entry');
  $.each(
    mainent,
    function(index, domEle) {
      var ele = $(domEle);
        $('.eyc',this).prependTo(ele);
    }
  );
});
</script>

CSS定義の追加

　次は「デザインCSS」の設定で、CSS定義に以下を追加してください。

.eyc img {
  max-width: 800px;
  width: 100%;
}
.page-index    #main-inner .entry:first-child .eyc img,
.page-category-category_name #main-inner .entry:first-child  .eyc img {
  width: 600px;
}
.page-index    #main-inner .entry .eyc img,
.page-category-category_name #main-inner .entry .eyc img {
  width: 290px;
}

各記事のアイキャッチ画像定義の記述追加

　各記事に設定するアイキャッチ画像の追加方法です。これは完全に単純手作業になります。

　各記事の先頭行に

<span class="eyc">（画像url or はてなフォトライフ画像のリンク）</span>

　を記述すれば、アイキャッチ画像として、トップページ及び各記事単独表示時に、記事上に画像が表示されます。
　※「続きを読む」行以降にある画像に、eycクラスを付加してもアイキャッチ画像として表示されないため、先頭行に記述することを推奨します。

最後に

　h3要素、h4要素などの装飾については各自好みがあると思うので、デフォルトのままにしています。
　各自CSS設定の追加をお願いします。

#13/9/15追記
　Ver1.01でh3要素、h4要素の装飾について自分のブログと同じ設定を追加しました。以下に載せたものが、その設定値です。もしこれで都合が悪ければ、これを参考にして修正し、各自のCSSに追加してください。

.entry-content h3 {
  padding-left: 4px;
  border-left: 9px solid #CC0000;
  border-bottom: 1px solid #999999;
}
.entry-content h4 {
  border-bottom:1px solid #999999;
}