もっと見るボタンをいじって、色やデザインを変えて、グッとサイトの雰囲気を変えたい！
Cocoonをお使いの皆さんに、CSS（デザインを変えている部分）を見つけるところから解説したいと思います。以下の手順で解説していきますので、プログラミングが分からない方も一緒に基本から抑えていきましょう！
（もっと見るボタンで解説）
- STEP1まずは気になるデザインの「検証」
もっと見るボタンのCSSを覗いてみよう
- STEP2書かれているCSSの意味を知ろう
- STEP3WordPress(Coccon)でCSSを追加する方法
もっと見るボタンのCSSを探す
画像のように、当サイト(Mitsu蜂の巣)にアクセスすると、Topページには、新着記事を含め、カテゴリごとに記事が表示されております。
各カテゴリをもっと見たい方は「もっと見る」ボタン押します。
これがCocoonの初期CSSだと、少々味気ない見た目だなと思い、デザインを上記のように変更しようと考えました。その方法を、実際のWebサイトを整える手順に沿って解説していきます。
気になるデザインの部品を「検証」する
デザインを変更したい部品にカーソルをあわせて、右クリックします。
すると、メニューが開くので、その中から「検証（Inspect）」をクリックしましょう。
* 画像は英語表記ですが、日本語では「検証」になっています。
すると、以下のように開発ツールが表示されるので、薄く線が引かれているhtmlをよく見てみましょう。（今回はわかりやすく白線で囲ってあります）
そこが、右クリックした部品を構成するhtmlであり、右のサイドバーに表示されているのが、装飾しているCSSになります。
CSSに何が書かれているのか理解しよう
CSSには簡単なルールがあります。基本的な書き方は以下のとおりです。
HTMLが装飾されていない骨組みを用意して、各部品にクラス（class）という名前をつけます。
そのクラス名をCSSで指定して、どんなデザイン（色を変えるとか）にするか書いていきます。
上記の画像では、HTMLの”もっと見る”が含まれた一行の中にclass=”list-more-button”があります。ここにボタンの丸みや大きさなどを追加しているのが白枠で囲まれた部分です。
ココまでのルールを確認したら、以下の画像で実際の書き方を見ていきましょう。
書かれている内容を詳しく
上記の画像のように、CSSでは「決まった項目： 変更内容;」と書きます。
決まった項目が分からない事もありますが、その場合はGoogleで調べると全て出てきます。今回は、その必要もなく、変更したい項目を選び、同じく書き換えればOKです。
最後に、書き換えはどこで反映させるのか、WordPressの管理画面から解説していきます。
WordPressの管理画面からCSSを変更する (Cocoon)
- STEP1WordPressの管理画面にアクセス
サイドメニューの「外観」→「テーマファイルエディター」
- STEP2テーマファイルエディターで変更箇所のクラスを書き、追加する（実際は上書きしているイメージ）
- STEP3当サイトの変更コードは以下のとおりです
お好みで追記したら、「ファイルを変更」をクリックして完了です。
当サイトのCSS変更点の解説（コピペ・真似してOK）
「もっと見る」ボタンのCSS変更点は以下のとおりです。
/************************************
** もっと見るボタンの変更
************************************/
.list-more-button {
background: #1e50a2; /* ボタンの背景色を藍色に変更しています */
color: #fff; /* 文字色を変更 */
border: none; /* ボタンの外枠を消しています */
}
.list-more-button:hover { /* クラス名の隣に:hoverをつけると、カーソルがあたった時の挙動を変更できます */
background: #fff;
color: #1e50a2;
border: none;
}CSSでデザインを変更する一連の流れは終了です。
ボタンに限らず、自分のサイトの気になる部品を「検証」してみて、デザインを変更してみてはいかがでしょうか。
参考になりましたら幸いです！
