福島県で実践 コンテンツマーケティング

赤べこでもわかるマーケティング志向ブログ 1記事5分でサイト運営の基礎を抑えよう。

wordpress ホームページ

テンプレートのデザイン・レイアウトをCSSで変更しよう

2016/09/07

テーマテンプレートによっては、外観 > カスタマイズ にて、ベースカラーやロゴの指定などができる場合がありますが、主要の項目でない場合、カスタムCSS機能等で変更する必要があります。

しかし、CSSのクラス名等は、設定しているテンプレートにより、つける名称が違うため、それぞれ調査し、対応しなくてはなりません。

少しでも省力化するために、私が実施している方法をご紹介いたします。

※この記事はHTML・CSSの基本的な知識が必要です。

インターネットブラウザの準備(パソコン)

有名なブラウザソフトとして、Microsoft Internet ExplorerEdgeGoogle ChromeFirefox 等が挙げられます。

いずれのブラウザも「開発ツール」(開発者ツール・デベロッパーツールなど呼称の違いはあり)を備えており、ソースコードを確認する事ができますが、

Google Chromeでは、特定の行を選択し、ソースを見ることができるため、wordpressのカスタムCSS機能を利用するには最適です。

以下、Google Chromeの利用を前提にご案内させていただきますので、Google Chromeをダウンロード、インストールください。

プレビューの確認

ブラウザをインストールしたら、制作中の画面を表示します。

変更したい部分を選択し、マウスを右クリックするとメニューが表示されるので、「検証(I)」を選択します。

ブラウザの右に「デベロッパーツール」が表示されます。

「Elements」タブでは、ソースコード。「Styles」タブにはElementsで選択されたHTMLに適用されているCSSが表示されています。

複数のCSSが指示されている場合でも、適用されていないCSSには打消し線が引かれています。

どの指定を変更したいのか、確認しながらCSSのクラス名等をチェックしていきます。

現在のCSS指定の確認

ダッシュボード > 外観 > テーマの編集 を開き、編集するテーマを選択で現在有効化されているテーマが選択されているか確認します。(有効化されているテーマが最初に選択されます)

選択されていない場合は、テーマ名をドロップダウンメニューより選択し、「選択」ボタンを押します。

画面右のファイルリストに スタイル スタイルシート(style.css) が表示され、選択されていることを確認します。(選択されていない場合には選択して下さい)

編集画面内にCSSが表示されます。

変更したいCSSのクラス名等を検索し、選択・コピーします。

カスタムCSSの適用

JOSBORNE_ / Pixabay

上記、style.cssに編集を加えていくか、

Jetpackプラグインをインストールすることで、

ダッシュボード > 外観 > CSS編集 でも編集を行なえるようになります。(詳細は別記します。)

どちらかを開き、ペーストしていき、CSSの内容を追加変更します。

スタイルシートを保存ボタンを押して適用させます。

また、最近増えつつあるスマホにも対応した「レスポンシブデザイン」では、@media~にて、条件分岐が行われている可能性もあるため、記載の確認等してください。

レスポンシブデザインでのCSSの書き方は、テンプレートによって異なるため、上記CSSの確認にてよく確認してください。

テンプレートにより、カスタムCSS記述用のスペースが準備されていたりする場合があります。

その際は、そちらの記載スペースを利用してください。

プレビューの確認

変更されたCSSが適用されているか、プレビュー画面を更新(F5)して確認します。

更新されない場合、!importantにより改善される場合があります。

また、社内等のネットワークでファイヤーウォールが設置されている場合、以前のデータがキャッシュされていることがあります。

その際には、社内のネットワーク管理者にご相談ください。


 

テンプレートの内容は、作成者によって違うので、どうしても反映されない場合には、提供元のホームページやフォーラムを確認するか、問合せしてみてください。

-wordpress, ホームページ
-,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで赤べこマーケをフォローしよう!