当サイトはWordPressで作っています。なので、テーマを変更すれば、見栄えが簡単に変えられます。先日のサーバ移行時にプラグインとGUIでできるカスタマイズだけでホームページを作ったので、着せ替え人形的に楽にテーマ変更できるはずなので、ちょっと変えてみました。
理想は、テーマ変更作業以外の作業が発生しないことですが、やってみたところ、そうはいきませんでした。もし戻すことになったら、同じ作業をしないといけないので、備忘録代わりに以下にまとめておきます。
ヘッダー画像の差し替え
テーマによってヘッダー画像の推奨サイズが違うので、サイズを合わせた画像を５枚用意しました。（クリックするごとにヘッダ画像が変わるため、1枚ではさびしいのです）
CSS修正
- タイトルのフォントサイズが本文よりも小さかったのが気になってしまい、追加CSSを使って変更しました。
- 会社案内ページにある会社の外観写真が新テーマとサイズが合っていないため、左に寄ってしまっていたので、センタリング。ヘッダー画像と一緒に画像サイズを合わせればよかったかと、後から気付きました。
- （投稿作成後、プレビュー時に気付いて追記）下記ソースコードがフォントカラーが黒くてさっぱり見えないので、変更しました。
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
color: #222;
font-size: 14px;
font-size: 1.625rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align:center
}
img {
max-width:100%;
display: block;
margin: 0 auto;
}
.wp-block-code, .wp-block-preformatted pre {
font-family: Menlo,Consolas,monaco,monospace;
font-size: 14px;
color: #fcb900;
}会社概要の表の設定を変更
会社概要に使っている表が1行おきに背景色が変わるように設定していたのですが、今回文字色が白くなったことで、背景が白い部分の文字が見えなくなってしまったため、背景色を無くしました。
フッターの再設定
フッタ―の設定は、テーマごとに保存されているのか、テーマを変えたら、消えてなくなったので、元のテーマからコピペしました。
Googleマップの大きさ変更
新テーマの横幅に合わせてGoogleマップのサイズを修正しました。（カスタムHTMLの中のwidthの部分）
以上です。結構ありました。テーマによって、ヘッダー画像や、カラムのサイズが異なるので、それに伴う画像の修正がほとんどですね。個人的にはCSSを全く理解していないので、CSSの修正は時間がかかりました。月1回ペースでテーマ変えていったら、その辺も多少理解できるようになりますかね？
最後になりましたが、1か所、気持ち悪いけど直していないところがあります！
メニューの右側の微妙な空白（赤い〇で囲ったところ）、何でしょうか？よくわからないのですが、時間も無いので今回は放置することにしました。
さらに最後に。
今回の投稿のプレビューを表示したら、フォントのカラーが黒くてCSSのソースが全くみえません。なので、カスタムCSSに追記です。繰り返しになりますが、CSSが分からないので、GoogleCromeの「検証」機能使って、必要なところを切り取って、カスタムCSSに追記です。なんで、これで反映されるのか、さっぱり分かりません。