画像にオンマウスで、別画像を表示します。外部スタイルシートを使用せず。
※画像の読み込みでタイムラグが起こることもあります。
The post CSS で可能 画像のロールオーバー first appeared on Classical Notes.]]>
テーマをデザインしたのは出版物のカバー等のデザインをしている企業で、このテーマをリリースしてからは WordPress のテーマ・デザインは終了しているようです。現在でも公式ディレクトリには残っているようですね。
レスポンシブルが主流に成っても、PHP がグレードアップしたって度重なる WordPress のメジャー・グレードアップにもエラーを出さないので使い続けています。
本文書体を指定してある箇所
今回は Entry 本文を変更。読みやすさを考えました。
.entry p {
font-family: 'Abril Fatface', serif;
font-size: 1.2em;
line-height: 1.6em;
font-weight: 400;
color: #364421;
padding: 1em;
text-rendering: optimizeLegibility;
text-align: justify;
text-justify: inter-ideograph;
word-spacing: normal;
word-break: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
本文書体とプロパティを変更
本文の書体を変更、あわせて役物や、文字送りの調整をするプロパティの設定を変更。次のスタイルシートに更新しました。
.entry p {
font-family: Segoe UI;
font-size: 1.2em;
line-height: 1.6em;
font-weight: 400;
color: #364421;
padding: 1em;
text-rendering: optimizeLegibility;
text-align: justify;
letter-spacing: normal;
text-justify: inter-ideograph;
text-transform: none;
font-variant: normal;
word-spacing: auto;
word-break: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
WordPress デザインとスタイルシート参考書
[table width =”100%” style =”table-bordered table-hover” responsive =”true”] [table_head] [th_column width =”50%”]WordPress[/th_column] [th_column width =”50%”]スタイルシート[/th_column] [/table_head] [table_body] [table_row] [row_column width =”50%”]
WordPress でのサイト制作によく使われる手法を目的別にまとめたテクニック集です。[/row_column] [row_column width =”50%”]
これからHTMLとスタイルシートを覚えようとする方には、HTMLのマークアップをHTML5とHTML4の違いとともに紹介しており、書式と記述の例、解説がとてもわかりやすい本です。[/row_column] [/table_row] [/table_body] [/table]The post Entry 本文のスタイルシートを変更 first appeared on Classical Notes.]]>
このテーマは2012年３月29日の更新以降開発が進んでいないテーマです。
このテーマには時流遅れの部分がドシドシ出てくるでしょうが、目立って来たらその時時で補修していきます。 The post “引用”のスタイルをアレンジしました – 時流に合わせてホームページのデザインを考える first appeared on Classical Notes.]]>
野菜売り場の主役の座も秋から冬へと変わっているところのようです。まだ白菜には早すぎますが、里芋が出てきました。そこで、取り合わせとしては変でしょうがキャベツと里芋で味噌汁にして季節を味わいました。
さて、先月までと比べて今月に入って当ブログの表示も早くなったと思います。数値的には微妙な変化ですが体感上は軽快にページが読み込まれる気がするようになりました。DNS や CDN に手を染める前にまだまだ工夫の楽しみがありそうです。
今日は“引用 Blockquote ”のスタイルをアレンジしました。
画像の上部が従来のスタイルシートデザイン1。
画像の株が今回の変更後のスタイルシートデザイン2。
引用タグのデザインをアレンジ。
これまではテーマのスタイルシートの指定のままにしてきました。
それを今回は明確に“引用”を印象づける事が出来ればと考えました。
テーマのスタイルシートの記述を読むと“引用”の背景画像を指定していました。
そこでテーマの構成ファイルを再確認してみると、images ディレクトリに blockquote2.png という名前のファイルは見つかりません。長年の間に誤って削除しているのかも、その記憶が無いのかしらとテーマを改めてダウンロードして比較しましたけれども同じく存在してません。
このテーマは2012年３月29日の更新以降開発が進んでいないテーマです。
当時は背景画像に指定することが普通にデザインの手法としてありました。近頃は Web アイコンも当たり前になりました。
このテーマには時流遅れの部分がドシドシ出てくるでしょうが、目立って来たらその時時で補修していきます。
現在の主流であるレスポンシブル・デザイン版に進化する時があればと期待はしています。
これまでのデザイン
[notification type=”alert-info” close=”false” ]諸君は何度もこの曲を演奏しているし僕も知っているから明日演奏会場で会おう。
クナッパーツブッシュ(1988~1965)
テーマ自体のスタイルシート
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; }
}
The post “引用”のスタイルをアレンジしました – 時流に合わせてホームページのデザインを考える first appeared on Classical Notes.]]>