WordPress超初級者から初級者になるためのお話【1か月前の私がCSSを適用するためにしたこと】

プログラム

この記事を読むと….

  • WordPressでのCSSの適用の仕方がわかります。
※注意※CSSがHTMLの修飾に使われている。くらいの知識がある人を対象としています。

まず私の自己紹介ですが、現在この記事を執筆時点でブログ開始から約1か月が経過しています。

仕事でC#は使用しているものの、HTMLやCSSなどはProgateで軽くお勉強しただけの全くの素人です。

世の中プロの作成者がゴロゴロいて、その方たちと同じレベルで作成するのは時間も知識も必要ですが、必要最低限の文字の色を変えたり、見出しを見やすくしたりするのは比較的簡単です。

それでは具体的なやり方について書いていきます。

  • WordPressでCustom CSSのプラグインを導入して有効にする
  • 記事の本文をカスタムHTMLで記述する。
  • 修飾したい箇所をCustom CSSで記述する

WordPressでCustom CSSのプラグインを導入して有効にする

超初級者の方にはプラグインってなんだ。って話だと思いますので実際の画面を見ながら解説していきます。

導入するプラグインを探す

まずWordPressの管理者でログインすると、左に項目が並んでいるはずです。

WordPress起動時の画面

この中の、プラグインを選択してください。

プラグインを選択すると、新規追加ボタンがあるのでこれを押します。

プラグイン選択後

新規追加ボタンを押すと、どのプラグインを追加するか検索する窓が出るので、

その窓にCustom CSS と打ち込みます。

検索窓

Custom CSS と打ち込むと、下のようなプラグインが発見できるはずです。

プラグインインストールと確認

発見できたら、今すぐインストールボタンを押してください。

Custom CSS

インストールと有効化ができているかは、最初のページを確認すればOKです。

導入確認

また、実際にCSSを記述するところは、投稿記事を開いて一番下をチェックしましょう。

こんな感じでCustom CSSの欄が追加されていれば使用できます。

記事の本文をカスタムHTMLで記述する。

デフォルトのブロックでは、デザインと呼ばれるそのままテキストを打ち込む形になっていますが、HTML形式で記述されたものをCSSで修飾するため、本文もHTML形式で記述する必要があります。

カスタムHTMLの出し方

まずはこのプラスマークを選択してください。

次に、カスタムHTMLを選択すると…

という感じでHTML形式での記述ができるようになりました。

あとはHTMLの知識がある方なら、pをつかったり、liを使ったりして自由に記述できます。

修飾したい箇所をCustom CSSで記述する

それでは実際にカスタムHTMLで記述した文を、CustomCSSで修飾していきましょう。

Custom CSSを使って文字色を変える

例えば下の”赤色にする”という一文を赤くする場合の手順ですが、

赤色にする

カスタムHTMLの記述は下記のように。

Custom CSSでの記述は下記のようになっています。

ほかにも、Font Awesomeのプラグインを使って見出しのh2を修飾する。などありますが、とりあえずはここまでにしておきます。

まとめ

書いている本人が最近覚えたことですので、間違いやもっと良いやり方などあるかもしれません。ただ、HTMLとCSSを少し勉強したのに、WOrdPressだとどう使ったらいいのかわからない。という方むけの導入にはなるのかなと思っています。

コメント

タイトルとURLをコピーしました