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

wordpressのメニューを階層にしたいなら読んでください。

どうも、チャーさんです。   この記事ではwordpressのメニューを、 階層化する方法、   また、階層化できない場合の対策 (サイトに階層メニューが表示されない) を書いてい …

no image

cssで書いたボタンをhover時にへこむようにする方法です。

どうも、チャーさんです。   あなたはcssを使って作ったボタンを、 hover(マウスをボタンの上に持って来ること) 時にへこむようにしたいですか?   この記事を読めば、あなた …

no image

wordpressで閲覧できませんを解決した方法

どうも、チャーさんです。   あなたはwordpressで記事を公開しようとしたら、 閲覧できません(Forbidden Access)と出て、 困ってたり、解決策を探してませんか? &nb …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

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

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

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

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

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

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

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

no image

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

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

cssで上下左右に中央寄せする簡単で便利な方法

どうも、チャーさんです。   あなたはcssで上下左右、両方とも 中央寄せしたいと思っていませんか?   左右ならtext-alignやmargin:autoで できるけど上下って …

最新記事

チャーさん

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

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

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