はてなブログのサムネイル画像orアイキャッチ画像を丸くするのでR

はてなブログには、一覧でサムネイル画像orアイキャッチ画像があって、サイドバーの人気のある記事や最新の記事などのサムネイル画像orアイキャッチ画像はdefaultでは、四角なのでR。

ただし、

それが一般的なのでRが、これをあえて丸くしたいのでR。

結構これが簡単だったのでR。

この方の記事が参考になったのでR。

調べると、一覧のサムネイル画像orアイキャッチ画像は、

.archive-entries .entry-thumb

でclassが指定されていて、

サイドバーの人気のある記事や最新の記事などのサムネイル画像orアイキャッチ画像は、

.urllist-image

でclassが指定されているようなのでR。

そこで、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「カスタムcss」に、

.archive-entries .entry-thumb {
width: 100px; 
height: 100px;
border-radius: 4em;
}

.urllist-image{
width: 100px; 
height: 100px;
border-radius: 4em;
}

挿入すると、簡単に丸くなったのでR。

ちなみに、

widthは、

サイドバーの人気のある記事や最新の記事などのサムネイル画像orアイキャッチ画像の場合なら、

「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」→「モジュールを編集」に、

で指定したサイズにあわせるのでR。

なお、丸くならずに、角がとれた四角のようにするには、

border-radius: 4em;

の4emの数字を適当に変えると、変化するようでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。




月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
年間920円(税抜)からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。