>ブログの始め方ワードプレスの追加CSSでデザインをカスタマイズ〜子テーマでしか出来ないこともあるよ2019年5月31日ブログやサイトのデザインで困ったことはありませんか?ちゃんブロ工房の管理人「ちゃん」(@cyan_customizer)です。賢威カスタム屋と名乗っているので、日々CSSを触ってワードプレス(wordpress)のデザインをカスタマイズしています。id=12]絶対じゃないけど、CSSをイジることが出来れば、好みのデザインやポイントが目立つように変更することも出来ますよ。Sheets(カスケーディング・スタイル・シート)」のそれぞれの頭文字を取って略した言葉です。長ったらしい名前で言う人はまずいないので、CSS(シーエスエス)と言葉は覚えとけばいいですよ。CSSは必ず必要なスキルでは無くて、今のワードプレスの有料テーマや無料テーマで有名な「Cocoon(コクーン)」を使えば、CSSを覚えなくてもキレイなブログやサイトは出来ます。id=653]有名なテーマをそのまま使うと、同じテーマの場合はデザインが同じになってしまうので、少し個性が出しにくいことになります。ブログの個性を出す1つの方法として、CSSで「文字の大きさ」「見出しの色」「写真の位置」など、様々なカスタマイズが出来ます。「CSSをイジるのは難しそうでコワイ」と感じるブロガーさんも多いですが、CSSについて詳しく書いているサイトも非常に多いので、参考にされることをおすすめします。ワードプレスには、CSSをカスタマイズする方法に「追加CSS」「子テーマ」「親テーマ」があります。追加CSSは初心者におすすめ追加CSSでデザインをカスタマイズするのは、初めてブログを運営される人に非常におすすめです。初心者におすすめするのかポイントを抑えて解説していきます。id=653]追加CSSを探される方もいますが、ワードプレスの基本機能「カスタマイズ」から追加CSSを触ることが出来ます。カスタマイズ」を選択すると、下の画像のようにカスタマイズ機能が使えるページに移行します。賢威では多くのカスタマイズ機能がありますが、その中の1つに追加CSSがあります。基本的なカスタマイズ機能一覧サイト基本情報メニューウィジェット固定フロントページ追加CSS私が利用している賢威のように、多くのカスタマイズ機能があれば、見出し(hタグ)などの簡単な色の変更などは出来ますが、専門的なカスタマイズは追加CSSから行います。追加CSSのメリット追加CSSが初心者におすすめだと言えるメリットがあります。メリットワードプレスインストール後、すぐに利用できるスタイルシートを直接イジらないプレビュー機能を見ながらカスタマイズできるテーマのアップデートに左右されない追加CSSを利用するには、ワードプレスのバージョン4.7以上に限られるので、最新版にアップデートしましょう。ワードプレスの機能だからすぐに利用できる追加CSSはワードプレス標準機能なので、テーマごとに利用できないことはありません。別にCSSファイルをアップロードするようなこともないので、ワードプレスを初めて触る初心者でも迷わずCSSをイジることが出来ます。「CSSなんて分からない」と思うかもしれませんが、初めは下の簡単なCSSを試してみてください。/*hタグの文字の色*/}簡単なCSSを記述するだけでも、ガラッとサイトの印象が変わるので、触りやすい追加CSSはおすすめです。追加CSS以外でデザインをカスタマイズする場合、親テーマや子テーマのテーマごとにある「スタイルシート」に、直接コードを記入してデザインを変更します。あるスタイルシートのphpファイルは「style.php」です。賢威8のスタイルシートは「base.php」なのですが、賢威のテーマによってファイル名は変わります。style.phpにはデザインの重要なコードが書かれているので、追加CSSを利用すれば消してしまう心配はありません。追加CSSで保存したとしても、スタイルシートのコードを上書きすることもないので、削除されることはありません。プレビュー機能を見ながらカスタマイズ出来る追加CSSのページでデザインをカスタマイズすると、隣の画面に表示されているページのデザインが、同時に変更されるようになっています。スタイルシートに直接書き込む場合は、CSSを保存してから実際のページに切り替えて確認し、もしデザインが思い通り進んでいなければ、再度スタイルシートに戻ってカスタマイズします。id=12]少し面倒に思う人もいるはずですね。id=653]テーマをアップデートしても追加CSSは消えないwordpressテーマの無料や有料に限らず、不具合や品質向上のためにアップデートが行われます。親テーマのスタイルシートに直接書き込んでいるCSSは、アップデートを行うと消えてしまうので、1からカスタマイズする必要があります。追加CSSであれば、スタイルシートに書くわけではなく、別の場所のデータベースに保存されるので、同じテーマのアップデートを行っても、CSSはそのままなので、デザインが変わってしまう心配はありません。追加CSSにもデメリットはある追加CSSはメリットがほとんどなので、初心者は迷わず利用すべきCSSカスタマイズですが、おすすめできないデメリットもいくつかあります。id=12]何か重大なデメリットのようですが心配ですね。id=653]保存できないこともある追加CSSは「公開ボタン」を押すと、保存できてCSSが実際に反映されるようになります。公開ボタンを押しても「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」と曖昧な言葉が出てきて保存できないことがたまにあります。追加CSSが保存出来ないパターンコメントアウトを記入しているサーバーのセキュリティ設定の問題テーマを変更すると反映されなくなるコメントアウトとは、簡単なCSSのソースコードを書いたところでも出てきた「/*コメントを書く部分*/」で囲った部分のことを言います。/*文字色を「赤」から「白」変更*/}上のように補足コメントを入れていれば、「どのようにCSSを変更した」「何が変更できる記述」というのが一目で分かります。初心者の方がコメントアウトを利用したほうが良いのですが、追加CSSでは保存できないケースが多いです。あと、サーバーのセキュリティ「WAF設定」の影響で保存できないケースもあるので、その場合はWAF設定をその時だけ「OFF」に切り替える必要があります。googleが推奨していない追加CSSは、style.cssのように外部ファイルでは無くて、HTMLに直接CSSコードを記入するようになっています。HTMLに書き込むことは、ページの読み込み速度としては早くなるのですが、googleは推奨していない方法になります。googleは「HTML」「CSS」「JavaScript」をすべて別に記述するように推奨していますが、出来ていなからと言って表示されないことはありません。テーマ変更でCSSが反映されない賢威からjinやSANGOなどの親テーマをガッツリ変更すれば、今まで書いたCSSは反映されなくなります。同じテーマの中でも途中で「親テーマ」から「子テーマ」に変更すると、追加CSSに書かれているカスタマイズでも反映されなくなります。同じテーマだから安心していると、変更した時に焦ってしまう方も多いでしょう。追加CSSはデータベースに保存されているので、元の親テーマに戻せばCSSは元通り反映されます。対応策は、追加CSSに書かれたカスタマイズはコピーして、子テーマに変更した時に新たな追加CSSにペーストするようにしてください。追加CSSに慣れたら子テーマを利用しよう最近の有料無料に関わらず、ワードプレスのテーマは「子テーマ」を用意しているのがほとんどです。追加CSSの機能が実装される前は、子テーマのスタイルシートを直接カスタマイズしていました。追加CSSでは、大規模(300行以上)のCSSカスタマイズを行うと上手く反映されないこともあり、思い通りにデザインが出来ません。子テーマのスタイルシートであれば、多くのカスタマイズにも対応出来て、コメントアウトの記述も可能です。直接スタイルシートを触ることになりますが、子テーマは白紙の状態から始まるので、追加CSSと同様に、親テーマに書かれているCSSを消すことはありません。追加CSSより子テーマの有利なメリット大規模のCSSカスタマイズが出来るメリット以外にも、子テーマを利用するメリットはCSS以外のファイルもカスタマイズ出来ることです。id=653]「header.php」「footer.php」のPHPファイルやJavaScriptファイルなど、子テーマに作ることでいらない部分の削除や追加を簡単カスタム出来ます。「コンテンツの上部にSNSボタンを追加したい」「広告を指定の場所に入れたい」などがあります。有料テーマなどであれば、PHPファイルをカスタマイズしなくても大丈夫なこともありますが、テーマによってはPHPファイルを直接カスタマイズする必要があります。子テーマのデメリットCSSカスタマイズに慣れてしまえばデメリットではありませんが、プレビュー機能が無いので、保存してからでないと、実際のデザインの反映が分からないことです。CSSに慣れると、どのような記述をすればデザインが変わることが分かるので、あまりプレビュー機能を必要としません。別タブを開いて作業して更新やキャッシュ削除を行えば、すぐにデザインの確認は出来るようになります。親テーマのカスタマイズは避けよう親テーマなので、すべてのファイルがすでに書かれている状態です。テーマエディター」に進めば、すべてのファイルをカスタマイズ出来ます。親テーマをカスタマイズしてしまうデメリットがあります。デメリットファイルを触り保存すると上書きされてしまうテーマをアップデートすると上書きされてしまう親テーマは元のファイルなので、どのファイルも直接カスタマイズすると、完全に上書きされて保存されます。変更でデザインが合わないと思えば、簡単に元通りに戻すことも出来ますが、元の記述を忘れてしまうほどカスタマイズしてしまうと、最悪元通りに出来ないケースもあります。ワードプレス外のファイルなどに、元の記述を残しておくようにして対処する必要もあります。あと、どのテーマでも不具合の修正などのバージョンアップはよくあり、アップデートする必要があります。親テーマ自体は変更していなくても、アップデートしてしまうとファイルはすべて上書きされるので、カスタマイズしたファイルは消えることになります。id=653]子テーマがない場合は、ワードプレスの標準機能の追加CSSを利用することをおすすめします。追加CSSでは満足できない場合は、子テーマがあるテーマに変更されたほうが良いですね。追加CSSでデザインをカスタマイズしたみた追加CSSはワードプレスを初めて使う初心者の人でも、簡単にデザインをカスタマイズできることは分かりましたね。それでもCSSを触ってカスタマイズするのは緊張すると思いますので、私が追加CSSを使った動画で「どのようにデザインが変わるのか」を見てみましょう。id=12]1番分かりやすい「h2タグの色」を変更した動画です。追加CSS」の手順で、カスタム画面に移動できます。https://cyan-blog.com/wp-content/uploads/2019/05/追加css_muxout.mp4画面の左側でcssコードを書くようになっていますので、変更したいデザインのコードを記述していきます。途中で「赤い×印」が出てきたりしましたが、記述に誤りがあればすぐに分かるようになっています。右側が説明したプレビュー画面になっており、コードの保存をしなくても記述が正しければ、上の動画のようにデザインが変更されるようになります。cssコードは保存していなので、サイトへの訪問者はデザインを変更しようとしているのは分かりません。追加CSSだけじゃない!子テーマでもデベロッパーツールを使えばプレビューしながらカスタマイズできる何度か出てきましたが、子テーマのスタイルシートでデザインをカスタマイズした場合、保存しなければデザインの変更は実際に見ることは出来ません。サイトへ訪問者がいるときにデザインが急に変更されると、訪問者もビックリしてしまって離脱される可能性もあります。子テーマでもデザインをプレビューしながらカスタマイズするには、各ブラウザの検証機能「デベロッパーツール」を使えば簡単に出来ます。id=12]有名なのはGoogleのブラウザ「Chrome(クローム)」ですね。id=653]カスタマイズしたいページ上で「右クリック操作」するとメニューが開くので、最下部にある「検証」をクリックするとデベロッパーツールがブラウザ上に現れます。デベロッパーツールを簡単に操作した動画です。https://cyan-blog.com/wp-content/uploads/2019/05/デベロッパーツール操作.mp4動画のように変更したいCSSを操作すると、画面上のデザインが変更されるようになっています。背景色も変更出来ます。デベロッパーツールでは保存は出来ないようになっているので、思い通りにCSSを変更出来れば、変更した部分を子テーマのスタイルシートにコピペすれば、デザインが実際に変更できるようになります。子テーマではなく追加CSSにコピペしても、同じようにデザインは変わります。追加CSSカスタマイズのまとめワードプレス初心者の方は、なるべく追加CSSでデザインをカスタマイズすることになれると良いです。私は追加CSSを使ったことがありませんが、プレビュー画面があるのは最大のメリットだと思います。そのうち「CSS以外のファイルもカスタマイズしたい」と考える可能性もあるので、なるべく早いうちに子テーマをインストールして適用させておく方が良いと思いますよ。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【Prism.js】wordpressのソースコードを一発でコピーするシンタックスハイライターの導入方法WordPressで5つのサイトを運営している「ちゃん」(@cyan_customizer)です。雨の日ブログ運営者ちゃんブログの更新情報をTwitterでチェックする2014年から副業アフィリエイター!金融系2つを中心に高単価サイトを5つ運営中!本業を辞めずに、SEOについて記事を書き続けています。