零から

気になることやその日のことを日々綴るブログです。

初心者がwordpressのテーマを改変するコツ

テーマ編集で困るのは、やはりテーマの改変したい部分がCSSにおいてどこで記述されているかというところでしょう。

 

僕はwordpressのテーマをインストールして、そのテーマを少し改変したりしているのですがよくこういった問題にぶつかります。

 

wordpressのテーマというと、stylesheetだけでも数千行程のコードで書かれているので、なかなか狙った部分を見つけ出すのは至難の業でしょう。

 

この記事を読めば、htmlやcssといった知識がない人でも、wordpressのテーマ編集ができるようになります。

 

※初心者でもできるように、ツールなどの方法を一切使用しないため、少しばかり周りくどくなっています。根気があれば誰でもすぐにできる方法です。

 

なお、今回はInternetExplorerで説明していきます。

まずは、下の写真のようにブログを開きます。

 

f:id:fyuyu:20170519020020j:plain

そして、この見出しの文字の大きさを編集したいと思ったとします。

 

ここで、ブラウザによって差があるのですが、InternetExplorerやGoogleClomeではマウスでページをクリックすると、要素の検査検証といった選択肢が出ると思います。

 

f:id:fyuyu:20170519020036j:plain

こちらをクリックすると、出てくるコンソールで左上に矢印のようなものがありますよね。

 

f:id:fyuyu:20170519020052j:plain

GoogleClomeだとこんな感じです。

f:id:fyuyu:20170519020259j:plain

これをクリックして見出しを選ぶと、次のようにstylesheetにおいて、何行目に記述されたものであるかということと、どういった名前の場所に記述されているのかが分かります。

 

f:id:fyuyu:20170519020230j:plain

 

この場合だと、見出しの文字の大きさを変えたいならstylesheetの223行目にある.entry-content h3の内部のfont-sizeの%数字を変えれば良さそうです。

 

これをメモ帳などにコピーした後、stylesheetから探し出しましょう。

これを改変すれば見出しのデザインは思うがままです。

自分の好きなように変えてください。

 

因みに、どの単語のどの値がデザインに影響するか主を紹介します。

CSSの知識がない方でも安心して変えることができますよ。

 

color:文字の色;

background:背景の色;

padding:周囲の隙間の間隔;

font-size:文字の大きさ;

 

この他にもたくさんあります。

分からないものがありましたら、気軽に聞いてください。

返信で通知及び追記致します。