スキン

スキン紹介・仕様など スキン

洋服を着替える感覚で手軽にサイトの外観を変更できるスキンの情報です。

わいひら
わいひら

リッチな外観はスキンに任せられる仕様になっています。

スキン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

モノトーン調にデザインされた「モノクロ」スキンを同梱追加

黒を基調としたモノトーン系スキン。
2021.05.24 わいひら わいひら 0
スキン
スキン

立体感をコンセプトにしたニューモフィズムデザインの「凸凹」スキンを同梱追加

キタタリアンを運営されている北さんが作成された凸凹スキンを同梱させていただきました。「凸凹」スキン凸凹スキンはデコボコとした立体感をテーマとしたスキンです。このデザインは、Neumorphism（ニューモフィズム）というもので、Neumor...
2021.05.10 わいひら わいひら 0
スキン
スキン

大人かわいいCocoonスキン「イノセンス」を追加

Cocoonスキン「イノセンス」の紹介です。
2021.03.05 わいひら わいひら 0
スキン
スキン

パステルカラーのかわいい系Cocoonスキン「アリス」等を追加

アリス系スキンの特徴などを紹介。
2021.02.10 2021.08.17 わいひら わいひら 0
スキン
スキン

マテリアルデザインのスキン「SILK（シルク）」を追加。ブロックスタイルも豊富

細部まで作り込まれたシルクスキンの紹介。
2021.01.17 わいひら わいひら 0
スキン
スキン

ふわっと柔らかなシンプルスキン「みるらいと」を追加。細部まで作り込まれています。

「みるめも」のみるみさんによって作成された、柔らかい雰囲気の素適スキンです。
2020.08.13 わいひら わいひら 1
スキン
スキン

装飾が控えめな「シンプル」スキンを5種類追加

Takaさん作成のシンプルなスキンの紹介。コクーンに同梱済みです。
2020.06.01 2020.08.09 わいひら わいひら 0
スキン
スキン

パステルカラー調のカラフルなスキン「カラフルライン」追加

様々な淡い色を利用したシンプルなスキンです。ホバーアニメーションも凝っています。
2020.05.11 わいひら わいひら 0
スキン
スキン

ビビッドカラー・和色・プロ野球系のCocoonスキンサイトの紹介

豊富なスキンが掲載されているサイトを紹介。
2020.03.10 わいひら わいひら 0
スキン
スキン

Cocoon初のダークスキン！「ダークエンジ」含む暗色スキン3種追加

Cocoon初の暗色系スキンの紹介です。黒背景のサイトを作成したい場合は、まず試してみてください。
2020.02.02 わいひら わいひら 2
スキン
シェアする
わいひらをフォローする
次のページ
タイトルと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);