【画像付き設定方法】ワードプレスのテーマをStingerからCocoonに変更しました!

この記事は約7分で読めます。

このサイトはワードプレスを使って作成しています。

ワードプレスについての記事はこちら

ワードプレスではテーマを選ぶことが出来るので、自分の好きな雰囲気のサイトを簡単に作ることが出来ます。

ワードプレス テーマ

テーマを選ぶのは管理画面の『外観』=>『テーマ』

ここに無料のテーマがすでにいくつか入っているので、そこから選ぶことが出来ます。
またそれ以外のテーマを使いたい場合は『新規追加』からダウンロードして利用することが出来ます。

テーマは無料テーマと有料テーマがあり、「ワードプレス テーマ」で検索するとたくさん出てきます。

スポンサーリンク

ワードプレステーマ Stinger

自分は今までStingerという無料のテーマを使っていました。

といぷ~
といぷ~

なぜStingerを使っていたかというと、検索で無料テーマを探しおすすめが多かったからです。

実際使ってみてシンプルでとても使いやすかったので、そのまま全サイトで利用していました。

Stingerはここからダウンロードして使えます。

でも最近「このデザインいいなぁ」と思うサイトの多くが別のテーマ「Cocoon」を使っているのを発見しました。

他のサイトのテーマを探す方法

いいなぁと思ったサイトがあったらそのサイト上で右クリックします。

ワードプレス テーマ

すると上記のように別窓が出てくるのでそこの「View page source」をクリック。

ワードプレス テーマ

そうするとこのように記号が並んで出てきます。
ここでショートカットキー「ctrl+f」を使って「themes」を検索します。
するとワードプレスを使っているサイトならwp-content/themes/xxxと出てきます。

  • Stingerを使っているサイト:wp-content/themes/stinger8/
  • Cocoonを使っているサイト:wp-content/themes/cocoon
  • WordPressを使っていないサイトは検索されません。

そこでこのサイトのテーマをCocoonに変更することにしました!

ワードプレステーマ Cocoon

Cocoonはこちらからダウンロードできます。

Cocoonの公式サイト

公式サイトで説明されていますが、「インストールエラー」が出ました。
なので「Cocoon 低サイズ版」をインストールしました。

これはインストール後自動アップデートをして最新バージョンにした方がいいです。

最新バージョンの仕方は簡単。
テーマでアップロードしたCocoon上に「新しいバージョンが利用できます」と出ていますので『今すぐ更新』をクリックすれば自動で最新バージョンにしてくれます。

ワードプレス テーマ Cocoon

子テーマのダウンロードもお忘れなく!

Cocoonには親テーマと子テーマが用意されています。
両方とも公式サイトからダウンロードできます。
両テーマをダウンロードしたら子テーマを有効にしておいて下さい!

今後サイトの色を変更したりフォントを変えたりするのに、子テーマを有効にしておかないと最新バージョンにアップデートする度にせっかく編集した個所が初期化されて元に戻ってしまいます。

子テーマを有効にして編集しておけば、親テーマをバージョンアップしても編集部分が消えることはありませんので、子テーマを有効にすることを忘れないで下さい!

また最新バージョンが出て親テーマを更新する場合は「親テーマ」を有効にして更新し、更新が完了したら「子テーマ」を有効に戻します。

ワードプレステーマ Cocoonの素晴らしすぎる機能

Cocoonを設定して驚いたのが便利な機能がいっぱいあること!
まず自分がしたことを忘備録として残しておきたいと思います。

Cocoonの設定

管理画面にある『Cocoonの設定』から始めます。

ワーとプレス テーマ Cocoon

たくさんの設定が出来るようになっています。

ワードプレス テーマ Cocoon

とりあえず設定した方がいいボタンを紹介しておきます。

スキン:サイト全体のデザインを選択できます。
スキン一覧から選んで下の変更をまとめて保存をクリックするとプレビューに出てくるので、自分のイメージにあったスキンを選ぶことが出来ます。

全体:フォントや文字サイズ、サイト背景画像など変更することが出来ます。

ヘッダー:自分のロゴを入れることが出来ます。

広告:アドセンス広告が簡単に設定できます!
アドセンスアカウントを持っている人はここにアドセンスコードを入れます。
注意したいのはここにはアドセンスディスプレイ広告のレスポンシブコードを入れることです。

別の広告を表示したい場合は広告コードの下の『広告表示位置』の『詳細設定』から変更します。

タイトル:ブログのタイトルの表示方法を選びます。サイトの説明(120文字ぐらい)やメタキーワードも忘れなく入れましょう。

アクセス解析・認証:Google AnalyticsやGoogle Search Consoleを利用している人はここに自分のID番号を入れれば解析してくれます。

カラム:サイトの幅やサイドバーの幅などが変更できます。

インデックス:投稿トップページに表示される記事の紹介形式です。

投稿:投稿記事に表示されるカテゴリ・タグの表示方法や関連記事の表示の仕方、記事下に出てくる前ページ/次ページ(ページ送りナビ)の表示の仕方、コメントを受け付けるかどうか、パンくずリストの設定などが出来ます。

固定ページ:固定ページの設定

本文:外部リンクや内部リンクの詳細設定。テーブルを入れた時見やすくする設定や、記事を読む時間を表示する設定も出来ます。

Cocoon 表示時間

目次:記事に目次を自動で入れることが出来ます。
その目次の表示方法を設定できます。

Codoon 目次

画像:本文上にアイキャッチを表示したくないときはここで設定できます。

フッター:フッターにロゴを入れたいときはここから設定。またサイトの最後に表示されるクレジットもここで表示方法が設定できます。

このサイトは『Copyright © 2018 といぷ~ All Rights Reserved.』にしてあります。

最後に変更をまとめて保存をクリックします。

 

ロリポップサーバーをお使いの方は注意
ロリポップサーバーを使っている人は変更をまとめて保存をクリックすると403エラーが表示されます。
Cocoon 403エラー
この対処法はロリポップのWAF設定を変更することで解決できます。
ロリポップの管理画面から『セキュリティ』=>『WAF設定』をクリックします。
Coccon 403エラー
サイト一覧が出てくるので該当サイトの右側にある設定変更をクリックします。
Cocoon 403エラー
設定状態が無効になります。
これでCocoonの設定画面が保存できます。
ただし無効が反映されるのに数分かかるので、しばらく待ってから保存ボタンをクリックしましょう。
といぷ~
といぷ~

Cocoon設定が完了したら設定状態を『有効』に戻すのを忘れないで下さいね!

ロリポップはひと手間かかりますが、安くて安定したサーバーなので、初心者におすすめです!
Wordpressが使える一番安いプランは月額250円~のライトプラン。
2015年から使ってますが、一度も問題発生したことありません。ライトプラン 詳細はこちら

とりあえずこれでCocoonのテーマが一通り設定できたので、サイトがリニューアルされました♪
記事を書く前にもう一つしておきたいプラグインの設定です。

プラグインをインストール

プラグインはワードプレスで機能を増やすための便利なツール。
簡単にインストールして利用することが出来ますが、あまり入れすぎると他の動作の妨げになることがあるので、必要最低限でいいと思います。

Cocoonだとプラグインを使わなくても出来ることがいっぱいなのが嬉しいです♪
ただもう少し使いたい機能があるので、いくつかプラグインを入れました。

Stingerからの変更なのでプラグインは以前利用していたものが継続されます。

利用しているプラグイン
『TinyMCE Advanced』記事を編集するのに便利なプラグイン
『Ultimate Nofollow』外部リンクを付けるとき自サイトのパワーを出さないため
『WebSub/PubSubHubbub』Googleなどの検索エンジンに、記事を見つけてもらいやすくする
TinyMCE Advancedを入れた後、『スタイルシート』は絶対メニューバーに入れて下さいね!
これとても便利に使えます!
Cocoon スタイルシート
この青い枠もスタイルシートを利用して書いてます。
Stingerで使っていたけどCocoonは必要ないプラグイン
『All In One SEO Pack』CocoonはSEO対策されているので必要なさそう
『Word Balloon』Cocoonの吹き出しはプラグインより使いやすい♪

プラグインの入れ方は管理画面の左に『プラグイン』があるので、そこから簡単にインストールできます。

それぞれのプラグインの使い方は検索で調べると詳しく出ていますよ!

とりあえず自分がしたCocoonの基本設定をご紹介しました。

といぷ~
といぷ~

Cocoonは機能が充実していて本当に楽しい♪
これが無料で使えるなんて信じられません。
提供者さん本当にありがとうございます<(_ _*)>

タイトルとURLをコピーしました