ワードプレスでCSSの追加ってどうやるの?コピペ場所と手順を解説するよ!

ワードプレスでCSSの追加ってどうやるの?コピペ場所と手順を解説するよ!

この記事では、

わたや顔アイコン;
わたや

ワードプレスでCSSってどこに貼り付ければいいの?

CSSは”コピペするだけ”って言うけど、使い方がわからないよ…

と困っている人に向けて、サイトにCSSを反映させる簡単な手順を紹介します。

 

猫顔アイコン
バロ山

「追加CSS」の機能とプラグイン「AddQuicktag」を使うよ

CSSって何?

CSSはスタイルシートのことです。

HTMLがサイトを構成する言語であるのに対して、対してCSSはデザインやレイアウトを決める言語。

「HTMLをどんな見た目で表示するか」の指示がCSSです。

CSSを使うと、文字装飾や見出しをかっこいいデザインする、テキストボックスの色を変えるなどのカスタマイズが可能となります。

簡単!ワードプレスの機能「追加CSS」を使う

さて、ワードプレスのブログでCSSを使う方法を説明していきましょう。

ワードプレスには、「追加CSS」という機能があります。

追加CSSを使うと、プレビュー画面で表示を確認しながらデザインを変更できるので非常に便利です。

「追加CSS]の場所

「追加CSS」は、「外観」→「カスタマイズ」→「追加CSS」の順でクリックすればたどり着けます。

ワードプレス 追加CSSの場所

ワードプレス 追加CSS

ワードプレス 追加CSS 内容

「ワードプレスでCSSを追加する」ときは、この「追加CSS」にペーストすればOKです。

CSSは常に1番下に追加していきましょう。CSSは下にあるほど優先順位が高くなります。

同じ部分への指示が複数あった場合には下にある指示の方が優先されるので、貼り付ける位置は重要です。

スタイルシートに追加しても

「追加CSS」の機能を使わずにスタイルシートに追加する場合は「外観」→「テーマエディター」→「スタイルシート(style.css)」の順でクリック。

親テーマに追加すると、テーマの更新があるとカスタマイズした項目が消えてしまうので注意しましょう。

ライオンメディアのスタイルシート

当サイトは「LION MEDIA」という無料テーマを使っています。
画像では「編集するテーマ」が、親テーマの「LION MEDIA」になっているのがわかりますね。

このままCSSを追加すると、更新があれば慈悲なく無に帰すため、必ず「子テーマ」に追加しましょう。

ライオンメディアスタイルシート 子テーマ

子テーマのスタイルシートに追加していけば、テーマの更新があっても大丈夫。

ただし、スタイルシートに追加するときはプレビューを見られないので、いちいち表示を確認する必要があります。

CSSを使うならプラグイン「AddQuicktag」で楽しよう

CSSを見た目に反映するには、本文中にタグを入力しなければなりません。

よく使うタグをいちいちペーストするのは面倒。

そこでプラグイン「AddQuicktag」の出番です。

「AddQuicktag」は、長いタグもボタン1つで入力できる便利なプラグインなのです。

 

猫の顔アイコン
バロ山

スマホの「辞書登録」機能のようなプラグインだよ

AddQuicktagでボックスのCSSをポチッと入力

今回は、人気のワードプレステーマ「SANGO」を制作されているサルワカさんの、

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30」からボックスデザインのCSSをお借りして追加CSSに追加しておきました。

記事でCSSを使うには

<div class=”box30″>
<div class=”box-title”>ここにタイトル</div>
<p>ここに文章</p>
</div>

のタグをテキストモードで記入すれば良いのですが、これをAddQuicktagを使ってボタン一つでできるようにします。

AddQuicktagの設定〜CSSの反映

「プラグイン」→「インストール済みプラグイン」→「AddQuicktag」→「設定」

ワードプレス misakiwn@gmail.comクイックタグの設定

開始タグと終了タグ」のところにタグを入力して

タグを反映させるビジュアルエディター、post、pageにチェックを入れます。

アドクイックタグの設定チェック

保存して投稿ページに戻ると

ワードプレスの編集画面

クイックタグのメニューにタグが追加されています。

後はタグを入れたいところでボタンを押せば

 

あわせて読みたい

ここに文章を入力

表示されたー!

こういった作業をしていると頭がごちゃごちゃしてきて、簡単なことも難しく感じてしまうことがあります。

でも、落ち着いて上から順にやっていけば難しくないので、ぜひ試してみてくださいね。

素敵なCSSをもらえる神サイト3つ

・サルワカ
あらゆることを「サルでもわかる」ほどわかりやすく解説している神サイト。

可愛い系デザインからクールなデザインまでCSSを豊富に紹介しています。

 

・webliker

スタイリッシュなCSSが豊富なサイト。

CSSやHTMLについての超わかりやすい解説記事もためになります。

web兄さんの口調に癒される!

 

・Maromaro blog

東京・府中のWEB制作会社Maromaroさんのブログ。
シンプル&おしゃれなCSSがたくさんあります。

企業サイトやちょっと固めのテーマにマッチしやすいと思います。

CSSコピペでのブログカスタマイズ、楽しすぎる

CSSでサイトをカスタマイズするの、すごく楽しくないですか?

素敵なCSSを配布しているサイトでタグをもらってくれば、ブログをおしゃれにカスタマイズできます。

これ、ハマると永遠にやってしまい、沼化するので注意です。

ブログを書かずにカスタマイズに時間をかけてばかりじゃいかんですね。(私のこと)

 

ゼロからのワードプレスカテゴリの最新記事