このブログでは、テーマ「STORK19」を使用しています!

【初心者から中級者へ】WordPressブログを「カスタムCSS」で自分らしくアレンジしよう!

blank
blank
Tommy

有料テーマを導入して、かなりカッコよくなったけど…

blank
Tommy

もうちょっと、ここをこう できたらな。

ブログ運営に慣れてきた頃。

誰しもが思うことではないでしょうか?

まだ有料テーマを導入していない方へ!

blank

WordPressに限らずブログでは、

  • Cascading Style Sheets(CSS、カスケーディング・スタイルシート)

を編集することで…

自分の好きなように「カスタマイズ」できます。

blank
Tommy

でも、どうやるか分からない…

ぼくも以前までは そうでした。

しかし今は、いろいろと試しつつ…

独学で身につけ、解説できるくらいに なりました!

そこで今回、

  • CSSの編集・追加場所
  • Webサイトでの検証方法
  • 反映されないときの対処法

など、基礎的な部分を ご紹介いたします!



blank

HTML・CSSとは?

まずブログ記事は、おもに2つの言語。

「HTML」と「CSS」で構成されています。

カンタンに説明すると…

  • 前者は、基本的にWordのような「文字」のみを。
  • 後者は、それを見栄えよくする「デザイン」を。

扱っている言語です。

ところでブログテーマでは、HTMLを編集することは難しいです。

できるものもありますが…

基本的に作成者がロックをかけているためです。

しかしCSSであれば、編集することが。

正確には、追加することができます。

なんなら行いやすいよう、促してくれています。

blank
とみぃ

とくに有料テーマだと、視覚的に なっていますね!

CSSの編集・追加場所

では、CSSの追加場所は?

WordPress編集画面
  1. 外観/カスタマイズ/追加CSS
  2. 外観/テーマエディター/style.css

おもに2ヶ所、存在します。

しかし、前者のほうが「視覚的」に行なえます!

使用ブラウザにも よりますが…

入力した瞬間に反映されるからです。


Webサイトでの検証方法

さらに、Webサイト上で…

いじりながら、遊ぶ(学ぶ)こともできます。

自分のブログや好きなサイトを開いて、

  • 右クリック/検証
  • Ctrl+Shift+I

のどちらかを行うと、編集画面が現れます。

blank
とみぃ

ブログ記事の執筆よりも、こうやって いじっている時間のほうが長いかも?笑

オススメの勉強方法

ところで、

blank
Tommy

CSSのみならず、HTMLですら分からないんですけど…

という方も いることでしょう。

そこで、オススメの勉強法として、

  • Progate」の「HTML&CSS(初級編)」

を挙げておきます。

その理由は、

  • イラスト中心のスライドで学べる。
  • その場で すぐに実践できる。
  • 無料で利用できる。

からです。

blank
とみぃ

何も分からない状態から、今はスムーズに解けるようになってて嬉しかった!

こちらの本もオススメ!

反映されないときの対処法

ときどき、

blank
Tommy

CSSを変更したのに、なかなか反映されない!

なんてことが起こります。

この原因は、おそらく「キャッシュが残っている」から。

キャッシュ:訪問したWebページのデータを保存しておき、再訪した際にサクッと表示される仕組み。

それを消去するだけで反映されること。

よくあります。

ぜひメモしておきましょう!

blank
とみぃ

ちなみに、おすすめプラグインは「WP Fastest Cache」です!

やはりネット検索は最強!

以上、この記事の内容を3行で まとめると、

  1. ブログ記事を構成する言語は、おもにHTMLとCSS。
  2. 後者のみ追加でき、その流れや注意点を伝授!
  3. オススメの勉強法は「Progate」と、いじって遊ぶこと。

でしたが、いかがだったでしょうか?

ぼくも無知から ここまで来ました。

それも独学で、ほぼ無料で。

なぜか?

  • すべてネット検索すれば、情報が手に入るから。

ぼくは1度、ブログを挫折しています。

その頃は、こんなに恵まれていなかったから。

でも今は違います。

いろんなサイトやサービスがあります。

自分だけでも解決できるくらいの状況です。

blank
とみぃ

ぜひ調べまくって、お互いに成長し続けましょうね!

また、このブログでも「CSS」について取り上げています。

とくにボクも使用しているテーマ「STORK19」。

こちらに対応・優先しています。

また、Twitterでも情報発信しており…

もちろん質問可能です!

なので、一緒にガンバっていけたらいいな。

blank
blank
とみぃ

最後まで お読みいただき、ありがとうございました!

あなたにオススメの1冊を選びました!

この記事をシェアして、同じく悩んでいる人を助けよう!