読者です 読者をやめる 読者になる 読者になる

Appism

「ポケモンGO」「スプラトゥーン」など話題のゲーム・アプリや、漫画・音楽など自分の興味のあることをひたすら書き続けるブログです。

はてなブログでスマホ画面のサムネイル画像を丸くするカスタマイズ

Web制作 Web制作-はてなブログ

f:id:tarapple:20150618221435p:plain

はてなブログのスマホ画面のカスタマイズ記事となります。今回は、上図のようにサムネイル画像を丸くするカスタマイズです。

過去のはてなブログカスタマイズ記事▽

今回のカスタマイズもコピペで簡単にできるので、試したい方がいればどうぞ!

はてなブログのモバイル画面は差が付きにくい!

http://www.flickr.com/photos/8398214@N05/6199268608

photo by Fredo_photo

はてなブログのスマホ画面は中々デザインの面で差が付きにくいところですよね。

はてなブログのスマホ画面カスタマイズ記事としては、id:tsukuruiroiroさんの記事が1番有名だと思います。有名すぎて結構色んな方がやってますよね。

サムネイル画像以外にも、ヘッダーやメニューバー、プロフィールなどまだまだカスタマイズできるところがあると思うので、スマホ画面のカスタマイズは積極的に行っていきたいところです。

サムネイル画像を丸くする方法

それでは本題。とりあえずコードだけ書いときます。

<style type="text/css">

.list-entry-article .thumb-image
{
width: 100px; /*サムネイル画像の横幅*/
height: 100px; /*サムネイルが画像の縦幅*/
border-radius: 4em; /*サムネイル画像の角の丸みをなくす*/
border: solid 3px rgb(0, 0, 0); /*画像の枠線をつける*/
}

</style>

このコードを下図の場所(タイトル下)にコピペでOKです。

f:id:tarapple:20150618222611p:plain

簡単にブログが可愛く(?)なるのでオススメです!

まとめ

こういうカスタマイズってつい夢中になっちゃうんですよね〜。

カスタマイズと言えば、このブログのPCのデザインをカスタマイズしたいと思ってるんですが、中々上手くいかないものですね...。誰かやってくれる人いないかな...。

男子ハックみたいな感じが理想。

無料で。1万円で←