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を 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

ファビコンをワードプレスに設定する方法「手順つき」

  どうも、チャーさんです。   あなたはファビコンをワードプレスに、 設定し表示させたいですか?   この記事では、ファビコンをワードプレスに、 設定させる方法を紹介し …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

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

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

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

wordpress popular postsでまだデータがありませんが解決し人気記事が表示された方法

どうも、チャーさんです。   あなたはwordpress popular postsが、 動作せず困っていませんか?   ちゃんとアクセスはあるのに、 まだデータがありません。と表 …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

wordpressで一覧へ戻るを記事に表示させる方法

どうも、チャーさんです。   あなたはwordpressで記事に 一覧へ戻るを表示させたいが、 urlを直接かく方法以外を探していませんか?   この記事では、phpとwordpr …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

最新記事

チャーさん

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

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

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