当サイトでは広告表示される場合があります。

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

Tommy

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

Tommy

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

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

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

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

WordPressに限らずブログでは、

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

を編集することで…

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

Tommy

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

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

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

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

そこで今回、

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

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

2022年時点で予期していた円安対策にも!

HTML・CSSとは?

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

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

カンタンに説明すると…

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

扱っている言語です。

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

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

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

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

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

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

とみぃ

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

CSSの編集・追加場所

では、CSSの追加場所は?

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

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

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

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

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

Webサイトでの検証方法

さらに、Webサイト上で…

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

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

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

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

とみぃ

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

オススメの勉強方法

ところで、

Tommy

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

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

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

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

を挙げておきます。

その理由は、

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

からです。

とみぃ

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

こちらの本もオススメ!

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

ときどき、

Tommy

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

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

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

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

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

よくあります。

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

とみぃ

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

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

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

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

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

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

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

なぜか?

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

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

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

でも今は違います。

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

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

とみぃ

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

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

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

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

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

もちろん質問可能です!

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

とみぃ

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

つぎに繋がる記事はコチラ!

フリーランスの強い味方!

  • 与信審査:不要。
  • 利用金額:上限なし。
  • 初期費用・年会費:無料。
  • ポイント還元:1〜3%+α。
  • 関連サービスとのリアルタイム連携可能。

キャッシュレスによる業務効率化を推進!

この記事を、同じく悩んでいる人へシェアしよう!
ABOUT US
とみぃAIアーティスト
・27歳、男性、フリーランス塾講師。
・保有資格:4つ、電子書籍:3冊出版。
・投資:米国株、高配当株、暗号資産。サイドFIREを目指す。
・座右の銘:勇気は一瞬、後悔は一生。昨日より1mmでも先へ。
・所属:静岡東部ボードゲーム会、リベシティ。
・おもに「ブログ × SNS」の継続ノウハウ、フリーランス情報について発信中!