Cocoonテーマでブログのトップページを変える方法の補足

Cocoonブログのトップページを変える補足6画像
悩む男性
悩む男性

ブログのトップページを変えたい!
でもHTMLコードのコピペがうまくいかないよ!

アルファ
アルファ

HTMLコードは「コードエディター」でコピペしましょう。

先日「Cocoonテーマでブログのトップページをマルっと変える方法」を変える方法について説明をしました。記事はこちら。

この記事で説明をしたトップページを変える方法の手順について質問があったので補足をします。

スポンサーリンク

トップページを変える方法

トップページを変える方法の流れは以下のとおり。

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込
  • この記事を読む(はまちゃんさん(@wakuwakukeigo)のブログ記事)
  • この記事中のHTMLコードを固定ページのコードエディターにコピペする
  • この記事を熟読してビジュアルエディター中心にカスタマイズをする

この3つなのですが、前回の記事ではざっくりと説明したので補足します。

HTMLコードのコピペの方法

アルファ
アルファ

HTMLコードは「コードエディター」でコピペしましょう。

ワードプレスのダッシュボードから「固定ページ」→「新規追加」で固定ページ作成画面を開きます。

画面右上の設定の歯車のとなりにある「︙」をクリックして「コードエディター」をクリックします。

Cocoonブログのトップページを変える補足2画像

次に「テキストまたはHTMLで書き始める」の欄にHTMLコードをコピペします。

コピペをしたら「コードエディターを終了×」をクリックします。

Cocoonブログのトップページを変える補足3画像

「文章を入力、または / でブロックを選択」の本文に直接コピペしたり、「⊕」→「フォーマット」→「カスタムHTML」にコピペもできますが、形が崩れることがあります。

悩む男性
悩む男性

あ!画面がでた!でも新着記事が出ないよ。

アルファ
アルファ

新着記事はショートコードで表示させます。

新着記事を表示させる方法

画面の「ショートコード」→「新着記事一覧」をクリックすると以下のコードが入力されます。

以下の画面のとおり行います。

Cocoonブログのトップページを変える補足4画像
Cocoonブログのトップページを変える補足5画像
Cocoonブログのトップページを変える補足6画像
アルファ
アルファ

これでプレビューを見てみると…

悩む男性
悩む男性

あ!記事が表示された!

アルファ
アルファ

あとは画像の追加や内容の修正をしましょう。

画像の追加や内容の修正は、はまちゃんさん(@wakuwakukeigo)のブログを熟読することで理解が深まります。

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込

さいごに

Cocoonテーマのブログのトップページを変える方法について補足をしました。

HTMLコードに慣れていないと行き詰まったり、時間がかかることがあるかもしれません。

そのときは関連の記事を熟読してみてください。

トップページを変える方法について全体の流れを説明している記事はこちら。

Cocoonブロガーの人の参考になれば幸いです。

最後まで見て頂いてありがとうございました。

ブログ
スポンサーリンク
スポンサーリンク