ブロックエディター

Cocoonのブロックエディター（Gutenberg）対応について ブロックエディター

Cocoonは、テーマに内包されている「Cocoon-Blocks」を用いることで、ブロックエディターに対応しています。

ブロックエディター

レーダーチャートブロックの使い方

Cocoon 2.7.7.5で追加されたレーダーチャートブロックについての解説です。レーダーチャートブロックとはレーダーチャートブロックとは、レビューの値や能力値などをわかりやすく表現するために使うチャートブロックとなっています。例えばラー...
2024.10.06 わいひら わいひら 0
ブロックエディター
ブロックエディター

ブロックエディターの文字装飾に個別のテキストCSS装飾を設定する方法

記事中の任意のテキストを任意のCSSで装飾するには、「カスタムテキスト」を使用します。カスタムテキストカスタムテキストはブロックエディターの段落などでテキストを選択して、「文字」→「カスタムテキスト （番号）」を利用することで、利用します。...
2024.07.08 2024.07.09 わいひら わいひら 0
ブロックエディター
ブロックエディター

インラインボタン機能で文中にボタンを作成する方法

Cocoonには、以前から「ボタンブロック」や「囲みボタンブロック」などのボタン機能はありました。ただ、文中や表の中にボタンを作成することができなかったので「インラインボタン機能」を追加しました。インラインボタン機能の使い方まずは以下のよう...
2024.03.24 わいひら わいひら 0
ブロックエディター
ブロックエディター

テーブルで◎○△×アイコンを用いた比較表を作る方法

テーブルのセルの背景を◎○△×といったようなアイコンフォントで装飾して比較表を作る方法を紹介します。完成形はこのようになります。テーブルのセルの背景にアイコンを挿入する方法まずこのように比較表用のテーブルを作成します。背景にアイコンを入れた...
2024.02.25 わいひら わいひら 0
ブロックエディター
ブロックエディター

リストブロックの装飾オプションサンプル

リストブロックで使用することができる装飾サンプルです。ボーダーリスト1リスト2リスト3リスト1リスト2リスト3リスト1リスト2リスト3リスト1リスト2リスト3リスト1リスト2リスト3リスト1リスト2リスト3リスト1リスト2リスト3リスト1リ...
2023.10.19 わいひら わいひら 0
ブロックエディター拡張スタイル
ブロックエディター

段落ブロックの装飾オプションサンプル

段落ブロックで使用できる装飾サンプルです。ボーダーボーダー実線ボーダー二重線ボーダー破線ボーダー点線ボーダー薄太ボーダー微凸ボーダー実線(角丸小)ボーダー二重線(角丸小)ボーダー破線(角丸小)ボーダー点線(角丸小)ボーダー薄太(角丸小)ボー...
2023.10.19 わいひら わいひら 0
ブロックエディター拡張スタイル
ブロックエディター

HTML挿入ツールボタンの使い方

「HTML挿入ツールボタン」は、文章中にHTMLをそのまま挿入することができます。リンクタグとインプレッションコードが含まれた、アフィリエイトコードなどを挿入するときに主に利用します。ツールボタンで「HTML挿入」を押すとインプットボックス...
2021.06.13 2025.05.27 わいひら わいひら 0
ブロックエディター
ブロックエディター

FAQブロックの説明と使い方

FAQブロックは、「よくある質問と回答」を入力するためのブロックです。FAQブロックの使い方FAQブロックを使用するには、ブロックの追加から「すべての表示」を押します。「Cocoonブロック」から「FAQ」を選択します。以下のようにブロック...
2021.06.13 2024.03.02 わいひら わいひら 0
ブロックエディター
ブロックエディター

ブロックエディターの複数ブロックをグループブロックを使ってまとめて装飾する方法

「グループ」ブロックを使用した手軽な装飾方法の紹介です。
2020.07.14 わいひら わいひら 0
ブロックエディター
ブロックエディター

エディターのタグ「チェックリスト形式」で選択する方法

WordPressエディター上でのタグの選択方式をチェックリストボックス形式にする方法の説明です。
2020.03.10 2020.07.10 わいひら わいひら 0
ブロックエディター
ブロックエディター

ブロックエディターでソースコードを挿入する方法

Cocoonでブロックエディター（Gutenberg）のコードブロックを利用してソースコードをハイライト表示する方法の説明です。
2020.01.28 わいひら わいひら 0
ブロックエディター
ブロックエディター

Cocoon 2.0でブロックエディターを強化。新しい表現が可能に。

Cocoon2.0で強化されたGutenbergブロックの案内と使用例です。
2019.11.14 2022.09.23 わいひら わいひら 4
ブロックエディター
ブロックエディター

ブロックエディターで手っ取り早くブログカードを作成する方法

ブロックエディターでのブログカードの使い方。
2019.04.01 わいひら わいひら 0
ブロックエディター
ブロックエディター

ブロックエディター（Gutenberg）を使用しないで旧ビジュアルエディターを利用する方法

投稿画面のGutenbergエディターを無効にして旧式のエディターで編集する方法です。
2018.12.25 わいひら わいひら 0
ブロックエディター
ブロックエディター

Cocoon Blocksの現在の対応状況

Cocoon Blocksが対応している旧ビジュアルエディタースタイルを紹介しています。
2018.12.25 2025.11.28 わいひら わいひら 0
ブロックエディター
ブロックエディター

ブロックエディター（Gutenberg）でCocoon用ブロックを利用する方法

Gutenberg対応プラグイン「Cocoon Blocks」インストールして利用する方法の紹介です。
2018.12.25 2019.03.18 わいひら わいひら 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);