トップページをHTLMのコピペで簡単にサイト型にカスタマイズする方法を紹介します。
当サイトの見た目について
当サイトはWordPressのCocoonを使用したブログサイトです。
なので、デフォルトのままであれば、トップページには新着記事がずらっと１０個ほど並んでいるのが普通です。
ですが、当サイトのトップページは、下図のように一見するとサイト風のデザインとなっています。
（センスのない初心者のカスタマイズなので、拙いデザインですが・・・）
カスタマイズにあたって、私自身はまだ初心者ブロガーなので、さっぱり方法が分からず、検索して調べたところ、「コピペするだけでサイト型にできる」方法を掲載されている親切な方がいらっしゃったので、がっつり参考にさせて頂きました。
実際にコピペ&一部変更で、本当に簡単にサイト型のトップページにすることができました。
参考にした記事
参考にした方法は以下の参考記事リンク先となります。
HTMLに関しては参考記事の通りにコピペし、一部独自性を出すため（失笑）にカスタマイズ（後述）しています。
CSSに関しては、記載されていないところで、上手くいかず嵌ってしまったので、関連記事の通り備忘録を残しました。追加CSSの保存が出来ない場合に、参照していただければと思います。
【参考記事】
独自カスタマイズ
一部独自性を出す（失笑 ２回目）ためにカスタマイズした点は以下の通りです。
- カテゴリ別の新着一覧表示件数変更
- 冒頭部分のボタン追加
カテゴリ別の新着一覧表示件数変更
カテゴリ別新着一覧の表示件数を５件⇒２件に変更しました。
スマホなどで閲覧する際に長くると思い、表示件数を減らしました。
変更箇所は以下の通り。
新着記事の表示件数（count）の値を５⇒２に変更しただけです。
'元のコード
new_list count="5"
'変更後のコード
new_list count="2"冒頭部分のボタン追加
冒頭部分のボタンを２つにしました。
サイトについてのリンクボタンの横に、新着記事一覧ボタンを追加しました。
また、スマホは横幅が狭くなるので、スマホ表示時は、ボタンが縦に並ぶようにカラムを２列にしました。
変更箇所は以下の通り。
当時は、デザインの設定でカラムを２列にする方法が分からなかったので、カテゴリ別新着一覧のコードをコピーして作成しました。
そのままだと当サイトの名前やリンクが表示されてしまうため、ボタン名やリンク先の部分は一部「〇〇」に変更しています。
【元のコード】
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">●●をチェック</a></p>【変更後のコード】
<div class="column-wrap column-2">
<div class="column-left">
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://rimako-secha.com/〇〇">『〇〇.com』とは</a></p>
</div>
<div class="column-right">
<p style="text-align: center;"><a class="btn btn-light-blue btn-m" href="https://rimako-secha.com/〇〇/">新着記事一覧へ移動</a></p>
</div>
</div>
