WordPressのテーマ「Twenty Fourteen」のCSS変更メモ
はじめに
これまで無料のブログを使って更新していました。特にテンプレートは触らずに・・・ほとんど意味がわからないので・・・やってきました。特にCSSはチンプンカンプンなので完全無視してきました。
WordPressに移行して「Twenty Fourteen」というテーマでスタートしましたが、比較的新しいテーマのようで全く情報がありません。とはいえそのままだと寂しいのでいろいろなサイトを見ながら、自分好みの見え方に変更しています。全くの初心者なので正しいかどうか分からないので、メモ的に変更したところを記録しています。
Twenty Fourteen: スタイルシート (style.css)を出来るだけ更新したところが分かるように変更していっています。
WordPressの純性プラグインJetPackを使用すると、子テーマのようにCSSをいじることができます。
慣れてくると子テーマを用意したほうがいいと思いますが、子テーマがいまだによく分かりません。
記事のタイトル6.2 Entry Header
記事のタイトルは無駄に大きいのとどれがタイトルかわからないのでわかりやすいように変更したい。
style.cssの* 6.2 Entry Headerのところを変更します。
.entry-title {
font-size: 33px;
font-weight: 300;
line-height: 1.0909090909;
margin-bottom: 12px;
margin: 0 0 12px 0;
text-transform: uppercase;
}
ここでcolor:を変更してもそのまま見えなかったので、この下のcolor:も変更しました。
.entry-title a {
color: #2b2b2b;
}
見出しHタグ* 6.4 Entry Content
Hタグについても字が大きくなるだけなので、他のサイトでもやっているように横棒とアンダーバーを入れたい
style.cssの* 6.4 Entry Contentのところを変更します。
.entry-content h2:first-child,を
.entry-content h2:first-child,として後ろに以下のものを付け加えて自分の好きなように変更します。
{
font-size: 14px;
border-left: ４px solid #000000;/*文字の左横の線*/
border-bottom:solid 2px #000000;/*文字の下に点線*/
width:600px;/*横幅*/
line-height: 27px;/*高さ*/
padding-left: 5px;/*左のスペース*/
color:#000000; /*文字色*/
margin-top: 40px;/*上のスペース*/
}
記事の幅* 6.0 Content
記事の幅が474と狭いので少し広くしたい。
style.cssの* 6.0 Contentのところを変更します。
.page-content {
/* margin: 0 auto; */
max-width: 600px; /* 474 */
記事の横幅は専用のプラグインを使うほうがわかりやすいです。
Fourteen Extendedを使っています。
引用blockquote * 1.0 Reset
枠と背景の色を変えたい。
blockquote {
color: #767676;
font-size: 19px;
font-style: italic;
font-weight: 300;
line-height: 1.2631578947;
margin-bottom: 24px;
}
Featured Contentの文字* 9.0 Featured Content
記事のタイトルのスタイルを引き継いでいるので、Featured Content部分の文字を変更したい。
.featured-content .entry-title {
font-size: 18px;
font-weight: 300;
line-height: 1.3333333333;
margin: 0;
text-transform: uppercase;