iiie

物づくりと生活、"経験"を記事へ

関連記事を”あわせて読みたい”っぽくシンプルに表示する【はてなブログ カスタマイズ】

 

僕のブログカスタマイズには、ベースにはてなブログ公式のカスタマイズベーステーマ『Boilerplate』を使用しています。

 

Boilerplateの記事下の関連記事は、注目記事なんかと同じデザインで構成されているので、僕みたいなシングルカラムデザインで使用すると同じデザインが並んでしまうため境界が分かりづらく、閲覧者に誤解が生じるデザインになってしまいます。

 

そこで、関連記事を変更することで、関連記事と注目記事の差別化を図ることにしました。

 

ビフォーアフター

カスタマイズ前のデザイン

f:id:gorislog:20190612213536p:plain

 

デザインはシンプルで、関連記事としてはよく見かけるデザインですね。無駄が無いので僕はとても好きだったのですが、そのまま使うと注目記事との差別化ができないので、関連記事のデザインの変更をしました。

 

ただ、デザインは好きなので、注目記事側はこのままでいく予定です。

 

アフター

f:id:gorislog:20190612214043p:plain

 

俗にいう”あわせて読みたい”のデザインを参考にしました。”あわせて読みたい”はcss側でクラスを指定して記事内で呼び出しをして使用しているスタイルの方が多く、関連記事で実装している方がいないか探したところ見られなかったので自分で「あーでもない、こーでもない」とカスタマイズしてデザインしました。

 

CSSがめちゃくちゃなので、綺麗に実装できている方が居たら教えてほしいなぁ(チラッ)

 

考え方

 

主に下記の記事のコードを参考にし、枠や余白、下線などを追記しています。

 

www.foxism.jp

c-miya様、参考にさせていただきました。ありがとうございます。

 

サムネイル・冒頭文の削除、リスト毎下部にボーダー設置、外枠の指定をし、モジュールタイトルを背景指定した状態でposition: absoluteで絶対位置で表示しています。

 

コード

無駄を削除せず、最適化していない状態のコードです。

また、Boilerplateの場合それっぽく表示されると思いますが、他のテーマの場合は干渉して正しく表示されない場合があります。

そのままコピペで正しく動作しない場合がありますので、ご了承ください。

※あくまで備忘録

 

/*関連記事カスタマイズ*/

.related-entries{
padding: 1em;
border-radius: 3px;
border: solid 3px #777;
}

.related-entries-entry-body{
display: none;
}
.related-entries-image-link{
display: none;
}
.related-entries-date-link{
color: #aaa !importnat;
}
.related-entries-date-link:before{
color: #aaa;
font-family: blogicon;
content: "\f043";
}

.hatena-module-related-entries .hatena-module-title{
position: absolute;
margin: -3em 0 0 2em;
font-size:0;
}
.hatena-module-related-entries .hatena-module-title::before{
content:'あわせて読みたい';
position: absolute;
width: 10em;
text-align: center;
margin: -.9em 0 0 2em;
padding: .2em;
font-size:1rem;
background: #fdfdfd;
}

li.urllist-item.related-entries-item {
border-bottom: dotted 2px #e2e2e2;
padding: 10px 0;
margin: 0;
}

 

まとめ

それっぽい、”合わせて読みたい”になりました。

だいぶ強引なコードを書いているのでプロの方からすると「無駄多すぎ」なんて思う方も多いと思いますので、綺麗なコードをだれか掲載してください....。お願いします....。