この記事は、

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

ブログの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テーマ「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>婿養子

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

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

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

【Cocoon】メニューデザインをマテリアル風にするCSSカスタマイズ

この記事では無料テーマ「Cocoon」のメニューバーをマテリアル風にデザインするカスタマイズをご紹介しています。

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カスタマイズは、こちらの記事を参考にアレンジしました。

Cocoonスライドイン（モバイル下固定メニューボタン）をCSSだけでカスタマイズ！

Cocoonのスライドイン（footer下にあるモバイル専用固定メニューボタン）はスマホ・タブレットでは画面下にずっと固定された部分です。自分のサイトカラーやイメージに合わせてスライドインをカスタマイズすると、訪問者さんの印象に残る可能性が

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カスタマイズは、こちらの記事を参考にしました。

【Cocoon】で記事一覧をSWALLOW風にぼかしながらフェードインさせるCSSカスタマイズ

こんにちは、さいとう（@S41T0H）です。最近リリースされたWordPressテーマ「スワロー」 をご存知でしょうか。有名ブロガー八木仁平さんが監修した有料WordPressテーマで、STORK（ストーク） やハミングバード といった有名

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（アンプ）対応でデザイン崩れもありません。

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

【WP-Speech-Balloon_2.1】をリリース！吹き出しの種類が増えたよ☆

Wordpressで簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.1をリリース致しました。 今回はアップデートの内容や吹き出しの種類、アップデートの方法と使い方などを紹介します。 バージョン

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'; } /* 新着コメント */

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

【Cocoon】サイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ

無料WordPressテーマ「Cocoon」のサイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ方法をご紹介します。

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設定」＞「本文」をクリック

②「外部リンク設定」「内部リンク設定」で画像のアップロードを行う。

（追記）この記事を書いた人（プロフィール）をおしゃれにアレンジ！

自分のプロフィールのデザインをリスブロさんを参考に変更しました。

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ！！

CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。

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の使い方や手順は以下の記事参照。

WordPressで管理者のみテーマを切り替えて編集とかできるプラグイン『Theme Test Drive』の使い方

このプラグインを使えば自分（管理者）とユーザーと別々のテーマを表示させる事ができます。これならサイトのデザインを大幅に変更する際も、ユーザーには普段通りのサイトを見せつつ裏で修正作業を行う事ができます。

saburo-design.com

WordPressテーマカスタマイズに便利な「Theme Test Drive」の使い方 - Naifix

WordPressにログインしている管理者にのみ違うテーマを反映させる「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

はまちゃんの一言

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

この記事は、

• Simplicity2のカスタマイズ方法をもっと知りたい（興味）
• Simplicity2のカスタマイズ楽しすぎ〜（反復的）
• Simplicity2をもっとおしゃれに！もっとおしゃれに・・・（貪欲的）
• 気づいたらSimplicity2をカスタマイズしていた・・・（衝動的）
• Simplicity2を十分カスタマイズしたはずなのに、カスタマイズせずにはいられない（強迫的）

という方向けの記事です。

あなたがブログ初心者で、「最低限のカスタマイズもできていない」という場合は、この記事を読む前に以下の記事をご覧ください。

さて。

この記事では、コピペで簡単にSimplicity2をおしゃれにカスタマイズできる記事を厳選してまとめました。

僕のように、デザインの知識がないブログ初心者からしたら、大変ありがたいサイトばかりで、記事をまとめた多くのブロガーには感謝の気持ちしかない。

ただし、気をつけておくべきことが。
それは・・・

Simplicity2のカスタマイズには中毒性がある

このことを理解しておかないと、ブロガーのあなたは大変困ることになるでしょう(￣▽￣)
僕の失敗談を次章で紹介しています。

用法用量を守ってSimplicity2をおしゃれにカスタマイズしましょう。

▼（2018年5月9日追記）ブログテーマをSimplicity2からCocoonに変更しました！

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

wakuwaku-keigo.com

2019.07.22

告白　僕はSimplicity2のカスタマイズ中毒者でした

依存症には4つの特徴があります。

1. 反復的：やめられず、繰り返す
2. 貪欲的：こだわりが生まれ、とことん追求し、執拗に追い求める
3. 衝動的：気がついたら、衝動的に行動してしまう
4. 強迫的：やらずにはいられない

上の4つの症状が該当する方は、残念ながらSimplicity2のカスタマイズ中毒です(￣▽￣)

Simplicity2のカスタマイズ中毒になった理由

僕はWordPressでブログを初めて、Simplicity2という最高なテンプレートを導入しました。

そして、ブログを書き始めようと思った時に・・・

・・・・・・

これが悪夢の始まりでした・・・

ちなみに、元カスタマイズ中毒者の成果がこちら↓

まぁ、初心者にしては頑張っておしゃれにできたかなと思っております。笑

Simplicity2のカスタマイズ中毒とはどんな症状か？

Simplicity2の最大のメリットは自由にカスタマイズできること。

頑張れば有料テンプレート級におしゃれにすることも可能なことが、多くの人にSimplicity2が選ばれている要因です。

でも、この最大のメリットこそが初心者にとっては落とし穴。

デザインに時間をかけすぎて、肝心のブログを書けないという人が続出しています。

誰もが自分好みにしようと、たくさんの情報調べたくなりますよね。

僕も3か月前はそうでした。

その結果…

ブログ開設して2週間経っても1記事も書いていない！

こんなことになりました。笑
Simplicity2はイジリがいあるんですよ。笑

調べることが大好きなあなたは、きっと僕と同じようなことになるでしょう。

これが有名なSimplicity2のカスタマイズ中毒です。笑

Simplicity2はカスタマイズしやすいので、ちょこちょこ設定を編集していくうちにどんどん楽しくなってきます。

そして、Simplicity2をカスタマイズしていることがブログを成長させているんだと勘違いするのです。

こうなる危険性があることを理解して、次章を読み進めてくださいね♡

（中毒者用）Simplicity2　カスタマイズ【機能追加編】

吹き出し機能を追加するカスタマイズ

【WP-Speech-Balloon_2.1】をリリース！吹き出しの種類が増えたよ☆

Wordpressで簡単に吹き出し会話が出来るプラグイン、「WP-Speech-Balloon」のバージョン2.1をリリース致しました。 今回はアップデートの内容や吹き出しの種類、アップデートの方法と使い方などを紹介します。 バージョン

tips4life.me

吹き出しが数ある中で、この記事をオススメする理由は、

1. AMP（アンプ）対応の吹き出しだから
2. 吹き出し機能が５種類もあるから

Simplicity2には、AMP対応にできる設定が組み込まれています。

AMPは何なのか簡単にいうと、ホームページの表示速度がめっちゃ早くなる技術のことです。

しかし、早くなるというメリットがある代わりに、デザインが崩れてしまうデメリットがあります。
そのデザインが崩れてしまう最たる現象が、吹き出しです。

しかし、紹介している記事では、AMP対応した吹き出しが作れるんです！

デザインもなんと５種類！

「AMP対応についてもっと知りたい」と思った方は、この記事を読もう！

ブログのAMP対策の為に最低押さえておきたい4つのポイント！アクセスアップチャンスを逃すなっ！

junichi-manga.com

記事の下に著者紹介（Simple author box）を追加するカスタマイズ

記事の下に著者紹介の表示をする Simple Author Box プラグイン

RYUS blogの記事はほぼ毎日兎本が書いていますが、天野も書く場合があります。このように複数の著者が書いている場合やにはどちらが書いているのかについて著者紹介をしたいと思うことが多いと思います。そんなときに使えるプラグイン Simple

usortblog.com

記事下に著者紹介があれば、プロフィールページも見てもらいやすいですよね。

著者紹介を追加するプラグインは2つあります。

1. Fancier Author Box
2. Simple author box

僕は、スマホでの表示が見やすいと思ったSimple author boxを採用しました。
比較はこちらの記事を参照してください。

❤️聖 闘士 星矢 準備 モード❤️ ❤️イルミネーション 岡崎❤️ 聖 闘士 星矢 準備 モード パーラー ニュー グランド 貫井 店 鉄拳 199 mattarilog.com

クラウン パチンコ 滋賀k8 カジノヴァン・ヘイレンの元ボーカルから学ぶ、ビジネス成功の哲学仮想通貨カジノパチンコパチスロ 北斗 の 拳 初代 動画atype スロットk8 カジノ 来週話題になるハナ ❤️イルミネーション 岡崎❤️ 聖 闘士 星矢 準備 モード パーラー ニュー グランド 貫井 店 mattaril

mattarilog.com

そして、Simple author boxに決めたあなた！

Simple author boxプロフィールをおしゃれにしたいなら、以下の記事のデザインがオススメです！

僕もこれを採用しています。

ママでもオタク宣言

記事がありません

youchiki.com

商品紹介に便利なカエレバ・ヨメレバ導入するカスタマイズ

商品紹介に便利なカエレバ・ヨメレバ導入＆デザインカスタムしてみた - うえのブログ

ブロガーさんがキレイにデザインされた書籍紹介とか見て、調べたらヨメレバっていうみたいですね。導入してみました。

www.uenoyou.net

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

沈黙のWebライティング

posted with ヨメレバ

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

Amazon

Kindle

楽天ブックス

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

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

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

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

僕が採用したデザインです。

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

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

rough-log.com

トップページにスライドショーを追加するカスタマイズ

Simplicityでトップページにスライドショーを入れる手順（Meta Slider使用）

サイトのトップページにスライドショーがあると、目を引きますし、かっこいいですよね。今回、別サイトなんですが「Simplicity」のテーマを使っているサイトでスライドショーを入れる機会がありまして、そこで、あれこれ手順を試しましたので、ここ

nohosma.com

トップページがあると、目立ちますよね！

トップページをクリックすると見て欲しいページに飛ぶといった使い方にオススメです！

スマホ表示でグローバルナビを追加するカスタマイズ

301 Moved Permanently

www.globalcontent-collabo.net

スマホ表示でも、カテゴリが見やすくて読者も読みやすい！

必ず必要な訳ではないですが、僕はつけてみました！

記事下に気に入ったらいいね！を追加

http://daholog.com/wordpress/post-629/

daholog.com

単純に、いいね！の数が増えます！

僕は色を黄色にして使ってますね！

記事を読むために必要な時間を設定

Insert Estimated Reading Time【記事を読むための必要な時間】設定方法を解説

WordPress運営においてプラグインは欠かせない機能なのですが、今回は「Insert Estimated …

seonet.x0.com

これを表示するブログが増えてきてるよねぇ〜

（中毒者用）Simplicity2　カスタマイズ【デザイン編】

Simplicity2をおしゃれなフォントにカスタマイズ

http://news-tsurezure.com/post-1097/

news-tsurezure.com

フォントもたくさんあるんですが、この記事が一番スッキリしてよかったように思います。

Simplicity2全体をおしゃれにデザインカスタマイズ

カスタマイズ方法を紹介してくださっている人は数多くいらっしゃいます。

その中でも、僕がカスタマイズする時に特に参考になった2記事を中心に紹介します。

初心者でもSimplicity2をおしゃれにカスタマイズできるデザイン例①

出典AboutLife

【保存版】Simplicityをおしゃれに！初心者でもできたカスタマイズ総まとめ。

WordPressテーマ、Simplicity2でカスタマイズしたところをほぼ全部まとめました。ブログのテーマ、Simplicityが良さそうだけどみんな使ってるしなぁ。Simplicityのデザインを変えてみたいけど、どこをどういじったら…

aboutlife-blog.com

Simplicity2のカスタマイズ方法を、初心者でもコピペでおしゃれにデザインにすることができる「About Life」さんの記事です。

「Simplicity2のカスタマイズはこの記事だけいいのでは？」と思えるほど、大ボリュームの記事になっています。

紹介しているカスタマイズ方法の数は驚きの25個。

カフェのようなおしゃれなブログを目指す人にオススメです！

この記事でブログ初心者の僕が採用したSimplicity2のカスタマイズ

• バッジのスタイル
• SNSシェアボタン・フォローボタン・タイトルのカスタマイズ
• 人気記事ランキングの導入&順位ごとに色を変えるカスタマイズ

この記事を参考にSimplicity2をデザインするときの注意点

カスタマイズは自分の好みによって、記事の内容を鵜呑みにしてはいけないところがあるので、注意点として補足しておきますね。

注意点①　スマホ表示がアコーディオンメニューorスライドインライト

左が「About Life」、右が「婿養子の島根移住ブログ」のスマホ画面です。

アコーディオンをおしゃれにカスタマイズされていいなと思ったのですが、僕はブログ下のボタンがある方がいいと思い、スライドインライト（ボタン下）にしました。

このスマホ画面の設定は「カスタマイズ→レイアウト（モバイル）」で変更が可能です。

スライドインライトやスライドインダークなどを使いたい場合は、そのようにしましょう。

好みです。

注意点②　記事一覧がエントリーカード型orタイル２列

左が「About Life」、右が「婿養子の島根移住ブログ」の記事一覧画面です。

About Lifeではエントリー型にしていますが、僕はタイル２列の方がよかったのでしませんでした。

この一覧リストの設定は「カスタマイズ→レイアウト（全体・リスト）」で変更が可能です。

スマホ対応にしたとき表示のさせ方もおそらく迷うと思います。

完全レスポンシブ表示を有効にチェックとつけた時と外したときのブログの見え方を確認し、好みの方にしてください。

タイル２列のデメリットとしてタイルの高さが合いません。

これはめちゃくちゃ見映えが悪いので、タイル２列を選択する場合はこの記事も一緒に読んでおきましょう。▼

「Simplicity」タイル2列・3列の高さをそろえる方法

最近どうしてもしたかったWordPressのカスタマイズを今回してみようと思います。トップページの記事一覧をタイル状にするということです。 当サイトではSimplicity2というテーマを使っていますが、Simplicity2ではコードを追

mechalog.com

初心者でもSimplicity2をかっこよく見やすくカスタマイズできるデザイン例②

出典MASALOG

http://www.masalog.me/simplicity-customize-point/

www.masalog.me

Simplicity2のカスタマイズ方法を、初心者でもコピペでかっこよく見やすいデザインにすることができる「MASALOG」さんの記事です。

About Lifeと同じく、大ボリュームの19のカスタマイズ方法を提案。

デザインはこの記事の内容だけ行い、ブログ書き始めてもいいと思います。

僕のブログもMASALOGさんの記事を大いに参考にさせていただいて、デザインをカスタマイズしています。

Simplicity2をインストールしたところで、とりあえずどんなデザインにしたらいいかわからないという人は、この記事をマネするのがオススメ！

この記事でブログ初心者の僕が採用したSimplicity2のカスタマイズ

• グローバルナビの上下に線を引く
• グローバルメニューのホバーの線と文字色、背景色を変える
• 「記事を読む」「続きを読む」を消す
• パンくずリストをカスタマイズ
• 「上へ戻る」ボタンのカスタマイズ
• フォントの色を少しだけ灰色にする
• メインカラムとサイドバーの囲い線を消す
• サムネイル画像に変化をつける

この記事を参考にSimplicity2をデザインするときの注意点

随時、ブログのカスタマイズをしているようなので、そのままコピペしても、MASALOGと同じデザインにならない可能性があります。

あとは、About LIfeと同じで、記事がエントリータイプだったり、スマホを完全レスポンシブにすべきかどうかというところで、カスタマイズによってブログのデザイン崩れる可能性があります。

その他のSimplicity2のデザインカスタマイズ　参考記事

その他、たくさんのデザインカスタマイズの記事を参考にさせていただきました。

まとめてくださった皆さんに感謝の気持ちでいっぱいです！

Simplicity2 | Love Wife Life

www.love-wife-life.com

https://doragonquest11.com/simplicity2-custom

doragonquest11.com

WordPressテーマ「Simplicity」のカスタマイズしやすさに感動！使用5日目のレビュー公開

SEO 内部対策済の ワードプレス テーマ「Simplicity」を使い始めて5日目の私のレビュー。 このテンプレートはネットの知識ありなしを問わず、それぞれの段階でカスタマイズしやすいと判明。 実際に使用して感動したポイント8つをご紹介してます。現状のサイトのカスタマイズ内容も全て公開中。

37min.com

403 Forbidden

www.firiinfo.com

初心者でもできた！「Simplicity」でカスタマイズしたこと6つ！

WordPress初心者の僕がテーマ「Simplicity」を使っている理由という記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。けど管理画面で

tamotopi.com

【コピペでできる！】「simplicity」に行った10のCSSカスタマイズ

こんにちは！！ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。本記事では、ワードプレスのテーマ「simplicity2」へ最初に加えたCSSカスタマイズをまとめました。これからsimp

gcbgarden.com

SimplicityをSTORK風テーマにカスタマイズまとめ

無料WordPressテーマ「Simplicity（シンプリシティー）」の元々の機能やソースを流用して、テンプレートやCSS（スタイルシート）をカスタマイズすることで「STORK（ストーク）」テーマに近づけるカスタマイズ紹介記事のまとめです。

shumist.com

http://xn--vus46bozr.com/how-did-i-customize-simplicity/

旅女子.com

Simplicityを細部までおしゃれにするカスタマイズ

はてなブログからWordPressに引っ越し、Simplicityをインストールしてから今日まで様々なカスタマイズを行ってきました。今回はその中から、あまり目立たないけどここを変えればSimplicityがぐっとオシャレになると思うカスタマ

www.hiroseyonaka.com

Simplicity2の見出しをおしゃれにカスタマイズ

出典 サルワカ

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

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

saruwakakun.com

サルワカさんが最高！

Simplicity2のリストをおしゃれにカスタマイズ

出典 サルワカ

コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

saruwakakun.com

サルワカさんが最高！！

Simplicity2のボックスをおしゃれにカスタマイズ

出典 サルワカ

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

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

saruwakakun.com

サルワカさんが最高！！！

Simplicity2の引用をおしゃれにカスタマイズ

出典 サルワカ

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

画像を使わずにHTMLとCSSだけで実装できる「引用ボックス」のデザインを30個紹介します。シンプルなものからカッコイイものまで。

saruwakakun.com

サルワカさんが最高！！！！

ブログカードのカスタマイズ

Simplicity標準装備のブログカードをお洒落にカスタマイズ～デザイン6種【テンプレートｰ１】

Simplicity標準装備のはてブブログカードをお洒落にカスタマイズする方法～ スタイル6種コピペokのテンプレート１ Simplicityで搭載されている便利なブログカード機能。 表示されるブログカードを装飾して、オリジナル感を出してみましょう。CSSでスタイル出来るデザイン6種掲載しています。

mitemita.com

もはやここまでこだわるのか？というレベル。笑

（中毒者用）Simplicity2　カスタマイズ【サイドバー編】

Simplicity2のサイドバーにプロフィールを表示するカスタマイズ

http://oginchura.com/simplicity2-profile-568

oginchura.com

プロフィールページを読者に見て欲しい人にオススメ！

Simplicity2のサイドバーのカテゴリーをおしゃれにカスタマイズ

ページが見つかりませんでした – 404 Not Found

repobu.com

全体カスタマイズの記事でも、紹介されてたけどこれはおしゃれだと思う！

Simplicity2のサイドバーのタグクラウドをおしゃれにカスタマイズ

https://megasaruma.com/simplicity_tagcloud/

megasaruma.com

タグもおしゃれにしたいというあなたへ！

まとめ

いかがだったでしょうか？

今回、紹介した記事を全て見れば、Simplicity2のカスタマイズ中毒者のあなたも、納得できるぐらいおしゃれに変更できたのではないでしょうか。

ブログのメインは文章なので、Simplicity2のカスタマイズ中毒にならないようにね！

はまちゃんの一言

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

▼ブログ初心者が月1000円稼ぐ全手順▼

【初報酬】ブログ初心者が1ヶ月で月1000円稼ぐ具体的な全手順

wakuwaku-keigo.com

2020.05.02

はまちゃんが登録を推奨するASPはコレ！

A8.net

アフィリエイトB

もしもアフィリエイト

Link-A

バリューコマース

バリューコマース

この記事にたどり着いたあなたは、

こんな状況ではないでしょうか？

WordPressテーマのSimplicity2は、デザインがシンプルですが、カスタマイズすることでおしゃれにできます。

自分好みにしようと、たくさんの情報調べたくなりますよね。

僕も3か月前はそうでした。

その結果…

ブログ開設して2週間経っても1記事も書いていない！

こんなことになりました。笑

調べることが大好きなあなたは、きっと僕と同じようなことになるでしょう。

これが有名なSimplicity2のカスタマイズ中毒です。笑

Simplicity2はカスタマイズしやすいので、ちょこちょこ設定を編集していくうちにどんどん楽しくなってきます。

そして、Simplicity2をカスタマイズしていることがブログを成長させているんだと勘違いするのです。

それは本末転倒だーーー！！！

ブログの主役の記事書け！キジーー！！

・・・と、正論をいうのは簡単ですが、元中毒ジャンキーの僕からしたら、ブログをおしゃれにしたいあなたの気持ちはめちゃくちゃわかるんですよね。笑

そこで、「ブログ初心者に最低限これだけ読めば、ひとまず納得してブログを書く作業にうつれるだろうという厳選5記事」を紹介したいと思います。

この5記事必ず読みたいと思う記事ばかりです。
記事を参考にしてブログをカスタマイズしてみてください。

そして、それ以上は他の記事は読まず、記念すべき1記事目をあなたのブログに書いていきましょう！

Simplicity２ってどんなWordPressテーマ？

サンプルサイトはこちら

WordPressテーマは数あれど、無料テンプレートなら「Simplicity2」が最高だ。
最高な理由は控えめに言ってもこれだけメリットがある。

• SEOに強い
• カスタマイズのしやすさ
• ブログカードが使える
• AMPページ対応
• 操作がシンプル
• 作者が素晴らしい　etc

それぞれの詳しい説明は、Simplicity公式サイトや他のブロガーに任せますね。

そんな最高なSimplicity2だが、デメリットが1つあります。

デザインがシンプルすぎることだ！

「ブログの主役は本文でしょ？」
「デザインはSEOにほとんど影響にしないから気にしなくてよくない？」

言い分はわかる。
でも、デザインがよくないと、ブログを書くモチベーションが上がらないんですよね。

Simplicity2を導入したので、もっとおしゃれなデザインにカスタマイズしたいと思っているでしょう。

でも、htmlやcssの知識がないブログ初心者だと、カスタマイズは大変ですよね。
勝手にイジって、ブログがおかしくなったら嫌ですよね。

僕もそうでした。

でも、Simplicity2を使われている先人たちのブログのおかげで、初心者だったにも関わらず、おしゃれにカスタマイズできたです！

僕のブログはこんな感じにカスタマイズできました。

悪くないでしょ？笑

多分、僕はSimplicity2のカスタマイズ方法が書かれたブログ記事は全部見ました！（さすが中毒者w）

そんな僕だからこそオススメできる、ブログ初心者向けの厳選5記事を紹介します！

お待ちかねの5記事行ってみよう！

Simplicity2をカスタマイズしたい初心者が読むべき5記事

SImplicity2を導入したばかりのあなたが読む記事は次の5つ。

1. 【初期設定編】初期設定
   Simplicityの初期設定・おすすめの設定
2. 【機能追加編】プラグイン
   WordPress初心者におすすめなプラグイン【Simplicity2環境】
3. 【デザイン編】ロゴの作成
   無料でロゴ作成するなら「Design Rails」がお手軽
4. 【デザイン編】ブログ全体カスタマイズ参考①
   【保存版】Simplicityをおしゃれに！初心者でもできたカスタマイズ総まとめ。
5. 【デザイン編】ブログ全体カスタマイズ参考②
   WordPressテーマ「Simplicity」をカスタマイズする19のポイント

（初心者用）Simplicity2　カスタマイズ【初期設定編】

すぐにでもブログを始めたい場合は、この初期設定だけしてブログを始めてもOKです。

あとのデザインや機能追加は、後からでも設定できるので、ぶっちゃけ読まなくても大丈夫です。

ブログ初心者でも最初に初期設定だけはやっておこう（1記事目）

Simplicity2のカスタマイズで初心者にオススメする1記事目は、初期設定を紹介している記事です。

Simplicity2をワードプレスに導入したばかりであれば、まずは初期設定をしておきましょう！

初期設定はやらなければならないことがたくさんありますが、最初にしてしまった方が後々楽です。

初期設定は、公式サイトでオススメ設定を紹介してくれています！

記事数が多いので、まずは推奨と書かれた設定だけしていこう！

（初心者用）Simplicity2　カスタマイズ【機能追加編】

Simplicity2の初期設定が終われば、ブログを書き始めてもいいですが、プラグインを導入することをオススメします！

プラグイン（拡張機能）って何ぞや？

プラグイン（拡張機能）をブログ初心者向けに補足しておきますね。

プラグインには、ブログの表示スピードを早くするプラグインや、SNSと連携しやすいボタンを表示するプラグインなど様々なものがあります。

イメージとしたら、あなたのお持ちのスマホです。
電話、メール、インターネット、録音、音楽、ラジオ、アプリ…とたくさんの機能がありますよね？

わかりやすいのがアプリで、無料ダウンロードすると様々なことができると思います。

WordPressにもプラグインという無料アプリ（プラグイン）がたくさんあるということです。

プラグインなど、ブログの基礎知識を知っておきたいということであれば、以下の記事で紹介している無料E-bookを読むのをオススメします！

Simplicity2に導入しておきたいプラグイン一覧（2記事目）

Simplicity2のカスタマイズで初心者にオススメする2記事目は、ダウンロードすべきプラグイン一覧を紹介している記事です。

プラグインは、Simplicity2に限らずWordPressでブログを作る場合、必ず追加しておいた方がいいものです。

プラグインはたくさんあるので、自分がこんなことをしたいと思ったら、その都度追加していくようにしましょう。

必要もない多くのプラグインを入れすぎると、ブログの表示速度にも悪影響だから注意。

紹介する記事の必須プラグインだけ、まずはダウンロードしてくださいね！

（初心者用）Simplicity2　カスタマイズ【デザイン編】

Simplicity2でカスタマイズに一番どこをこだわるかと言えば、デザインでしょう。

Simplicity2の最大のメリットは自由にカスタマイズできること。

頑張れば有料テンプレート級におしゃれにすることも可能なことが、多くの人にSimplicity2が選ばれている要因です。

でも、このメリットが初心者にとっては落とし穴。

デザインに時間をかけすぎて、肝心のブログを書けないという人が続出しています。

このデザインの章では、厳選した3記事だけ紹介しています。

「もっとデザインをカスタマイズしたい」という気持ちをグッとこらえて、ブログを書くようにしないと僕みたいになるよ。

ブログ初心者でもロゴは作っておこう（3記事目）

Simplicity2のカスタマイズで初心者にオススメする3記事目は、簡単にロゴ作成する方法を紹介している記事です。

ブログの初期設定とプラグインの追加が終わったらロゴ作成ですね！

ロゴはブログの顔。
ブログを書くあなたも、ブログを読んでくれる読者も、ロゴがあればブログに愛着がわきます。

ロゴをこだわりたい人は、クラウドワークスやココナラでプロに依頼するのがオススメ！

でも、ブログは始めたばかりなら、自分でも簡単に作れるのでまずは作ってみましょう。

初心者でもSimplicity2をおしゃれにカスタマイズできるデザイン例①（4記事目）

出典AboutLife

Simplicity2のカスタマイズ方法を、初心者でもコピペでおしゃれにデザインにすることができる「About Life」さんの記事です。

「Simplicity2のカスタマイズはこの記事だけいいのでは？」と思えるほど、大ボリュームの記事になっています。

紹介しているカスタマイズ方法の数は驚きの25個。

カフェのようなおしゃれなブログを目指す人にオススメです！

この記事でブログ初心者の僕が採用したSimplicity2のカスタマイズ

• バッジのスタイル
• SNSシェアボタン・フォローボタン・タイトルのカスタマイズ
• 人気記事ランキングの導入&順位ごとに色を変えるカスタマイズ

この記事を参考にSimplicity2をデザインするときの注意点

カスタマイズは自分の好みによって、記事の内容を鵜呑みにしてはいけないところがあるので、注意点として補足しておきますね。

注意点①　スマホ表示がアコーディオンメニューorスライドインライト

左が「About Life」、右が「婿養子の島根移住ブログ」のスマホ画面です。

アコーディオンをおしゃれにカスタマイズされていいなと思ったのですが、僕はブログ下のボタンがある方がいいと思い、スライドインライト（ボタン下）にしました。

このスマホ画面の設定は「カスタマイズ→レイアウト（モバイル）」で変更が可能です。

スライドインライトやスライドインダークなどを使いたい場合は、そのようにしましょう。

好みです。

注意点②　記事一覧がエントリーカード型orタイル２列

左が「About Life」、右が「婿養子の島根移住ブログ」の記事一覧画面です。

About Lifeではエントリー型にしていますが、僕はタイル２列の方がよかったのでしませんでした。

この一覧リストの設定は「カスタマイズ→レイアウト（全体・リスト）」で変更が可能です。

スマホ対応にしたとき表示のさせ方もおそらく迷うと思います。

完全レスポンシブ表示を有効にチェックとつけた時と外したときのブログの見え方を確認し、好みの方にしてください。

タイル２列のデメリットとしてタイルの高さが合いません。

これはめちゃくちゃ見映えが悪いので、タイル２列を選択する場合はこの記事も一緒に読んでおきましょう。▼

「Simplicity」タイル2列・3列の高さをそろえる方法

最近どうしてもしたかったWordPressのカスタマイズを今回してみようと思います。トップページの記事一覧をタイル状にするということです。 当サイトではSimplicity2というテーマを使っていますが、Simplicity2ではコードを追

mechalog.com

初心者でもSimplicity2をかっこよく見やすくカスタマイズできるデザイン例②（5記事目）

出典MASALOG

Simplicity2のカスタマイズ方法を、初心者でもコピペでかっこよく見やすいデザインにすることができる「MASALOG」さんの記事です。

About Lifeと同じく、大ボリュームの19のカスタマイズ方法を提案。

デザインはこの記事の内容だけ行い、ブログ書き始めてもいいと思います。

僕のブログもMASALOGさんの記事を大いに参考にさせていただいて、デザインをカスタマイズしています。

Simplicity2をインストールしたところで、とりあえずどんなデザインにしたらいいかわからないという人は、この記事をマネするのがオススメ！

この記事でブログ初心者の僕が採用したSimplicity2のカスタマイズ

• グローバルナビの上下に線を引く
• グローバルメニューのホバーの線と文字色、背景色を変える
• 「記事を読む」「続きを読む」を消す
• パンくずリストをカスタマイズ
• 「上へ戻る」ボタンのカスタマイズ
• フォントの色を少しだけ灰色にする
• メインカラムとサイドバーの囲い線を消す
• サムネイル画像に変化をつける

この記事を参考にSimplicity2をデザインするときの注意点

随時、ブログのカスタマイズをしているようなので、そのままコピペしても、MASALOGと同じデザインにならない可能性があり。

あとは、About LIfeと同じで、記事がエントリータイプだったり、スマホを完全レスポンシブにすべきかどうかというところで、カスタマイズによってブログのデザイン崩れる可能性があります。

ブログで稼ぎたいなら絶対登録！ASPの登録

ここまで、ブログ初心者向けに厳選5記事を紹介してきました。

しかし、あなたがもう一つ絶対にやっておかなければならないことがあります。

ASPの登録です。

あなたがブログを書く目的は様々あると思いますが、せっかくならブログで稼ぎたいですよね？

それなら、ブログでものを紹介して収益を得るアフィリエイトをするには、ASPに登録しなければいけません。

「アフィリエイトって？ASPって？」と疑問を持つかもしれませんが、それは一旦置いておいてまずは登録してください。

以下をクリックして会員登録に進んでください。
全て無料です。

A8.net

アフィリエイトB

もしもアフィリエイト

Link-A

バリューコマース

バリューコマース

（追記）Simplicity2のカスタマイズをもっとこだわりたい人へ

さて、ここでブログは終わりの予定でした。

でも、

「Simplicity2のカスタマイズ中毒者でいいからオススメのカスタマイズ教えてくれ〜」

という声があったので、僕が実際に読んでビビっときたカスタマイズ記事を紹介します！

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

wakuwaku-keigo.com

2018.11.01

まとめ

紹介した5記事はいかがだったでしょうか？

1. 【初期設定編】初期設定
   Simplicityの初期設定・おすすめの設定
2. 【機能追加編】プラグイン
   WordPress初心者におすすめなプラグイン【Simplicity2環境】
3. 【デザイン編】ロゴの作成
   無料でロゴ作成するなら「Design Rails」がお手軽
4. 【デザイン編】ブログ全体カスタマイズ参考①
   【保存版】Simplicityをおしゃれに！初心者でもできたカスタマイズ総まとめ。
5. 【デザイン編】ブログ全体カスタマイズ参考②
   WordPressテーマ「Simplicity」をカスタマイズする19のポイント

ブログを始めたばかりの初心者は、「カスタマイズはいいからまずは記事書け！」と言われることも多いですが、この厳選5記事は読んでからの方がいいでしょう。

なぜなら、ブログが一番成果が出るために必要なものは、ブログを書き続ける継続力だから。

Simplicity2をカスタマイズして、自分好みにすることでブログのことが好きになります。

ブログのことが好きになると、もっとこのブログを成長させよう！というモチベーションに繋がると思うんです。

ぜひ、あなたも参考にして見てくださいね！
ただし、カスタマイズ中毒者にはならないように！笑

▼（2018年5月9日追記）ブログテーマをSimplicity2からCocoonに変更しました！

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

wakuwaku-keigo.com

2019.07.22

はまちゃんの一言

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

▼ブログ初心者が月1000円稼ぐ全手順▼

【初報酬】ブログ初心者が1ヶ月で月1000円稼ぐ具体的な全手順

wakuwaku-keigo.com

2020.05.02

はまちゃんが登録を推奨するASPはコレ！

A8.net

アフィリエイトB

もしもアフィリエイト

Link-A

バリューコマース

バリューコマース