関連記事の導入にZenbackを採用!CSSを修正してデザインも変更してみました。
ブログの記事を読み終わった後に、よく関連記事のリストを見かけます。
このブログでもやってみたい!と思い、テスト的に関連記事を導入してみました。
今回導入するにあたって採用したサービスはZenbackです。
単に導入するだけでなく、オリジナリティーを出すためにCSSでデザインをカスタマイズした内容を紹介します。
まず、はてなブログにZenbackの導入
デザインの設定画面で、記事の項目の設定を変更します。
その時、
- Zenbackのチェックは入れない
- 記事下の入力枠にZenbackにログインして生成したコードを貼り付ける
上記2点を厳守して設定を保存します。
はてなブログ側の設定でチェックを外したのは、次のZenback側のカスタマイズができないからです。(確か・・・)
Zenback側の設定
Zenbackにログインして、ウィジェットテーマにsmokeを選択して保存します。理由はデザイン的に一番シンプルで後からカスタマイズしやすいからです。
あとは、関連する記事は「画像+テキスト」を選択しました。
すると・・・・・
こんな感じで、とりあえず関連記事は表示されました!
もうちょっと体裁を整えたいので、ここからCSSでカスタマイズしていきます。
CSSを追加
次にデザインの設定からデザインCSSに下記のソースコードを追加します。
.zenback-module-label { text-align: center; position: relative !important; } .zenback-module-label:after { content: ""; display: block !important; position: absolute; top: 50%; width: 100%; margin-top: -3px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: 2px; } #zenback-widget .zenback-module-label a, #zenback-widget .zenback-module-label span { padding: 0.3em 0; color:#1b1b1b; text-decoration: none; font-weight: bold; } .zenback-module-label span, .zenback-module-label a { display: inline-block; padding: 5px 10px !important; background-color: #fff !important; position: relative; z-index: 3; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb, #zenback-widget #zenback-news-hasimage .zenback-module-item { height: 100px !important; margin: 0 0 20px !important; padding: 0 2% !important; font-size: 16px !important; background-color:transparent !important; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb { width:46% !important; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail, #zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail, #zenback-widget #zenback-news-hasimage .zenback-module-item-image, #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-image { width:100px !important; height: 100px !important; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail, #zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail { float:left; margin-right:10px; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-title { width:auto !important; margin-top: 0 !important; overflow:hidden; } #zenback-widget #zenback-news-hasimage .zenback-module-item-content { overflow:hidden; } #zenback-widget #zenback-news-hasimage .zenback-module-item-text a { color:#999; } [id="zenback-news-hasimage"] .zenback-module-list { border-bottom: 1px dotted #ddd !important; padding-bottom: 10px !important; } .logly-lift-ad:first-child { margin-bottom:10px; } #logly-lift-869470 .logly-lift-ad-image { width: 100px !important; height: auto !important; padding: 0 10px !important; } #logly-lift-869470 .logly-lift-ad-image-inner, #logly-lift-869470 .logly-lift-ad-image-inner img { position: static !important; width:100px !important; height:auto !important; } @media (max-width: 767px) { #zenback-widget #zenback-related-article .zenback-module-item.hasthumb, #zenback-widget #zenback-news-hasimage .zenback-module-item { overflow:hidden; float:none !important; width: 100% !important; height: auto !important; padding: 0 !important; } #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-thumbnail, #zenback-widget #zenback-news-hasimage .zenback-module-item-thumbnail, #zenback-widget #zenback-news-hasimage .zenback-module-item-image, #zenback-widget #zenback-related-article .zenback-module-item.hasthumb .zenback-module-item-image { width:60px !important; height: 60px !important; } #logly-lift-869470 .logly-lift-ad-image, #logly-lift-869470 .logly-lift-ad-image-inner, #logly-lift-869470 .logly-lift-ad-image-inner img { width:60px !important; } #logly-lift-869470 .logly-lift-ad-image { padding: 0 10px 0 0 !important; } }
これで保存します。
見出しとレイアウトが変更になりました。
画像の縦横比が強制的に1:1になっており、つぶれた感じになってしまいますが、ある程度ユーザーに雰囲気が伝われば構わないので今回はこれでOKとしました。
(他の対応も検討の余地有りです。)
ZenbackのCSSが、はてなブログのCSSよりも後で読み込まれるため、「!important」の処理が多いのが反省点です。
「Zenback」以外のサービスでも時間があればカスタマイズにチャレンジしてみたいと思います。
さいごに
「Simple Gray」のテーマを使っていなくても、多分それなりにデザインが変わると思います。興味があれば試してみてくださいー!!