CSSのどこを編集したらいいのかわからないんだけど? – WordPress

WordPress

思った通りのデザインにならない

[カスタマイズ] や [ウィジェット] の編集だけでは、なかなか思い通りの見た目になってくれないことがあります。

ちょっとここのサイズを変えたいとか、ここの部分がいらないとか、そういった時にはテーマの中にある .css ファイルを編集する必要があるのです。

今回は、ちょっとしたスタイルシートの編集について、初心者向けに説明していきます。

スタイルシートの編集

テーマのスタイルシートを編集するには、[外観] > [テーマの編集] をクリックします。

開いたらすぐに「style.css」が表示されているかと思います。

CSS を追加していくことに特化したプラグインはありますが、基本的にはこのページから自分の好きなようにスタイルシートを編集していくことになります。

具体的な編集方法

さて「style.css」なのですが、見ていただければわかるように、まったく意味がわかりません。

だけど、手順さえ身につけばそんなに難しいことはありません。

さっそく、手順を見てみましょう。

  • 要素の検証

まずは、下図を見てください。

「ringonberry」というテーマを適用したときのトップページです。

これは、 [最近の投稿] の一覧ですが、よく見ると一つ一つの記事の内容までいっぺんに表示されてしまっているのがわかります。

この場合は内容が少ないのであんまり気になりませんが、1000文字とかになってくると大変なことになりそうなので、できれば、記事のタイトルだけを表示させたいです。

でも、ここでいきなりテーマの編集からCSSをいじっても、記述量が多すぎて大変です。

そこで登場するのが「検証」で、ここでは Google Chrome を使用していますが、だいたいのブラウザに標準で備わっている機能です。

HTMLタグにはCSSを当てやすいようにclassという名前が振られていることがほとんどなので、「検証」を使って、編集したい要素のclass名を調べてみましょう。

まずは、ページ内の適当なところで右クリックして、検証を選択してみてください。

すると、こんな感じで [Elements] タブに HTMLタグやCSSが表示されるはずです。

ここから、編集すべき要素のclass名を探してみます。

それには、検証画面左上のカーソルアイコンをクリックします。そうしてから変更したい部分をクリックすると、自動でマーキングしてくれます。

今回は、トップページの記事内容の部分を消したいので、そこにカーソルをあわせます。

これで、div要素のclass名「.post-content」を消せば良いということがわかりました。

このclass名は、CSSを編集するときに必要になりますので、どこかにメモしておいてください。

  • CSSの編集

では、CSSを編集していきます。

自分のサイトのwpadminから、[外観] > [テーマの編集] を開いてください。

style.cssが表示されますので、これの一番下にCSSを追加していきます。CSSは、後から追加した記述が優先されるので、.post-content の部分を探す必要はありません。

具体的には「.post-content { display : none ; }」

と入力し、[ファイルを更新] をクリックします。

これは、「post-contentというクラス名を持つ要素を非表示にする」という意味になります。

それでは、本当に非表示になっているのか自分のサイトに戻って確認してみましょう。

狙い通り、タイトルだけが表示されるようになりました。

しかし、ここでは重大な問題が発生しています。

[最近の投稿] の一覧からコンテンツが非表示になったので、試しに記事ページに移動してみると・・・。

なんと、記事ページからもコンテンツ部分が消えてしまっています。これでは、ユーザーは記事を読むことができません。

これを回避するには、CSSをもっと細かく指定してあげる必要がありました。

今回は、トップページの [最近の投稿] の部分だけタイトル表示にさせたいので、「トップページの最近の投稿のコンテンツを非表示」という記述になります。

そのためには、もう一度検証して、「.post-content」の親要素を調べる必要があります。

では、もう一度サイトに戻って右クリックから [検証] しましょう。

すると、bodyタグに「home」というclass名がつけられていることがわかります。

「home」というのは、なんとなくトップページに付けられてそうな名前ですね。

でも、もしこれが記事ページでも同じclass名になっていては、さっきと同じことになってしまいます。 なので、念のため記事ページも検証してみましょう。

すると、こっちではbodyタグに「single」というclass名がつけられていることがわかります。

スペース後に「blog」「logged-in」などと続いていますが、これは複数指定しているだけなのであまり気にする必要はありません。

つまり、この場合は「.home .post-contents { display : none ; }」と記述すれば、ねらい通りに編集できるかと思います。

先ほど記述したCSSに、「.home」とclass名を追加します。

「.class1 .class2 .classX {}」というのは、class1の下層にあるclass2の下層にあるclassXという指定をしたいときの書き方です。

これで [ファイルを更新] をクリックして、実際にトップページのコンテンツだけが非表示になっているのか確認してみましょう。

先ほどと同じようにトップページにいきます。

コンテンツは表示されていませんね。

それではタイトルをクリックして、肝心の記事ページに飛んでみましょう。

記事ページでも、ちゃんとコンテンツが表示されるようになりました!

おわりに

今回紹介したCSSの編集手順では、いらない要素を非表示にさせるだけでしたが、これはどの部分にでも応用させることができます。

例えば、微妙にサイズを変えたいとか、もうちょい左にしたいとか、そういった場合にも。

これができるようになると、デザインの幅が広がるので、より理想のWebサイトに近づけることができるでしょう。

お問い合わせ・
お見積りフォーム

エルスタでは、デザイン・システム・常駐案件など、幅広い仕事を受注しています。

見積もりご依頼のご相談などは無料で行っています。
お気軽にご相談・お問い合わせください。

お問い合わせ・お見積り

お問い合わせ・お見積り依頼フォームを使用頂く場合は、
プライバシーポリシーに同意されたものとみなします。

TOPへ