C1 Express

気になったモノや備忘録・日々考えたことなどについて書いていくマイペースなブログです。

はてなブログをちょこちょこカスタマイズ③関連記事など




今回で3回目になる、はてなブログのカスタマイズまとめ。いよいよ大詰めになってきました。

今回は

▼Google Chromeでもフォントを綺麗に表示する
▼記事下の関連記事の表示

といったカスタマイズをしていきます。



■Google Chromeでもフォントを綺麗に表示する

「Montserrat」というフォントを気に入って、新しく作ったブログのほうでは英数字表記の部分によく指定しているのですが、Chromeで見ると汚い…。WindowsChromeから閲覧してもフォントがカクカクしないようにしたい!!!

で、参考にさせていただいたのがこちらの記事

いろいろ設定してみて、最終的に -webkit-text-stroke: 0.18px; に落ち着きました。(iOSほど綺麗にはならないんですが…。)詳しくは下の記事を参考にしてみてください。




▼記事下の関連記事の表示

はてなブログの記事下に関連記事を表示する方法は調べてみるといろいろあって、こちらの記事では9つの方法が紹介されています。

こんなに方法があれば、ブログ全体のデザインや好みに合わせてカスタマイズできそう。


当ブログも関連記事の表示方法を変えてみることにしました。このブログではサイドバーのモジュールの関連記事を記事下に表示させる方法でカスタマイズすることに。手順を参考にさせていただいたのはこちらの記事。簡単でおすすめです!

すっきりとしたシンプルなデザインです。



今のままでもいいのですが、もうちょっと画像メインの横並びのデザインに変えたいのでCSSを以下のように付け加えました。

①自分のブログの記事下の幅(例:657px)
②表示記事数(例:4)
③合計余白…10px * 表示記事数 * 2(例:10×4×2=80px)

サイドバーの関連記事の設定でサムネイル画像のサイズを入力する
657-80=577 577÷4=144.25(※実際には小数点以下は入力できないので144)

/* 関連記事 */
.hatena-module-related-entries {display: none;}
div#relateArticle {margin-bottom: 40px;}
li.urllist-item.related-entries-item {
width: 144.25px;
float: left;
margin: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0px;
}
div#relateArticle .hatena-urllist li {
border: none;
}
img.urllist-image.related-entries-image {
padding-bottom: 10px;
}

これでイメージ通りに。外部のサービスを使う方法もありますが、サイドバーのモジュールを使ってデザインを変えるほうが1番手っ取り早くて、自由度が高いように思います。