本記事で解決できるお悩み
ブログをCSSでオシャレにしませんか？
この記事で紹介する「CSSの編集方法」を実践すると、プログラミング知識ゼロでも、WordPressでプロ並みなブログデザインを作ることができます。
そこで本記事では、プログラミング初心者向けに、WordPressでCSSを編集する方法を解説します。実際に僕は、Webデザインを3ヶ月で習得し、実案件を受注してました。
この記事を読むと、CSSスキルを身につけるメリット、WordPressでCSSを編集・設定し、プロ並みなブログデザインを作る方法を理解できます。
結論、CSSは必須ではありませんが、WordPressブログのデザインを独自に編集できるため、学ぶ価値は「大」ですよ。
安心してください、、、プログラミング知識は不要です。それに「有料テーマ」でもサクッとデザインすることも可能でして、Webデザインスキルは腐りませんよ。
ぜひ、本記事とともに学んでいきましょう。
＼WordPressブログの始め方／
WordPressブログを始めるなら、僕も愛用する「エックスサーバー」一択ですよ。
- 初期費用が無料
- ドメイン2つまで永久無料
- 国内シェア&サーバー速度No.1【hostadvice.com（2024年）】
たったの月額ワンコインで始められます。10分でブログデビューしましょう！
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
【執筆者】
【ミヤビ：当サイトの編集長】
- ブログ歴３年
- ブログ収益７ケタ達成
- ブロガー/デジタルノマド
ブログの構成要素とは？
Webページは「HTML」「CSS」というプログラミング言語で構成されてます。 厳密には「マークアップ言語」と呼びますが、機械が認識できる「コトバ」ですね。
- HTML =「骨組み」として、サイトの構造をカタチ作る
- CSS =「デザイン」として、サイトの装飾をカタチ作る
HTMLとCSSを習得すれば、カンタンなWebページなど、すぐ作れます。
な〜に、、、プログラミング知識はいりません。WordPressブログでは、骨格となる「HTML」は仕込まれており、チョロっとCSSを彩るだけのカンタンな作業です。
その他にも、サイトに動きをつける「JavaScript」やサーバーとのやりとりを行う「PHP」などもありますが、Webページの基本は「HTML」と「CSS」です。
HTMLとは？
HTML（Hyper Text Markup Language）とは、Webサイトの「骨組み」です。たとえば、ブログなどのWebサイトは、下記のようなHTML構造になってます。
WebサイトのHTML構造
- <header>〜</header>：ヘッダー
- <article>〜</article>：記事
- <aside>〜</aside>：サイドバー
- <footer>〜</footer>：フッター
このように、HTMLのブロック構造が基本でして、その周りにデザインとして「CSS」が肉付けされてるイメージです。
WordPressブログの運営では、HTMLの基礎を知っておくと何かと便利ですが、知識ゼロでも自然と身につくので、別に問題ありませんよ。
基本的に、ダグの最後に「</p>」や「</h2>」などの「終了タグ（『/』）」つけます。なお、閉じ忘れると、表示が崩れてバグるので注意してください。
CSSとは？
CSS（Cascading Style Sheets）」とは、Webページを「装飾」するプログラミング言語のこと。
こちらも厳密には「マークアップ言語」の一つですが、HTMLの骨組みにデザインを彩る機能があります。
HTMLに紐づいた要素を、指令を出すことで、自由にデザインできます。
WordPressブログを運営する場合、HTMLの知識がゼロでも、デザイン性の高いサイトを作れます。CSSを習得すれば、あなた好みのデザインをカスタマイズできますよ。
CSSの書き方とは？
ブログで必須な「H2見出し」のCSSを具体例で解説しますね。
例：CSSの書き方
h2 {
font-size: 18px;
color: #444;
background-color: white;
}
たとえば、上記のように書きまして、突然プログラミングっぽくなりましたが、1ミリもむずかしくありません。日本語で考えると、イメージしやすいですよ。
CSSを日本語に翻訳
すべてのH2見出しに対して {
フォントサイズを18pxに
フォントのカラーを「#444」に
背景色を「白」に
}
このようにCSSは、対応するHTMLの各要素に対し、デザインを装飾していくイメージでして、まるで「パズル」ですね。
応用：当サイトのH2見出し
それでは、当サイトの「H2見出し」のCSSの一部を解剖してみます。
当サイトの「H2見出し」におけるCSS
h2::before {
position: absolute;
content: ''!important;
width: 9px;
height: 100%;
background: #4865b2;
left: 0;
bottom: 0;
}
いきなり難易度が上がりましたね。
「::before」を「擬似要素」と言いまして、タグやクラスの前後に要素を追加できる構文です。当サイトでは、見出しの左側に青い縦線があり、擬似的にCSSを装飾してます。
とはいえ、こーいったCSSを覚える必要はありません。WordPress「テーマ」を購入すれば、デザインテンプレートから、色や大きさなどを変えるだけのカンタンな作業です。
ブログでCSSを編集できるメリット3つ
CSSを編集できるメリットは、下記のとおりです。
メリット①：独自性を出せる
CSSを編集できれば、競合サイトのデザインと差別化でき「独自性」を出せます。
- 見出しのデザインをよくしたい
- 箇条書きの枠を目立つようにしたい
- 文字のフォントやスタイルを変更したい
ブログを始めると、競合サイトとデザインが被りやすいデメリットがあります。
そのため、CSSの編集スキルがあれば、固定ファンがつきやすい「独自性」を発揮することができます。
メリット②：信頼性が上がる
やはり、ブログのデザインが美しいと、固定ファンがつきやすく、読者満足度も高まりますね。
個人的に、居心地の良いデザインは重要だと思います。文字だけだと「淡白だな〜」とマイナスな印象を与えてしまい、読みにくく、そして、読まれにくくなります。
たとえば本記事も、CSSを独自に編集してるからこそ、WordPress本来のデザインより、目に優しいデザイン設計になっております。
デザインが整ってるだけで、記事にメリハリがつき、安心して記事を読めるため、信頼性UPにつながりますよ。
メリット③：専門性が高まる
Webデザインを学ぶと、ブログに役立つ包括的なスキルが身につきます。こーいったスキルは、ジャンルによりけりですが、記事の「専門性」にも貢献します。
- HTML/CSS
- PHP
- WordPress
- JavaScript
- カラーデザイン
- レスポンシブデザイン
- サーバー関連の知識
おそらく「エンジニアやWebデザイナーを目指さないから関係なくね？」と思うかもですが、ブログ運営でガチ重宝しますね。
こーいったWeb知識は、記事ネタにもなるため、スキルを学んでおいて損ありませんよ。
ブログで使われてるCSSを調べる方法【3ステップ】
競合サイトのデザインを分析する場合、下記の手順をどうぞ。
※Webブラウザ「Google Chrome」を使った方法を解説します。ブラウザによって挙動が異なるため、まずは定番ブラウザをおすすめします。スマホ環境は「不可」です。
手順①：調べたい箇所を選択
カーソルで調べたい部分を選択します。
手順①：調べたい箇所を選択
たとえば、見出しのデザインを知りたければ、該当箇所にマウスを当て、長押しで選択すればOKです。
手順②：検証
続いて、そのまま右クリックから「検証」をクリックします。
手順②：検証
ソースコードを編集できるため、悪用厳禁ですが、数字データを改変することも可能。
参考
下記のコマンドでも起動できます！
：⌘ + Option + i
：F12
手順③：ソースコードの確認
すると、右側に怪しげな文字がビッシリと表示された「ソースコード」が表示されます。 よ〜く見てみると、、、上側に「HTML」が、下側に「CSS」を確認できますね。
手順③：ソースコードの確認
選択した箇所におけるHTMLコードに対応したCSSコードが表示されます。
上記をまとめると「調べたい箇所を選択して右クリック >「 検証」を実行すると、詳細なHTMLとCSSを調べられます。
よく使うので、覚えておきましょう！
WordPressブログでCSSを編集する方法2つ
WordPressブログでCSSを設定する方法です。
- 方法①：スタイルシートに記述する
- 方法②：WordPressのカスタマイズに記述する
安全な「方法②」がおすすめ！
方法①：スタイルシートに記述する
WordPressの管理画面 >「外観」>「テーマファイルエディタ」に進みください。
方法①：スタイルシートに記述する
テーマファイルでCSSを編集する場合、必ず「style.css」内に記述しましょう。他のファイル（たとえば、function.php）に記述すると、バグります。
しかし、スタイルシートに上書きするのは、初心者にとってキケンです。そこで「方法②」をおすすめします。
方法②：WordPressのカスタマイズに記述する
コチラの方法が推奨されてます。初心者さんでも、安心してCSSを編集できます。
方法②：WordPressのカスタマイズに記述する
WordPress管理画面 >「外観」>「カスタマイズ」>「追加CSS」より、独自にCSSを追加編集できます。
とはいえ、記述スペースが狭いため、あらかじめ、CSSコードを作成してからコピペすると良いかもです。
また、CSSの「コメント機能」も実装できまして「/*ここにコメントを記述*/」と入力すれば、CSSコードの「目印」になります。
ブログCSSを学べるおすすめ参考サイト2選
僕はCSSを独学しましたが、その際、参考になったWebサイトは下記のとおりです。
- その①：さるわか
- その②：Webクリエイターボックス
その①：さるわか
プログラミング初心者でも、Webデザインスキルを挫折することなく学べる「さるわか」がおすすめです。
HTMLとCSSの基礎を「1〜32のステップ・バイ・ステップ」で学べる構造になっており、1ヶ月もあれば、Webデザインの基礎を習得できます。
ぶっちゃけ、参考書籍は「不要」レベル。図解や動画でわかりやすく、僕自身も大変お世話になりました。
>> 参考：さるわか｜HTML&CSS入門 Webデザインをイチから学ぼう
その②：Webクリエイターボックス
もう少し、応用的なWebデザインを独学したいなら「Webクリエイターボックス」もおすすめです。
WordPressブログだけの範囲なら「さるわか」で十分ですが、将来的にWebデザイン関連の仕事を視野に入れてるなら、ぜひ参考になります。
僕自身は、オリジナルのLPサイトを作ったときに、大変お世話になりました。特に「少しのコードで実装可能なCSS小技集」はおすすめですね。
WordPressにCSSを追記する際の注意点3つ
CSSの取り扱いをミスると、ブログ運営に支障が出ます。
注意点①：CSSの記述ミス
CSSの記述をミスると、表示や動作がバグります。
- スペルミスをしてないか？
- 終了タグは抜けてないか？
- 全角ではなく半角入力か？
こーいった些細なことで、プログラミングはバグります。細かいですが、抜け目なくチェックしてください。
CSSの記載場所
CSSを記述する際は「方法②」を実践しましょう。というのも、プログラミング知識のない人が、WordPressのファイルを無闇にいじると、バグりやすいです。
CSSファイルではなく、PHPファイルなどを操作してしまうと、WordPress画面がホワイトアウトする可能性も考えられます。
そーすると、修正に消耗したり、時間を無駄にしてしまいます。
プログラミングが苦手でしたら、エンジニアに外注するのも、選択肢の一つして「アリ」ですね。僕の友人は、そのように対処してましたよ。
>> 関連：【簡単】WordPressにログインできない？考えられる10の原因と5つの対処法
注意点②：テーマとの干渉
WordPressのテーマを変更する際、記述したCSSテーマが反映されないことに注意してください。
たとえば、無料テーマ「Cocoon」で施したデザインを、有料テーマ「AFFINGER」に変更すると、対応クラス（classやid）が異なるため、CSSが反映されません。
そもそもテーマは頻繁に変えるものではないため、万が一のときに備え、頭の片隅に入れておきましょう。
注意点③：デザインに固執
ブログ記事を書かずにデザインにこだわる...のは「NG」ですよ。
- ここのデザインがちょっと気になるな〜
- どーやって、あのサイトみたいにするんだろう？
- ちゃんとCSSを記述したのに、なんかバグったんだけど...
僕もデザインにこだわり、相当な時間を失いました。当時の僕に、反省です。
もし、ブログのデザインにこだわりたいなら、サクッと「有料テーマ」を購入した方がコスパ良いですね。
1万円ほどかかりますが、時間をお金で買うことで、プロのデザインをサクッと再現できます。遠回りしたくない人は【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】をどうぞ。
-
-
【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】
続きを見る
CSSを学んでブログの可能性を広げよう
本記事では、ブログ運営で役立つCSSの編集方法を解説しました。
- HTML =「骨組み」として、サイトの構造をカタチ作る
- CSS =「デザイン」として、サイトの装飾をカタチ作る
Webページは上記から構成されており、CSSはサイトの「装飾」を担う重要な要素です。ブログでCSSを編集できると、見た目が華やかになり、競合サイトと差別化できます。
そしてブログが読まれるには、読みやすいデザインが大切です。新聞みたく、文字だらけの文章なんて、誰も読みたくないですからね...
さいごに、HTMLやCSSといったWebデザインスキルを効率的に身につける方法を紹介しますね。
最短でCSSを身につける方法
僕が「独学3か月」で習得したWebデザインスキルは、プログラミングスクールを使えば「たった1ヶ月」でコスパ良く習得できます。
今の時代、リモートでプログラミングやWebデザインスキルを学べまして、 HTMLやCSSはもちろん、即戦力として活躍できる実践的スキルを学べる環境はありがたい。
- TechAcademy：無料体験&相談、案件受注も可能！
- デイトラ：SNSで大評判！業界最安値の人気スクール
おすすめ定番は「TechAcademy」です。また、最近は「デイトラ」も人気でして、業界最安値でコスパ良くプログラミングスキルを習得できます。
その①：TechAcademy
受講後、案件受注できることで人気なプログラミングスクール。ブログと相性の良い学習コースは、下記のとおりです。
- WordPressコース
- Webデザインコース
- Webマーケティングコース
卒業で、ポートフォリオを提出します。
知識をインプットしつつアウトプットすることで、実践的スキルが身につきますよ。
その②：デイトラ
業界最安級、SNSでも人気なオンラインプログラミングスクール。ブログと相性の良い学習コースは、下記のとおりです。
- Web制作コース
- Webデザインコース
- Webマーケティングコース
Webフリーランス界隈で有名な「大滝昇平」さんが運営しており、日本初のShopify講座も立ち上げるなど、Web系フリーランスを目指す方にはおすすめです。
===
というわけで、今回は以上です。
CSSを身につければ、WordPressブログのデザインを自由に編集できます。また、副業・転職のチャンスも広がり、学んで損のない食いっぱぐれあるスキルです。
独学に不安な方は、ぜひ「無料体験」や「無料相談」から、行動の一歩を踏み出してみてください。
- TechAcademy：無料体験&相談、案件受注も可能！
- デイトラ：SNSで大評判！業界最安値の人気スクール
WordPressブログの始め方
-
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
最後までお付き合いありがとうございました。僕のTwitter（@ImperialMiyavi）もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます！
