こんにちは、つばさ（@tsubasa123）です。
本日、はてなブログの新機能としてカテゴリー別記事一覧に説明文を設定できる機能が実装されたみたいです。HTMLが入力できるらしいのでここは1つカスタマイズ記事でも書いてみようかと思い筆をとりました。記事のリスト表示とかベタかもしれませんが、お時間がある方はお付き合いください。
詳細は公式ブログを
どうぞ。ざっくり説明すると、
- タイトルを表示できるようにしたよ
- 説明文を表示できるようにしたよ
ってことだと思います。
レッツカスタマイズ
何を表示しようか考えたんですが、各カテゴリの中でおススメ記事を表示させるのが無難かな、と思ったのでサムネ付きの一覧表示エリアを作ってみました。
こんな感じです。ちょっとシンプルすぎるかな、もうちょっと装飾はこだわってもいいかもしれませんが、大枠としては結構満足しています、地味ですがサムネの表示方法にはこだわりました。これをベースにオシャレにアレンジしてご利用ください。
簡単にですがレスポンシブ対応もしてあります。私のブログのカスタマイズカテゴリで試験的に導入していますので、ブラウザサイズをぐりぐりしたりして動きを確認することが可能です。お試しいただける方は先にご確認いただくと捗るかと思います。
あー、IE無視です、Chromeでしか確認していません。大事なことなのでもう一度言います、IEは無視です。
HTMLとCSSの追加
今回のカスタマイズはHTMLとCSSのみで行っています。HTMLの追加方法ははてな公式の記事を参照してください。CSSは基本的にはカスタムCSSに追記しますが、1カテゴリでしかこのカスタマイズを導入しない場合はstyleタグで囲ってHTMLと一緒に挿入しちゃってもいいかもしれません。
ブログの運営方針にそってご自由にお持ち帰りください。導入時はバックアップをお忘れなく。
HTMLコードの例
<h2 class="archive-recommend-title"><span>「カスタマイズ」カテゴリのおすすめ記事</span></h2> <div class="recommend-entry-wrapper"> <ul class="recommend-entry-list"> <li class="recommend-entry"> <a href="http://www.tsubasa-note.blog/entry/kaereba-css-generator-usage"> <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170207/20170207130036.jpg" alt="カエレバ・ヨメレバのデザインCSSジェネレーターを作りました" title="カエレバ・ヨメレバのデザインCSSジェネレーターを作りました"> </figure> <h3>カエレバ・ヨメレバのデザインCSSジェネレーターを作りました</h3> </a> </li> <li class="recommend-entry"> <a href="http://www.tsubasa-note.blog/entry/last-modified-customize"> <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20161219/20161219202036.jpg" alt="リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ" title="リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ"> </figure> <h3>リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ</h3> </a> </li> <li class="recommend-entry"> <a href="http://www.tsubasa-note.blog/entry/table-of-contents-customize2"> <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20161129/20161129115553.jpg" alt="スマホサイト対応完了！はてなブログ公式目次のデザインカスタマイズ" title="スマホサイト対応完了！はてなブログ公式目次のデザインカスタマイズ"> </figure> <h3>スマホサイト対応完了！はてなブログ公式目次のデザインカスタマイズ</h3> </a> </li> <li class="recommend-entry"> <a href="http://www.tsubasa-note.blog/entry/heading-design-customize"> <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170120/20170120183852.jpg" alt="コピペでどうぞ。はてなブログ用見出しカスタマイズをとりあえず25個ほど" title="コピペでどうぞ。はてなブログ用見出しカスタマイズをとりあえず25個ほど"> </figure> <h3>コピペでどうぞ。はてなブログ用見出しカスタマイズをとりあえず25個ほど</h3> </a> </li> <li class="recommend-entry"> <a href="http://www.tsubasa-note.blog/entry/sidebar-category-parent-child"> <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170201/20170201143400.jpg" alt="コピペでどうぞ。サイドバーのカテゴリーモジュールに親子関係を持たせて表示するカスタマイズ" title="コピペでどうぞ。サイドバーのカテゴリーモジュールに親子関係を持たせて表示するカスタマイズ"> </figure> <h3>コピペでどうぞ。サイドバーのカテゴリーモジュールに親子関係を持たせて表示するカスタマイズ</h3> </a> </li> <li class="recommend-entry"> <a href="http://www.tsubasa-note.blog/entry/ovelive-sunshine-banner-design-customize2"> <figure> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170309/20170309164536.png" alt="コピペでどうぞ。ラブライブ！サンシャイン！！のバナー広告風な見出しデザインのカスタマイズ（メンバー編）" title="コピペでどうぞ。ラブライブ！サンシャイン！！のバナー広告風な見出しデザインのカスタマイズ（メンバー編）"> </figure> <h3>コピペでどうぞ。ラブライブ！サンシャイン！！のバナー広告風な見出しデザインのカスタマイズ（メンバー編）</h3> </a> </li> </ul> </div>
HTMLで記事のリストを作成します。これはあくまで私のブログでの例ですので、内容はご自分のブログに合わせて修正してください。簡単にですが後で修正方法を説明します。
あと、記事は6件表示を基準にレイアウトを考えています。数を増やしたり減らしたりしても極端に崩れはしないはずですが、ちょっと見栄えがおかしくなるかもしれません。ご了承ください。
CSSコード
.archive-header-category { display: flex; flex-direction: column-reverse; margin-bottom: 1.5em; } .archive-description { margin-bottom: 15px; } .archive-recommend-title { position: relative; text-align: center; margin: 1em; font-size: 18px; } .archive-recommend-title span { position: relative; z-index: 2; display: inline-block; margin: 0 2.5em; padding: 0 1em; background-color: #fff; text-align: left; } .archive-recommend-title::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background-color: #ccc; } .recommend-entry-wrapper { margin: 10px auto; } .recommend-entry-wrapper * { box-sizing: border-box; margin: 0; padding: 0; transition: .3s; } .recommend-entry-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-around; } .recommend-entry { flex: 0 0 32%; position: relative; padding-bottom: 8px; border-bottom: 1px solid #dfdfdf; margin-bottom: 10px; } @media screen and (max-width: 768px) { .recommend-entry { flex: 0 0 48%; } } @media screen and (max-width: 540px) { .recommend-entry { flex: 0 0 100%; } } .recommend-entry a { text-decoration: none; line-height: 1.4; } .recommend-entry figure { text-align: center; height: 100px; overflow: hidden; margin-bottom: 5px; } .recommend-entry img { width: 100%; height: 100px; object-fit: cover; transform: scale(1.1); } .recommend-entry a:hover img , .recommend-entry a:active img { transform: scale(1.2); } .recommend-entry h3 { font-size: 14px; color: #777; }
HTMLの準備がめんどくさい
表示させたい記事のリストなんですが、これは手作業で用意する必要があります。カテゴリごとの人気記事を取得する機能なんかをはてな運営が用意してくれれば助かるんですが。お願いします、あとできればURLも変更できるようにしてほしいです、お願いします。
さて、手動で用意するコードなんですが、
- 記事タイトル
- 記事のURL
- 表示させたい画像のURL
の3点を決められたフォーマットのHTMLに当てはめる必要があります。コードは下記をご覧ください。
<li class="recommend-entry"> <a href="【ここに記事のURL】"> <figure> <img src="【ここに画像のURL】" alt="【ここに記事のタイトル】" title="【ここに記事のタイトル】"> </figure> <h3>【ここに記事のタイトル】</h3> </a> </li>
こんな感じ。難しいことはないんですが、ちょっとめんどくさいかな。まぁ、カスタマイズってめんどくさいものですよね。あ、あと、先のHTMLコードの一番上の見出しの中のカテゴリ名の変更もお忘れなく。
今回は見出しの左右に線を引きたかったので敢えてHTMLを入力しましたが、今回のアプデでタイトルを表示させる機能も実装されていますので、そちらを使ったほうが修正漏れはなくなるかもしれません。この辺はお好みでカスタマイズしてご利用くださいな。
さいごに
簡単なものですが、カテゴリー一覧機能を利用したカスタマイズコードのご紹介でした。本当は他の部分で使おうと思っていたコードだったんですが、今回のアプデでも使えそうだったので使い回し。まぁまぁ満足のいく出来栄えです。
急いでいたのでマウスアクションやら余白の調整やら細かいところまで手が回っていませんが、気が向いたらメンテナンスします。わからんことがあったらお気軽にご質問ください、レスポンスは遅いですが気が付いたらお返事します。
ではでは、最後までお付き合いいただきありがとうございました。