Cocoonの独自機能・仕様一覧

テーマについて
この記事は約9分で読めます。

Cocoonテーマ単独で利用することができる主な機能・仕様を思いつく限りリストアップします。

手っ取り早く「テーマにどんな機能があるのか?」を知りたい場合などにどうぞ。

  1. ブラウザキャッシュ機能で高速化
  2. HTML縮小化機能で高速化
  3. CSS縮小化機能で高速化
  4. JavaScript縮小化機能で高速化
  5. テーマ機能だけでPageSpeed Insightsの90点後半も可能
  6. モバイルファーストデザイン
  7. モバイルフレンドリーテスト合格
  8. テーマ側で簡単AMP対応
  9. 通常ページとAMPページがほぼ同じ表示
  10. カテゴリ選択でAMP除外機能
  11. AMPロゴ変更機能
  12. PCとモバイルでソースコードが100%同じ完全レスポンシブ
  13. W3CのHTML5バリデーションのエラー0
  14. W3CのCSSバリデーションのエラー0
  15. 基本的な構造化タグの挿入
  16. 構造化データエラー0
  17. メタディスクリプション記入欄の設置
  18. HTMLアウトラインの最適化
  19. 複数運営者に対応しているのでメディア向けテーマとしても利用可能
  20. AdSense設定が簡単(レスポンシブユニットを設定するだけ)
  21. 様々な箇所に広告表示可能
  22. 広告フォーマットは自由に選択可能
  23. ウィジェットで広告設定も可能
  24. 広告をウィジェットで設定する場合もフォーマット選択可能
  25. 広告ラベルの表示/非表示機能あり
  26. ショートコードで本文中の好きな箇所に広告表示可能
  27. 広告を投稿IDで除外可能
  28. 広告をカテゴリ選択で除外可能
  29. 吹き出しを何個でも作成可能
  30. 吹き出しをビジュアルエディターから手軽に利用可能
  31. 吹き出しをビジュアルエディターでも公開ページと同様に表示
  32. 定型文テンプレートの登録機能を装備
  33. 定型文テンプレートをビジュアルエディターから手軽に利用可能
  34. アフィリエイトタグの一元管理機能実装を
  35. アフィリエイトタグをビジュアルエディターから手軽に呼び出し可能
  36. ランキング作成機能実装
  37. ランキングは何個でも作成可能
  38. ランキングは何位まででも作成可能
  39. ランキングをビジュアルエディターから手軽に呼び出し可能
  40. 内部ブログカード機能実装
  41. 外部ブログカード機能実装
  42. インライン用の拡張装飾スタイルあり
  43. ボックスの拡張装飾スタイルあり
  44. バッジ拡張装飾スタイルあり
  45. ボタン拡張装飾スタイルあり
  46. 2カラム拡張スタイルあり
  47. 3カラム拡張スタイルあり
  48. カラムスタイルはビジュアルエディターから手軽に呼び出し可能
  49. テーマ独自のPVカウント機能実装
  50. 多くのSNSシェアボタンスタイル
  51. シェア数は簡易キャシュを利用して次回の表示を高速化
  52. ツイートにメンションを含めることができる
  53. ツイート後にフォローを促すことができる
  54. ツイートにハッシュタグを設定可能
  55. 10種類以上のフォローボタンに対応
  56. サイトのキーカラーを設定可能
  57. サイトのキーテキストカラーを設定可能
  58. サイトフォントを手軽に変更可能
  59. サイトフォントサイズを手軽に変更可能
  60. モバイル用のサイトフォントサイズを手軽に変更可能
  61. サイト背景画像の変更機能
  62. サイトリンク色の変更機能
  63. サイドバーを左右入れ替え可能
  64. サイドバーウィジェットを空にすることで1カラムになる
  65. サイドバーをページの種類により表示/非表示設定可能
  66. 豊富なヘッダーレイアウト
  67. ヘッダーのロゴ設定機能
  68. ヘッダーの背景画像設定機能
  69. キャッチフレーズのポジション変更可能
  70. キャッチフレーズの非表示も可能
  71. ヘッダー全体色変更機能(文字色も)
  72. グローバルナビ色変更機能(文字色も)
  73. グローバルナビメニューの幅を変更可能
  74. グローバルナビサブメニューの幅を変更可能
  75. タイトルフォーマットの変更機能
  76. サイトトップページのメタディスクリプション設定機能(メタキーワードも)
  77. 投稿・固定ページのタイトルフォーマット変更機能
  78. カテゴリページのメタディスクリプション設定機能(メタキーワードも)
  79. タイトルセパレーターの変更機能
  80. canonicalタグの出力機能
  81. 分割ページにrel="next"/"prev"タグの追加機能
  82. カテゴリページの2ページ目以降をnoindexとする機能
  83. 投稿・固定ページに表示する日付の設定機能
  84. OGPタグの出力機能
  85. Twitter Cardsタグの出力機能
  86. Googleタグマネージャに対応
  87. Google Analytics解析に対応
  88. Google Search Console登録に対応
  89. その他のアクセス解析タグを手軽に貼り付けられる機能
  90. メインカラム幅の変更機能
  91. サイドバー幅の変更機能
  92. エントリーカードデザインの変更機能
  93. 関連記事エントリーカードの変更機能
  94. 関連記事数の変更機能
  95. ページ送りナビのデザイン変更機能
  96. 投稿・固定ページのコメント表示/非表示機能
  97. 投稿・固定ページのパンくずリスト表示位置変更機能(表示/非表示)
  98. カテゴリ・タグボタン表示デザインの変更機能
  99. 外部リンクを統一して開く機能
  100. 外部リンクアイコン設定機能
  101. 外部リンクのフォロータイプ変更機能
  102. 外部リンクのnoopener、noreferrer、external属性変更機能
  103. 内部リンクを統一して開く機能
  104. 内部リンクアイコン設定機能
  105. 内部リンクのフォロータイプ変更機能
  106. 内部リンクのnoopener、noreferrer属性変更機能
  107. TOCプラグインのようなテーマ独自の目次表示機能
  108. アイキャッチ表示/表示機能
  109. アイキャッチ自動登録機能
  110. 本文内画像の装飾機能
  111. 本文内画像の拡大効果機能(baguetteBox、Lity、Lightbox)
  112. コードのハイライト機能
  113. コードハイライトのスタイル変更機能
  114. コメント入力欄のメッセージ変更機能
  115. 通知メッセージ機能(サイト全ページで表示)
  116. ヘッダー下にアピールエリアを配置
  117. ヘッダー下にお勧め記事のカルーセル表示機能
  118. フッターデザイン変更機能
  119. フッターのクレジット表記変更機能(自由に変更可能)
  120. トップに戻るボタン機能
  121. トップに戻るボタンのデザイン変更機能
  122. トップに戻るボタンに画像を設定する機能
  123. ツリー式モバイルボタン表示機能
  124. スライドインモバイルボタン機能
  125. 404ページのデザイン変更機能
  126. 404ページに表示するウィジェット機能
  127. スキンによるデザイン変更機能
  128. 管理者用に独自メニューを表示可能
  129. 記事公開前にアラートを表示する機能
  130. 記事タイトル・メタディスクリプション文字数カウンターの表示機能
  131. 管理者用パネルの表示機能
  132. 管理者用パネルにPV表示機能
  133. 管理者用パネルのPV表示データをJetpackに変更可能
  134. 管理者用パネルに記事編集リンク表示機能
  135. 管理者用パネルにWindows Live Writer編集リンク表示機能
  136. 管理者用パネルにAMPページへのリンク表示機能
  137. 管理者用パネルにAMPページチェックリンク表示機能(3種)
  138. 管理者用パネルにPageSpeed Insightsチェック機能
  139. 管理者用パネルにGTmetrixチェック機能
  140. 管理者用パネルにモバイルフレンドリーチェック機能
  141. 管理者パネルにHTML5チェック機能
  142. 管理者パネルにHTML5アウトラインチェック機能
  143. 管理者パネルにSEOチェキチェック機能
  144. 管理者パネルにツイートチェック機能
  145. 管理者パネルにレスポンシブデザインチェック機能(3種)
  146. 簡単SSL対応機能
  147. テーマ設定のリセット機能
  148. テーマ情報の表示機能
  149. テーマ設定のバックアップ機能
  150. テーマ設定の復元機能
  151. グローバルナビメニュー設定エリア実装(PC用)
  152. グローバルメニュー設定エリア実装(モバイル用)
  153. グローバルメニューにサブキャプション表示可能(2段式)
  154. フッターメニュー設定エリアの実装
  155. CTAボックス設定ウィジェットの実装
  156. Facebookバルーンウィジェットの実装
  157. Facebookボックスウィジェットの実装
  158. PC用テキストウィジェットの実装
  159. モバイル用テキストウィジェットの実装
  160. PC用広告ウィジェットの実装
  161. モバイル用広告ウィジェットの実装
  162. SNSフォローボタンウィジェットの実装
  163. プロフィールボックスウィジェットの実装
  164. プロフィールはショートコードでも表示可能
  165. 商品ランキング表示ウィジェットの実装
  166. 新着記事ウィジェットの実装
  167. 人気記事ウィジェットの実装(PVはテーマで独自カウント)
  168. 最近のコメントウィジェットの実装
  169. ウィジェットごとに表示条件を変更できる機能を実装
  170. ウィジェットタイトル先頭に!で公開ページにウィジェットタイトルを表示しない仕様
  171. サイドバーウィジェットエリア
  172. サイドバースクロール追従ウィジェットエリア
  173. メインカラムスクロール追従ウィジェットエリア
  174. 投稿タイトル上ウィジェットエリア
  175. 投稿タイトル下ウィジェットエリア
  176. 投稿本文上ウィジェットエリア
  177. 投稿本文中ウィジェットエリア
  178. 投稿本文下ウィジェットエリア
  179. 投稿SNSボタン上ウィジェットエリア
  180. 投稿SNSボタン下ウィジェットエリア
  181. 投稿関連記事下ウィジェットエリア
  182. 固定ページ本文上ウィジェットエリア
  183. 投稿ページ本文中ウィジェットエリア
  184. 投稿ページ本文下ウィジェットエリア
  185. 固定ページSNSボタン上ウィジェットエリア
  186. 固定ページSNSボタン下ウィジェットエリア
  187. インデックスリストトップウィジェットエリア
  188. インデックスリストミドルウィジェットエリア
  189. インデックスリストボトムウィジェットエリア
  190. フッター左ウィジェットエリア
  191. フッター中ウィジェットエリア
  192. フッター右ウィジェットエリア
  193. フッター(モバイル用)ウィジェットエリア
  194. 404ページウィジェットエリア
  195. 記事のSEOタイトル変更機能
  196. 記事のメタディスクリプション変更機能
  197. 記事のメタキーワード変更機能
  198. 記事のnoindex設定機能
  199. 記事のnofollow設定機能
  200. 記事のカスタムCSS挿入機能
  201. 記事のカスタムJavaScript挿入機能
  202. 記事の更新日の変更を制御出来る機能
  203. 記事のカテゴリ抽出機能
  204. 記事の広告除外機能
  205. 記事ごとにAMPページの制御機能
  206. 記事ごとにリダイレクトを設定できる機能
  207. 記事を1カラムにできる機能
  208. 記事を本文のみにできる機能
  209. 詳細なカテゴリページを作成できる機能
  210. カテゴリページにアイキャッチ登録機能
  211. カテゴリごとに色を設定できる機能
  212. カテゴリページに独自タイトルを設定できる機能
  213. カテゴリごとにメタディスクリプションを設定できる機能
  214. カテゴリごとにメタキーワードを設定できる機能
  215. ログインユーザーのみに表示するコンテンツを制御出来るショートコード機能
  216. CSS、jsファイルを変更したらブラウザーキャッシュを読み込まない仕様
  217. テーマの自動アップデート機能
  218. [追加]テーブルを横スクロールしてレスポンシブ対応させる機能

主な機能はこれくらいでしょうか。

こうやって一覧にしてみると、「よくこれだけ実装したなぁ…」といった感じ。

使い方については、以下のマニュアルを参照してください。

テーマ利用マニュアル
テーマの利用方法を見やすく一覧にしたマニュアルです。
タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);