晩秋らしい気候になりました。度重なった台風も熊本では酷い被害は受けませんでしたが、先週半ばは魚が良い物が買えずに寂しい食卓となりました。台風で漁が良くなかったんでしょうね、台風が近づいている時は随分と鯛が安かった反動なのでしょう。
野菜売り場の主役の座も秋から冬へと変わっているところのようです。まだ白菜には早すぎますが、里芋が出てきました。そこで、取り合わせとしては変でしょうがキャベツと里芋で味噌汁にして季節を味わいました。

さて、先月までと比べて今月に入って当ブログの表示も早くなったと思います。数値的には微妙な変化ですが体感上は軽快にページが読み込まれる気がするようになりました。DNS や CDN に手を染める前にまだまだ工夫の楽しみがありそうです。
今日は“引用 Blockquote ”のスタイルをアレンジしました。

画像の上部が従来のスタイルシートデザイン¹。
画像の株が今回の変更後のスタイルシートデザイン²。

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

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

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

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

これまでのデザイン

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

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; }
}