みなさんwordpressのテーマは何を使っていますか？
ブログを始めるにあたって見た目から入りたい派の人ですか？
僕は結構見た目から入るとやる気出たりするタイプです！(笑)
今回はwordpressのテーマ「cocoon」のサイトの顔であるトップページをカスタマイズする記事を書きます。
cssやhtlmが全く分からない僕でも楽しく作れたので初心者の方もご安心を。
PVアップにつながるかはわかりませんが、トップページはサイト・ブログの顔ですから見やすくかっこよくしたいですよね！
ではさっそく行ってみましょー
婿養子の島根移住ブログさん
カスタマイズにあたってまず先にお話ししておきたいのは、なぜトップページをサイト風にしようと思ったのか。
色々調べ物をしている際に偶然みかけた婿養子の島根移住ブログさんの記事。
そう、この記事を見て「あ、かっこいいな～これ自分もできるんかな・・・？」とおもったのがきっかけです！
コチラの記事ではとてもわかりやすくカスタマイズの方法を説明してくれています。
内容的には有料でもおかしくない内容なのですが、はまちゃんさん流石です。
惜しみながらも自らの努力の結晶を無料で公開されています。
基本的に元となるはまちゃんさんの記事を読めばカスタマイズ可能なんですが、そこから自分好みにカスタマイズする方法を今回は書きたいと思います！
まずはありがたくコピペ
まずははまちゃんさんの作ったHTMLを新規固定ページへコピペ。
僕の場合はこの時点でどんな要素をそのまま使って、どこが不要になるかなと自分なりの構図をぼんやりと決めました。
自分のブログのカテゴリーはいくつあったかなーとかこのブロックにあのカテゴリーを入れて、紹介文もやっぱあった方がいいなーとかそのくらいでいいと思います。
カテゴリー別の画像
あらかた構成を練ってタイトルなんかを書きこんだら次は画像。
僕の場合は画像にそのカテゴリーの名前なんかを入れて載せたかったのでまずは３Dペイントを使って文字いれしました！
ちなみに画像はpixsabayからフリー素材を使わせて頂いてます。
ここの素材はとにかくかっこいい！お気に入りです。
背景も考慮して見やすく文字いれするとイイ感じです。
３Dペイントは非常に色々直感的にできて優秀ですね。
この段階で画像サイズを500/250にしておくとこのブログと同じサイズになるので参考までに。
見出しのデザイン
これが正直一番大事！
見出し部分がこの固定ページは多いのでがらっと雰囲気が変わります！
まずH2がタイトル的な部分ですね。
H3はカテゴリー名あたりに使われています。
見出しはサルワカさんの記事や他にも参考になるデータが沢山あるのでありがたくその中から選びます。
参考にさせていただいたのがこちらの記事。
さてここからがちょっと大変でしたね。
なにせcssなんていじったことないですし・・・腰は相当重いがまぁやってみよう！と頑張ったのが良かったです。
意外と簡単に出来る！
wordpressの外観→カスタマイズ→追加CSSにコピペして終わり！
わぁ、簡単！(笑)
cssがh1になっているのをh2やh3に書き換えれば任意の場所が変わる。
複数個所入っている場合もあるので見逃さず全部書き換えよう。
しかし問題がある。
H2やH3で書き込むと全部の見出しが変わってしまうのだ。
凝ったものだと記事の見出し文字にデザインがかぶさってモバイルだと読めないなんてことも！
その場合はまちゃんさんの記事にあるトップページのみで適応させるCSSを使えばいいんですが、さっき選んだデザインをトップページのみにするのはどうすればいいんだ！と悩みました。
結論は先程選んだデザインのcssの中にあるH2やH3という部分。
h1 { /*線の種類（実線） 太さ 色*/ border-bottom: solid 3px black; }
であれば｛の前にあるh1ですね！
ここを.page-id-●●●● .article h3に替えると指定したページのみ適応となりました。
覚えておくと後で使えそう！
さてあとは色を変えたい場合！きっとそんな人も多いはず。
その場合はcssの中にある色を指定している部分をみつけよう！
h1 { color: #6594e0;/*文字色*/ /*線の種類（点線）2px 線色*/ border-bottom: dashed 2px #6594e0; }
であればcolor: #6594e0の部分！
ここを任意の色番号に替えると色も変えれます。
cssによって場所が違ったりできないものもあるので注意。
書き込んだ時に左側にエラーが出てればコードがおかしいという事なので無視して公開しないようにしましょう。
ちなみに色番号はこちらを参考にさせていただきました。
ボタン
これもググればいっぱい出てきます。
好きな物を選んで書き換えるとデザインにアクセントをつけれますね。
僕の場合は色々やった結果cocoonのデフォルトボタンをそのままカスタマイズすることにしました。
方法はまずリスブロさんのこちらの記事の参考に。
css追加で簡単に変えれますね！
ちなみに
.btn-red { background-color: #f44336; }
であれば色部分を先程のカラーチャートの好きな色に替えればボタン色も変わります。
そして｛｝内に影を付けるbox-shadow: 0 7px 10px -5px rgba(0,0,0,0.5);なんかをいれてもOKです。
下段追加要素
カテゴリーを作り終わったら下に好きな物を入れれます。
僕の場合は問い合わせフォームと人気記事と検索を入れました。
ショートコードで差し込むだけでOKでした！
ちなみに人気記事はカテゴリーの部分で使用したショートコードをコピペでOKです。
まとめ
大体全くの初心者でも2日くらいで作り終えれました！
今回で初めてcssとHTMLをいじりましたが、これは意外と楽しい(笑)
そして記事にも応用できる知識なのでまだやったことのない人もこれを機に手を出してみるとイイと思います。
cssも追加cssがあるのでスタイルシートをいじらずにカスタマイズできちゃうのが安心でしたね。
スタイルシートはいじると壊しちゃいそうで怖いです(笑)
ひとまず自分たち的にはトップページが自分好みに作れたので非常に満足な結果でした！
cocoonそのままよりやはり作りこんだ感出ますね！
この機会を与えてくれたはまちゃんさんに感謝。
ありがとうございました！
