WordPress初心者がホームページを作る~第7章~

シェアする

wordpress-logo

スポンサーリンク
サイドバー 広告336×280

第7章「カスタマイズ①子テーマスタイルシート」

いよいよカスタマイズを行っていきます。この第7章では、子テーマのスタイルシートにCSSを書き込んでのカスタマイズになります。スキルが低いので大した事は出来ませんが、第6章で書いた様にWordPress標準テーマと不動産プラグインの組み合わせの見た目が気に入らないので、それを改善したいと思います。参考サイトを元にカスタマイズしていますが、不動産プラグインの影響なのか反映されないものもありました。

カスタマイズ方法

第6章で作成した子テーマを使ってカスタマイズします。ダッシュボード⇒外観⇒テーマの編集で編集画面に入ります。入った時点で、Twenty Sixteen Child: スタイルシート (style.css)の編集画面になっていると思います。なっていなければ画面右側のスタイルシートをクリックすれば変更出来ます。

参考サイト
http://unofficialtokyo.com/2016/01/twenty-sixteen-customization/#i-11

ウィジェットの太い仕切り線を消し、タイトルにグレイの下線を引く

現状のウィジェットは太くて黒い仕切り線があり見た目が良くありません。それを消してタイトルに下線を引きます。合わせて微調整も行います。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

子テーマのスタイルシートに次のCSSをコピー&ペーストして下さい。

タイトルの下線の色はカラーコード(グレイは#a9a9a9)を変えれば変更出来ます。参考サイトで好きな色を選んで下さい。

色見本参考サイト
http://www.colordic.org/

投稿の下のページナビゲーション、スペース縮小してフォント小さく

お知らせ等の投稿ページ下部の前や次ページのナビゲーションのフォントやスペースを縮小します。PC画面ならまだいいですが、スマホやタブレット等の画面だとフォントが大きすぎて見た目が悪いです。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

子テーマのスタイルシートに次のCSSをコピー&ペーストして下さい。

全体のページナビゲーション、太い線と→部分を変更

太い線を細くし、→の黒塗りつぶしを無くして色を青に変更します。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

子テーマのスタイルシートに次のCSSをコピー&ペーストして下さい。

投稿ページ、ページ周囲の変更

投稿ページのカテゴリー上の線を消し、タイトルのフォントを小さくする。ページ周囲の黒枠は、カスタマイズ設定のページ背景色を白にすれば周囲も白に見えますが、PC画面との間に空間が出来た様になるので枠自体を消します。

カスタマイズ前

カスタマイズ前

カスタマイズ後

カスタマイズ後

ページ周囲の黒枠

周囲枠

子テーマのスタイルシートに次のCSSをコピー&ペーストして下さい。

タイトルの色を変更

タイトルの色が黒で目立たないので赤に変更。
タイトル

子テーマのスタイルシートに次のCSSをコピー&ペーストして下さい。

第7章「カスタマイズ①子テーマスタイルシート編」はこれで終了です。

スポンサーリンク
サイドバー 広告336×280

シェアする

フォローする

スポンサーリンク
サイドバー 広告336×280