“引用”のスタイルをアレンジしました – 時流に合わせてホームページのデザインを考える

[amazonjs asin=”4844364502″ locale=”JP” title=”現場のプロが教えるWebデザイン&レイアウトの最新常識 知らないと困るWebデザインの新ルール3″]

引用タグのデザインをアレンジ。

これまではテーマのスタイルシートの指定のままにしてきました。
それを今回は明確に“引用”を印象づける事が出来ればと考えました。

テーマのスタイルシートの記述を読むと“引用”の背景画像を指定していました。
そこでテーマの構成ファイルを再確認してみると、images ディレクトリに blockquote2.png という名前のファイルは見つかりません。長年の間に誤って削除しているのかも、その記憶が無いのかしらとテーマを改めてダウンロードして比較しましたけれども同じく存在してません。

このテーマは2012年３月29日の更新以降開発が進んでいないテーマです。
当時は背景画像に指定することが普通にデザインの手法としてありました。近頃は Web アイコンも当たり前になりました。
このテーマには時流遅れの部分がドシドシ出てくるでしょうが、目立って来たらその時時で補修していきます。
現在の主流であるレスポンシブル・デザイン版に進化する時があればと期待はしています。

これまでのデザイン

[notification type=”alert-info” close=”false” ]

[/notification]

テーマ自体のスタイルシート

blockquote {
font-style: italic;
padding-left: 48px;
background-image: url(images/blockquote2.png);
background-repeat: no-repeat;
background-position: 0 0;
margin-bottom: 25px;
}

アレンジ後のデザイン

諸君は何度もこの曲を演奏しているし僕も知っているから明日演奏会場で会おう。
クナッパーツブッシュ(1988~1965)

転用したスタイルシート

/************************************
** 引用（blockquote）
************************************/
blockquote {
background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
border: 1px solid #FFFFFF;
margin: 1em 0;
padding: 20px 55px;
position: relative;
}
blockquote:before {
color: #C8C8C8;
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}

blockquote:after {
bottom: 0;
color: #C8C8C8;
content: "”";
font-family: serif;
font-size: 600%;
line-height: 0;
position: absolute;
right: 0;
bottom: -16px;
}

/* Internet Explorer11のみに適用したい設定 */
@media screen and (min-width:0) {
*::-ms-backdrop, blockquote:before { left: -55px; }
*::-ms-backdrop, blockquote:after { right: -55px; }
}