テーマ設定

Cocoon独自のテーマ変更機能のまとめ テーマ設定

デフォルトのCocoonは、CSSでカスタマイズがしやすいようにシンプルな構成になっています。

けれど、Cocoonにはテーマ独自のカスタマイズ機能も充実しています。これにより、CSSやPHPなどを必要とせずに、オリジナリティーのあるサイトを作成することも可能です。

テーマのカスタマイズ機能は豊富

わいひら
わいひら
必要な機能は、ほぼほぼ揃っているかと思います。
スキン

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

ごーブログを運営されているごーさんが作成された「NAGI」スキンを同梱追加しました。「NAGI」スキンNAGIスキンは、色合いがシンプルな無地系のスキンで、設定で好みの色に変更して使用するスキンです。設定によってはダークスキンとしても利用す...
2024.08.16 わいひら わいひら 0
スキン
スキン

作り込み機能が満載な「メイド・イン・ヘブン」スキンを同梱

ART+BEAT MANIFESTOを運営されているchu-yaさんが作成された「メイド・イン・ヘブン」を同梱追加しました。「メイド・イン・ヘブン」スキンメイド・イン・ヘブンスキンは、できるだけCocoonぽさを取り除きシンプルにしたスキン...
2024.03.24 わいひら わいひら 0
スキン
テーマ設定

リファラーの振る舞いを変更する「リファラー設定」をする方法

リファラー設定を行なうことで、リンク先のサイトに「自サイトの情報をどれだけ送るか」を設定することができます。以下では、リファラー設定のやり方を紹介します。リファラーの振る舞いの設定方法リファラー設定を行なうには、Cocoon設定から「SEO...
2024.02.05 2024.12.08 わいひら わいひら 0
テーマ設定
広告設定

ads.txtファイルの編集方法

ads.txt（アズテキスト）とは、Webの広告枠の販売者を厳密に管理し、偽の広告枠が広告主に提供されるのを防ぐためのテキストファイルです。Adsenseのみなどを除く、第三者（他社）広告との併用配信をする際は設置が必須なファイルとなってい...
2024.02.05 わいひら わいひら 0
広告設定
スキン

美しいグレーに統一されたデザインの「grayish」スキンを同梱

Na2 factoryを運営されているななふさんが作成されたgrayishスキンを同梱させていただきました。Cocoonの見た目が大幅に変わるかなり気合の入ったスキンになっています。「grayish」スキンgrayishスキンは、コーポレー...
2023.11.22 わいひら わいひら 0
スキン
広告設定

ステマ規制に対応するためのPR表記設定について

2023年10月施行の通称ステマ規制において、「不当表示」とならないように対応が必要となりました。詳細はこちらなどをご参照ください。参考 2023年10月施行の景品表示法の指定告示（通称ステマ規制）に関するお知らせ - A8スタッフブログ参...
2023.09.26 2023.10.02 わいひら わいひら 6
広告設定
テーマ設定

ヘッダーのサイズを背景画像に設定したアスペクト比を保つように設定する方法

Cocoon設定の「ヘッダー」に「背景画像の全てを表示」オプションを追加しました。これにより「ヘッダー背景画像」に設定した画像を待つことなく全て表示できるようになりました。設定方法この設定を行なうにはCocoon設定の「ヘッダー」の「ヘッダ...
2023.07.24 わいひら わいひら 0
テーマ設定
スキン

きのこをモチーフにしたオリジナルスキン「ハナオチバタケ」の紹介

ネット回線マニアを運営されているくみたろうさんが作成されたスキン「ハナオチバタケ」の紹介です。ハナオチバタケスキンハナオチバタケスキンは『ハナオチバタケ（花落葉茸）』というきのこをモチーフにしたCocoonスキンです。ちなみにハナオチバタケ...
2023.02.01 わいひら わいひら 0
スキン
スキン

Cocoonスキン「ゆっくり色が変化」を同梱追加

LUCKLOGを運営されているらくさんが作成されたゆっくり色が変化スキンを同梱させていただきました。このスキンは「指定した4色で背景がゆっくり入れ替わっていくスキン」です。このスキンはサイトに大きなデザインの変更が出るわけではないです。背景...
2023.01.06 2023.01.11 わいひら わいひら 0
スキン
アクセス解析

Cocoonでヒートマップ分析ツールのClarityを利用する方法

無料で使えるWEBサイトヒートマップ分析ツールの「Clarity（クラリティー）」を利用する方法を説明します。CocoonにClarity設定を行うことで、以下のような「クリック分析」を行ないコンバージョン分析をしたり「スクロール分析」で何...
2022.10.02 2022.10.03 わいひら わいひら 0
アクセス解析
スキン

Cocoonサイトに動きが出るアニメーションを追加する方法。「ふわっと追加」スキン同梱による機能。

LUCKLOGを運営されているらくさんが作成されたふわっと追加スキンを同梱させていただきました。このスキンの追加により、Cocoonサイトに4種類のアニメーション効果を付加できるようになります。サイトにアニメーション効果を付加する方法（ふわ...
2022.07.10 2022.07.11 わいひら わいひら 0
スキン
スキン

サイトが手書きテイストになる「てがきノート」スキンを追加

ゆうそうとを運営されているゆうそうとさんが作成されたてがきノートスキンを5種類同梱させていただきました。このスキンを利用すると、アナログ手書きされたような風合いになるので、全体的にやわらかい印象のサイトにすることができます。「てがきノート」...
2022.05.31 2022.06.01 わいひら わいひら 0
スキン
アクセス解析

Google Analytics（GA4）でアクセス解析をする方法

CocoonでGoogle Analytics 4（以下、GA4）の設定方法を紹介します。GA4でアクセス解析をするには、「Google Analytics」を用いた方法と、「Googleタグマネージャー」を用いた方法がありますが、以下では...
2022.05.23 2023.07.01 わいひら わいひら 0
アクセス解析
アクセス解析

GoogleタグマネージャでGoogle Analytics 4（GA4）を用いたアクセス解析設定方法

CocoonでGoogle Analytics 4（以下、GA4）の設定方法を紹介します。GA4でアクセス解析をするには、「Google Analytics」を用いた方法と、「Googleタグマネージャー」を用いた方法がありますが、以下では...
2022.05.23 2024.09.11 わいひら わいひら 0
アクセス解析
スキン

シンプル志向でダークスキンにも対応した「one」スキンを同梱追加

ハイジブログを運営されているhaijiさんが作成されたCocoonスキン「one」を同梱させていただきました。「one」スキンoneスキンはこんな感じのスキンです。大きな特徴で言えば、パソコン画面でも以下のようにmobileメニューボタンが...
2021.12.30 わいひら わいひら 0
スキン
スキン

OSやブラウザのダークモードに対応した「Simple Darkmode」スキンを同梱追加

Hirositeを運営されているhirositeさんが作成されたSimple Darkmode（シンプルダークモード）を同梱させていただきました。「Simple Darkmode」スキンSimple Darkmodeは、通常はこんなデザイン...
2021.10.16 2021.10.18 わいひら わいひら 0
スキン
ウィジェット

ウィジェット「表示設定」の「カスタム投稿タイプ」の使い方【寄付特典】

Cocoon 2.3.6からウィジェットの表示切替機能に「カスタム投稿タイプ」を指定できるようになりました。カスタム投稿タイプページでの表示の切り替え方法使用するには、従来の「ウィジェット表示設定」と同様です。表示設定の対象が「カスタム投稿...
2021.09.14 2024.03.02 わいひら わいひら 0
ウィジェット
テーマ設定

アピールエリアの背景画像を設定する方法（背景画像の固定など）

アピールエリア（別名：ヒーローエリア）に背景画像を設定する方法を説明します。背景画像の設定方法アピールエリアに背景画像を設定するには、まず「Cocoon設定」→「アピールエリア」タブを選択してください。「エリア画像」に画像を選択してください...
2021.09.13 2024.03.26 わいひら わいひら 0
テーマ設定
スキン

単色ベースの優しい色合いでのシンプルスキン「Natural」を同梱追加

Useful Webを運営されているTakaさんが作成されたNatural（ナチュラル）を同梱させていただきました。「Natural」スキンNaturalスキンは以下の2種類。Natural（ブルー）Natural（グリーン）レイアウト主な...
2021.07.29 わいひら わいひら 0
スキン
テーマ設定

Cocoonテーマを手動でダウングレードする最も手軽な方法

Cocoonテーマをアップデートして、不具合が出た際に「テーマを以前のバージョンに戻したい」なんて時があるかと思います。その際に手軽にできるテーマファイルのダウングレード方法を紹介します。あくまで一時的な対処ですので、不具合対応版が出たらテ...
2021.07.22 2022.09.17 わいひら わいひら 0
テーマ設定
シェアする
わいひらをフォローする
次のページ
タイトルと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);