この記事を読むとトップページが便利でおしゃれになる！
コード記述ができない人でも大丈夫。１時間あればコピペで行けます。
とりあえずコード見たい、という人はこちら
左はもともとのトップページ。右が新しく作ったトップページです。
トップページが使いづらい・・。
私はCocoonを使用しています。本当にわいひらさん、いつもありがとうございます。
ただ、そんなcocoonに一点苦言を呈すなら、モバイル版のトップページが使いづらいということです。
新着記事以外メニューが隠れてて、カテゴリのリンクが探しづらいんだよね・・・。
そこで、今回は
こんなブログのトップページを目指していきます。今回の工程を行えば、私のブログのトップと同じものは完成します。細かいところはご自身でアレンジしてください。
見やすい・おしゃれ・かわいいブログのトップページの作り方
① 新規の固定ページを作成
①固定ページ→②新規追加を選択。この固定ページがトップぺージになります。
② 体裁を整える
③一段目を作る コードをコピペする
１行目で「+」を押し、「カスタムHTML」を選択します。
ここを作るために、こんな感じで入力しましょう。
<p class="has-text-align-center"><a class="btn btn-pink"href="https://syopura.com/new/">新着記事</a> <a class="btn btn-light-green" href="https://syopura.com/category/%e5%81%a5%e5%ba%b7/utu/">うつ病</a>
1段目新着記事の作り方
一つずつ解説します。まず一つ目は「新着記事」のボタンを作っています。
新着記事 ←こちらですね。
は、中央ぞろえにしましょう、という命令です。
<a class=”btn btn-pink”
は、ピンクのボタンを作りますよ！って意味です。「新着記事」はピンクのボタンで作られていますよね。
href=”https://syopura.com/new/”>
これは、「ボタンを押したらこのURLに飛ばしてください」という意味です。こちらのURLは私が設定したURLなので、下の記事を読んで、自分の新着記事一覧のURLを入力して下さい。
<a>〇〇</a>
この間に入っている文字がボタンの中に表示されます。
今回の場合は「新着記事」ですね。
1段目カテゴリー記事ボタンの作り方
さきほどとほぼ同様ですが、カテゴリーURLは、メニューのカテゴリーボタンを押した先のURLになります。
2段目を作る
新着記事覧の作り方
コピペ人はこちら。
<p class="has-text-align-center"><a class="btn btn-pink">新着記事</a> <a class="btn btn-cyan" href="https://syopura.com/new/">もっと見る</a></p>[new_list count="3"]
これを実行するとこんな感じ。
1段目と違うのは、「もっと見る」ボタンを追加。「href」をもっと見るボタンに埋め込みました。
は、「新着記事を3記事出しますよ！」という意味。この数字を変えることで、表示される記事数も変わってきます。
2段目カテゴリ記事一覧の作り方
私が作ったのはこんな感じ。
コピペする人はこちら
<p class="has-text-align-center"><a class="btn btn-light-blue">ブログ運営</a> <a class="btn btn-cyan" href="https://syopura.com/category/%e3%83%96%e3%83%ad%e3%82%b0%e9%81%8b%e5%96%b6/">もっと見る</a></p>[new_list count="3" cats="43" children="1"]
先ほどの新着記事と比べると若干の違いがお判りいただけるだろうか。大きな違いは2つ目のコード。”cats”と”childeren”が増えている。
この部分は、「ブログ運営」の新着記事一覧を表示している。
さっきも書いたように、count=”3″ が3記事表示するという意味。
children＝”１”は、子のカテゴリを表示することができる。（よくわからない人はとりあえず１にしていてよい。）
そして、cats＝”４３”は、表示したいカテゴリのIDを表している。
カテゴリIDはこちらの記事で探し方をまとめているので参考にしてほしい。
すべてコピペする人はこちら。（URLは変更してね！）
<p class="has-text-align-center"><a class="btn btn-pink"href="https://syopura.com/new/">新着記事</a> <a class="btn btn-light-green" href="https://syopura.com/category/%e5%81%a5%e5%ba%b7/utu/">うつ病</a> <a class="btn btn-light-blue"href=https://syopura.com/category/%e3%83%96%e3%83%ad%e3%82%b0%e9%81%8b%e5%96%b6/">ブログ運営</a> <a class="btn btn-yellow" href="https://syopura.com/category/diy/">男前DIY</a> <a class="btn btn-orange" href="https://syopura.com/category/%e3%83%a2%e3%83%8e%e3%83%bb%e3%82%ac%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88/">モノ・ガジェット</a> <a class="btn btn-indigo"href="https://syopura.com/category/%e6%8a%95%e8%b3%87/">投資</a><p class="has-text-align-center"><a class="btn btn-pink">新着記事</a> <a class="btn btn-cyan" href="https://syopura.com/new/">もっと見る</a></p>[new_list count="3"]<p class="has-text-align-center"><a class="btn btn-light-blue">ブログ運営</a> <a class="btn btn-cyan" href="https://syopura.com/category/%e3%83%96%e3%83%ad%e3%82%b0%e9%81%8b%e5%96%b6/">もっと見る</a></p>[new_list count="3" cats="43" children="1"]<p class="has-text-align-center"><a class="btn btn btn-orange">モノ・ガジェット</a> <a class="btn btn-cyan" href="https://syopura.com/category/%e3%83%a2%e3%83%8e%e3%83%bb%e3%82%ac%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88/">もっと見る</a></p>[new_list count="3" cats="5" children="1"]<p class="has-text-align-center"><a class="btn btn-light-green">うつ病</a> <a class="btn btn-cyan" href="https://syopura.com/category/%e5%81%a5%e5%ba%b7/utu/">もっと見る</a></p>[new_list count="3" cats="383" children="1"]<p class="has-text-align-center"><a class="btn btn-yellow">DIY</a> <a class="btn btn-cyan" href="https://syopura.com/category/diy/">もっと見る</a></p>[new_list count="3" cats="25" children="1"]<p class="has-text-align-center"><a class="btn btn-indigo">投資</a> <a class="btn btn-cyan" href="https://syopura.com/category/%e6%8a%95%e8%b3%87/">もっと見る</a></p>[new_list count="3" cats="38" children="1"]
最後の仕上げ
編集ページ右の設定をいじっていこう。
固定ページのタイトルが「サンプルページ」なっているので、「トップページ」にでもしておこう。
さらに、「パーマリンク」→「URLスラッグ」を「new」とでもしておこう。（ここはわかりやすければどのようなURLでも構いません。）
最後に「設定」→「表示設定」をクリック。
「固定ページ」を選択して、「ホームページ」のところに、新しく作ったトップページを選択します。
これで設定は完了です。
もしわからない方いれば、コメントかメッセージくれればわかる範囲でお答えします。
