【コピペ】Cocoonカスタマイズ「トップページ」を変えてみよう

学くん

ワードプレステーマのコクーンのトップページを簡単に変更したい！

ワードプレスのテーマの1つであるC ocoon。

無料テーマの中では非常に利用しやすく当サイトマナフクでも使用しています。

初期のトップページは｢新着記事一覧｣になっていますが、

『他のサイトと差をつけたい』

『HTMLやら何やら分からない』

そんな方へコピペと少しの作業だけでカスタマイズ出来るよう説明していきます。

＊完成系のイメージ

上記画像が見本となります。

※見にくい方は当サイトトップページを参考にしてください

追加プラグイン無しで、基本的な既存のスタイルで作成しているので、経験が浅い方でもコピペと少しの編集で利用できるようになっていますし、さらにカスタマイズ次第であなた色のオリジナリティを出すことが出来ます。

学くん

吹き出しとか入れても面白いね！

＊テンプレートコピーコード

以下コードで上記画像の仕上がりとなりますので、コピーして使用ください。

設定等については次項で説明します。

1. <p style=”text-align: center;”>画像を入れる</p>
3. <div class=”blank-box” style=”text-align: center;”><span class=”marker-under” style=”font-size: 24px;”><em><strong><span style=”color: #0000ff;”><span style=”caret-color: #0000ff;”>★</span></span>文字を入れる<span style=”color: #ff0000;”><span style=”caret-color: #ff0000;”>★</span></span></strong></em></span></div>
4. &nbsp;
5. <div class=”blank-box sticky st-green” style=”text-align: left;”><span style=”font-size: 20px;”><strong>文字を入れる</strong></span></div>
6. &nbsp;
8. パーマリンク(URL)を入れる
10. &nbsp;
12. 〃
14. &nbsp;
16. 〃
18. &nbsp;
20. <a class=”btn btn-light-green btn-m”>文字/カテゴリーパーマリンク(URL)を入れる</a>
22. &nbsp;
23. <div></div>
24. <div></div>
25. <div class=”blank-box sticky st-blue”><span style=”font-size: 20px;”><strong>文字を入れる</strong></span></div>
26. パーマリンク(URL)を入れる
28. &nbsp;
30. 〃
32. &nbsp;
34. 〃
36. &nbsp;
38. &nbsp;
40. <a class=”btn btn-light-blue btn-m”>文字/カテゴリーパーマリンク(URL)を入れる</a>
42. &nbsp;
44. &nbsp;
45. <div class=”blank-box sticky st-red”><span style=”font-size: 20px;”><strong>文字を入れる</strong></span></div>
46. &nbsp;
48. パーマリンク(URL)を入れる
50. &nbsp;
52. &nbsp;
54. 〃
56. &nbsp;
58. &nbsp;
60. 〃
62. &nbsp;
64. <a class=”btn btn-red btn-m”>文字/カテゴリーパーマリンク(URL)を入れる</a>
66. &nbsp;
68. &nbsp;
69. <div class=”blank-box” style=”text-align: center;”><span class=”marker-under”><em><span style=”font-size: 24px;”><strong><span style=”color: #0000ff;”><span style=”caret-color: #0000ff;”>▼</span></span>新着記事一覧<span style=”color: #ff0000;”><span style=”caret-color: #ff0000;”>▲</span></span></strong></span></em></span></div>

70. 

    アフィリエイトASPサイトオススメ4サイト（初心者）

    2020.03.09

    

    ヤフオク転売（せどり）でおすすめなツール4つを厳選！

    2020.02.25

    

    ヤフオク転売（せどり）の注意点。『実際の逮捕事例も説明』

    2020.02.172020.02.19

    

    ヤフオク転売（せどり）オススメの4つの理由

    2020.02.122020.04.09

    

    クラウドワークスマイルストーンとは？メリットとデメリット（受注側）

    2019.12.172020.01.31
72. &nbsp;
74. &nbsp;
75. <div class=”blank-box” style=”text-align: center;”><span class=”marker-under” style=”font-size: 24px;”><em><strong><span style=”color: #0000ff;”><span style=”caret-color: #0000ff;”>■</span></span>文字を入れる<span style=”color: #ff0000;”><span style=”caret-color: #ff0000;”>■</span></span></strong></em></span></div>
76. <div>サイト紹介文章を入れる</div>
77. <div></div>
78. <div></div>
79. <div></div>
80. <div>
82. &nbsp;
84. </div>

＊固定ページの作り方を説明

｢固定ページ｣→｢新規作成｣→｢テキスト｣内に上記コードを貼り付けします。

｢画像を入れる｣

｢トップページ文字を入れる｣

｢パーマリンク(URL)を入れる｣

等に自分のサイトに合った内容を記載していき記事を公開します。

＊トップページへ固定ページの反映させ方を説明

トップページに設定の仕方は

｢設定｣→｢表示設定｣で固定ページにし先程の記事を設定すると完了です。

＊この記事のまとめ

既存のスタイルのみのコピペと簡単な作業でトップページを変更出来るコードを紹介しました。

新着記事ではなく、あなたが読んで欲しい記事がある場合などに利用出来るテンプレートになっています。

更に吹き出し機能などを挿入しカスタマイズすることも可能なので是非参考にして頂ければと思います。