変更履歴
Ver1.02 (2013/10/17)
- バグ修正
- ブログトップページで、一番左側記事の引用スターが見えなくなっていたためマージン追加
- サイドバーモジュールの2行目以降の高さ指定誤りを修正。これで4個目以降のモジュールの高さが揃うようになった。
Ver1.01 (2013/09/15)
- 引用(BlockQuote)の囲み内に、二重引用符(ダブルクォート)の表示を追加
- デフォルト(未装飾)のままだったh3要素、h4要素に装飾追加 ※h3:赤縦線+アンダーライン、h4:アンダーライン
Ver1.00 (2013/08/26)
- はてなテーマストアへ投稿
「Gridly」テーマとは?
このテーマは、本来はWordPress用テーマである「Gridly」(http://www.eleventhemes.com/gridly/)を参考にして作成しています。
詳細は、実際に本家のデモページをご覧になられるとわかると思いますが、このテーマの特徴を簡単にまとめると以下のとおりです。
- 1ペインのグリッドWebデザイン
- トップページの1ページ内に、コンパクトに複数の記事が表示される
- 各記事にアイキャッチ画像を付けることができる
「Gridly」をはてなブログのテーマとして実現する際の留意点
この「Gridly」を、はてなブログのテーマとして実現するにあたり、以下のような留意点があります。
このテーマを採用する際はご注意ください。
- 「Gridly」テーマのメリットである”コンパクトに複数記事を表示”を活かすためには、各記事に「続きを読む」を付加する必要がある。
- 1ページの記事数は多ければ多いほどメリットが活かせる。しかしあまり多くしすぎるとトップページの読み込みが重くなる。
- 今回テーマストアに投稿したのはCSS部分だけのため、CSSだけでは本家のように記事上にアイキャッチ画像を表示できない。一応、後述する自分のブログ記事内に解決策を記載していますが、手間がかかるし、表示されなくとも問題はないため、こだわらなくてもいいと思います。
- 各記事には、はてなブログ標準の広告表示を残しています。これを削除すると、はてな利用規約違反になるためです(※はてなブログPROならば消すことが出来ます)
- トップページの記事は、広告とSNSボタン以外のfooter部分を非表示にしているので、本来なら表示されるべきブコメやZENBACKなどは表示されません。ただし個別記事表示にすれば従来どおり表示されます。
- 本家の「Gridly」ではjQueryのMasonryを使用していますが、単純にCSSのfloatで処理しています。
注意点
このテーマをインストールすると、ヘッダ部分、記事下、フッタ部分に記述していたHTMLが削除される可能性があります。削除されてはまずい場合は、事前にバックアップしておいてください(ただしサイドバーの設定は残ります)
あと、このテーマはヘッダやフッタ部分のHTMLの記述はない、という前提でCSSを作成していますので、もし既存のHTMLがある場合(特にメニューのHTMLを記述している場合など)はデザインがくずれる場合があります。
その際は、新たにこのデザインテーマに合わせてHTMLを修正する必要がありますので、ご注意願います。
最後に
このテーマがどんな感じなのかは、自分(id:BNorider)のブログ「たまには部屋をかたづけようよ」を参照していただければ、ある程度わかっていただけると思います。
特にウィンドウサイズを変更していただくと、おぉ!と思っていただけるのではないでしょうか?
あと、その他詳しいことは当ブログの記事「はてなブログのテーマストアに「fake the Gridly」を投稿しました」をご参照ください。
もし要望、バグ等があれば、その記事にコメントをいただければ対応したいと思います。