Twenty Fourteen ヘッダーとフッターの背景色を変えてみた

2018年5月11日追記
ヘッダー、フッターは現在の背景色とは違っています。
2016年2月は以下の設定でした。m(__)m

20160305pclofe表示画面のソースを見るところから始めて、背景色と関係していると思われるクラスを探し出し(と言っても、確信は持てませんけれど)恐る恐る子テーマのstyle.cssに下の通り書き込みました。

/*ヘッダーとフッターの背景色*/
.site-header,
.site-footer{
background:#dc6000;
}

上手く行ったように見えます。メインナビゲーションとフッター部分の背景色が濃い青レンガ色に変わりました。(フッターは後にメインサイドバーと同じ色にしました。)

スマートフォンでも確認してみました。

ヘッダーのタイトルの部分と、フッターの部分は変化していましたが、右端のボタンは黒いままです?←その後調整、現在は画像の通り。
でも、その前に左サイドのプライマリーサイドバーの背景色を何とかしなければ・・・・・・・←これも、今は濃紺に設定しています。
子テーマのCSSをさわっていますが、ああしたりこうしたりと行きつ戻りつなので、完成したらまとめてサイト情報のページを作成したいと思っています。

TwentyFourteenの子テーマ作成へ

このサイトのテーマをTwentyTwelveからTwentyFourteenに変更して以来数日間、子テーマを作成してカスタマイズしようか、それともダッシュボードからの基本的なカスタマイズまでで妥協しようかと悩み続けました。

cssの知識も怪しい段階で、あちこち触ってサイトごと崩壊してしまうことを恐れたからです。

しかし、このサイトはもともと実験室的なものなので、もし致命的なことが起きても誰に迷惑かけるわけでもなし・・・・・・

そう思うと急に元気が出て、子テーマを作成して少しだけカスタマイズしてみようと思いました。

まず気になったのは、記事のコンテンツの幅が狭いということ。
デフォルトでは474pxしかありません。これでは両端の余白が広すぎるし、各記事のタイトルが少し長いだけで2行になってしまいます。

さっそく、子テーマのstyle.cssで、下のように設定してみました。

.page-content {
margin: 0 auto;
max-width: 640px;
}

474pxを640pxに変更しただけですが、私が見た限りでは上手くいったように見えます・・・・・・・

ここで訂正します。m(__)m
.page-content の修正だけでは、ダメでした。
現在の設定は、下の通りです。

/*コンテントの幅を広く設定する*/
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
 margin: 0 auto;
 max-width: 650px;
}

スマートフォン画面でも確認してみましたが、今のところ特に不都合はなさそうです。

少し勇気が出てきて、更にと考えています。

そのほか、footer.phpで著作権を表示するようにしました。

ほんとは基本色のブラックを濃紺辺りに替えてみたいと思いますが、いっかしょだけの変更ではできそうもなく、ただいま苦戦中です。

TwentyFourteenの子テーマ作成は今始まったばかりです。

 

 

Twenty Fourteenのアイキャッチ画像

昨日、テーマをTwenty Fourteenに変更したところ、あちこち不都合なことが起こったりして、手直し中です。

それにしても、Twenty Fourteenのアイキャッチ画像は少し変わっていると思います。

そこで、シフォンケーキの各ページに同じアイキャッチ画像を設定してみました。
各ページのタイトルを囲むように表示されているグリーンの画像です。

↑シフォンケーキ各ページの合いキャッチ画像は削除しました。

これまでアイキャッチ画像を利用する意味がわからなかったのですが、ここではシフォンケーキ関連のページに統一感を出せるかなぁと思ったりしています。