記事一覧をカード風に表示するカスタマイズを作りました(はてなブログ)2017-03-26記事一覧をカード風に表示するカスタマイズを作りました(はてなブログ)Webこんにちは。当ブログでは「記事一覧ページをトップページとして表示する」カスタマイズを導入しています。記事一覧のレイアウトを(スマホの時は)カード風に表示するカスタマイズを作ってみました。言ってもスクリプトは無し、CSSの設定のみです。記事を2列にレイアウトします。マウスをかざした記事のバーの色が変わります。記事をカード風にレイアウトします。アイキャッチとタイトルだけの見出しです。記事を2列にレイアウトします。マウスをかざした記事のバーの色が変わります。記事をカード風にレイアウトします。アイキャッチとタイトルだけの見出しです。設定方法トップページを記事一覧に設定するここで詳しくは解説しません。紹介記事があるので、そちらを参考に設定してください。dokuwohaku.hateblo.jpshijinblog.hatenablog.comデザインCSSを設定するはてなブログ管理ページから「デザイン」→「カスタマイズ」→「デザインCSS」と進み、以下に示すCSSを貼り付けます。}}カスタマイズ単にコピペするだけだと、お使いのテーマと合わなかったり不満な点があるでしょう。いくつかカスタマイズポイントを示します。通常時の記事の背景色は37行目、バーの色は43行目のカラーコードで変更できます。45%;}マウスオーバー時の色マウスオーバー時の背景色は50行目、バーの色は60行目のカラーコードで変更できます。500ms;}マウスオーバー時のアニメーションを消すマウスオーバー時にバーの色を変えたくない場合は49〜70行目を削除してください。スマホ表示時のタイトル行数を変えるスマホでの一覧表示時にタイトルは3行目まで表示し、4行目以降は表示されません。この表示行数を変えるには176行目の数値「3」を表示したい最大行数に変更します。}アイキャッチの無い記事にデフォルトの画像を設定するこのカスタマイズ、スマホで一覧を見た時にアイキャッチの無い記事はこんな感じになってしまいます。なんとも言えないカッコ悪さですがCSSだけでの解決方法が思い付きませんでした......ということでアイキャッチの無い記事にデフォルトの画像を設定するスクリプトを添えておきます。以下のスクリプトをはてなブログ管理ページの「デザイン」→「カスタマイズ」→「フッタ」に貼り付けます。});</script>次にデフォルトで表示したい画像をはてなフォトライフへアップロードし、上記スクリプトの9行目のURLをそれに書き換えます。するとアイキャッチの無い記事にはデフォルトの画像が表示されるようになります。導入するにあたっては以下の点にご注意ください。利用するテーマはレスポンシブデザインに対応していることを前提としています。テーマによってPC版とスマホ版のレイアウトが全く同じになるものには対応していません。(スマホでもPC版の表示になります。)正常に適用されるかはご自分で確認をお願いします。うまく適用されなくても当方で責任は負いません。ご利用は自己責任でお願いします。以上、お暇があれば試してみてください。一応いくつかのテーマでテストしています。ご利用は自己責任ですが、うまくいかない場合は暇だったらできる限りは対応します。気軽にお声がけください。余談ZENO-TEALで良くない?そうなんです。前に公開されためっちゃカッコよさげなテーマ『ZENO-TEAL』。zeno-teal.hatenablog.comこれを使いたかったんですが、記事エントリーの1段落目に画像が必須であり、自分のブログでプレビューしたところトップページが残念なことになってしまったのです。今から全記事にタイトル画像入れるのも面倒だし、デザイン性は皆無なカスタマイズを作ってみました。はてなブログPro学んだ技術まとめるはずが、仙台のことや日常のことを綴っているブログ。(1)スポンサーリンクはてなブログをはじめよう!WorldWorldWorldさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。