![Cocoonブログのトップページを変える補足6画像](https://alfanoblog.com/wp-content/uploads/2019/08/502ebcac4eaa1f77a2e084a0f4e07f50-1024x588.jpg)
![悩む男性](https://alfanoblog.com/wp-content/themes/cocoon-master/images/man.png)
ブログのトップページを変えたい!
でもHTMLコードのコピペがうまくいかないよ!
![アルファ](https://alfanoblog.com/wp-content/uploads/2019/07/blog_profile_icon_5-150x150.jpg)
HTMLコードは「コードエディター」でコピペしましょう。
先日「Cocoonテーマでブログのトップページをマルっと変える方法」を変える方法について説明をしました。記事はこちら。
この記事で説明をしたトップページを変える方法の手順について質問があったので補足をします。
トップページを変える方法
トップページを変える方法の流れは以下のとおり。
![](https://alfanoblog.com/wp-content/uploads/cocoon-resources/blog-card-cache/d3344351d087761ffd6e4e4220c805b1.png)
- この記事を読む(はまちゃんさん(@wakuwakukeigo)のブログ記事)
- この記事中のHTMLコードを固定ページのコードエディターにコピペする
- この記事を熟読してビジュアルエディター中心にカスタマイズをする
この3つなのですが、前回の記事ではざっくりと説明したので補足します。
HTMLコードのコピペの方法
![アルファ](https://alfanoblog.com/wp-content/uploads/2019/07/blog_profile_icon_5-150x150.jpg)
HTMLコードは「コードエディター」でコピペしましょう。
ワードプレスのダッシュボードから「固定ページ」→「新規追加」で固定ページ作成画面を開きます。
画面右上の設定の歯車のとなりにある「︙」をクリックして「コードエディター」をクリックします。
![Cocoonブログのトップページを変える補足2画像](https://alfanoblog.com/wp-content/uploads/2019/08/178659a409e084ac02a49fccb7cd5d56-1024x369.jpg)
次に「テキストまたはHTMLで書き始める」の欄にHTMLコードをコピペします。
コピペをしたら「コードエディターを終了×」をクリックします。
![Cocoonブログのトップページを変える補足3画像](https://alfanoblog.com/wp-content/uploads/2019/08/ffddae243075ef915a9e7f92ff2a47fa-1024x255.jpg)
![悩む男性](https://alfanoblog.com/wp-content/themes/cocoon-master/images/man.png)
あ!画面がでた!でも新着記事が出ないよ。
![アルファ](https://alfanoblog.com/wp-content/uploads/2019/07/blog_profile_icon_5-150x150.jpg)
新着記事はショートコードで表示させます。
新着記事を表示させる方法
画面の「ショートコード」→「新着記事一覧」をクリックすると以下のコードが入力されます。
以下の画面のとおり行います。
![Cocoonブログのトップページを変える補足4画像](https://alfanoblog.com/wp-content/uploads/2019/08/50edaa492a6e55c70c252bfec696b1ce-1024x455.jpg)
![Cocoonブログのトップページを変える補足5画像](https://alfanoblog.com/wp-content/uploads/2019/08/a5be533eacc6ec5a9337fe6f7defaeb3-1024x415.jpg)
![Cocoonブログのトップページを変える補足6画像](https://alfanoblog.com/wp-content/uploads/2019/08/502ebcac4eaa1f77a2e084a0f4e07f50-1024x588.jpg)
![アルファ](https://alfanoblog.com/wp-content/uploads/2019/07/blog_profile_icon_5-150x150.jpg)
これでプレビューを見てみると…
![悩む男性](https://alfanoblog.com/wp-content/themes/cocoon-master/images/man.png)
あ!記事が表示された!
![アルファ](https://alfanoblog.com/wp-content/uploads/2019/07/blog_profile_icon_5-150x150.jpg)
あとは画像の追加や内容の修正をしましょう。
画像の追加や内容の修正は、はまちゃんさん(@wakuwakukeigo)のブログを熟読することで理解が深まります。
![](https://alfanoblog.com/wp-content/uploads/cocoon-resources/blog-card-cache/d3344351d087761ffd6e4e4220c805b1.png)
さいごに
Cocoonテーマのブログのトップページを変える方法について補足をしました。
HTMLコードに慣れていないと行き詰まったり、時間がかかることがあるかもしれません。
そのときは関連の記事を熟読してみてください。
トップページを変える方法について全体の流れを説明している記事はこちら。
Cocoonブロガーの人の参考になれば幸いです。
最後まで見て頂いてありがとうございました。