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

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

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

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

みみこみみこ

「CSS」ってデザインを担うファイルを編集する時って、具体的にどこからどんな作業をする感じになるんでしょうか?

ちょっとイメージがつかなくて(・・?)

おかぴーおかぴー
そうですよね。
ブログに慣れている人なら、さくっと分かりますけど、最初は全く未知の領域ですよね。なので、今回はブログ初心者の方にもわかりやすいように、CSSをカスタマイズするためにワードプレスのどこを操作すればいいのかを解説していきたいと思います。

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

 

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

その方法は主に2つ。

 

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

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

 

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

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

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

 

目次

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

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

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

 

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

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

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

 

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

 

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

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

 

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

[sitecard subtitle=合わせて読みたい url=https://okap01.com/stork-child-theme-install target=]

 

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

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

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

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

 

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

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

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

 

まとめ

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

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

おまけ

ブログを作っていると、ふと

「見た目をもっとカッコよくしたい」「おしゃれでキレイな感じにしたい」っていう衝動が来ませんか?

みみこ

あるあるですね(笑)なんかしっくりこないなーとか、
でも、どう作っていいか操作も含めて分からないことがあります。

おかぴー

そんな時は、WEBデザインの勉強を少しだけでもいいので、
やってみるのもいいと思います^^

僕は見た目が納得がいくものが作れると、モチベーションが上がります。

よーし!また記事を書こうかな〜って思えるし、書いたものを見返して

「 はぁぁぁぁ〜(*´꒳`*)ウキウキ 」

ってなります(笑)

僕がこのブログを通して知り合った方は、みなさん自分のブログの見た目(デザイン性)とか、作り込み(WordPressの操作)に悩んでいる方が多かったです。

僕自身も初めはWordPressの管理画面からよく分からなくて、どこをいじったら何が変わるのか?もそうだし、

色を変えたり大きさ変えたり、基本的な内容でも何時間もかかったことがありました。

知り合った方のお悩みを聞いて改めて感じたことは、

そもそもWordPressでブログを作る=WEBデザインの知識が多少なり必要になるということです。

デザイン知識然り、コーディング知識しかり。。

でも、WEBデザインの勉強と言ってもその範囲はめちゃくちゃ広いし、ぶっちゃけ終わりはありません。

専門用語も多いし、だからと言って初心者の人が幅広く手を出して勉強するのも大変です。(ゴールを見失います)

それなら、

WEBデザイン初心者の人でも、モチベーションが爆上がりできるような必要範囲を絞ったブログ制作の教材があったらいいんじゃないか?と思ったんですが、どうでしょうか?(*^^*)

具体的には、こんな内容を盛り込む予定です↓

  • WEBデザインの知識を活かして魅力的なメインビジュアル(ブログのメイン画像・アイキャッチ画像)を楽しみながら作れるようになれる
  • カスタマイズが一定レベルでできるようになれる
  • パソコン自体の知識も身に付く
  • 程よい範囲のWEB知識がつくから、情報リテラシー(※)が高くなる
  • 登録してくれた方それぞれのお悩みに特化した、特別コンテンツを受け取れる

※情報リテラシー:世の中にあふれる多くの情報を、適切に活用できる能力

これから作っていくことになるのですが、

提供開始まで先行登録してくれた方には別途プレゼントもお送りしたいと考えています

最新の知識を受け取ることができますし、

登録してくれた方それぞれのお悩みに応じたコンテンツの提供ができることも、このLINEの一つの魅力かなと。

少しでも作れるよ〜って人にも、ためになる内容を盛り込む予定もあるので、興味がある方はLINE登録してもらえると嬉しいです^^

↓↓↓

チェックしてね
「お気軽にどうぞ〜」
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


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

目次