フッターのアフィリエイトリンクボタン機能標準搭載の「NAGI」スキンを同梱

スキン
この記事は約3分で読めます。

ごーブログを運営されているごーさんが作成された「NAGI」スキンを同梱追加しました。

Cocoonのスキン、NAGIを作成しました
Cocoonのスキン、NAGIを作成しました。 今までHygiene、oneというスキンを作ってCocoonに同梱していただいてます。 どんなスキン? デザイン面での特徴を述べよ!と言われたら少し困ってしまうんですが、お好きにどうぞ系ですか

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

「NAGI」スキン

NAGIスキンは、色合いがシンプルな無地系のスキンで、設定で好みの色に変更して使用するスキンです。

NAGIスキン_thumb

設定によってはダークスキンとしても利用することができます。

レイアウト

デフォルトのインデックスページのレイアウトはこんな感じです。

NAGIスキンのインデックスページ

以下では、Cocoonデフォルトと変化のあるデザイン部分を紹介します。

見出し

記事の見出しはこんな感じです。

NAGIスキンの見出し

シェア・フォローボタン

記事トップのシェアボタンは、画面左側に固定表示されます。

NAGIスキンのトップのシェアボタン

記事下のシェアボタンとフォローボタンはこんな感じです。

NAGIスキンの記事ボトムのシェアボタンとフォローボタン

目次

目次は背景が薄い色に設定されています。

NAGIスキンの目次

ランキング

ランキングのボタンの見た目も変わっています。

NAGIスキンのランキング

カテゴリー

カテゴリーウィジェットの階層表示などは、以下のように折りたたみ式で表示されます。

カテゴリーウィジェット

画面下に固定表示されるアフィリエイトボタンも設定可能

このスキンの大きな特徴として、アフィリエイトリンクボタンを画面下部に設置する機能があります。

アフィリエイトボタン

フッター固定CTAの設定
スキンNAGIのオリジナル機能としてフッターにアフィリエイトリンクのボタンを固定表示する、というものがあります。 この機能をフッター固定CTAと名付けてます。 このフッター固定CTAの設定方法を解説します。 まずは完成形 きちんと設定すると

フロントページのタブの見た目

フロントページをタブ表示していた場合、見た目がアイコンボタンになります。アイコンはカスタマイズ機能で変更可能です。

タブの見た目

トップページの記事一覧タブの設定
スキンNAGIでは独自の機能としてトップページの記事一覧タブのデザインを変更することができます。 カスタマイザーを開くと一番上にスキンNAGIの設定という項目があります。 それを選択すると下のような画面になるので、トップページの記事一覧タブ

プロフィール

プロフィールの見た目も以下のように変わっています。

NAGIスキンのプロフィール

スキンのオリジナル機能

「外観」→「カスタマイズ」からスキン独自の設定もあります。

NAGIスキンのカスタマイズ

記事中に紹介したものも含めて以下のような機能があります。

トップページの記事一覧タブの設定
スキンNAGIでは独自の機能としてトップページの記事一覧タブのデザインを変更することができます。 カスタマイザーを開くと一番上にスキンNAGIの設定という項目があります。 それを選択すると下のような画面になるので、トップページの記事一覧タブ
フッター固定CTAの設定
スキンNAGIのオリジナル機能としてフッターにアフィリエイトリンクのボタンを固定表示する、というものがあります。 この機能をフッター固定CTAと名付けてます。 このフッター固定CTAの設定方法を解説します。 まずは完成形 きちんと設定すると
カルーセルの設定変更
Cocoonにはヘッダー下におすすめ記事を表示することのできるカルーセルという機能があります。 こんなやつです↓ このカルーセル、PC画面では1画面に6枚、スマホでは1画面に2枚というようにデバイスごとに表示される件数が決まっていて変更する

上記以外にも英字をGoogleフォントに変更できる機能もあります。

注意点:一部Cocoon設定のオプションが制限されています

誤動作などを防ぐため、Cocoon設定の機能が一部制限されています。詳しくはこちらのスキン制御項目をご参照ください。

NAGIスキンのスキン制御

設定方法

今回紹介したスキンは、Cocoon親テーマに同梱されています。

利用するには、Cocoon設定の「スキン」タブからスキンを適用して保存してみてください。

スキン一覧からNAGIスキンを選択

NAGIスキンの詳細はこちら。

Cocoonのスキン、NAGIを作成しました
Cocoonのスキン、NAGIを作成しました。 今までHygiene、oneというスキンを作ってCocoonに同梱していただいてます。 どんなスキン? デザイン面での特徴を述べよ!と言われたら少し困ってしまうんですが、お好きにどうぞ系ですか

NAGIスキンの設定は、まずはこちらを参考にして設定してみることをお勧めします。

スキンNAGIの全体設定
スキンNAGIはカスタマイザーに独自の設定項目を追加しています。 その中の全体設定についての解説をします。 全体設定の解説 カスタマイザーのスキンNAGIの設定をクリックすると全体設定があるのでそれをクリック。 すると以下のような設定画面が
タイトルとURLをコピーしました