引用ボックスを装飾

Posted on

Sponsored Link

引用を

こんな感じにしてみました

引用符アイコンはこっからいただきました。
調べてもなかなか出てこない引用符アイコンを量産したので配布してみます | Love&pointcard

これを適当にリサイズしてアップロード。
テーマ編集からスタイルシートの編集。
blockquoteで検索して

blockquote {
	background-color: #FFF0F5; /*背景の色*/
	font-style: italic; /*フォント*/
        background-image: url("http://idejun.com/wp-content/uploads/d21.png"); /*背景画像*/
	background-repeat: no-repeat; /*画像繰り返しなし*/
	-moz-border-radius: 15px; /*半径15pxの角丸*/
	-webkit-border-radius: 15px; /*半径15pxの角丸*/
	padding: .2em 1.6em;/*外側の余白*/
	margin: .2em 0;/*内側の余白*/
}

こんな感じに書き換えました。
カラーコードはこっから探しましょう。Color Table

前の引用があまりも適当だったんで軽く変えただけですが、ブログ全体と色合いをあわせるだけで綺麗に見えると思います。
簡単にできるのでオススメです。
それではtumblrで引用する作業に戻りますね。




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>