WordPressでブログを初めて開設した時にぶつかる壁が「テーマのカスタマイズ」だと思います。
ブログを運営するのであれば、見た目を自分好みのデザインにしたいと思います。
カスタマイズには、様々な知識が必要なのではないかと考えてしまうかもしれませんが、基本的にはそこまで難しくはなく、「CSS」の知識さえあれば、ほとんどカスタマイズすることができます。
CSSの勉強は、CSS等の専門書に沿って理解を進めていくよりも、実際にブログをいじりながら自分が「どのようなデザインにしたいか？」ということを考え、そのために必要なコードを勉強して覚えていく方が、理解度も格段に上がるでしょう。
今回はカスタマイズに必要なCSSについてではなく、自分が編集したい箇所の探し方をご紹介します。
カスタマイズには子テーマを使用しましょう。
親テーマを使用すると、後々の不便が出てくるので、
カスタマイズをする場合は子テーマを使用しましょう。
子テーマについて「よくわからない」という方は、こちらの記事を参考にしてください。
https://plu-plu.net/%e3%80%90wordpress%e3%80%91%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%e3%82%92%e3%81%99%e3%82%8b%e3%81%a8%e3%81%8d%e3%81%af%e3%80%81%e5%ad%90%e3%83%86/
https://plu-plu.net/%e3%80%90wordpress%e3%80%91%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e5%b0%8e%e5%85%a5%e6%96%b9%e6%b3%95%e3%81%a8%e4%bd%bf%e3%81%84%e6%96%b9%e3%82%92%e8%a6%9a%e3%81%88%e3%81%a6%e3%82%ac%e3%83%b3/
id・classを特定すべし！
テーマをカスタマイズをするうえで、まず必要なのが、「id・class」を特定することです。
この「id・class」の特定する方法としては、
①テーマのファイルを確認して、1つずつidやclassを探す
②FirefoxやChrome等のブラウザに搭載されている機能を使用して探す
この2つくらいだと思いますが、①についてはとても大変で、つらい作業になってしまうので、おすすめできません。
そのため楽な方法が②の「FirefoxやChrome等のブラウザに搭載されている機能を使用して探す」という方法です。
それについては次でご紹介します。
使い方
idやclass名はブラウザから簡単に探すことができます。
今回は当サイトの記事タイトルを例にご説明します。
なお使用しているのはわかりやすいので、Chromeを使用しています。
まずは、カスタマイズをしたい箇所を右クリックします。
今回は記事タイトルである「夜のランニング中に感じる危険な自転車の行為TOP3！」というところを右クリックします。
するとダイアログが出てくるので、そこにある「検証」（Firefoxの場合は、「要素を調査」）をクリックします。
クリックする画像のように右側にサイトを構成しているコードが出てきます。
この出てきた箇所のグレーに色が変わっている部分が、右クリックした個所のコードです。
これでclass名がわかりました。
記事タイトルのclassは画像では見にくいですが、【entry-title】と表示されています。
これを基にカスタマイズしていきます。
実際にやってみる
classの調べ方が分かったので、実際にカスタマイズしてみましょう。
試しに記事タイトルの文字色を変更してみます。
先程調べたclassを使用します。
.entry-title{
color:blue;
}こんな感じになります・・
あ、あれ？
変わっていない・・・
そうなんです。
これでは足りない場合があるのです。
もしこのように変わらなかった場合は、id・classを確認する場所を変えてみましょう。
先程のように、classを確認するのですが、下のように赤で囲った箇所の下線の箇所にもclassが書かれています。
下線の箇所をクリックするとclassをコピーすることが出来ます。
下線のclassは【.entry-title, .post .entry-title】となっています。
これをそのままコピペしてカスタマイズします。
.entry-title,
.post .entry-title{
color:blue;
}
無事に記事タイトルが青くなりました。
まとめ
こんな感じで少しずつカスタマイズしていきます。
最初のうちは時間がかかるかもしれませんが、
慣れてくるとだんだんと手早くすることが出来るでしょう。
ただ先程のように、上手く変わらないことがあります。
めげずにやることも重要ですが、発想の転換も大切です。
そんな時は、ちょっと休んで次の日とかにやってみると、意外と解決することが出来ることもあります。
CSSのコードについてはネットでググれば出てくるので、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ！
私が使用したおすすめの本はこちらです。
コメント