直接テーマを編集せずにワードプレスでCSSをコピペする手順はこちら

追加CSS カスタマイズ
おかぴー

こんにちは、WEBデザイナーのおかぴーです。

 

今回はブログ初心者の方にもわかりやすいように、CSSをカスタマイズするためにワードプレスのどこを操作すればいいのかを解説していきたいと思います。

このブログでご紹介しているカスタマイズの作業も、こちらを使って基本的に編集をしてください。

 

ワードプレスには様々なテーマがあり、個性豊かなブログを作ることができるのが魅力の一つですが、より自分なりのデザインにしたいと思った場合、CSSというブログをデザインするコードをワードプレス内で編集する必要があります。

その方法は主に2つ。

 

①テーマそのものに専用の編集スペースがある

②プラグインを使い、編集スペースを作る

 

あなたのお使いのテーマによって異なりますが、最近のテーマなら①のスペースをもともと持ってることが多いのでそちらを使います。②のプラグインは専用のスペースがないテーマを使っている場合に使用します。

これらを利用するメリットは、直接テーマをいじることなくCSSを編集できて元データを上書きしないため、簡単に元に戻せることです。

それでは、さっそく見ていきましょう!

 


テーマそのものに専用の編集スペースがある

まずはじめに、あなたのお使いのテーマにこの機能がないか確認してください。

場所は、「外観>カスタマイズ>追加CSS」

 

この追加CSSのスペースが出てきたら、以後カスタマイズしたいCSSをこちらに書いていきましょう。

プレビュー機能も付いているため、毎回保存して更新することなく確認できるのが楽ですね。

さらに、左下のアイコン3つ(パソコン・タブレット・スマホ)をクリックすると、見るデバイスごとにどのように表示されるかまで確認可能です。

 

僕が現在ブログで利用している「STORK」のテーマにもこの機能があります。

 

ということで、この機能があるテーマを使っている場合はここにカスタマイズしたいCSSを書いてください。

ただし、親テーマを利用している方は、必ず子テーマで操作をするようにしてください。理由は、親テーマで編集したものは、テーマのバージョンアップなどにより上書きされ消えてしまうためです。

もし子テーマを利用していない場合は、子テーマを作成してから行ってくださいね。

 

 

プラグインを利用する場合

①のデフォルト機能がない場合です。

ほとんどのテーマで利用ができると思います。
そのプラグインの名前は、Simple Custom CSS

では、インストール方法をご紹介します。

 

①左側のプラグイン>新規追加へ
②右上の検索スペースに「Simple Custom CSS」と入力(大文字・小文字・スペースによってうまく出てこないときがあるので、表記の通りに入力しましょう)
③「今すぐインストール」をクリック
④「有効化する」というボタンに変わるのでクリック。

ここまで終わると、下のように「外観>カスタムCSS」という項目が増えているはずなので、このスペースにCSSを書いていってください^^

保存するときは「カスタムCSSを更新」ボタンをクリックすればOKです。

 

 

まとめ

以上が、直接テーマを編集せずにワードプレスでCSSをカスタマイズする方法でした。

テーマごとに異なりますので、お使いのテーマに合った方をご利用ください。

ブログ作り、何から始めたらいいか迷っている人へ

WordPressの設定、記事作り、収益化も・・・ブログと一言で言ってもやることいっぱい、どれから手をつけたらいいか分からない・・・

実は、デザインを整えるのも、ブログの方向性が決まってから進めるのがおすすめ!

一度自分のブログを俯瞰して(全体を上から見る)どんな方向性にすればいいかを見直す機会を作ることの重要性を解説。

同時に、あなたのブログ作りを加速させる「リサーチ」「ターゲット理解」「考える力」を鍛えよう!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください