Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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でボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssでテーブルの行間を広げる方法

どうも、チャーさんです。 あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いて …

no image

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

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

no image

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

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

no image

wordpressの画像のurlを取得する方法

どうも、チャーさんです。 あなたはwordpressの画像のurlを取得する方法を、 探していますか?   この記事では、wordpressの画像のurlを取得し、 表示する方法を書いていま …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

wordpressのエディターを前のに戻す方法

どうも、チャーさんです。   あなたは、ワードプレスをインストールしたら、 投稿のエディター画面が今まで使ってたのと 違うやつになっていて、困っていませんか?   この記事では、そ …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

最新記事

チャーさん

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

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

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