css wordpress

wordpressのテーマのcssを編集する方法。3分でマスターできます。

投稿日:

Pocket

うも、チャーさんです。

あなたはwordpressのテーマのcssを編集したいですか?

 

この記事では、あなたの好きなように、

wordpressのcssを編集する方法を説明してます。

 

 

なので、この記事をあなたが読むと、

あなたの好きなように、あなたのサイトの、

デザインを編集できるようになるでしょう。

 

ということで、あなたが、

wordpressのテーマのcssを編集したいなら、

このままスクロールして読んでみてください。

 

スポンサードサーチ

wordpressのテーマのcssを編集するためにやることは以下だけ

 

で、まず結論ですが、

wordpressのテーマのcssを編集するには、

以下をやりましょう。

 

 

デベロッパーツールを使って、

cssの変更内容を決め、

cssの記述箇所を見つけましょう。

 

次に、style.cssの変更箇所までいき、

cssをあなたがしたいデザインに編集しましょう。

 

 

上記です。

ですが、これだけだと簡潔すぎるので、

深掘りして説明します。

 

デベロッパーツールを使いましょう

 

wordpressのテーマのcssを編集して、

あなた好みにカスタマイズするには、

まずデベロッパーツールを開きましょう。

 

補足ですがデベロッパーツールとは、

サイトに適用されてるcssを編集して、

見た目を暫定的に変えることができるツールです。

 

 

なので、このデベロッパーツールで、

cssを編集してデザインを色々試し、

あなたが気に入るまでデザインをいじれます。

 

またデベロッパーツールでした変更は、

もう一度画面を読み込めば全部元に戻るので、

何も心配せずにデザインを編集できます。

 

 

で、このデベロッパーツールの開きかたですが、

簡単で右クリックを押したら検証というのがあるので、

そこをクリックしましょう。(Macの場合)

 

するとデベロッパーツールが立ち上がります。

 

で、デベロッパーツールの詳しい使い方ですが、

説明しだすと長くなるため、別記事書いたので、

そちらを参照ください。

 

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

 

で、そのデベロッパーツールを使い、

cssを編集したい部分を見つけ、編集内容が決定したら、

次に示す部分に注目しましょう。

 

ということで下の画像をご覧ください。

 

 

上記画像は僕のサイトでデベロッパーツールを、

開いた画面ですが、上記画像の右下を見てください、

cssが記述されてる部分がありますね。

 

そこのウィンドウに、

style.css?verから始まる文があり、

最後に:2664とありますね。

 

この数字は、テーマのstyle.cssにある、

#headboxというidをふった記述が書いてある、

箇所をさしています。

 

 

なので、例えばここを編集したければ、

wordpressのテーマの中にある、style.cssの

2664行目を見て記述を加えればいいというわけです。

 

このようにデベロッパーツールでは、

デザインで変更を加えたい部分が、

テーマのcssのどこに書いてあるか?

 

それが一発でわかるので、非常に便利です。

 

 

ちなみに記述の場所がわからないとwordpressの、

テーマのcssはうまく編集できません。

 

変更したつもりが違うとこのデザインが変わってた、

みたいなことが発生するので、デベロッパーツールは

活用しましょう。

 

 

テーマのcssを編集する方法

 

で、ここからは、テーマのcssを編集する、

方法について説明します。

 

デベロッパーツールで行った編集は、

保存されないので、今度は実際にテーマの、

cssファイルを編集してデザインを確定させましょう。

 

 

で、やり方ですが、管理画面から、

テーマの編集ページにいき、

cssを編集しましょう。

 

(*ftpを使ってる場合は、

ローカルでcssを編集して、

サーバーにアップするのでもokです。)

 

 

で、管理画面からテーマの編集ページにいく方法ですが、

 

wordpressダッシュボードの管理画面の左に

並んでるメニューの中の、

 

外観>テーマの編集をクリックしましょう。

 

 

で、編集するテーマというプルダウンがありますが、

これはあなたが今使ってるテーマでいきましょう。

 

そして、プルダウンの下には、

テーマの中身のファイルが並んでるので、

style.cssをクリックしましょう。

 

すると、style.cssのファイルが開き、

記述が隣のウィンドウに表示されます。

 

 

あとは、そこから、

さっきデベロッパーツールで見つけた、

記述の箇所までスクロールしましょう。

 

見つけたら、そこにあなたが行いたい、

cssの記述を加え、変更を保存しましょう。

 

するとwordpressのテーマのcssの編集は完了です。

 

 

以上をやれば、

あなたの好きなようにサイトのデザインを変えたり、

カスタマイズができます。

 

楽しいので、一度やってみるのおすすめですよ。

 

スポンサードサーチ

まとめ

 

wordpressのテーマのcssを編集する方法ですが、

 

デベロッパーツールを使って、

cssの変更内容を決め、

cssの記述箇所を見つけましょう。

 

次に、style.cssの変更箇所までいき、

cssをあなたがしたいデザインに編集しましょう。

 

 

以上です。

 

ちょっと慣れない作業かもですが、

すぐに慣れてできるようになり、

あなたはデザイン気分を味わえますよ。

 

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

 

 

-css, wordpress


スポンサードサーチ

関連記事

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

wordpressで現在表示ページのメニューにcurrentクラスをつける方法

どうも、チャーさんです。   あなたはwordpressのメニューにcurrentという、 クラス名を現在表示してるページのメニューにだけ、 つける方法を探していませんか?   こ …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

ドロップダウンメニューが動かない問題を解決した方法「wordpress」

  どうも、チャーさんです。   あなたはwordpressのドロップダウンメニューが、 動かないと悩んでいませんか?   この記事では、ドロップダウンメニューが、 ある …

no image

wordpressのメニューに関する情報をまとめました

どうも、チャーさんです。   この記事ではwordpressのメニューに関する情報 例えばメニュー追加方法や、階層化、カスタマイズなど、 必要な情報を網羅してまとめてみました。   …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。