wordpressでサイトやブログを運営していると、表示を少し変えたい、文字を大きくしたい、ウィジェットの見出しを変えたい、など細かい要求が出てくると思います。
cssって何？という初心者でも分かるようにおすすめプラグインSiteOrigin CSSの使い方、CSS編集をして簡単にテーマ編集ができるように解説します。
ちょろっとここを変えたい！という場合に、CSSをちょろっと編集できるのって良いですよ。難しくないですのでトライしてみてくださいね^^
初心者向け WordPressテーマカスタマイズ方法について
ワードプレスのテーマの見栄えを変更する場合は、CSSというファイルを書き換えたり、追加する必要があります。
webサイトはHTMLという構造を書いたものと、CSSという装飾を書いたものが合わさってできています。
- HTML → 家などの建物の基礎や鉄筋、木の構造など
- CSS → 壁紙や床の色、外壁の色、屋根の色など
サイトの外観を変えるには、構造は変える必要ありません(HTMLの変更不必要)ので、家の壁紙を変えるようにCSSだけを編集します。
CSSを知らなくても、CSSを編集する方法
あなたのサイトの見栄えを変えるために、非常に便利な方法を説明します。
SiteOrigin CSSプラグインをインストールしよう
CSSのプラグインはいろいろありますが、【SiteOrigin CSS】というプラグインをおすすめします。
ワードプレスの 「プラグイン」→ 「新規追加」でプラグインをインストールします。右上の検索窓にCSSと入力すると上位に表示されると思います。
テーマをインストールし有効化すると、「外観」→「Custom CSS」が追加されているのでこれを選択します。
SiteOrigin CSSの使い方
SiteOrigin CSSと表示され、下側に白い枠が表示されます。CSSを知っている場合や、コピペをする場合は、この白い枠の中に入力します。
このプラグインの良いところは、使われているCSSのコードを予測変換のように表示してくれるところです。スペル間違いをしませんし、入力が楽ですよね。
また、コードが間違っていると左側にXマークが表示されカーソルを乗せるとどんなエラーか英語ですが教えてくれます。
要素の予測変換以外にも、CSSコードの予測変換もしてくれます。
さて、この場合はある程度CSSを知っていないとわかりませんね？
ここからCSSコードを打ち込みしないで、CSS編集する方法をご紹介します。
白い大きなコード入力の枠の右上に、目のマークのアイコンがあるのでこちらをクリックします。
すると、以下の画像のように、右側にサイトが表示され、左側にたくさんの設定メニューが表示されます。
左側の設定メニューはタブメニューになっています。
- Text：文字装飾について変更できます
- Decoration：背景画像や背景色、枠(ボーダー)などを変更できます
- Layout：マージンやパディング、要素の高さや表示有無を変更できます
初心者の場合は、Text Color、Font Size、Line Height、Font Weight、Text Alignなどの変更が多いと思います。
直接数字を入力するか、＋－をクリックして数字を変更します。
右側のサイト上で、編集したい要素を選ぶと、下側に選択されている要素が表示されます。
bodyから始まりpまで長い設定が表示されることがわかります。その下には、マージンなどのCSSが表示されます。また画像一番左側上にも選ばれてるHTMLの要素が表示されます。
このテーマはWordpressのデフォルトでインストールされているTwenty Sixteenの場合ですが、本文pを選んでも、font-sizeは表示されませんでした。
しかし、Font-Sizeで、＋ボタンか文字入力で18pxなどにしたら表示が変更されます。いろいろいじってみましょう！！
ビジュアルのほうで編集が終わったら、☑マーク(check)が左上にあるので、これをクリックして前の画面に戻ります。
ビジュアルで追加・編集したCSSコードが表示されているのが分かります。追加してから、ここで数字を編集することも可能です。
右上にある「Save CSS」をクリックして保存します。
保存しなければ、好きなようにCSSをいじくっても大丈夫です。どのように入力すれば変更されるのか勉強になるので、まずは触ってみましょう！！
プラグインを使わないでCSSを変更・追加する方法について
プラグインを使わないでCSSを編集する方法を説明します。
カスタマイズから編集する方法
ワードプレスのメニューから「外観」→「カスタマイズ」を選択します。
こちらがカスタマイズの画面になります。基本設定、メニュー設定などが可能です。
このメニューの一番下に「追加CSS」があるのでこちらを選択します。
「追加CSS」をクリックすると、下の画面になりますので、左下にある空欄にCSSを入力していきます。CSSコードを入力するとすぐに反映してくれる場合もありますが、反映してくれないものもあります。
テーマエディターから編集する方法
こちらはWordpressに慣れて、phpファイルやstyle.cssなどが分かっている人向けになります。とは言っても難しくはありませんので、ゆくゆくはこちらからも編集できるようになると良いと思います。
ワードプレスのメニューから「外観」→「テーマエディター」を選択します。
注意！と表示されて、テーマを直接編集しますよ～！大丈夫ですかー？と聞かれるので「理解しました」を選択します。
右側に、このテーマで使われているファイルのリストが表示されるので、スタイルシートと書かれているファイル、たいていstyle.cssになりますので、これを選びます。
テーマを直接編集する場合は、絶対に子テーマを作ったほうがよいです。もしも、表示が崩れたり、元に戻そうと思ったら、テーマを親テーマに戻すだけで元通りです。
子テーマって何！？という場合はこちらの記事を読んでみてください。
→ 【知っとくべき】 ワードプレスの子テーマとは?作り方や編集方法は意外と難しくない!
コメント・質問する