• メニュー
  • メニュー

【WordPressテーマカスタマイズ】初心者でもわかるcss編集方法(SiteOrigin CSS)

wordpressでサイトやブログを運営していると、表示を少し変えたい、文字を大きくしたい、ウィジェットの見出しを変えたい、など細かい要求が出てくると思います。

cssって何?という初心者でも分かるようにおすすめプラグインSiteOrigin CSSの使い方、CSS編集をして簡単にテーマ編集ができるように解説します。

ちょろっとここを変えたい!という場合に、CSSをちょろっと編集できるのって良いですよ。難しくないですのでトライしてみてくださいね^^


初心者向け WordPressテーマカスタマイズ方法について

ワードプレスのテーマの見栄えを変更する場合は、CSSというファイルを書き換えたり、追加する必要があります。

webサイトはHTMLという構造を書いたものと、CSSという装飾を書いたものが合わさってできています。

  • HTML → 家などの建物の基礎や鉄筋、木の構造など
  • CSS → 壁紙や床の色、外壁の色、屋根の色など

サイトの外観を変えるには、構造は変える必要ありません(HTMLの変更不必要)ので、家の壁紙を変えるようにCSSだけを編集します。

文字の大きさや背景の色、タイトルの文字色などを変更する方法を紹介します。


CSSを知らなくても、CSSを編集する方法

あなたのサイトの見栄えを変えるために、非常に便利な方法を説明します。

SiteOrigin CSSプラグインをインストールしよう

CSSのプラグインはいろいろありますが、【SiteOrigin CSS】というプラグインをおすすめします。

SiteOrigin CSS

ワードプレスの 「プラグイン」→ 「新規追加」でプラグインをインストールします。右上の検索窓にCSSと入力すると上位に表示されると思います。

CSS編集プラグイン SiteOrigin CSS

テーマをインストールし有効化すると、「外観」→「Custom CSS」が追加されているのでこれを選択します。

CSS編集プラグイン SiteOrigin CSS

SiteOrigin CSSの使い方

SiteOrigin CSSと表示され、下側に白い枠が表示されます。CSSを知っている場合や、コピペをする場合は、この白い枠の中に入力します。

CSS編集プラグイン SiteOrigin CSS

このプラグインの良いところは、使われているCSSのコードを予測変換のように表示してくれるところです。スペル間違いをしませんし、入力が楽ですよね。

また、コードが間違っていると左側にXマークが表示されカーソルを乗せるとどんなエラーか英語ですが教えてくれます。

要素の予測変換以外にも、CSSコードの予測変換もしてくれます。

CSS編集プラグイン SiteOrigin CSS

さて、この場合はある程度CSSを知っていないとわかりませんね?

ここからCSSコードを打ち込みしないで、CSS編集する方法をご紹介します。

白い大きなコード入力の枠の右上に、目のマークのアイコンがあるのでこちらをクリックします。

SiteOrigin CSSの使い方

すると、以下の画像のように、右側にサイトが表示され、左側にたくさんの設定メニューが表示されます。

左側の設定メニューはタブメニューになっています。

  • Text:文字装飾について変更できます
  • Decoration:背景画像や背景色、枠(ボーダー)などを変更できます
  • Layout:マージンやパディング、要素の高さや表示有無を変更できます

初心者の場合は、Text Color、Font Size、Line Height、Font Weight、Text Alignなどの変更が多いと思います。

直接数字を入力するか、+-をクリックして数字を変更します。

CSS編集プラグイン SiteOrigin CSS

右側のサイト上で、編集したい要素を選ぶと、下側に選択されている要素が表示されます。

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テーマのカスタマイズ方法

テーマエディターから編集する方法

こちらはWordpressに慣れて、phpファイルやstyle.cssなどが分かっている人向けになります。とは言っても難しくはありませんので、ゆくゆくはこちらからも編集できるようになると良いと思います。

ワードプレスのメニューから「外観」→「テーマエディター」を選択します。

デフォルトのCSSの編集方法

注意!と表示されて、テーマを直接編集しますよ~!大丈夫ですかー?と聞かれるので「理解しました」を選択します。

デフォルトのCSSの編集方法

右側に、このテーマで使われているファイルのリストが表示されるので、スタイルシートと書かれているファイル、たいていstyle.cssになりますので、これを選びます。

ワードプレスのStyle.cssの編集方法

テーマを直接編集する場合は、絶対に子テーマを作ったほうがよいです。もしも、表示が崩れたり、元に戻そうと思ったら、テーマを親テーマに戻すだけで元通りです。

子テーマって何!?という場合はこちらの記事を読んでみてください。

【知っとくべき】 ワードプレスの子テーマとは?作り方や編集方法は意外と難しくない!

   

有益情報も流しているのでツイッターもぜひフォローお願いします。


                   
参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です