ポチレバのデザインをカスタマイズ

わかったブログのかん吉さんが提供しているポチレバのデザインをカスタマイズしてみた。

このブログでアプリを紹介する際には、はてなブログ標準のツールを使用しているけど、WordPressで運用している仕事に役立つアプリ紹介サイトApp Work Styleではポチレバを利用中。

当初はデフォルトのスタイルで思ったように表示されず、CSSを選択して出てくるコードは項目の並び順が好みでなかったためポチレバの使用は諦めかけていた。

いろいろなサイトを見ているうちにスタイル1等をベースにしてもCSSでデザインを変更できることがわかり、自分の思うようなパーツを完成させることができた。

参考にしたサイトは以下の通り。

bowz.info

yossense.com

yossense.com

bartslog.com

bartslog.com

で、作成したCSSのコードはこんな感じ。

.pochireba {
	background: #dcdcdc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 1em !important;
	margin: 1em;
	line-height: 1.5em;
}

いろいろ見た割にはあっさりしたコードになったけど、結構気に入っている。

ちなみにポチレバで使用したデザインは「スタイル1」「75px」「角(公式)」「円」。