【コピペで完成】ブログのトップページをモバイルでも読みやすく、おしゃれにデザインする【cocoon】

サイトデザイン
スポンサーリンク

この記事を読むとトップページが便利でおしゃれになる!

  

コード記述ができない人でも大丈夫。1時間あればコピペで行けます。

とりあえずコード見たい、という人はこちら

 

新規の固定ページを作成 この記事を読むとトップページがおしゃれになる!

 

左はもともとのトップページ。右が新しく作ったトップページです。

 

トップページが使いづらい・・。

 

私はCocoonを使用しています。本当にわいひらさん、いつもありがとうございます。

  

ただ、そんなcocoonに一点苦言を呈すなら、モバイル版のトップページが使いづらいということです。

 

ミッツ
ミッツ

新着記事以外メニューが隠れてて、カテゴリのリンクが探しづらいんだよね・・・。

  

そこで、今回は

カテゴリごとで新着記事を表示
カテゴリリンクを見やすく配置

 

こんなブログのトップページを目指していきます。今回の工程を行えば、私のブログのトップと同じものは完成します。細かいところはご自身でアレンジしてください。

 

見やすい・おしゃれ・かわいいブログのトップページの作り方

  

① 新規の固定ページを作成

 

トップページデザイン 新規の固定ページを作成

①固定ページ→②新規追加を選択。この固定ページがトップぺージになります。

 

② 体裁を整える

 

①タイトルは何でもいい(後で非表示にするので)
 
画像に alt 属性が指定されていません。ファイル名: image-57.png
 
②1行目を空白、2行目を選択し、「+」→「レイアウト要素」→「カラム」 
 
画像に alt 属性が指定されていません。ファイル名: image-58.png
 
③2カラムを選択。
 
画像に alt 属性が指定されていません。ファイル名: image-59.png

 

③一段目を作る コードをコピペする

 

③トップページデザイン 一段目を作る コードをコピペする

 

1行目で「+」を押し、「カスタム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段目新着記事の作り方

 

一つずつ解説します。まず一つ目は「新着記事」のボタンを作っています。

 

新着記事 ←こちらですね。

 

p class=”has-text-align-center” 
は、中央ぞろえにしましょう、という命令です。
次の
<a class=”btn btn-pink”

は、ピンクのボタンを作りますよ!って意味です。「新着記事」はピンクのボタンで作られていますよね。

さらに、
href=”https://syopura.com/new/”>

これは、「ボタンを押したらこのURLに飛ばしてください」という意味です。こちらのURLは私が設定したURLなので、下の記事を読んで、自分の新着記事一覧のURLを入力して下さい。

  
こちらを読むと必要なURLがわかります。
https://syopura.com/2020/05/05/cocoonsite/
 
 
 
さらに、
<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"]

 

これを実行するとこんな感じ。

 

新着記事 もっと見る

ブロガー向けTwitterのおすすめタグを研究・ランク付けしてみました
2020.8月のブログ運営日記 ~若干アクセス回復か?~
第三者引き受けの株価への影響は?【日本ペイント株価 今後の見通し】

 

1段目と違うのは、「もっと見る」ボタンを追加。「href」をもっと見るボタンに埋め込みました。

 

さらに、【new_list count=”3″】

は、「新着記事を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”が増えている。

 

【new_list count=”3″ cats=”43″ children=”1″】

この部分は、「ブログ運営」の新着記事一覧を表示している。
さっきも書いたように、count=”3″ が3記事表示するという意味。

children=”1”は、子のカテゴリを表示することができる。(よくわからない人はとりあえず1にしていてよい。)

そして、cats=”43”は、表示したいカテゴリの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でも構いません。)

 

最後に「設定」→「表示設定」をクリック。

 

 

 

「固定ページ」を選択して、「ホームページ」のところに、新しく作ったトップページを選択します。

 

これで設定は完了です。

 

ミッツ
ミッツ

もしわからない方いれば、コメントかメッセージくれればわかる範囲でお答えします。

 

タイトルとURLをコピーしました