部屋をかたづけようよスマートフォン用の表示で見るたまには部屋をかたづけようよ部屋を片付けせなあかんと思いつついつも放置プレイ。そんな自分の日々の想いをつづった日記系ブログですよ?Home最新記事タイトル一覧ブログ紹介サイドバーへフォトギャラリーお使いのブラウザがJavaScriptがオフになっている場合、正しく閲覧できない場合があります。ストアに投稿することにしました。Demo)を参考にして作成しています。詳細は、実際に本家のデモページをご覧になられるとわかると思いますが、このテーマの特徴を簡単にまとめると以下のとおりです。1ペインのグリッドWebデザイントップページの1ページ内に、コンパクトに複数の記事が表示される各記事にアイキャッチ画像を付けることができる「Gridly」をはてなブログのテーマとして実現する際の留意点この「Gridly」を、はてなブログのテーマとして実現するにあたり、以下のような留意点があります。このテーマを採用する際はご注意ください。「Gridly」テーマのメリットである”コンパクトに複数記事を表示”を活かすためには、各記事に「続きを読む」を付加する必要がある。1ページの記事数は多ければ多いほどメリットが活かせる。多くしすぎるとトップページの読み込みが重くなる。今回テーマストアに投稿したのは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」のテーマコンセプト上、トップページで表示させてしまうとメリットが激減するため、表示させることは考えませんでした。以下のjQueryをヘッダ部分のHTML部分に記述してください。今回はアイキャッチ画像のクラス名として"eyc"というクラスを割り当てていますが、これは任意で構いません。その際は、以下のクラス名"eyc"を各自書き換えてください。次は「デザインCSS」の設定で、CSS定義に以下を追加してください。各記事に設定するアイキャッチ画像の追加方法です。これは完全に単純手作業になります。はてなフォトライフ画像のリンク)</span>を記述すれば、アイキャッチ画像として、トップページ及び各記事単独表示時に、記事上に画像が表示されます。※「続きを読む」行以降にある画像に、eycクラスを付加してもアイキャッチ画像として表示されないため、先頭行に記述することを推奨します。最後にh3要素、h4要素などの装飾については各自好みがあると思うので、デフォルトのままにしています。各自CSS設定の追加をお願いします。#13/9/15追記Ver1.01でh3要素、h4要素の装飾について自分のブログと同じ設定を追加しました。以下に載せたものが、その設定値です。これで都合が悪ければ、これを参考にして修正し、各自のCSSに追加してください。(2013/10/17)バグ修正ブログトップページで、一番左側記事の引用スターが見えなくなっていたためマージン追加サイドバーモジュールの2行目以降の高さ指定誤りを修正。これで4個目以降のモジュールの高さが揃うようになった。»Profileid:BNorider共感してもらえる記事を書くよう日々心がけてます。いいこと書くのでチェックよろしくね。Reserved.はてなブログをはじめよう!BNoriderさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。