Cocoonには便利なショートコードがたくさんあり、ブロガーを大いに助けてくれます。

中でも新着記事や人気記事一覧を簡単に表示できるショートコードは、ブログのフロントページ（ホーム画面）をカスタマイズするのにはかかせません。

当ブログの代表記事となった【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法でも、存分に利用させてもらってます。

本記事では、フロントページをショートコードで新着記事を表示する際に、デザインを垢抜けさせる横並び表示にするカスタマイズの方法をご紹介します。

はまちゃん

もちろん誰でも簡単にカスタマイズできるよう、CSSはコピペするだけなのでご安心ください。

少しの工夫でオシャレになるのでお試しあれ。

【Cocoon】フロントページの新着記事一覧を横並び表示にした完成イメージ

まず、最初に完成イメージを確認しておきましょう。

当ブログのフロントページを見てもらうとよりわかりやすいかもしれません。

◆横並び表示

[Before]

[After]

ちょっとしたデザインの変更ですが、印象はかなり違いますよね。

「神は細部に宿る」と言われるように、そのこだわりがあなたらしいブログを作ることにつながります。

ブログトップページ全体をオシャレにカスタマイズする方法や、Cocoon全体のカスタマイズする方法は別記事で詳しく書いていますので、合わせてご覧ください。

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

wakuwaku-keigo.com

2022.05.17

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

【Cocoon】ショートコードでフロントページの新着記事一覧を横並び表示にカスタマイズする方法

手順は以下のとおり。

はまちゃん

ステップも少ないし簡単だね！
フロントページに書く前提で以下は書きますが、普通の投稿ページにショートコードで新着記事を表示する場合は、STEP1は必要ありません。

「さっそくカスタマイズ！」といきたいところですが、簡単とはいえCSSをいじるのでブログデザインが崩れてしまうリスクがあります。

最低限、変更前の設定内容やCSSをバックアップしておくことはするようにしてください。

より慎重にいくなら、テーマ全体のバックアップを取ることも有効です。

以下の記事で注意点やバックアップ方法に触れているので参考にしてください。

WordPressテーマ変更手順まとめ！注意点・エラー対処法・事前準備・プラグインのテスト方法

wakuwaku-keigo.com

2019.07.23

（１）フロントページ用の固定ページを作成

ワードプレスのダッシュボードから、「固定ページ」＞「新規作成」をクリックします。

タイトルはなんでもいいです。

この記事ではわかりやすく『【Cocoonトップページ】固定ページテンプレ』としておきましょう。

パーマリンクの設定は関係ないので必要ありません。

（２）新着記事一覧を表示するショートコードをアレンジ

新規作成した固定ページに、新着記事一覧を表示します。

Cocoonであれば、投稿画面のショートコード＞新着記事をクリック。

すると以下のようなnew_listショートコードが自動入力されます。

[〜new_list count="5" type="default" cats="all" children="0" post_type="post"〜]

それぞれオプション部分は以下を意味します。

• count=アイテムの表示数
• type=新着記事の表示方法の種類
• cats=ブログで設定しているカテゴリ
• children=子カテゴリを含めるか否か

全体の新着記事を想定しているので、count=”3” type=”large_thumb“に設定変更すれば他はイジらなくてかまいません。

[〜new_list count="3" type="large_thumb" cats="all" children="0" post_type="post"〜]

新着記事一覧の詳細なショートコードの使い方を知りたいなら、新着記事一覧を表示するショートコードの利用方法を参考にしてください。

（３）CSSをコピペ

最後にスタイルシート（CSS）を書きます。

「外観」から「テーマエディター」を選択し、Cocoon Childのスタイルシート (style.css)に書き込んでもよいですが、固定ページ下にあるカスタムCSSに書き込むことをオススメします。

Cocoon Childのスタイルシート (style.css)はテーマ全体に影響するので、誤って削除してしまったりエラーが起きるリスクがあります。

プログラミングなどにあまり詳しくない初心者は、極力触るべきではありません。

カスタムCSSなら、最悪CSSが間違えてしまってもそのページのみなので影響は小さいです。

以下をカスタムCSSに入力してください。

/*******************************
* 新着記事を横並びに
********************************/
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}

@media screen and (max-width: 800px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}

.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}

これでページの更新をかけると、フロントページの新着記事一覧が横並び表示になります。

お疲れ様でした。

まとめ：フロントページの新着記事を横並び表示にするカスタマイズは簡単

無事に横並びで新着記事一覧が表示されましたか？

CSSの知識がないと難しいですが、3つの手順

1. フロントページ用の固定ページを新規作成
2. 新着記事一覧を表示するショートコードをアレンジ
3. CSSをコピペ

通りにすれば誰でも簡単にカスタマイズができたはず。

プラグインも必要なくショートコードで実現できたのは、Cocoon様様です。

質問などあれば、記事下のコメント欄までお願いします。

ちなみに僕のブログでは、以下のように最新記事を3つ表示させて、その下の新着記事一覧ボタンをクリックすると、新着記事が全体で表示するようにしています。

当ブログの新着記事一覧の設定

こちらのやり方は、別記事で紹介していますのでマネしたい方はどうぞ。

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

wakuwaku-keigo.com

2022.05.17

質問などあれば、記事下のコメント欄までお願いします。

コピペもいいですが、ブログを自分好みにカスタマイズして個性を出したいなら、HTMLやCSSの知識は最低限必要ですよ。

将来調べる時間を少なくするためにも、自己投資と思って一冊ぐらいは手元に置いておきましょうね。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

posted with カエレバ

千貫 りこ 技術評論社 2017-05-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！

「ブログのトップページが、新着記事一覧なんてつまらない」

そう考えて、ブログのトップページ（フロントページ）を固定ページ化して専門サイトのようにする人が増えています。

特に、WordPressテーマ「Cocoon」の利用者は、当ブログの【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法を読んでくださった方も多いのではないでしょうか？

しかし、この方法には一つデメリットが。

「トップページに新着記事一覧なのはイケてないけど、新着記事一覧も固定ページに載せたい」という、こだわりの強いブロガーのニーズに答えきれていないんです。

はまちゃん

まぁ、最新記事がないとそれはそれで困るよね。

と思い、新着記事一覧ページの作り方を当記事で解説することにしました。

プラグインなしでサクッと作れますよ。

パクってOKですが、シェアするとかコメント欄で感想を書くとかしていたけると励みになるので、よろしくお願いします。

WordPressのトップページを固定ページ化したら新着記事一覧が消える？

まずはおさらい。

固定ページをトップページにする理由は、

といったところでしょうか。

最新記事がズラーッと並ぶブログばかりなので、個性を出したいですよね。

この問題を解決するのが、固定ページでブログのトップページをサイト化させる方法です。

詳しい、カスタマイズ手順は以下の記事をご覧ください。

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

wakuwaku-keigo.com

2022.05.17

上記の記事はトップページを固定ページ化するので、新着記事一覧は表示されません。

しかし、しばらくして僕はこう思ったんですよね。

はまちゃん

新着記事一覧がわからないと、リピーターが来なくなるんじゃね？
何度もブログを読んでくれてる数少ないファンは、僕の最新の記事を待ってくれているじゃね？

一般的に、初めての訪問者は個別記事から、リピーターやお気に入り登録してくれた訪問者はトップページからブログに流入します。

そんなファンの期待に応えたく、トップページに新着記事一覧のページを作りました。

「新着記事一覧のURLってどうやって作るんだ？」と、悩む人も多いですよね。

僕もいざ作ろうと調べると、プラグインが必要そうでめちゃくちゃ迷いました。

だって、今まではトップページのURLで勝手に表示されていたので、新着記事一覧を0から作るという発想がなかったんです。

Cocoonはショートコードで新着記事一覧を表示できますが、全記事を最新記事一覧で表示させるのはできませんしね。

でも、実はめっちゃ簡単に実装できるんですよ。

もちろん、プラグインも必要ない簡単な方法で。

WordPressの固定ページに表示させる新着記事一覧ページの作り方【プラグインなし】

手順は、たった2ステップ。

1. 固定ページを作る
2. 投稿ページに設定する

1分ぐらいでできます。

①固定ページを作る

ワードプレスのダッシュボードから、「固定ページ」＞「新規作成」をクリックします。

タイトルはなんでもいいです。

わかりやすく『新着記事一覧』とでもしておきましょう。

パーマリンクの設定は、新着記事一覧を読者がクリックした時に表示されるURLになります。

読者がわかりやすい名前をつけておきましょう。

僕は『/new』を選択したので、

で新着記事一覧ページが表示されます。

試しにクリックしてみてください。

新着記事一覧はこちら

タイトルとパーマリンクを決めたら、本文は何も書かずに公開します。

②投稿ページに設定する

操作はあと一つです。

「ダッシュボード」＞「設定」＞「表示設定をクリック」します。

「ホームページの表示」で投稿ページをクリックし、あなたが作成した新着記事一覧ページをトップページにしたい固定ページを選択して保存します。

はい！

これで無事に、ワードプレスに新着記事一覧ページが作成されました。

あとは、Cocoonの設定を駆使して、トップページに新着記事一覧を表示させましょう。

まとめ：プラグインなしで簡単！WordPressの固定ページに新着記事一覧ページを表示させてみよう

今回の記事では、プラグインなしでWordPressのトップページを固定ページで作った人向けに、新着記事一覧ページの作り方と表示させる方法を解説してきました。

無事に新着記事一覧ページを、固定ページに作成できましたか？

1. 固定ページを作る
2. 投稿ページに設定する

の2ステップなので簡単。

プラグインが必要ないのもありがたいですね。

知ってればすぐに設定できるけれど、知らないといつまでもできないカスタマイズでしょう。

新着記事つながりで、固定ページのフロントページで最新記事を横並び表示にする方法も書きました。

【Cocoon】ショートコードで新着記事を横並び表示にするフロントページカスタマイズ

wakuwaku-keigo.com

2022.05.17

質問などあれば、記事下のコメント欄までお願いします。

コピペもいいですが、ブログを自分好みにカスタマイズして個性を出したいなら、HTMLやCSSの知識は最低限必要ですよ。

将来調べる時間を少なくするためにも、自己投資と思って一冊ぐらいは手元に置いておきましょうね。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

posted with カエレバ

千貫 りこ 技術評論社 2017-05-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！

この記事は、

というあなた向けの記事です。

ブログのWordPressテーマを変更するのが初めてだと、テンプレートを変更するのは不安たっぷりですよね。

僕もそうでした。
そして、見事に撃沈（笑）

その理由は、注意力不足と事前準備をしていなかったからです。

WordPressテーマ変更手順まとめ！注意点・エラー対処法・事前準備・プラグインのテスト方法

wakuwaku-keigo.com

2019.07.23

ワードプレスの変更のリスクとしてよく聞くのは、

• ブログのアクセス数が減少
• SEOに悪影響
• カスタマイズしていたデザインが崩れる

といったところでしょうか？

ご安心ください。

僕が人柱となって、実際にワードプレステーマを変更した体験談をベースに、あなたの不安点・リスクに一問一答していきます！

あなたの不安を解消してWordPressテーマを変更できるようになりますように。

僕がSEOやアクセスなどのリスクを承知でワードプレステーマを変更したかった理由とは？

僕はもともと、無料ワードプレステーマのSimplicity2を利用していました。

Simplicity2をおしゃれにカスタマイズしていたので満足していた僕。

Simplicity2のカスタマイズ初心者へ！必ず読みたい厳選5記事

wakuwaku-keigo.com

2018.08.08

コピペで簡単！Simplicity2のおしゃれなカスタマイズ記事まとめ

wakuwaku-keigo.com

2018.11.01

しかし、ある日とあるツイートを見て発狂することになります。

無料WordPressテーマ「Cocoon（コクーン）」を公開しました https://t.co/YLIHygiTac pic.twitter.com/cUhrR4RIfk

— わいひら@寝ログ (@MrYhira) March 19, 2018

そんなこんなで1ヶ月半ほどもんもんしてましたが、Simplicity2の後継WordPressテーマのCocoonの機能が最高すぎたので、ブログテンプレートを変更したって経緯でした。

しかし、大きな誤算が！！

Simplicity2をがっつりカスタマイズしていたので、おしゃれなデザインにしていたブログが

▼（変更前）Simplicity2▼

こうなった…

▼（変更後）Cocoon▼

Simplicity2をあんなに頑張って、カスタマイズに時間をかけておしゃれにしたのに…

台無しやんけ！！

当時は、なぜWordPressテーマを変更する前にテストをしなかったのか、激しく後悔しましたねorz

僕はブログがおしゃれじゃないと、ブログを書くモチベーションが著しく落ちてしまうので、カスタマイズをしてデザインを整えました。

▼こんな感じにね▼

Cocoonにして、すぐに満足できるブログに戻せたので一件落着。

やはりワードプレステーマを変更するのは、それなりのリスクがあります。

デザインが崩れるだけなら、HTMLやCSSをカスタマイズすればいいだけですが、SEOに悪影響が出てアクセス数が減少する可能性もあるんです。

ワードプレステーマを変更してアクセス数が減少するのは内部SEOが原因！？

ブログのテーマを変更するとSEOに影響はある！デメリット以上にメリットはある？

ワードプレステーマを変更して、

• アクセス数が落ちる
• SEOに不利

と言われる理由はなんなのでしょうか？

そもそも、ワードプレステーマを変更しただけで、アクセス数が急激に上がることはありません。

まぁ、テンプレートのデザインによってブログの回遊率が上がったりはするかもしれませんけどね。

反対に、ブログのテーマを変更すると、少なからずSEOやアクセス数には影響が出ます。

テーマによっては、hタグの使い方が違ってたりもするし…

かなりのアクセスがあるメインブログは、テーマ変更で検索順位に大きな影響を受けてしまう可能性があるので、不用意にWPテーマを変更しない方が良いでしょう。

ただし、そのデメリット以上にテーマ変更のメリットがあるなら別！

今のあなたのブログが、以下のような状況ならテーマを変更すべきです。

変更によってもしアクセス数が落ちても、現状のワードプレステーマがSEO最適化がしていれば徐々に上がります。

アクセスが減少する原因はワードプレステーマによって内部SEOの対策がしっかりされていないから

SEOやアクセス数に影響がある理由は、はっきりとはわかりませんが一般的に内部SEOが原因していると言われています。

わからない人のために簡単に補足しておくと、SEOとは”Search Engine Optimization” の略で検索結果の順位をあげる対策のことです。

SEO対策（検索エンジン最適化）は大きく分けて2つ。

1. 内部SEO対策
2. 外部SEO対策

内部SEOとは、サイトの内部構造や、htmlタグのソースを検索エンジン用に最適化する作業のこと。

内部SEOは200以上の要素があると言われており、全てを説明しきるのは難しいです。

なので、内部SEO対策の一つにワードプレステーマの構造も影響しているという理解だけしておきましょう。

ちなみに、外部SEOでわかりやすいのは、外部リンクですね。

まとめると、

お分かりでしょう？

ワードプレステーマを変更するなら、こういったリスクを避けるためには、信頼できるブログテンプレートを選ぶことが重要なんです。

僕が変更したCocoonは、内部SEO対策もしっかりしているので安心できます。

アクセス数が半減したり、検索上位に表示されていた記事が、テーマ変更で圏外になることもあるので、その場合はすぐにワードプレステーマを戻しましょう。

テーマを戻すと、徐々にアクセス数が増えてくるはずです。

とはいえ、ワードプレステンプレートを変更するのは不安でしょう。

なので、実際に僕がSimplicity2からCocoonにブログテーマを変更してどうだったかを、次章から一問一答形式でリスクに回答していきます。

ワードプレステーマを変更してSEOやアクセスは大丈夫？あなたの不安点（リスク）に一問一答

ざっくり思いつくままですが、あなたがワードプレステーマの変更で考えてる不安に回答していきますね！

【画面真っ白になる不安】WordPressテーマの変更リスク・デメリット

ブログが真っ白になったり表示しなくなったりしない？

Simplicity→Cocoonでは大丈夫でした。

というより、きちんと説明書や解説書に沿って設定したら、まず間違いなくそんなことは起こらないはずです！

もしそうなってしまっても、作者やWordPressテーマ販売元に連絡したら対応してくれるはずです！

WordPressテーマとPHPの相性が悪くてエラーが出たりしない？

Simplicity→Cocoonでは問題ありませんでした。

古いWordPressテーマを利用するとあるみたい。

利用しているサーバーのPHPバージョンが最新で、WordPressテーマを使うときは注意。

【デザイン崩れの不安】WordPressテーマの変更リスク・デメリット

デザインが崩れたりしない？

Simplicity→Cocoonではデザインが崩れました。

いやーこれは焦りましたね。

WordPressテーマの変更直後は、

と検索しちゃったほどです（汗）

ただ、こちらについては僕の事例のとおり、Cocoonのカスタマイズは簡単なので、少しいじれば戻すことができます。

後述しますが、面倒なカスタマイズ時間を短縮するためにも、ワードプレスの変更前に、Simplicity2時代の設定内容・CSSを控えておくことをオススメします！

さらに、不安なあなたには嬉しいことに、最悪デザインが崩れても、Cocoon→Simplicity→CocoonというようにWordPressテーマを戻すこともできます。

前のブログのデザインとほぼ同じ見た目にしたいんだけど？

Simplicity→Cocoonでは無理でした。

かなりCSSをカスタマイズしたりするとできるかもしれませんが、基本的にはできません。

ただ、僕はブログのデザインを変えようと思っていたので、問題はありませんでした。

中には、「前のイメージを再現したい！」という方もいるかもしれません。

ブログデザインが変わると読者さんがびっくりしますもんね。

ただ、WordPressテーマによってはできるものがあるようですが、基本的に新しいテンプレートに合わせるべきです。

テンプレートはある程度カタチが決まったものなので、無理に合わせるとそもそも時間がかかるし、新たな不具合発生に繋がります。

なので、僕がオススメしたいことは、これらを前のWordPressテーマと統一させることです。

これだけで、前のブログのイメージを引き継げると思うのでぜひお試しあれ。

【SEOの不安】WordPressテーマの変更リスク・デメリット

SEOに悪影響が出て記事のアクセス数が落ちたりしない？

Simplicity→Cocoonでは問題ありませんでした。

WordPressテーマの変更で、アクセス数が落ちたら本末転倒。

ブログ収益にも直結するので、絶対避けたいところですよね。

Cocoonへの変更ではなんともありませんでしたが、WordPressテーマの変更とSEOは関係ないとは言えないようです。

WordPressテーマが、きちんと内部SEO対策されたものかどうか、評判など十分に調べてから変更するようにしましょう。

CocoonはもちろんSEO対策もバッチリです！

【データ削除の不安】WordPressテーマの変更リスク・デメリット

今まで書いたブログ記事が消えたりしない？

Simplicity→Cocoonでは問題ありませんでした。

というより、全部消えたら多分ブログ辞めてます（笑）

WordPressテーマとブログ記事は管理している場所が違うので、変更によって記事が消えることはありません！

ご安心を！

これまでにアップロードした画像が消えたりしない？

Simplicity→Cocoonでは問題ありませんでした。

アップロードした画像が消えたら、記事の書き直しが必要になるので、絶対避けたい不安要素ですよね。

でも、それはないのでご安心ください。

【設定リセットの不安】WordPressテーマの変更リスク・デメリット

各記事のAMP設定や装飾は消えたりしない？

Simplicity→Cocoonでは問題ありませんでした。

CocoonにはSimplicity2の引き継ぎ機能があります！

2018年5月現在、以下の機能が引き継げます！

• SEO設定（メタディスクリプション等）
• 広告設定（広告の除外）
• AMP設定（AMP表示しない）
• ページ設定

実はCocoon公開当時は、メタディスクリプションの引き継ぎなどはできなかったのですが、作者が引き継げるように変更してくれました。感謝しかないですね。

各記事の装飾は「テキストモード」を見ると、タグで書き込まれていますよね？

ワードプレステーマ変更とテキストタグは無関係なので、書き換えられることはないので、同じく消えないんです。

ただし、WordPressテーマ独自のショートコード[●●]を使っていたら、装飾が消えちゃう危険性はあります。

有名なのはSTORK（ストーク）のショートコード。

僕は試していないので絶対とは言えませんが、テーマ独自のおしゃれなショートコードはWordPressテーマの変更で使えなくなるし、反映されていないでしょう。

サイドメニューの設定やウィジェットの広告は消えたりしない？

Simplicity→Cocoonでは一部ウィジェットが停止しました。

というのも、CocoonにはSimplicity2の引き継ぎができますが、全てが引き継げるわけではないからです。

僕はほとんど問題ありませんでしたが、Simplicity時代に設定したウィジェットが一部停止になりました

一部の広告やWordPress Popular Posts で人気記事ランキングなどを設定していたら、消えちゃったりしてますね。

だから、ウィジェットの見直しは必須だと思います。

Simplicity2からCocoonへ変更！最初にしたい10の初期設定作業を参考に修正してみてください。

各記事の被リンクがなくなったりしない？

Simplicity→Cocoonでは問題ありませんでした。

被リンクは、URLが関係しているためワードプレスのテンプレートとは無関係です。

ただし、WordPressテーマの移行後にパーマリンクを変更したら、被リンクがなくなっちゃいますよ！

パーマリンクはSEOに関係しているので、ブログ記事を公開したら絶対変えないように！

アクセス数が0になっちゃうよ！

【プラグインの不安】WordPressテーマの変更リスク・デメリット

ダウンロードしたプラグインが消えたりしない？

Simplicity→Cocoonでは問題ありませんでした。

プラグインは消えたりしないし、停止になったりもしませんでした。

しかし、WordPressテーマによってはプラグインが停止状態になるという噂も聞きます。

もし、停止してしまってもプラグインは消えたりしないので、必要なプラグインを有効化しましょうね。

WordPressテーマとプラグインの相性が悪くてエラーが出たりしない？

Simplicity→Cocoonではプラグインのエラーが出ました。

僕が現在発見したエラーが出るプラグインは以下の２つ。

• Table of Contents Plus
• TinyMCE Advanced

Table of Contents Plusは目次を出すプラグインですね。

Simplicity2からCocoonへ変更！最初にしたい10の初期設定作業に書きましたが、Cocoonに変更すると目次がダブります。

上記URL記事を見て修正してみてください。

TinyMCE Advancedは、ワードプレスのビジュアルエディタの拡張プラグインですね！

▼Cocoonに変更したらこんな感じになりました。

一見問題なさそうですが、Cocoonのめっちゃ便利な機能のスタイルドロップダウンリストがないんです！

▼プラグインを削除したら出た！

「便利なプラグイン」と「便利なWordPressテーマの機能」がケンカしちゃった例ですね。

（2018年5月12日追記）
わいひらさんに質問したところ、エラーではなく別の場所に表示されていることが判明しました！

他にもあるかもですが、今のところはありません。

【新テーマ利用の不安】WordPressテーマの変更リスク・デメリット

新しいWordPressテーマをちゃんと使いこなせるかな？

・・・これは頑張れとしか言えないですね（笑）

ただ、基本的にWordPressテーマはどれも使いやすいように、製作者の方が考えてくださってるので、不安になる必要はないと思いますよ！

HTMLやCSSの知識がないブログ初心者の僕でも、思いどおりにCocoonをカスタマイズできています！

Cocoonは公式デモサイトが充実してるので、行いたいカスタマイズがあれば検索してみください↓

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

WordPressテーマ変更手順まとめ！注意点・エラー対処法・事前準備・プラグインのテスト方法

wakuwaku-keigo.com

2019.07.23

まとめ：SEOやアクセス数が下がるリスクを理解した上で準備をしてワードプレステーマは変更しよう

ここまで読んでいただいたらわかるとおり、ワードプレステーマを変更するときに大切なことは、以下の3つ。

Cocoonに変更した時のリスクは、ご覧のとおりです。

この記事では、SEOのリスクやテーマ変更のデメリットばかり話してきましたが、実際僕はテーマを変更してからアクセス数が爆上げしました！

ブログの表示速度も上がったので、個人的には大満足です。

不安な気持ちもわかりますが、今より一歩先に進むにはブログテンプレートを変更に挑戦してみてください。

僕は、無料ワードプレステーマを現在は利用していますが、ゆくゆくは有料WordPressテーマを利用したいと思っています。

▼気になる有料ワードプレステーマを以下の記事で比較したので、よければご覧ください。

【特典付】WordPressテーマ ELEPHANT3レビュー！他のテーマと比較検証したよ

wakuwaku-keigo.com

2019.04.18

こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon（コクーン）。

ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。

もちろん、僕も機能とデザインに惚れ込み、これまで使っていたSimplicity2からCocoonへ移行しました。

さらに、Cocoonをおしゃれにカスタマイズして、かっこいいブログに仕上げてCocoonライフを過ごしていました。

だがしかし！

上記の記事を公開してからたくさんの方々に読まれ、いただいた通知の数々。

中でも、「トップページを固定ページにするやり方教えろや！ボケがぁ！！」という問い合わせがかなりありました。

カスタマイズ方法の質問を受けるのですが、ブログ初心者の僕がCocoon（コクーン）のトップページを個性を出すために、様々な試行錯誤があって今にいたっています。

でも、問い合わせを頂ける方からの感謝の声に応えるためにも、泣く泣く固定ページでCocoonのトップページの作り方を公開することにしました(他のWordPressテーマでも流用可)。

しかも、丸パクリできるように自作したCSSコピペOKのテンプレート付。

はっきり言って、真似するだけで「ブログのトップページは新着記事が並ぶ」という常識があるブロガー界で、一味違う個性あるブログが作れるでしょう！

ここまでするんだ…！

良い記事だったら、はてブとシェアしてくださいね(-人-)

記事を参考にWordPress「Cocoon」のブログトップページを固定ページで作るメリット

Cocoonのトップページをブログ型からサイト型へデザインを一新できる

最初に、この記事でマネできるCocoon（コクーン）のトップページ（固定ページ）を見せておきましょう。

変更前のCocoonのトップページデザインはコレでした。

（Before）

このCocoonのカスタマイズ方法は、WordPressテーマ「Cocoon」カスタマイズ攻略！CSSコピペでおしゃれにするまとめで紹介しています。

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

そして・・・・

この記事で紹介する固定ページで作ったCocoonのトップページがコレだっ！！

（After）

ご覧のように、このCocoonのトップページデザインのキモは、カテゴリごとに新着記事を表示するようにした点。

つまり、一般的な新着記事順のトップページをやめたということです。

僕個人としては、ブログ型からサイト型に変更したという認識です。

ブログのトップページを固定ページで作ればアクセスアップできる（かも）

僕がブログのトップページを変えようと思った理由は2つ。

1. ワードプレステーマ「Cocoon」で個性を出したかっこいいデザインにしたかったから
2. 「最新記事順のブログは読者からすると見にくいのでは？」という不安があったから

ブログ歴8ヶ月程度のブログ初心者の僕ですが、ブロガーになってたくさんのブログを見てきました。

そこで気づきましたが、最新記事順って読者目線で見るとわかりにくくないですか？

僕の場合だと、婿養子の記事→移住の記事→ブログ運営の記事→WordPressの記事…というように、記事ネタがバラバラで思いついた順番で記事を書いていました。

これを読むあなたはどうですか？

ブロガーは好き勝手な順番で記事を書いていくので、読者からすると、

このブログって、何のブログだ？

と思われてしまっているかもしれません！

という仮説があって、トップページを固定ページを使って改造できないか考え始めました。

そして・・・・

NAE（@naenotenet）さんの記事にたどり着きました。

ブログのトップページを作ったので、作り方から実測効果まで全部紹介

ブログトップページを作りました。コンセプト、コンテンツ設計の考え方、実際の作り方や使ったプラグイン、作成前後での数値変化などをまとめました。

bloglab.naenote.net

要約すると、トップページをリニューアルすると、

• 平均ページ滞在時間
• 直帰率
• 離脱率

のデータが改善してアクセスが増えたって話。

トップページをリニューアルするだけですげぇ効果！

でも、アクセスアップ以上に僕がCocoonをリニューアルする決め手になったのが、記事内のNAEさんのこの言葉に共感したからでした。

ちなみに、およそ月10万PVの当ブログにおけるトップページへのアクセス数はおよそ月2000PVです。

たった2%のためにトップページを作り込む必要があるか？　と言われるとぐうの音も出ません。

しかしその2%は、ブログそのものが主役であるトップページにまでわざわざ来ていただいた「大事なお客様」であることを忘れてはいけないと思うんです。

まだ、Cocoonをリニューアルして間もないのでデータがないですが、トップページの変更した効果検証も今後、データでお見せできるようにしていきますね。

（追記）

アクセス数含めて、トップページを変更してから数字が軒並み改善しました。

ただ、当記事を書いたことでトップページを見る人が爆増したこともあるので一概には言えませんが(^_^;)

WordPressテーマ「Cocoon」なら簡単！ブログトップページを固定ページでサイト型にする作り方

それでは、Cocoon（コクーン）で、ブログトップページ（フロントページ）を作る方法を説明していきますね。

具体的な作り方は、以下の5ステップ。

1. トップページのコンテンツ設計
2. 固定ページの作成方法の決定
3. 固定ページの作成
4. 固定ページ・サイドバーのデザイン調整
5. 固定ページをトップページ化

【WordPress「Cocoon」カスタマイズ】（１）トップページのコンテンツ設計

まずは、トップページをどんなコンテンツ設計にするのかを考えましょう。

考えるべきは、たった2つ。

• コンテンツ：ブログのトップページにどんな内容を表示させたいか？
• デザイン：考えたコンテンツのレイアウトやデザインをどうするか？

簡易ワイヤーフレームを考えるイメージです。

▼ワイヤーフレームのイメージ

難しく考えず、Cocoonの新着記事一覧の部分に、どんな固定ページを作りたいかを考えてみましょう。

①コンテンツ：ブログのトップページにどんな内容を表示させたいか？

ブログ読者によって、最適解は変わると思いますが、代表的なものはこんなところでしょう。

1. コンセプト：どんな目的で運営しているブログなのか？
2. 運営者情報：どこの誰がブログを書いているのか？
3. お知らせ：最新記事やおすすめ記事、人気記事10選などは何か？
4. 発信内容：どんなカテゴリで何を発信しているのか？
5. サービス内容：どんなサービスを提供しているのか？
6. SNS・フォロー：ブログのフォローはどうすればいいのか？

Cocoonには、

• アピールエリア
• 通知エリア
• カルーセル

などの機能もあります。

それぞれをうまく使って、あなたのブログ読者にとってわかりやすいコンテンツが表示させるようにしてあげてください。

難しければ、僕と同じようにカテゴリ別の最新記事を表示させればいい感じになりますよ。

後ほど、コピペできるCSSも公開しますね。

②デザイン：考えたコンテンツのレイアウトやデザインをどうするか？

ぶっちゃけ、HTMLやCSSの知識があれば、ランディングページのようなおしゃれでイカすトップページもできるでしょう。

でも、残念ながら僕はその知識は皆無。

な〜んもわっかりまっせ〜ん(￣▽￣)w

なので、デザインをこだわれる人は勝手に頑張ってください。

HTML・CSS知識が０の方は、後ほど紹介する僕のトップページデザインを参考にしてくださいね。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

posted with カエレバ

千貫 りこ 技術評論社 2017-05-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

【WordPress「Cocoon」カスタマイズ】（２）固定ページの作り方の決定

作成したいトップページのコンテンツとデザインが決まったら、固定ページの作成方法を考えましょう。

僕が調べた限り2つのブログトップページの作り方があります。

本命は作り方②です。

作り方①：プラグイン「Page Builder by SiteOrigin」で固定ページを作る

2カラムや3カラムで綺麗なトップページを作ろうとすると、HTMLやCSS、JavaScriptといったプログラミングの知識が必要になってきます。

それって大変ですよね？

そんな時に使える便利なプラグインがPage Builder by SiteOrigin。

サイト Page Builder by SiteOrigin — WordPress プラグイン

簡単にカラムを作れる独自のエディタが使えるようになりますよ↓

WordPressを普段触ってるブロガーなら、感覚的に使い方をマスターできると思います。

でも、慣れるまでは大変です…

僕も最初は、このプラグインを使ってトップページを作成してましたが、

と思い直して、途中でやめました。

Cocoon以外のワードプレステーマを使ってたり、めちゃくちゃおしゃれなトップページを目指したいなら、Page Builder by SiteOriginで作成されるといいと思います。

プラグイン「Page Builder by SiteOrigin」の使い方はこちらを参照ください。

「Page Builder by SiteOrigin」の使い方

前回WordPressの記事やページの更新を劇的に手軽に、かつ直観的にさせてくれる「Page Builder by SiteOrigin」というプラグインを紹介させていただきました。 今回はその使い方をサンプルとデモを交えながら詳しく紹介させていただきます。

glitter-style.jp

作り方②：Cocoon（コクーン）の標準機能で固定ページを作る

本命はこっち！

Cocoonはありがたいことに、無料テーマだとありえないぐらい高性能なので、標準機能で十分トップページ作れるんですよね。

先ほどのプラグインのように、新たな作業は覚えなくてOK！

しかもHTMLとCSSのコピペで完成しちゃいます！

【WordPress「Cocoon」カスタマイズ】（３）固定ページの作り方

さて、ここまで固定ページの新規作成ボタンを押しただけで、特に何もしていないと思います。

ここからはWordPressの標準機能を使って固定ページをがっつり作っていきます！

僕はめちゃくちゃ大変で3日ぐらい、「あーでもない、こーでもない」と言いながら、ブログのトップページをカスタマイズしてテンプレート化しました。

でも、この記事を読むあなたはラッキーです。

僕の3日かけた努力の結晶を全てコピペできるんですから！！

それでは、固定ページの作り方をご説明していきますね。

①固定ページを新規作成する

ワードプレスのダッシュボードから、「固定ページ」＞「新規作成」をクリックします。

タイトルはなんでもいいです。

この記事ではわかりやすく『【Cocoonトップページ】固定ページテンプレ』としておきましょう。

パーマリンクの設定は関係ないので必要ありません。

②テキストエディタにHTMLをコピペしよう

固定ページの入力画面をビジュアルからテキストエディタにしてください。

そして、新規ページに下記のHTMLコード（自作した固定ページのテンプレート）をコピー&ペーストしてください。

<h2 style="text-align: center;">『ブログタイトル』とは</h2>
<p style="text-align: center;"><strong><span class="red">（ブログに合った画像）</span></strong></p>
ブログの説明欄〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">●●をチェック</a></p>
<br>
<h2 style="text-align: center;">カテゴリ別の最新記事</h2>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ①</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ②</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ③</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ④</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ⑤</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ⑥</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
</div>
<h2 style="text-align: center;"><strong><span style="font-size: 24px;">はまちゃんからのお知らせ</span></strong></h2>
<div class="column-wrap column-2">
<div class="column-left">プロフィール</div>
<div class="column-right">
<h3 style="text-align: center;">お知らせ①</h3>
内容〜〜〜〜
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">お知らせ②</h3>
内容〜〜〜〜〜
</div>
<div class="column-right">
<h3 style="text-align: center;">お知らせ③</h3>
内容〜〜〜〜〜
</div>
</div>

下記のような固定ページが作成されればOKです。

追記

カテゴリ別最新記事の上に全体の新着記事を3つ横並びで表示させて、よりオシャレなデザインになりました。

新着記事下の「新着記事をもっと見る」ボタンをクリックすると、従来のデザインである新着記事一覧が表示されるようになっています。

こちらの実現方法は、以下の記事に詳しく書いているので参考にしてください。

【Cocoon】ショートコードで新着記事を横並び表示にするフロントページカスタマイズ

wakuwaku-keigo.com

2022.05.17

③Cocoonのタグやショートコード機能を使って固定ページを作成

コピペした固定ページのテンプレートをサンプルに、あなたの目指すトップページにするよう内容を追記していきましょう。

僕がおすすめする編集方法を解説していきますね。

【『ブログタイトル』とは】おすすめしたい固定ページのカスタマイズ方法

『ブログタイトル』

ここはあなたのブログ名を入れましょう。

（ブログに合った画像）

ブログのロゴなどのイメージ画像を入れてみては？

ブログの説明欄

ブログを訪問した読者がわかりやすいように、どんなブログか説明しましょう。

または、ブログのテーマを書いたり、どんな読者向けでどんな悩みが解決するブログなのかを書くのもおすすめですね。

●●をチェック

飛ばしたいページのリンクを貼る箇所。

僕はプロフィールに飛ぶようにしています。
「まず読んでほしい記事10選」なんかも面白いですね。

【カテゴリ別の最新記事】おすすめしたい固定ページのカスタマイズ方法

カテゴリ①〜⑥

あなたのブログのカテゴリ名に変更してください。

アイコンをつけた方がおしゃれかな？　と思って僕はつけてみましたが、必要なければ削除してもいいと思います。

テキストエディタで見ると、カテゴリ名の前に下記のHTMLを追加しています。
（※）以下のHTMLを削除すれば、アイコンも削除されます。

<i class="fa fa-thumbs-up fa-fw my-gray"></i>

そして、CSSに下記を追加すると、アイコンを灰色に変えることができます。
（※）色を変更したいならCSSに追記してください。

.my-gray {color: gray}

実は、CocoonはデフォルトでFont Awesomeを読み込んでいるので、簡単にアイコンをつけることができるんです。

アイコンの付け方と色の変更方法は、以下の記事『【Cocoon】グローバルメニューのカスタマイズ』を参考に挑戦してみてください。

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

（カテゴリに合った画像）

カテゴリ別の最新記事を一覧で出すだけでもよかったんですが、なんとなく寂しい感じがしたので画像を入れてみました。

僕は可愛いイメージにしたかったので、FLAT ICON DESIGNから素材を選びました。

FLAT ICON DESIGN -フラットアイコンデザイン-

フラットデザインに最適！WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー（無料）ダウンロードできるサイト『FLAT ICON DESIGN』

flat-icon-design.com

逆にかっこいいイメージののトップページにしたいなら、カテゴリ名を書いた横長の画像を入れたらええ感じになりますよ。

キャッチフレーズ

必要なければ削除してください。

僕はハッシュタグのイメージで、入れることにしました。

新着記事or人気記事

ココがCocoonの機能のすごいところ！

新着記事や人気記事を好きな数だけ、カテゴリを指定して一覧で表示できるんです！

ビジュアルエディタの「ショートコード」をクリックすると、

新着記事一覧をクリックすると、下記のショートコードが追記されます。

[〜new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”〜]

難しく見えますが、いじるのはたった2つ。というより1つだけかな？

• count=”5″
• cats=”all”

countは記事の表示数を表しています。

5記事のままで問題なければそのままで。
3記事に減らすなら”3″に変更するなど、好みの記事数にしましょう。

catsはカテゴリを表しています。

つまり、デフォルトの”all”だと、「全てのカテゴリの中の新着記事一覧を表示」という意味になるんです。

カテゴリを指定するには、

• 「ダッシュボード」＞「投稿」＞カテゴリをクリックしてください。
• 指定したいブログカテゴリにマウスを合わせてください
• カテゴリIDが以下のように表示されるのでその数字を追記すれば完了

▲これはカテゴリIDが”3″

このカテゴリを指定した場合のコードは下記。

[〜new_list count=”5″ type=”default” cats=”3″ children=”0″ post_type=”post”〜]

複数のカテゴリを表示したいなら「,（カンマ）」で区切ればOK。

[〜new_list count=”5″ type=”default” cats=”3,6,8″ children=”0″ post_type=”post”〜]

このカテゴリをもっと読む（もっと見る）

クリックすると、各カテゴリの記事一覧に飛ぶようにします。

カテゴリにあったリンクに修正すれば完成です。

https://●●●●●.com/●●●

はまちゃん

ボタンの文言は自由です。「もっと見る」としても良いかもしれません。

その他、2カラムや3カラムの行・列を追加編集したい場合

ここまで読んだあなたなら、固定ページを僕の固定ページテンプレートじゃなくオリジナリティを出したページにしたいと思っていることでしょう。

その場合、ビジュアルエディタから、新たに2カラムや3カラムなどを簡単に表示できますので、好きにイジってあなただけのトップページを作り上げてくださいね！

▼追記

質問が多かったので、新着記事一覧ページの作り方をまとめました。

カテゴリだけでなく、全体の新着記事一覧を表示させたいなら参考にしてください。

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

wakuwaku-keigo.com

2022.05.17

▼追記

アイキャッチ画像の大きさが記事ごとで異なると、ボタン位置がズレてしまいます。

ボタン位置がずれてる…

かっこ悪いと思う方は、以下のコードを固定ページの『カスタムCSS』に追加すれば調整できます。

/* トップページのカテゴリ別最新記事の幅固定 */
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px;
}

カスタムCSSは固定ページ編集画面の一番下らへん

無事に、位置のズレが直りました。

でも、記事間の隙間が生まれて個人的に気に食わないので追記していません。

ボタン位置を調整。でも記事間の隙間が気になる…

いい感じに、調整できる方法を知ってる方はご連絡くださいm(_ _)m

【WordPress「Cocoon」カスタマイズ】（４）固定ページ・サイドバーのデザイン調整

無事に固定ページのコンテンツ作成ができたら、固定ページとサイドバーのデザインを調整しましょう。

①固定ページのデザインカスタマイズする

トップページに不必要な要素を非表示

固定ページをトップページ化するときは、表示すべきでない箇所がいくつかあります。

プレビューを見てください。

【記事上】

• パンくずリスト
• 固定ページのタイトル
• 記事上のシェアボタン
• 記事の投稿日・更新日

【記事下】

• 記事下シェアボタン
• 投稿者名

これらは、いらないですよね？
人によっては、記事下のフォローボタンすら不要かもしれません。

他の固定ページでは表示してほしいものなので、トップページ用の固定ページのみ非表示させるように、CSSで指定をする必要があります。

色々な要素を非表示にするCSSを以下に掲載しておくので、いらない分だけご利用ください。

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}
/*モバイルグローバルメニュー非表示*/
.home.page #navi {
 display: none
}

グーグルアドセンスと目次を非表示

ブログの顔でもあるトップページ。

そこにアドセンス広告や目次があると、急にダサくなります。

固定ページのビジュアルエディタの右側からチェック1つで非表示にできるので、削除しておきましょうね。

見出し3のデザイン調整

こだわりたい人用ですが、僕のテンプレートではトップページのみ見出し3（h3）のデザインを変更しています。

「婿養子」や「移住」などのカテゴリ名の部分は、実は見出し3です。

でも、普段の記事の見出し3のデザインは以下になんですよね〜

これはどうやっているかというと、スタイリッシュな見出しにしたいと思って、トップページの見出し3のみCSSでデザインを変えているんです。

この見出しの変更をマネしたい方は、以下のCSSのコピペをしてください。

/* トップページ見出し３　CSS変更 */
.page-id-●●●● .article h3 {
/* 見出し３のスタイル */
background: none;
font-size: 20px;
letter-spacing: 1px;
display: inline-block;
position: relative;
width: 100%;
padding: 0;
text-align: center;
border-left: none;
}
.page-id-●●●● .article h3::before, .page-id-●●●● .article h3::after {
content: '';
position: absolute;
top: 50%;
width: 20%; /*ラインの長さ*/
border-top: 1px solid #444d53; /*ラインの色*/
}
.page-id-●●●● .article h3::before {
left: 10px;
}
.page-id-●●●● .article h3::after {
right: 10px;
}

『●●●●』の部分はトップページ用の固定ページIDを指定する箇所です。

固定ページ一覧から作成した固定フロントページにマウスを合わせると、こんな表示が記事下に表示されます。

例えば僕の場合だと、『post=4860』の4860が固定ページIDです。

「.page-id-●●●●」の部分に4860を入れたら完成です。

②サイドバーのデザインカスタマイズをする

最後に調整するのはサイドバーです！

実は、固定ページをトップページ化する方法は2種類あります。

1. サイドバーが無いバージョンのトップページ
2. サイドバーがあるバージョンのトップページ

どちらのフロントページにするか、好みで選んでみてください。

サイドバーを非表示にした1カラムのフロントページにする場合

サイドバーがないトップページなら、サイドバーのデザインカスタマイズは不要。

代わりに固定ページが1カラムで表示されるようにしましょう。

操作は簡単！

固定ページ作成画面の右側にある「ページ設定」で、1カラム（広い）または1カラム（狭い）を選べば、サイドバーがないフロントページにできます。

サイドバー無しを希望の方は、以下の章を飛ばして『（５）固定ページをトップページ化』に進んでください。

サイドバーを表示させた2カラムのフロントページにする場合

僕は色々悩んだ結果、サイドバーありのフロントページデザインを選択しました。

サイドバーがあるトップページを作成するなら、一部デザインの調整しましょう。

ただし、何のデザインを調整すべきかは、あなたのフロントページのコンテンツ次第。

例えば、トップページのコンテンツの中に人気記事を表示させているのに、サイドバーにも同じ人気記事を表示させるとしつこい感じがしますよね？

そのように重複した部分は削除すべきでしょう。

反対に、トップページだけ表示させておいて、各記事を読むときにはサイドバーに表示させたくないという内容もあるかもしれません。

あなたのトップページに合うように、自由にカスタマイズしてください。

ここでは、サイドバーの操作方法のみ解説しておきます。

①「ダッシュボード」＞「ウィジェット」をクリック

サイドバーに、必要なコンテンツをセットします。

②「表示設定」をクリックしページの「トップページのみ」をチェック

上の画像の場合、「ウィジェットの表示」が「チェック・入力したページで非表示」となっています。

トップページに表示させたくないが、普通の記事ではサイドバーに表示させたいコンテンツの場合、この設定にしましょう。

反対に、トップページのみ表示させたいコンテンツの場合は、「ウィジェットの表示」を「チェック・入力したページで表示」に変えてください。

③保存をクリックして完了

固定ページをトップページ化してから、最終的に問題ないか確認するようにしてくださいね？

【WordPress「Cocoon」カスタマイズ】（５）固定ページをトップページ化

これで最後です！

あなたの創意工夫を凝らしたあなただけの固定ページを作ったら、トップページ化しましょう。

WordPressの機能を使ったら簡単なので、サクッと説明しますね。

1. 「ダッシュボード」＞「設定」＞「表示設定をクリック」
2. 「フロントページの表示」で固定ページをクリックし、あなたが作成したトップページにしたい固定ページを選択
3. 変更を保存をクリック

はい！

これで無事にCocoonでオリジナルの固定ページを作成して、トップページ化できました！

お疲れ様でした！！

まとめ：WordPress「Cocoon」でかっこいい固定ページを自作してブログのトップページをカスタマイズせよ！

めちゃくちゃ丁寧に、Cocoonでブログトップページを自作した固定ページを表示させる方法を説明してきました。

15,000文字超なので、ここまで読んだあなたも大変だったと思います。

でも、頑張ったおかげで、他のブロガーから一歩リードしたブログトップページが作れたんじゃないでしょうか？

あなたのブログのトップページを見てくれるのは、いわばお得意様です。

せっかく興味を持ってくれた読者のためにも、ぜひトップページの変更に挑戦してみてくださいね♪

【キャンペーン中】Cocoonのトップページを変更したブログのご紹介

ここまで簡単に作れたのは、ひとえにCocoonが素晴らしいWordPressテーマだからです。

僕と一緒にCocoonブロガーを盛り上げて行きたくありませんか？

そこで、こんな企画をすることにします！

「Cocoonのトップページを変更したブログの紹介企画」

応募方法はシンプル！

▼コメント用のツイートはこちら

【ブログ更新】

ワードプレステーマ「#Cocoon」を使うブロガーの皆様へ🗣️

固定ページでイカすトップページを作る方法を教えます(^^)

【ブログ＝新着記事順】という常識を崩して、個性を出しましょう！

トップページを変更した方は僕のブログで紹介する企画やってます👇https://t.co/HVp1GrepYf

— はまちゃん@島根移住×(仮)婿養子×地方創生 (@wakuwakukeigo) 2018年9月11日

はまちゃん

当ブログ内のどれかの記事のリンクを貼った紹介記事を、あなたのブログで書いてくださった方のみ紹介していきます。
記事を書かれたらツイッターまでご連絡ください。

この企画は、いずれ終了しますのでお早めに。
ここだけの話、以下に紹介させていただいた先のクリックは、ほぼ毎日あります。

＜ブログを読んでCocoonのトップページを変更した皆様＞

新しく記事にしてくださった順で、紹介していきますね^^

はまちゃんの一言

やっぱり、ブログを自分好みにしていくためには、HTMLやCSSの知識が必要ですね。

そう思って、ちょっとずつ勉強を始めています。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

posted with カエレバ

千貫 りこ 技術評論社 2017-05-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

wakuwaku-keigo.com

2022.05.17

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

この記事は、

というあなた向けの記事です。

このブログは、WordPressテーマ「Simplicity2」から「Cocoon（コクーン）」へリニューアルしました。

初めての移行でしたが、結果は大満足。
無料テーマ→無料テーマにも関わらず、ブログは大きく進化しました。

WordPressテーマ「Cocoon（コクーン）」は、Simplicity2と同じく、カスタマイズの自由度がかなり高い！

その反面、何をどうカスタマイズすればいいか悩む人もいますよね。

ブログを書きたいけど、デザインが気になって集中できないという人もいるのでは？

そんなおしゃれなデザインを求めるあなたに朗報です！

この記事を読めば、僕のブログのレベルならすぐになれますよ！

WordPressテーマ「Cocoon」カスタマイズ攻略と題して、僕が行ったすべての設定方法をCSSコピペでマネできるように紹介していきますね。

めちゃくちゃボリュームある記事になってしまったので、ブックマークして、徐々に読み進めてください。

▼Cocoonのかっこいいトップページの作り方

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

wakuwaku-keigo.com

2022.05.17

【WordPressテーマ】Simplicity2からCocoonに変更するならブログ初心者は3段階の作業で行おう

Simplicity2からCocoonにワードプレステーマを移行する場合、以下の3段階に作業を分けましょう。

1. WordPressテーマを変更する時の注意点を把握しておく
2. Cocoonに変更する上で最低限必要な初期設定作業をまず終わらせる
3. Cocoonをおしゃれにするカスタマイズを後日ゆっくりとする

⑴WordPressテーマを変更する時の注意点を把握しておく

WordPressテーマの変更は、パソコンをwindowsからMacにするほど大きなこと。

何も考えずにテーマ移行すると、大変なことになるかもしれませんよ？

事前に知っておきたい、注意点・不安点・事前準備をまとめたので読んでおくことを強くオススメします↓

WordPressテーマ変更手順まとめ！注意点・エラー対処法・事前準備・プラグインのテスト方法

wakuwaku-keigo.com

2019.07.23

⑵Cocoonに変更する上で最低限必要な初期設定作業をまず終わらせる

ワードプレスは究極を言えば、どこまででもカスタマイズができるので終わりはありません。

Simplicity2やCocoonは、数あるワードプレステンプレートの中でも特にカスタマイズしやすいので、デザインにこだわっていつまで経ってもブログ記事を書けない初心者が続出中。

なので、まずは最低限必要な初期設定を終わらせて、記事を書くことに集中しましょう↓

Simplicity2からCocoon(コクーン)へ変更！使い方と10の初期設定作業【ワードプレス】

wakuwaku-keigo.com

2019.07.22

⑶Cocoonをおしゃれにするカスタマイズを後日ゆっくりとする

（１）（２）を読んだあなたは、いよいよCocoonをおしゃれにカスタマイズしちゃいましょう！

次章からいよいよ本題のCocoonをCSSコピペでおしゃれにできるカスタマイズ方法のご紹介！

ブログ初心者でもCSSコピペでおしゃれにできるように解説していきますね！

【初心者向け】WordPressテーマ「Cocoon」のヘッダーのカスタマイズ

ヘッダー背景画像とロゴを設定する

（Before）

（After）

①「Cocoon設定」＞「ヘッダー」をクリックします。

②ヘッダーレイアウト、高さ、ヘッダーロゴ、キャッチフレーズの配置、ヘッダー背景画像、グローバルメニュー色の設定を変更してください。

「ヘッダーレイアウト」はあなたに任せますが、デフォルトのセンターロゴがいいでしょう。

「高さ」も色々試しましたが、未入力でいいと思います。

「ヘッダーロゴ」はWordPressテーマの変更するに当たって、心機一転自分で作り直しました。
サイズは700×192

「キャッチフレーズの配置」は好みですね。
僕は非表示の方がスッキリしてると思うので、非表示にしました。

「ヘッダー背景画像」はテンプレート変更に合わせて自分で作り直しました。
高さは1124 × 272。

「グローバルナビメニュー色」も好みです。
僕はブログのテーマカラーにしてみました。

ヘッダーとロゴは2つの画像の組み合わせなので、ロゴに透過処理なされてないと変になります。

そして、Cocoonは完全レスポンシブなので、端末によってヘッダー背景画像の見え方が変わります。

なので、上下左右が見切れても大丈夫なヘッダー背景画像がオススメ！

ブログ全体のテーマカラー・背景色を変える

①「Cocoon設定」＞「全体」をクリックします。

②「サイトキーカラー」をお好みの色に変更してください。

③「サイト背景色」を変更すれば背景画像が変わります。（僕はデフォルトのまま）

この時、先ほどの「グローバルナビメニュー色」をデフォルトのままにしていると、ヘッダーの色もサイトキーカラーになります。

ヘッダーの背景色を全体のサイトキーカラーと別の色にしたい場合は、「Cocoon設定」＞「ヘッダー」＞「グローバルナビメニュー色」で好みの色に変更してください。

【初心者向け】WordPressテーマ「Cocoon」のグローバルメニューのカスタマイズ

グローバルメニューにアイコンをつける

（Before）

（After）

Simplicity2からCocoonへ変更！最初にしたい10の初期設定作業でも紹介しましたが、Simplicity2でもアイコンを入れていた場合、Cocoonに移行するとずれてるはずです。

これではかっこ悪いので、アイコンを正しい位置につける方法を紹介します。

①Font Awesomeから好みのアイコンを選択します。

そして、アイコンのFont Awesomeコードを確認しましょう。

例として「ハートのアイコン」の場合だと、「fa-heart」です。

②「外観」＞「メニュー」＞をクリック

③「メニュー構造」からアイコンをつけたい項目の▼をクリックし、ナビゲーションラベルに追加します。

 <i class="fa ●●●●● fa-fw"></i>婿養子

●●●●●の部分にFont Awesomeコードを書きます。

「ハートのアイコン」を入れる場合は「fa-heart」になので、こんな感じ！

 <i class="fa fa-heart fa-fw"></i>婿養子

メニュータイトルにあったアイコンをつけてみてくださいね！

（追記）グローバルメニューのアイコンに色をつける

グローバルメニューのデザインをリスブロさんを参考に変更しました。

https://s41t0h.jp/cocoon-menu-material-customize/

s41t0h.jp

せっかくなのでアイコンの色を変えて可愛くしたい！　と思ったのでその方法をご紹介します。

色を変え方は、CSSで色を指定するんです。

 【HTML】 <i class="fa fa-heart fa-fw my-example"></i>メニュー名
 【CSS】 .my-example {color: ◯◯}

例えば、僕の「婿養子」というカテゴリメニューならハートマークを以下のコードでピンク色にカスタマイズしています。

 【HTML】 <i class="fa fa-heart fa-fw my-pink"></i>婿養子
 【CSS】 .my-pink {color: #FF7FA1} /* 婿養子*/

【初心者向け】WordPressテーマ「Cocoon」のトップページのカスタマイズ

（9/11追記）

以下の記事もブログ初心者OKなので、合わせてご覧くださいね(^^)

▼Cocoonのかっこいいトップページの作り方

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

wakuwaku-keigo.com

2022.05.17

カルーセルを追加設定する

WordPressテーマ「ストーク」

にずっとWordPressテーマを変更したいと思っていたので、個人的にCocoonに変更して一番感動したことです。

①「Cocoon設定」＞「カルーセル」をクリック

②必要な箇所にチェック

アピールエリアを追加設定する

ブログで一番目立つコンテンツをアピールできる設定です。

購入や会員登録を促したり、見せたいページの導線として使えます。

①「Cocoon設定」＞「アピールエリア」をクリック

②必要な箇所にチェック

「高さ」はパソコンとスマホの見た目を見ながら決めよう！

「背景画像の固定」をチェックするとスクロールで画像が動きます。

「タイトル」はページ上に表示。

「ボタンメッセージ」はタイトルの下に表示。

「ボタンメッセージ」はCTAボタンに表示。

「ボタン色」も好きに設定が可能。

通知を設定する

通知も結構目立ちます。

「最初に読みたい厳選５記事」みたいな使い方をしてるブロガーが結構多いですね。

①「Cocoon設定」＞「通知」をクリック

②必要な箇所を変更

「通知表示」が入らなければ削除もできます。

「通知タイプ」では、通知（緑）、注意「黄色」、警告（赤）の３色が標準設定であります。

ただ、自由な色にしたかったので、僕は通知エリア「背景色」で好きな色にしました。

【初心者向け】WordPressテーマ「Cocoon」の記事一覧のカスタマイズ

記事一覧ページのレイアウト

①「Cocoon設定」＞「インデックス」をクリック

②好みのカードタイプにチェック

エントリーカードなら、記事一覧の４番目に広告を表示することができますが、縦型カード２列、縦型カード３列の場合は、記事執筆時点ではできないのでご注意ください。

「自動生成抜粋文字数」で、エントリーカード上に抜粋文章の表示ができます。
僕は、ごちゃごちゃしそうなので０にしています。

ただし、個人調べではメタディスクリプションを記事に設定していると、抜粋文字数をたとえ０にしても表示されます。

スマホのスライドインの色を変更する

スマホのスライドインの色を変えるとオリジナリティが出ますよね。

CSSをカスタマイズして、スライドインの色を変更しました。
さらに、サイドバーだけ赤文字にして、目立たせていますよ。

スライドインボタンを設定する

①「Cocoon設定」＞「モバイル」をクリック

②「スライドインボタン」をチェック

スライドインボタンをおしゃれにデザインする

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/* --------------------------- *
 *  スライドインのカスタマイズ *
 * --------------------------- */

/* 背景色を変更：背景画像にするなら不要 */
.mobile-menu-buttons {
	background: #A6C752;
}


/* サイドバーのみ色変更 */
.sidebar-menu-button {
	color: #EA2A15;
}

このcssカスタマイズは、こちらの記事を参考にアレンジしました。

https://bibabosi-rizumu.com/cocoon-slidein-menu-button/

bibabosi-rizumu.com

記事一覧をフェードインさせる

記事を選んだ時にふわっと暗くなり、「READ MORE」って文字がフェードインで表示されたらかっこいい！

ということで、CSSをカスタマイズして設定しました。

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/* 記事一覧ぼかしフェードイン */
a.entry-card-wrap figure.entry-card-thumb{
  overflow: hidden;
}

a.entry-card-wrap:hover img.entry-card-thumb-image{
  -webkit-filter: blur(2px) brightness(60%);
  filter: blur(2px) brightness(60%);
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
  opacity: 1;
  transition: 0.3s;
}
a.entry-card-wrap figure.entry-card-thumb::before{
  z-index: 1;
  font-family: sans-serif;
  font-weight: bold;
  content: "READ MORE";
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  font-size: 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .25s ease;
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -ms-transition: .4s ease;
}

a.entry-card-wrap:hover figure.entry-card-thumb::before{
  opacity: 0.9;
  font-size: 150%;
}

.entry-card-snippet{
  font-size: 72%;
  line-height: 1.6;
  color: gray;
  text-align: justify;
  text-justify: inter-ideograph;
}

このcssカスタマイズは、こちらの記事を参考にしました。

https://s41t0h.jp/cocoon-swallow-like-fadein-index-list/

s41t0h.jp

現在はトップページを固定ページにし、新着記事一覧はショートコードを使って横並び表示にし、新着記事一覧はホームとは別に作成しました。

別記事で方法を紹介しているので、合わせてご覧ください。

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

wakuwaku-keigo.com

2022.05.17

【Cocoon】ショートコードで新着記事を横並び表示にするフロントページカスタマイズ

wakuwaku-keigo.com

2022.05.17

【初心者向け】WordPressテーマ「Cocoon」の記事本文のカスタマイズ

フォントサイズ・スタイルを変更する

Simplicity2はフォントサイズが16pxだったけど、Cocoonは18pxと大きくなっています。

また、サイトフォントはCSSでカスタマイズしなくても、WordPressテーマ内で変更ができます。

僕はデフォルトの「游ゴシック,ヒラギノ角ゴ」を使っていますが、サイトイメージでこだわりたい人は変更しましょう。

①「Cocoon設定」＞「全体」をクリック

②サイトフォント・モバイルサイトフォントを変更

メディアファイルの画像サイズを変更する

フォントと同じくSimplicity2からCocoonになったことで、メインカラム（本文）の幅が広くなりました。

Simplicity2は680pxでしたが、Cocoonは800px。

Simplicity2の画像設定のままだと、横幅いっぱいの画像を貼り付けられないので、800pxに変更しておきましょう。

①「ダッシュボード」＞「設定」＞「メディア」をクリック

②画像サイズの幅の上限を800、高さの上限を5000に変更

見出しをおしゃれにカスタマイズする

見出しは、サイトらしさを表現する重要なポイント。

見出し1〜見出し６のデザインをカスタマイズしてみました。

見出し１のCSS

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

.article h1 {
 color: #5c6b80;
 font-weight: 800;
 font-size: 1.5rem;
 line-height: 1.3;
}

見出し２のCSS

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

.article h2 {
border: none; 
position: relative;
padding: .7em .75em;
margin-bottom: 1.5em;
background-color: #1baa9a;
color: #fff;
border-radius: 6px;
border-bottom: 0px
}
.article h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #1baa9a;
border-bottom: 0px
}

見出し３のCSS

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

.article h3 {
 border: none; 
 padding: 0.7em;/*文字周りの余白*/
 color: #494949;/*文字色*/
 background: #F3FEF1;/*背景色*/
 border-left: solid 10px #69B560;/*左線（実線 太さ 色）*/
}

見出し４のCSS

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

.article h4,
#comment-area h4,
#related-entries h4{
 border: none; 
 
 position: relative;
 padding-bottom: .5em;
 border-bottom: 4px solid #ccc;
}
.article h4::after {
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 2;
 content: '';
 width: 20%;
 height: 4px;
 background-color: #69B560;
}

見出し５のCSS

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

.article h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
border: none; 
padding:0px 30px 10px;
margin-top: 30px !important;
color: #69B560;/*文字色*/
}

.article h5:before {
font-family: FontAwesome;/*アイコンフォント*/
content: "\f138";/*アイコンのユニコード*/
position: absolute;/*絶対配置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #69B560; /*アイコン色*/
}

見出し６のCSS

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

.article h6{
position: relative;
border-top: solid 2px #80c8d1;
border-bottom: solid 2px #80c8d1;
background: #f4f4f4;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
}

h6:after {/*タブ*/
position: absolute;
font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
content: '\f0a7\ Check';
background: #80c8d1;
color: #fff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
  }

もっとあなた好みの見出しにしたいなら、こちらのサイトがオススメです。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

saruwakakun.com

目次をカスタマイズする

（↑上がプラグインの目次、下がCocoonの目次）

Cocoonは独自で目次を作る機能が備わっています。

しかし、僕はあえて独自機能の目次は非表示にし、目次作成プラグインの「Table of Contents Plus」を利用しています。

僕と同じようにプラグインでおしゃれな目次を作リたい方向けのカスタマイズです。

①プラグインで「Table of Contents Plus」をインストールし、有効化します。

②「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/* TOC もくじのカスタマイズ */
#toc_container{
 margin-top:25px;
 margin-bottom:35px;
 border-radius: 4px; 
 font-size: 16px; /* 文字の大きさ */
 padding-right: 16px;
 padding-left: 16px;
 background-color: #FFFBF4; /* 背景色 */
 border: 2px solid #F89174; /* 外枠の設定 */
}

#toc_container .toc_title{
 font-size: 18px; /* タイトルの文字の大きさ */
 font-weight:bold;
 color: #F89174; /* タイトルの文字色 */
 text-align: left; 
}

/* タイトル前のアイコン　FontAwesomeの設定 */
#toc_container .toc_title:before{
 content: "\f046"; /* FontAwesomeのコード */
 font-family: FontAwesome;
 padding-right: 6px;
 font-size:18px; /* アイコンの大きさ */
 color: #F89174;
}

#toc_container .toc_toggle a{
 color: #F89174; 
}

#toc_container ul{
 counter-reset:number;
 list-style:none;
}

#toc_container ul li{
 line-height: 1.25em;
 margin-bottom: 0.9em;
 margin-top:10px;
}

#toc_container ul li:before{
 counter-increment: number;
 content: counter(number);
 font-weight: bold;
 color: #555555;
 padding-right:12px;
 margin-left:-25px;
}

#toc_container ul li a{
 font-weight: bold;
 color: #555555;
 text-decoration:none;
}
#toc_container ul li a:hover{
 text-decoration:underline
}

#toc_container ul ul{
 margin-top: 0.5em;
}

#toc_container ul ul li{
 line-height: 1.25em;
 margin-bottom: 0.5em;
 font-size:14px;
 margin-left:-50px;
}

#toc_container ul ul li:before{
 content: "\f0da";
 font-family: FontAwesome;
 padding-right: 6px;
 margin-left:0px;
 color: #CCC;
 margin-left:-10px;	
}

#toc_container ul ul li a{
 color: #3D3D3D;
 font-weight: normal;
 padding-right:6px;
	text-decoration:none
}

#toc_container ul ul li a:hover{
 text-decoration:underline
}

リストをおしゃれにデザインする

番号ありリスト（ol）

1. あああ
2. いいい
3. ううう

番号ありリスト（ol）のみCSSをカスタマイズしておしゃれにしています。

番号なしリスト（ul）もカスタマイズしようとしたのですが、他の部分に影響が出てしまったのでやめました。

この番号ありリストのカスタマイズは、Cocoonの目次を利用する方は向いていません。

▼このようにデザインが崩れます。

番号ありリストをおしゃれにしたいなら、目次は「Table of Contents Plus」を使いましょう。

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/*リストスタイル*/

ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:1em;
  background: #ffffff;
  border-radius: 5px;
  border: solid 3px #d6d6d6;
}
ol li{
 position: relative;
  padding-left: 35px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 35px;
}
ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #1baa9a;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 0.6em;
  /*-moz-transform: translateY(-1.55em);
  	-webkit-transform: translateY(-1.55);
  	-o-transform: translateY(-1.55);
  	-ms-transform: translateY(-1.55);
  	transform: translateY(-1.55);*/
}

ボックス（囲み枠）をおしゃれにデザインする

好みですが、僕は記事を盛り上げるためのボックス（囲み枠）をCSSでカスタマイズしています。

▼こんなものです。

ボックス（囲み枠）に興味があれば、こちらのサイトが参考になります。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

saruwakakun.com

引用のスタイルをおしゃれにデザインする

デフォルトの引用も素敵でしたが、個性を出すためにCSSでカスタマイズしています。

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/*引用のスタイル*/
blockquote {
  background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
  background-color:#f3f3f3;
  border: 1px solid #FFFFFF;
  margin: 1em 0;
  padding: 20px 55px;
  position: relative;
}
 
 
blockquote:before {
  color: #5AC1A6;
  content: "“";
  font-family: serif;
  font-size: 600%;
  left: 0;
  line-height: 1em;
  position: absolute;
  top: 0;
}
 
blockquote:after {
  bottom: 0;
  color: #5AC1A6;
  content: "”";
  font-family: serif;
  font-size: 600%;
  line-height: 0;
  position: absolute;
  right: 0;
  bottom: -16px;
}
 
/* Internet Explorer11のみに適用したい設定 */
@media screen and (min-width:0\0) {
  *::-ms-backdrop, blockquote:before { left:  -55px; }
  *::-ms-backdrop, blockquote:after  { right: -55px; }
}

【初心者向け】WordPressテーマ「Cocoon」の補助機能のカスタマイズ

バッジをおしゃれにデザインする

出典 出典元のリンク

これは別にそのままでもよかったのですが、Simplicity2時代からのバッジのデザインを引き継いでいます。

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/*バッジのスタイル*/
.sankou,
.sanko,
.reffer,
.ref{
  color: #fff;/*文字色*/
  background-color: #fd9292;/*背景色*/
  padding: 2px 6px 1px;/*内側の余白*/
  border-radius: 3px;/*角丸*/
  font-size: 13px;/*文字サイズ*/
  letter-spacing: 0.07em;/*文字間*/
  margin-right: 6px;/*バッジの右側に余白*/
}

カテゴリ・タグ関連記事、パンくずリスト、ページ送りナビのデザインを変更する

別に変更しなくてもいいレベルですが、カスタマイズできる場所だけ紹介しておきます。

①「Cocoon設定」＞「投稿」をクリック

②必要な箇所にチェック

吹き出しをデザインする

Cocoonの吹き出しと言えばこれですよね。

内容を入力してください。

内容を入力してください。

でも、ここまで読んだあなたはご存知のとおり、僕はあまのじゃくなので（笑）別の吹き出しを使ってます。

それがこの５種類の吹き出しです。
AMP（アンプ）対応でデザイン崩れもありません。

この吹き出しを利用したいなら、こちらの記事をご参照ください。

ページが見つかりませんでした – WordPressプラグイン活用ラボ

tips4life.me

SNSシェアボタンをおしゃれにデザインする

シェアボタンは記事の上下にあります。

デフォルト問題ないと思いますが、表示させるSNSの切り替えやボタンカラーを変更できるので、お好みのものに変更しましょう。

僕は、シェアメッセージを「＼面白かったらシェアおねがいします！／」にしています。

①「Cocoon設定」＞「SNSシェア」をクリック

②必要な箇所にチェック

カエレバ・ヨメレバ・トマレバをおしゃれにデザインする

カエレバ・ヨメレバと言えば・・・

沈黙のWebライティング

posted with ヨメレバ

松尾茂起/上野高史 エムディエヌコーポレーション 2016年10月28日

Amazon

Kindle

楽天ブックス

こういうページのことを言います。

あなたがブログで紹介した時に、Amazonや楽天といった読者が普段使っているものを一覧で見せてあげた方が親切ですよね。

一目で購入ボックスがたくさんできるので、ブログ収入も増えると思いますよ！

カエレバ・ヨメレバ・トマレバのデザインのカスタマイズは、この記事がオススメ！

僕が採用したデザインです。（2018/5/19追記　現在はCocoonの独自デザインを採用）

CSSコピペでOK！カエレバ・ヨメレバ・トマレバをまとめてカスタマイズ[ver2]

便利な「カエレバ」「ヨメレバ」「トマレバ」3つのデザインをまとめてカスタマイズしました。レスポンシブデザインですので、パソコン・タブレット・スマホに対応しています。CSSコピペでカスタマイズ完了しますので、どうぞお試しください！

rough-log.com

【初心者向け】WordPressテーマ「Cocoon」のサイドバーのカスタマイズ

サイドバーに新着記事や人気記事など必要なものを追加する

サイドバーは「外観」＞「ウィジェット」で自由に変更ができます。

Cocoonでは、新着記事や人気記事が、プラグインを使わずともウィジェットだけで自由にカスタマイズできます。

グーグルアドセンスをサイドバーに表示させたりするのもいいですね。

ウィジェットのタイトルにFonTAwesomenのアイコンをつける

サイドバーのタイトルにアイコンがあると、おしゃれ・・・というか可愛いですよね。

僕はあった方がいいと思ったのでつけました。

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

[CSSコード]

/* ウィジェットタイトルにFAアイコン */
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; } /* 共通設定 */
.widget_links h3::before { content: '\f0c1'; } /* リンク */
.widget_popular_entries h3::before { content: '\f135'; } /* 人気記事 */
.widget_new_entries h3::before { content: '\f005'; } /* 新着記事 */
.widget_categories h3::before { content: '\f115'; } /* カテゴリー */
.widget_rss h3::before { content: '\f143'; } .widget_rss h3 img { display: none; } /* RSSフィード */
.widget_tag_cloud h3::before { content: '\f292'; } /* タグクラウド */
.widget_search h3::before { content: '\f002'; } /* 検索 */
.widget_meta h3::before { content: '\f085'; } /* メタ */
.widget_fb_like_box h3::before { content: '\f082'; } /* Faceboxボックス */
.widget_facebook_page_like h3::before { content: '\f082'; } /* Faceboxバルーン */
.widget_item_ranking h3::before { content: '\f091'; } /* ランキング */
.widget_calendar h3::before { content: '\f073'; } /* カレンダー */
.widget_recent_comments h3::before { content: '\f0e6'; } /* 新着コメント */

こちらの記事を参考にさせていただきました。

https://s41t0h.jp/cocoon-fa-icon-sidebar/

s41t0h.jp

サイドバースクロール追従で売り上げ促進・回遊率を高める

Cocoonでは、読んで字のごとく、スクロールをしてもずっとサイドバーで付いてくる設定をすることができるようになりました。

例えば、現状（2018年5月15日）では、ジャックナイトとジャックナイトpolcaを応援いただきたいので、サイドバーに追従するようにしています。

【ジャックナイトpolca】支援者が純広告を獲得&スポンサーになるお返し付!?

wakuwaku-keigo.com

2018.11.01

①「外観」＞「ウィジェット」をクリック

②左のテキストを「サイドバースクロール追従」のページにドロップアンドラッグする。

③テキスト内にアピールしたい内容を記述する。

【初心者向け】WordPressテーマ「Cocoon」のフッターのカスタマイズ

フッターのデザインを変更する

デフォルトは悪くはないけど、僕の好みとは少し違ったのでこのように変更しました。

①「Cocoon設定」＞「フッター」をクリック

②「フッター表示サイズ」「クレジット表記」の設定を変更する

フッターを増やしてアピールする

ここまでくるとほぼ、趣味みたいなもんですね。

必要があれば、カスタマイズしてみましょう。

フッターを増やす

①「外観」＞「ウィジェット」をクリック

②フッター左・フッター中・フッター右にアピールしたい項目を追加する

フッターの色を変える

「外観」＞「テーマの編集」からスタイルシート（style.css）に以下のコードをコピペします。

色はあなたのサイトイメージが合う色にしてくださいね。

[CSSコード]

/*フッター色変更*/
#footer {
  clear: both;
  background-color: #F1EFE9;
  color: #333333;
padding: 5px;
}



/*フッターホバー色変更*/
 .navi-footer-in a:hover {
 background-color: #a0dbdb;
 transition: all 0.5s ease;
 }

【初心者向け】WordPressテーマ「Cocoon」の細かなカスタマイズ

「トップへ戻る」をオリジナル画像にする

パソコン画面のブログの右下には、トップへ戻るボタンを追加できます。

他のブログとの差別化のために、オリジナル画像にしてみましょう。

①「Cocoon設定」＞「ボタン」をクリック

②ボタン画像をアップロードする

ホームイメージをブログ独自の画像にする

Cocoonに変更した初期設定では、ブログのホームイメージの画像がCocoonの画像のままです。

上の画像のように、ブログをLINEやfacebookなどでURLを送るときに、自分の設定した画像にする必要があるので、設定を変更しておきましょう。

①「Cocoon設定」＞「OGP」をクリック

②「ホームイメージ」で画像のアップロードを行う。

ファビコンをブログ独自の画像にする

ファビコン設定きちんとしていますか？

これです↑
ファビコンとは、Google Chrome（グーグルクローム）などのブラウザを開いた時のタブの上にでるアイコンのことです。

これがCocoonのアイコンのままだと、あなたのブログっぽくないですよね？

これは細かなところですが、ファビコンがあると読者から覚えてもらいやすくなるので変更しておきましょう。

①「外観」＞「カスタマイズ」をクリック

②「サイト基本情報」から画像を登録

外部リンク・内部リンクの開き方の設定を変更する

Cocoonでは、外部リンク・内部リンクの開き方をカスタマイズすることができます。

８種類のアイコンをつけることもできるので、色々いじってみましょう。

ちなみにこのブログでは、内部リンクはアイコンなしで同じタブで開く、外部リンクはアイコンをつけて新しいタブで開く設定にしています。

外部リンクのアイコン例↓

ジャックナイトpolcaはこちら

①「Cocoon設定」＞「本文」をクリック

②「外部リンク設定」「内部リンク設定」で画像のアップロードを行う。

（追記）この記事を書いた人（プロフィール）をおしゃれにアレンジ！

自分のプロフィールのデザインをリスブロさんを参考に変更しました。

https://s41t0h.jp/cocoon-author-box-customize/

s41t0h.jp

まとめ：ブログ初心者もWordPressテーマ「Cocoon」をコピペでカスタマイズし尽くしておしゃれにしちゃえ！

この記事を書くのは、めちゃめちゃ大変でした。笑
無事に、Cocoon（コクーン）を攻略できましたか？

Cocoonは設定できるところが多いので、ついつい色々な設定をしてしまいますね。

この記事では紹介しませんでしたが、ランキング設定やCTA設定、アフィリエイトタグの設定など、収益化に役立つ機能もまだまだCocoonには備えられています。

公式サイトを参考に、他のカスタマイズ方法も確認してみましょう。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

Cocoonははっきり言って、無料なのがおかしい最高の無料WordPressテーマです。

SEO・高速化・モバイルファースト対応済みという完璧さで、有料テーマにも引けを取りません。

だからこそ、今後ブログを始める方々はCocoonを使う人も多くなるでしょう。

人気なWordPressテーマの欠点として、デザインがカブってしまうというデメリットがあります。

だからこそ、カスタマイズしやすいCocoonをせっかく使っているなら、あなた色におしゃれにしてみてください。

カスタマイズは大変で時間もかかりますが、ブログというあなたの城に少しずつ色づけていくのは、本当に楽しいですし、自分のブログに愛着がわきます。

HTMLもCSSも全くわからない僕でもここまでデザインができました。

そのようにして育てたブログなら、あなたはブログを永く継続できるのではないでしょうか？

ぜひ、自分だけのCocoonをデザインしてみましょう！

はまちゃんの一言

▼よければRTしてくださいね！

【ブログ更新】
もう一生、ワードプレスのカスタマイズ記事は書かん！笑

めちゃくちゃ疲れたけど、大ボリュームの記事ができました。
WordPressテーマ「Cocoon」を使ってる方はどうぞ。https://t.co/YqbpNUQele

— はまちゃん@島根移住×(仮)婿養子×地方創生 (@wakuwakukeigo) 2018年5月15日

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！

この記事は、

というあなた向けの記事です。

「初めてのブログはSimplicityデビュー」という方も多いのではないでしょうか？

ブログのWordPressテーマを変更するのが初めてだと、「Cocoon（コクーン）」に変更するのは不安たっぷりですよね。

僕もそうでしたが、何も考えずいざ挑戦。

はい、案の定僕は失敗しました・・・いえ、後でカスタマイズしていい感じにデザインできたので、単なる事前準備不足ですね。

何も考えずに、WordPressテーマの変更をしようとしてるなら注意が必要です！

事前準備をしていなかったばっかりに、僕はCocoonに変更したらデザインが崩れて、ものすごく焦ったんですから（汗）

過去の僕に会えるなら、Wordpressテーマの注意点と変更前にテストする手順を教えたいですね。

この記事では、デザインが崩れてしまった僕の経験を例に、あなたのWordPressテーマの変更に対する不安をなくしつつ、必要な注意点・テスト方法・事前準備の手順をご紹介します。

あなたの不安を解消してWordPressテーマを変更できるようになりますように。

【WordPressテーマの変更時の注意点の前に】変更前の僕のブログの状況を伝えます

僕はブログで自分色を出していきたい方。

だから、Simplicity2のカスタマイズ中毒者と名乗るほど、Simplicity2をおしゃれにカスタマイズしてました。

当時の状況をまとめると、

そんな状態でCocoonに移行して、デザインが崩れちゃったというわけです。笑

でも、結論から先に言っておくと、ごりごりにWordpressテーマ「Simplicity」をがっつりカスタマイズしてるあなたもCocoonに変更して問題なし！

その理由は僕の失敗体験談を読めばわかります。

同じ失敗をしないように注意してくださいね。

【注意】WordPressテーマ「Simplicity2」から「Cocoon」に変更したらデザインが崩れた

WordPressテーマのSimplicity2をおしゃれにカスタマイズしていたので満足していた僕。

ある日、とあるツイートを見て発狂しました！

無料WordPressテーマ「Cocoon（コクーン）」を公開しました https://t.co/YLIHygiTac pic.twitter.com/cUhrR4RIfk

— わいひら@寝ログ (@MrYhira) March 19, 2018

そんなこんなで1ヶ月半ほど、もんもんしてましたが、Simplicity2の後継WordPressテーマのCocoonの機能が最高すぎたので、何も注意せずにブログテンプレートを変更しました！

しかし、大きな誤算が！！

Simplicity2をがっつりカスタマイズしていたので、おしゃれなデザインにしていたブログが

▼（変更前）Simplicity2▼

こうなった…

▼（変更後）Cocoon▼

Simplicity2をあんなに頑張って、カスタマイズに時間をかけておしゃれにしたのに…

台無しやんけ！！

当時は、なぜWordPressテーマを変更する前にテストをしなかったのか、激しく後悔しましたねorz

僕はブログがおしゃれじゃないと、ブログを書くモチベーションが著しく落ちてしまうので、カスタマイズをしてデザインを整えました。

▼こんな感じにね▼

Cocoonにして、すぐに満足できるブログに戻せたので一件落着。

WordPressテーマの変更のやり方は以下の記事をご覧ください。

僕が行ったCocoonの初期設定とCocoonの使い方をわかりやすく紹介してます。

Simplicity2からCocoon(コクーン)へ変更！使い方と10の初期設定作業【ワードプレス】

wakuwaku-keigo.com

2019.07.22

これを読むあなたには、こんなに焦ったり苦労して欲しくない！

まずは、WordPressテーマの変更で何を注意すべきか、テーマ変更前のテストする方法について教えましょう。

WordPressテーマをCocoonに変更する時の注意点一覧とエラー時の対処方法

WordPressテーマを変更するのが初めてな人は、僕のように驚くことがいっぱいあるかもしれません。

デザインが崩れたり、エラーが出ることもあります。

なので、WordPressテーマで何が起こるのか？　何を注意しておくべきなのか？　をしっかり把握しておきましょう。

WordPressテーマによって違いはあるものの、これらの内容には注意が必要でしょう。

このブログのようにSimplicity2の後継テーマのCocoonだとまだ互換性はありましたが、他のテンプレートだとさらに大変なことになる可能性も。

不安になってきましたか？

でも、大丈夫です！

エラーが出たときやデザインが崩れたときの対処法を3つ紹介します。

対処法の①と②はCocoon利用者向けで、③は全てのWordPressテーマで使える対処方法です。

対処方法①：WordPressテーマ「Cocoon」に変更してデザインが崩れても「Simplicity2」に戻すことは可能

僕は、Cocoonの初期デザインをカスタマイズしましたが、WordPressテーマ変更前のSimplicity2に戻すことができます！

ただし、作者のわいひら（@MrYhira）さん曰く、100%は戻らないかもしれないとのこと。

過去バージョンに戻す方法として、公式サイトに紹介されているので参考にしてくださいね。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

wp-cocoon.com

対処方法②：WordPressテーマ「Cocoon」ならテーマ設定をミスしてもリセットが可能

Cocoonをカスタマイズするうちに、ほとんどないと思いますが、カスタマイズをしてぐちゃぐちゃになってしまうこともあると思います。

そんなときは、WordPressテーマ設定をリセットしましょう。

リセットできるなら、エラーが出ても安心ですね。

テーマ設定をリセットするやり方はこちら。

テーマの設定をリセットする方法

テーマ設定を初期状態に戻す方法です。

wp-cocoon.com

対処方法③：他のWordPressテーマの場合、エラーが出たらFTPソフトでテーマを削除

ワードプレステーマを変更して、エラーが出て画面が真っ白。

「オワタ」となるのは、まだ早いです。

まずは一旦落ち着きましょう。

エラーが出ている理由は、変更後のテーマが問題があるからです。（正しくは今のWordPress設定と新しいテーマの互換性だけど）

なので、新しいWordPressテーマをサーバー上で削除すれば、エラーはすぐに戻るってことですね。

やることは単純で、FTPソフトを使ってテーマ（「wp-content」の「temaes」にある新しいテーマ）を削除すれば、あっという間に元どおりです^^

詳しくは、以下を参考記事としてください。

参考：WordPressテーマが真っ白になったときの対処法

WordPressテーマを変更前にやっておきたい事前準備の手順（バックアップ・プラグインでテスト）

ここまで、WordPressテーマを変更するときの注意点を解説してきました。

WordPressテーマを変更することの不安はなくなってきましたか？

事前準備は全部で4つのやり方がありますが、特に大事なのがバックアップとプラグインでテストすること。

この2つだけは要チェックです。

その他、紹介する事前準備をしておくことで、ワードプレスのテンプレートを変更して画面が真っ白になるのを防げますし、スムーズな移行が可能になります。

WordPressテーマ変更前の準備①：データのバックアップを取る

WordPressテーマの変更は、パソコンをwindowsからMacにするほど一大事。

何かあってからでは遅いので、バックアップを事前に取っておきましょう。

バックアップはBackWPUpというプラグインがオススメ。

BackWPUpで確実にWordPressのバックアップを取る方法

あらゆるリスクに備えてデータのバックアップは不可欠だ。バックアップさえできていれば万が一データが消えてしまっても、また復元できるからだ。次の２つを叶えるバックアップができればかなり心強いだろう。 定期的に自動でバックアップが取

lucy.ne.jp

実は僕もそうだったのですが、普段からブログのバックアップを取る習慣がない人って結構多いんですよね。

これを機会にバックアップの習慣をつけてみては？

WordPressテーマ変更前の準備②：事前にテーマの変更後のデザインをテストする

実は、ワードプレスのプラグインにはテーマを変更したらデザインがどうなるかテストできるプラグインがあるんです！

僕がこれを試しておけばあんなに焦らなかったはず。

そんな素敵なプラグインの名前は、Theme Test Drive。

いきなりWordPressテーマを変更するのが怖いなら、Theme Test Driveをぜひ試してみてください。

サーバー上で動作確認ができるのでかなりオススメ。

Theme Test Driveの使い方や手順は以下の記事参照。

saburo-design.com

Find the best information and most relevant links on all topics related to This domain may be for sale!

saburo-design.com

https://naifix.com/theme-test-drive/

naifix.com

もう一つ、WP Theme Testというプラグインで、サーバー上でWordPressテーマをサーバー上で確認するという方法もあります。

WP Theme Testの使い方や手順は以下の記事参照。

表示の確認だけじゃない！WordPressテーマのテストは「WP Theme Test」がこれほど便利だったとは！

今まで、テーマの作成・カスタマイズはVCCWやMAMPといったローカル環境で行っていました。 テーマをサーバー上でテストできるプラグインがあるとは知っていたもの

yosiakatsuki.net

WordPressテーマ変更前の準備③：不要なプラグインを確認＆削除する

プラグインとWordPressテーマの機能がケンカすることは、事前に説明したとおりですね。

調べてみて、削除した方がいいプラグインがわかったら削除しておきましょう。

Cocoonの場合は、今僕が見つけたのは２つ。

• Table of Contents Plus
• TinyMCE Advanced

削除するのはちょっと・・・という方は、テンプレート変更後でも可能です。

でも、問題が起きるプラグインがあるかどうかは確認しておきましょうね！

WordPressテーマ変更前の準備④：Simplicity2時代の設定内容・CSSを控えておく

おそらくこの記事を読むあなたは、Simplicity2を自分好みにカスタマイズされてるはずです。
僕もそうでした。

しかし、残念ながらSimplicity2時代のカスタマイズ設定は全て引き継げません。

CSSのカスタマイズなどを、1からやるのは時間のロスが多過ぎる。

なので、箇条書きやメモ帳へのコピーで十分なので、Simplicity2時代の設定内容・CSSを控えておきましょう。

▼CSS以外にもSimplicity2をいじった人も多いかもしれませんね。

• 画像関係（.entery-content img , wp-caption）
• 見出しデザイン（.entry-content h2）
• 引用のデザイン（.entry-content blockquote）
• リスト（ul , ol , li）
• カエレバ・ヨメレバ・トマレバ（.kaerebalink-box , .booklink-box）
• ブログカード（.blogcard.internal-blogcard , .blogcard.external-blogcard）

Cocoonにはコピペでスムーズに移行できるので、スタイルシートのカスタマイズはぜひ控えておいてくださいね！

WordPressテーマを変更するあなたの不安点（リスク）に一問一答

ざっくり思いつくままですが、あなたがWordPressテーマの変更で考えてる不安に回答していきますね！

WordPressテーマの変更リスクは、SEOやアクセス数などたくさんあるので別記事にまとめました。

ワードプレステーマ変更のSEOリスクは？試したのでアクセス減少など不安点に答えます

wakuwaku-keigo.com

2018.11.07

最後に：WordPressテーマの変更リスクを最小限にする注意点！テーマ移行は暇な深夜にしよう

この記事では、WordPressテーマをCocoonに変更するときの変更方法・エラーの対処法・注意点・不安点・事前準備をご紹介してきました。

最後に、お伝えしたいのはWordPressテーマを変更する時間（タイミング）のお話。

WordPressテーマの変更後の調整は、迷ったりすると意外と時間がかかります。

忙しい時にテンプレートの移行だけしてほっておくと、デザインの崩れた残念なブログを長時間晒すことになります。

それは避けたいので、時間に余裕があってブログのアクセス数の少ない深夜に、WordPressテーマ変更することがオススメです。

ぜひ、勇気を出してWordPressテーマの変更をしてみてくださいね！

Cocoonは本当にいいテーマなので！

はまちゃんの一言

CocoonにWordPressテーマを変更した後はどうするのかって？

この記事読んでくださいな↓

Simplicity2からCocoon(コクーン)へ変更！使い方と10の初期設定作業【ワードプレス】

wakuwaku-keigo.com

2019.07.22

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！

この記事は、

というあなた向けの記事です。

この記事では、ワードプレステーマを「Simplicity2」から「Cocoon」に変更する時に、僕が最初に行った10個の初期設定作業とコクーンの使い方をご紹介していきますね。

画像もりもりで、わかりやすい記事を心がけましたよ！

この記事の内容を行えば、Simplicity2からCocoonへスムーズにワードプレステーマ変更ができるでしょう。

無料ワードプレステーマ「Cocoon（コクーン）」とは？

Simplicity2と同じ作者であるわいひら（@MrYhira）さんが作成された新しいWordPressテーマです。

何の前触れもなく、2018年3月19日にテーマが公開されました。

Cocoon

SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

wp-cocoon.com

料金は何と無料！

正直、有料テンプレートじゃないのがおかしいレベルの最強無料WordPressテーマです。

以下の7つが主な特徴となります。

1.シンプル
2.内部SEO施策済み
3.完全なレスポンシブスタイル
4.手軽に収益化
5.ブログの主役はあくまで本文
6.拡散のための仕掛けが施されている
7.カスタマイズがしやすい

引用 Cocoonの特徴

そしてCocoonの主な機能は、驚きの218！

Cocoonの独自機能・仕様一覧

Cocoonテーマの主な機能・仕様の一覧です。手っ取り早くテーマの概要を把握したい場合などに。

wp-cocoon.com

詳細なレビューはここではしませんが、今後数年間は「無料ワードプレステーマならCocoon一択」というCocoon天下の時代でしょう。

それぐらい最強で超オススメしたいのが、無料WordPressテーマが「Cocoon（コクーン）」です。

ワードプレステーマをSimplicity2からCocoon（コクーン）に変更するなら3段階で設定を行おう

Simplicity2からCocoonにワードプレステーマを移行する場合、以下の3段階に設定作業を分けましょう。

1. WordPressテーマを変更する時の注意点を把握しておく
2. Cocoonに変更する上で最低限必要な初期設定作業をまず終わらせる
3. Cocoonをおしゃれにするカスタマイズを後日ゆっくりとする

⑴ワードプレステーマを変更する時の注意点を把握しておく

WordPressテーマの変更は、パソコンをwindowsからMacにするほど大きなこと。

何も考えずにテーマ移行すると、大変なことになるかもしれませんよ？

事前に知っておきたい、注意点・不安点・事前準備をまとめたので読んでおくことを強くオススメします↓

WordPressテーマ変更手順まとめ！注意点・エラー対処法・事前準備・プラグインのテスト方法

wakuwaku-keigo.com

2019.07.23

⑵Cocoonに変更する上で最低限必要な初期設定作業をまず終わらせる

理由は単純。
無料WordPressテーマ「Cocoon（コクーン）」のカスタマイズに終わりはないからです。

Simplicity2やCocoonはカスタマイズがしやすいという最大のメリットがある一方、カスタマイズ中毒になっていつまで経ってもブログ記事を書かないというデメリットと隣り合わせなんです。

なので、まずは最低限必要な初期設定を終わらせて、記事を書くことに集中しましょう！

カスタマイズは、ぼちぼちやればOK！
そもそもCocoonは素晴らしいWordPressテーマなので、カスタマイズしなくても良いぐらいなので。

⑶Cocoonをおしゃれにするカスタマイズを後日ゆっくりとする

Cocoonをおしゃれなカスタマイズ方法はこちら。

CSSコピペでカスタマイズできるように解説しています。

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

wakuwaku-keigo.com

2022.05.17

この記事では「最低限必要な初期設定作業」と「便利なCocoon設定の使い方」のみ紹介していきますね！

次章からいよいよ本題のSimplicity2からCocoonへの変更作業のご紹介です！

ワードプレステーマをSimplicity2からCocoon（コクーン）に変更したら最初にしたい10の初期設定作業と使い方

それでは、早速無料ワードプレステーマ「Cocoon」の変更手順と使い方を紹介していきます。

ブログのWordPressテーマを変更するので、Cocoonをダウンロードする必要がありますね。

コクーンの導入方法を僕が説明してもいいのですが、公式サイトが最高にわかりやすいのでこちらを参照ください。

5分程度でテーマを導入してテンプレートの変更ができるはず！

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。

wp-cocoon.com

▼ブログをSimplicity2からCocoonに変更できたら10の初期設定作業に進もう！

⑴Simplicityの投稿設定を引き継ぐ方法

Cocoonの公開当時はなかった機能ですが、利用者の声に応える形でSimplicityの引き継ぎ機能が追加されました！

ワードプレスをコクーンに変更してすぐは、Cocoonの使い方がよくわかってない時なので助かりますね。

記事執筆時では、以下の機能が引き継げます！

• SEO設定（メタディスクリプション等）
• 広告設定（広告の除外）
• AMP設定（AMP表示しない）
• ページ設定

頻繁にアップデートしてくれる作者には感謝しかありませんね！

①「Cocoon設定」をクリック

②「その他」から「Simplicityから投稿設定を引き継ぐ」をクリック

③「変更をまとめて保存」をクリックで設定完了

Simplicity2の引き継ぎ作業かんたんですよね！

⑵グーグルアナリティクス&サーチコンソールの設定方法

Simplicity2からCocoonに変更してすぐだと、Cocoon設定の使い方に悩むはず。

でも、Cocoon設定の使い方は習うより慣れろ！　って感じです。

この記事で、Cocoonの初期設定をしながら、使い方をマスターしてください。

初期設定に時間をかけてしまって、ブログのアクセス数が計測されなくなるのはかなりの損失なので、先にGoogle AnalyticsのトラッキングIDとGoogle Search Console IDを登録しちゃいましょう！

①「Cocoon設定」から「アクセス解析」をクリック

②「Google AnalyticsトラッキングID」と「Google Search Console ID」を追加して完了

自分のGoogle AnalyticsトラッキングIDの見つけ方

①グーグルアナリティクスにログインして「管理」をクリック

②管理画面の「プロパティ設定」をクリック

③トラッキングIDを確認

自分のGoogle Search Console IDの見つけ方

①サーチコンソールにログインして右上にある「プロパティに管理」をクリック

②「ユーザーを追加/削除」をクリック

③「プロパティ所有者の管理」をクリック

④確認済みサイト所有者の欄にある「確認の詳細」をクリック

⑤メタタグの後半の「”　”」部分がGoogle Search Console ID

③「変更をまとめて保存」をクリックで設定完了

この設定は大事なので、確実にやっておこう！

⑶Cocoonならかんたん！グーグルアドセンス広告の表示

グーグルアドセンスを出してるなら、すぐにでも広告を表示させたいですよね？

Cocoonには、一発で全てのページへのグーグルアドセンス広告の表示設定する機能が追加されました！

アフィカスならすぐに広告を出そう！

Cocoon設定の使い方の中でも、よく利用する機能だと思います。

①「Cocoon設定」から「広告」をクリック

②「広告コード」「アドセンス表示方式」「広告表示位置」「adショートコード」の設定を変更

「広告コード」に貼れば、自動広告になります。

サイドバーはリンクユニット、ページの下はダブルレクタングル…といった、あなたのこだわりがあるかもしれませんが、広告コードを貼り付けると一斉に広告が表示されて楽なのでブログ初心者にオススメ！

僕はグーグルアドセンス広告で「テキスト広告とディスプレイ広告」をレスポンシブで作成しましたよ！

「広告表示方式」は「自動広告とマニュアル広告を併用」をクリックし、その下の「広告の表示位置」であなたが表示させたい場所にチェックを入れましょう。

「

▼試しに広告表示してみました。

Cocoonの至れり尽くせりの機能性よ！

これが無料WordPressテーマというのが信じられな〜い！

③「変更をまとめて保存」をクリックで設定完了

できました？

広告の設定は後々こだわればいいので、簡単に流しましょう！

⑷Cocoonの目次かTable of Contents Plusを停止

Cocoonには、目次を作成する独自機能が追加されました！

そのおかげによる弊害で、目次がダブってませんか？

理由は目次作成プラグインの「Table of Contents Plus」を入れてるからですね！

▼僕の場合はこんな感じになりました

目次ダブりはダサいので、即刻「Cocoonの独自機能の目次」か「Table of Contents Plusプラグインの目次」のどちらかの目次を削除しましょう！

Cocoon設定の使い方は以下。

1. Cocoonの独自機能の目次を削除したい場合は、「Cocoon 設定」の「目次」タブにある「目次を表示する」のチェックを外せば完了！
2. Table of Contents Plusプラグインの目次を削除したい場合は、プラグインを削除したらOK！

ちなみに、Cocoonを利用する多くのユーザーは、プラグインを削除を推奨してます！

なぜなら、プラグインを入れるほどブログが重くなって、表示速度が落ちるデメリットがあるから。

でも、僕はあまのじゃくなので、Cocoonの独自機能の目次を削除しました！笑

⑸ヘッダーの背景画像とロゴ画像を再設定

Simplicity2からCocoonに変更仕立ての僕のブログのヘッダーを見てください↓

これはちょっとシンプル過ぎますよね。笑

あと、僕はキャッチフレーズは削除する主義。

Simplicity2の時に使っていたロゴ画像と背景画像に変更して個性を出していきましょう！

①「Cocoon設定」から「ヘッダー」をクリック

②ヘッダーレイアウト、高さ、ヘッダーロゴ、キャッチフレーズの配置、ヘッダー背景画像、グローバルメニュー色の設定変更

「ヘッダーレイアウト」はあなたに任せますが、デフォルトのセンターロゴがいいでしょう。

「高さ」も色々試しましたが、未入力でいいと思います。

「ヘッダーロゴ」はWordPressテーマの変更するに当たって、心機一転自分で作り直しました。
サイズは700×192

「キャッチフレーズの配置」は好みですね。
僕は非表示の方がスッキリしてると思うので、非表示にしました。

「ヘッダー背景画像」はテンプレート変更に合わせて自分で作り直しました。
高さは1124 × 272。

「グローバルメニュー色」も好みです。
僕はブログのテーマカラーにしてみました。

③「変更をまとめて保存」をクリックで設定完了

この初期設定変更のポイントは2つあります。

ヘッダーとロゴは2つの画像の組み合わせなので、ロゴに透過処理なされてないと変になります。

そして、Cocoonは完全レスポンシブなので、端末によって背景画像の見え方が変わります。

なので、上下が切れてもいい感じの画像がオススメ！

⑹広告が停止してるかも！ウィジェットの設定を見直そう

サイドメニューを見てください。

Simplicity2のときに利用していたウィジェットの設定が解除されていませんか？

僕の場合は、広告設定が一部解除されていました。

解除されたウィジェットは「使用停止のウィジェット」にあるので、必要なら再度表示させましょう。

Simplicity2からCocoonに変更してなくなったウィジェット

ちなみに、Simplicity2のときに大活躍した「WordPress Popular Posts」の最新記事・人気記事を表示するウィジェットはなくなりました。

でも安心してください。

最新記事、人気記事を表示するウィジェットが独立して用意されているので、簡単に設置できます！

Simplicity2からCocoonに変更して追加されたウィジェット

Cocoonデフォルトウィジェット機能のまとめはこちらを参照。

Cocoonデフォルトのウィジェット機能まとめ

Cocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。

wp-cocoon.com

たくさんありますが、目玉サービスはCTAボックスとランキングですね！

CTAボックス

ランキング

さらに、「サイドバースクロール追従」という項目もあり、目立たせたい内容がパソコン画面で常に表示されるようになりました！

新しく導入されたワードプレステーマCocoon（コクーン）の機能の使い方は、絶対に覚えましょう！

アクセスアップやブログ・アフィリエイト収益に、かなり役立ちます。

これはウィジェットこだわるしかねーな。
あの広告入れて、あのサービスこうアピールして・・・

と思ったあなたはちょっと待った！！

「コクーンの機能の使い方をマスターせよ！」を紹介しておいてなんですが、まずは最低限必要なウィジェットを見直すにとどめて、初期設定を終わらせてから後々ゆっくりウィジェットの工夫を行いましょう！

⑺ユーザー設定でSNS情報を登録しよう！

ユーザー設定の中で、SNS情報が漏れてるならしっかり登録しておきましょう！

読者がSNSのボタンからシェアやフォローしようと思ったのに、URLが間違っていたらもったいないですよ！

⑻Simplicity2と比較したらひどい！グローバルメニューの修正

グローバルメニューが、僕の場合はおかしくなったんです・・・

Simplicity2のときにメニューの数が多過ぎたのか2段になってるし、アイコンも変な所に表示されていました↓

アイコンがずれた理由は後でわかったのですが、Simplicity2とグローバルメニューでアイコンを表示させる方法が違うんです！

なので、Simplicity2でグローバルメニューにFont Awesomeを使っていた人は、僕と同じような表記になっていると思います。

このデザインでは、ブログをご覧の読者さんがすぐに帰っちゃうので、こんな感じに設定を変更しました↓

設定変更作業は以下の記事を参考にさせていただきました！

今後なんども使うことになるので、グローバルメニューの使い方は覚えておきたいところ。

『Cocoon』細かいカスタマイズ（まとめ＆備忘録）CSSコピペでOK！

ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に？細かく変更した箇所などの備忘録です。徐々に増えていく予定！

love-wave.com

⑼Cocoonならボタン１つ！フッターの表示の変更

デフォルトのフッターはこんな感じ↓

悪くはないけど、僕の好みとは少し違ったので、こんな感じにフッターの設定を変更してみました↓

①「Cocoon設定」から「フッター」をクリック

②「フッター表示サイズ」「クレジット表記」の設定変更

③「変更をまとめて保存」をクリックで設定完了

すぐ終わるので、フッターの変更も先にしちゃいましょう！

Cocoon設定の使い方もシンプルでわかりやすいですね。

⑽ブログの高速化設定をしよう！

最後に紹介したいのが、ブログの高速化です！

ブログの高速化なんて難しそう・・・
そもそも必要なの？

と思われる方もいらっしゃるかもしれませんね！

でも、ブログの表示速度が遅いと大きなデメリットがあります。

普通、ブログの高速化は難しくて大変。

でも、Cocoonにはチェックを入れるだけで、高速化される機能が標準装備してます！

Cocoonの高性能な機能に脱帽ですね。。。

高速化ができるかどうかは、コクーンの使い方を知ってるかどうかですよ！

PageSpeed lnsightsで計測した結果はこちら！

▼Simplicity2時代のデータ

▼ブログ高速化設定前（Cocoonスマホ）

▼ブログ高速化設定後（Cocoonスマホ）

点数が87→97点に！
パソコンも90点代になるはずなんですが、なぜか僕は67点と微妙な結果に。（プラグイン入れすぎかな・・・）

（追記）この後、必要のないプラグインを削除したりして、パソコンも89点になりました！

▼ブログ表示速度　最新版（Cocoon）

とにかくすぐにできる高速化なので、チェックしないと損ですよ！

高速化機能の使い方の手順を教えます。

①「Cocoon設定」の「高速化」をクリック

②ブラウザキャッシュの有効化、HTMLを縮小化する、CSSを縮小化する、JavaScriptを縮小化するにチェックして変更を保存

最初にすべき初期設定と使い方はこれで完ぺき！Simplicity2からCocoon（コクーン）にワードプレステーマを変更しよう！

いかがだったでしょうか？

画像をたくさん使って、かなり丁寧に解説したので、ブログ初心者の方でも問題なくSimplicity2からCocoonに変更できたと思います！

さらに、Cocoonの初期設定をする流れで、使い方もわかってきたのではないでしょうか？

Cocoon（コクーン）に移行したら最初にしたい初期設定作業は以下の10個でした！

1. Simplicityの投稿設定を引き継ぐ方法
2. グーグルアナリティクス&サーチコンソールの設定方法
3. Cocoonならかんたん！グーグルアドセンス広告の表示
4. Cocoonの目次かTable of Contents Plusを停止
5. ヘッダーの背景画像とロゴ画像を再設定
6. 広告が停止してるかも！ウィジェットの設定を見直そう
7. ユーザー設定でSNS情報を登録しよう！
8. Simplicity2と比較したらひどい！グローバルメニューの修正
9. Cocoonならボタン１つ！フッターの表示の変更
10. ブログの高速化設定をしよう！

記事のボリュームは多くなっちゃいましたが、作業時間はそこまでかからないものばかりです！

WordPressテーマ「Cocoon（コクーン）」は、現在（2018年5月9日）テスト中の段階ですが不具合も気にならないレベルで、無料なのがおかしいと思うぐらいの素晴らしいテーマ。

明らかにSimplicity2から進化しています！

ワードプレステーマが初めてで、不安なブログ初心者にも自信を持ってオススメできます！

ぜひ、この記事を参考にCocoonデビューしてくださいね！

▼「Cocoonの使い方を理解して、さらにオシャレなブログにしていきたい」と思ったら、次は以下の記事を読みましょう。

くれぐれも、コクーンのカスタマイズのし過ぎには注意ですよ……

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

はまちゃんの一言

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！