mixhost 完全無料で高機能機能なテーマ「Cocoon」の利用方法

Cocoon

Cocoon（コクーン）とは、無料で利用できるWordPressのテーマでCocoon（意味：繭）と言う名前の通り、白を基調したシンプルなデザインのテーマとなります。

また、Cocoonの以下の特徴があり、テーマに内包された機能や設定のみで様々なプラグイン必要とする機能などを導入することができ、

高機能なテーマでこれからWordPressを用いたWebサイトでブログやアフィリエイトなどを目的として運営してく際に、とてもオススメのプラグインとなります。

 

本記事では、これからmixhostで完全無料で高機能機能なテーマ「Cocoon」の利用方法について紹介します。

 

 

導入方法

公式サイトへアクセスしテーマファイルをダウンロード

１．公式サイトへアクセスしダウンロードページへ

Cocoon（コクーン）の導入を行うには、公式サイト（左記リンク及び下記画像より）へアクセスしましょう。

 

 

２．利用規約の確認をしましょう。

１．にてアクセスしたダウンロードページにて【Cocoonの利用規約】を開き、Cocoonは、商用・非商用を問わず無料で利用可能ですが

独自カスタマイズを行った場合や作者からのお願いなど記載されていますので一読願います。

 

 

３．Cocoonの親テーマと子テーマをダウンロードしましょう。

ダウンロードページ内にあるCocoonの親テーマと子テーマの両方をダウンロードしPCへ保存しましょう。

 

 

 

WordPress及びPHPのVer.の確認方法

 

確認項目	場所
WordPress Ver.	WordPress(Softaculous)
PHP Ver.	MultiPHP マネージャー

 

 

 

4．テーマファイルをWordPressサイトへ追加しましょう。

運営しているWebサイトのWordPressの管理画面内から【①：外観欄：テーマ】→【②：テーマページ内：新規追加】をクリックし、

テーマを追加ページ内の【③：テーマのアップロード】→【④：参照ボタン】から３．にてダウンロードしてテーマファイルを選択しましょう。

インストールが完了後に表示されるテーマの「有効化」クリックしてWordPressテーマの切り替えを行いましょう。

 

 

 

Cocoonの設定方法について

テーマを有効化すると、WordPressの管理画面にCocoon設定が追加されここからCocoonの各種設定を行うことができます。

Cocoonでは多様な設定があり、ここではオススメの設定やよく使用する設定項目について紹介します。

 

 

Cocoon設定

WordPress管理画面よりCocoon設定画面

 

 

テーマ利用マニュアルへはこちら 外部リンク先を新しいタブで開きます。

 

 

スキン

スキン設定では、スキンを変更することで、サイトのデザインを手軽に変更できCocoonに同梱されているスキンやオリジナルスキンも作成可能です。

WordPressでWebサイトの運営を始めた方でWebサイトのデザイン変更を変えたいが細かく変更するのは苦手でない時は、

Cocoonに同梱されいるスキンが用意されている為、プレビューでデザインに気に入る物があれば簡単にデザイン変更を試してみましょう。

 

 

全体

全体設定では、以下の設定項目がありプレビューにて変更後のWebサイトデザインやレイアウト設定を確認し、

Webサイトのデザインをカスタマイズすることができます。

 

 

アクセス解析・認証

アクセス解析・認証では、人気記事ウィジェットなどで利用されるアクセス解析に関する設定及びGoogleのアクセス解析サービス設定の設定が行えます。

 

以下の設定項目では、人気記事ウィジェットで利用されるアクセス解析の集計結果から管理者を含まないようにするための設定項目で、

小規模のアクセス数の場合など管理者が記事ページを閲覧した数を影響させないようにする設定になります。

 

項目	オススメ設定
解析全般	サイト管理者も含めてアクセス解析する：無効

 

人気記事関連の設定項目など

人気記事ウィジェットの機能についていくつか注意事項がありこの機能を利用するにあたり、以下を最初に確認しておくことをオススメします。

この機能について利用する予定が無い or 使用しているが停止したい場合は【Cocoon設定欄：アクセス集計】の設定画面にて、

「アクセス集計の有効化」の✔マークを外し無効化をしましょう。

 

 

 

 

インデックス

インデックス設定では、投稿記事の表示に関する設定を行うことができます。

この設定を利用することで、投稿記事のリスト表示方法を調整することでWebサイトのレイアウトにあった表示や

閲覧ユーザーが記事を探す時への手間を削減することができます。

 

項目	オススメ設定
フロントページタイプ（β版）	・タブ一覧
並び順	・投稿日（降順）
カードタイプ	・エントリーカード（デフォルト）
枠線の表示	・無効
自動生成抜粋文字数	・「120」
省略文字列	・「...」
投稿関連情報の表示	・スニペット（抜粋）の表示：「有効」 ・投稿日の表示：「有効」 ・コメント数の表示：「有効」
除外カテゴリー	アーカイブ（インデックスリスト・新着関連記事ウィジェット等）に 非表示にするカテゴリーを選択しましょう。

 

目次

目次設定では、同様の機能を持つプラグイン「Table of contents」に近い設定項目で、

記事内の見出しを元に目次を自動生成し表示することができます。

 

項目	オススメ設定
目次の表示	・目次を表示する：「有効」
表示ページ	・投稿ページ：「有効」 ・固定ページ：「有効」 ・カテゴリーページ：「無効」 ・タグページ：「無効」
目次タイトル	・「目次」
目次切り替え	・目次の表示切替機能を有効にする：「有効」 ・最初から目次内容を表示する：「有効」
目次表示の深さ	・H６見出しまで（デフォルト）
表示条件	・「３」
目次ナンバーの表示	・数字詳細（ex:1.1.1)
目次の中央表示	・目次をメインカラムの中央に表示する：「無効」
目次の表示順	・広告の手前に目次を表示する：「有効」
見出し内タグ	・H見出し内のタグを有効にする：「無効」

 

 

便利機能

Cocoonでは、ウィジェットやエディター機能においても便利な機能が多くあり、これらの中からよく使用する物のついて紹介します。

 

 

 

吹き出し

吹き出しでは、記事内で利用できるCocoon独自の吹き出し作成及び登録機能があり、

Q&Aや対話形式といった記事を作成する際に、便利な機能になります。

 

１．吹き出し設定画面

【①Cocoon設定欄：吹き出し】→【②新規登録】から吹き出しの登録行うことができ、記事作成を行う際に呼び出すことができます。

 

 

２．吹き出し登録

吹き出しの新規追加画面では、登録に必要に情報の入力を行う必要があります。

その中でも「TinyMCE：エディターのリストに表示」の項目に✔マークを入れておくことで

記事作成時にエディターから登録した吹き出しの呼び出しが行えます。

 

３．エディターのドロップリストからの呼び出し

記事作成時に、エディターに【吹き出し】のドロップリストが追加があり、

ここから登録した、吹き出しを呼び出し何度でも簡単に使うことができます。

 

 

４．登録せず吹き出しを挿入(ブロックエディター）

ブロックエディターで編集を行う場合、ドロップリストからの吹き出しを呼び出さずに直接挿入することができます。

ただし、ここで作成した吹き出しは登録されないため、使用頻度が高い吹き出しは登録しておくことをオススメします。

 

 

テキストテンプレート

テンプレートでは、頻繁に利用する文章やレイアウトなどを登録すること、何回でもショートコードで使用することができます。

 

１．テンプレートの登録

テキストテンプレートの設定画面にある【新規追加】をクリックし、テキストテンプレートを作成しましょう。

ここでは、テンプレートの区別と呼び出しする際にも使用するタイトル文と実際に呼び出したい内容をエディター部分へ入力し「保存」をしましょう。

また、「エディターのリストに表示」の項目に✔マークを入れておくことで記事作成時にエディターから登録した吹き出しの呼び出しが行えます。

 

 

2．テンプレートの呼び出し

エディター内の【テンプレート】のドロップリストをクリックし、１．で登録したタイトル文のテンプレートを選択すると

エディター内のカーソルを合わせた部分のショートコードが挿入され記事を保存するれば完了です。

 

 

アクセス集計

アクセス集計では、テーマを独自のアクセス集計を行っており、この集計されたキャッシュデータを利用して、

投稿記事の人気記事一覧を簡単に表示することができます。

本設定はデフォルトで有効となっており、以下のような注意事項があります。

この機能を利用しない場合は、【アクセス集計の有効化】の✔マークを外し無効化しておくことをオススメします。

 

 

１．人気記事一覧を表示する方法

人気記事一覧を表示する方法として「ショートコードの挿入」と「ウィジェットの追加」の２つの方法があります。

ショートコードで表示する場合は、引数を指定することでカスタマイズ可能で詳細については以下のボタンのリンク先（公式サイト）をご確認ください。

 

人気記事ショートコード詳細（公式サイト）へはこちら 外部リンク先を新しいタブで開きます。