【HTMLデザインコード一覧】WordPressテーマ「Cocoon」拡張デザイン「HTMLコード一覧」のご紹介

WordPressテーマ「Cocoon」拡張デザイン「HTMLコード一覧」のご紹介

ご訪問ありがとうございます。
今回は、WordPressテーマ「Cocoon」拡張デザイン「HTMLコード一覧」をご紹介します。

「NieR：Automata( | 中古・新品通販の駿河屋 

ホームページ作成/運用関連サイトマップのご紹介

ホームページ作成/運用サイトマップをご紹介します。

ホームページ作成/運用サイトマップのご紹介

学び/学習TOP > IT|ゲーム作り|HP作成

HP作成Top > WordPress|Cocoon|便利テクニック

【ワードプレス/WordPress】 ディレクトリ・ファイル構造|画面表示までの流れ(概要|詳細)|データベース一覧 ■サーバー移行時のエラー・トラブル解決 画面が表示されない| 【テーマ：Cocoon】 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 【便利テクニック】 サクラエディタ|正規表現

【レンタルサーバー】

Xサーバー  特徴|||||

■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ ●ゲームTOP > ランキング│傑作・名作│機種別│ジャンル別 ●学び/学習TOP > IT|ゲーム作り|HP作成 ●ホビーTOP > プラモデル│ミリタリー│エアガン ●映像＞アニメ(ロボットアニメ)│映画│ ●書籍・マンガ > ゲーム雑誌│マンガ

シューティングゲーム | ゲーム | 中古・新品通販の駿河屋

HTMLタグとエディタで効率よくホームページを更新

Cocoonでは、ビジュアルエディター上でいくつかのスタイル拡張を手軽に使うことが可能ですが、テキストエディタや文章アプリで、HTMLタグを記述しながら編集を行ったほうが効率よくホームページの更新ができます。

クリップボードから拡張デザインを記述

よく利用する拡張デザインは、クリップボードの履歴ソフト(Cliborなど)にHTMLタグとして登録しておいて必要な時にタグ付けをするととてもスムーズに編集作業が行なえます。

WordPressテーマ「Cocoon」拡張デザイン「HTMLコード一覧」のご紹介

WordPressテーマ「Cocoon」拡張デザイン「HTMLコード一覧」をご紹介します。

WordPressテーマ「Cocoon」拡張デザイン「インラインHTMLコード一覧」のご紹介

WordPressテーマ「Cocoon」拡張デザイン「インラインHTMLコード一覧」をご紹介します。

「太字：HTMLソースコード」のご紹介

文章内を太字にする

文章内を<span class="bold">太字</span>にする

「赤字：HTMLソースコード」のご紹介

文章内を赤字にする

文章内を<span class="red">赤字</span>にする

「太い赤字：HTMLソースコード」のご紹介

文章内を太い赤字にする

文章内を<span class="bold-red">太い赤字</span>にする

「赤アンダーライン：HTMLソースコード」のご紹介

文章内を赤アンダーラインにする

文章内を<span class="red-under">赤アンダーライン</span>にする

「黄色マーカー：HTMLソースコード」のご紹介

文章内を黄色マーカーにする

文章内を<span class="marker">黄色マーカー</span>にする

「黄色アンダーラインマーカー：HTMLソースコード」のご紹介

文章内を黄色アンダーラインマーカーにする

文章内を<span class="marker-under">黄色アンダーラインマーカー</span>にする

【マーカーHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「インラインマーカーのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「インラインマーカーのHTMLソースコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「インラインマーカーのHTMLソースコード一...

kopenguin.com

2023.06.19

「打ち消し線：HTMLソースコード」のご紹介

文章に打消し線を入れる

文章に<span class="strike">打消し線</span>を入れる

「キーボードキー：HTMLソースコード」のご紹介

コピーのショートカットは Ctrl + C です

コピーのショートカットは <span class="keyboard-key">Ctrl</span> + <span 
class="keyboard-key">C</span> です

WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」をご紹介します。

「ラベルボックスのHTMLソースコード」のご紹介

「ラベルボックスのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-label-box-1 label-box block-box">
  <div class="label-box-label block-box-label box-label">
    <span class="label-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="label-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>

「タブ見出しボックスのHTMLソースコード」のご紹介

「タブ見出しボックスのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box">
  <div class="tab-caption-box-label block-box-label box-label">
    <span class="tab-caption-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="tab-caption-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>

「見出しボックスのHTMLソースコード」のご紹介

「見出しボックスのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-caption-box-1 caption-box block-box">
  <div class="caption-box-label block-box-label box-label">
    <span class="caption-box-label-text block-box-label-text box-label-text">見出し</span>
  </div>
  <div class="caption-box-content block-box-content box-content">
    コンテンツの中身を入力
  </div>
</div>

「アイコンリストのHTMLソースコード」のご紹介

「アイコンリストのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-iconlist-box iconlist-box blank-box list-caret-right block-box">
  <div class="iconlist-title">タイトル</div>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</div>

「案内ボックスのHTMLソースコード」のご紹介

「案内ボックスのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-info-box block-box primary-box">
  コンテンツの中身を入力
</div>

クラス名（primary-box）を以下に変更することで案内ボックスのカラーを変更可能です。

【案内ボックスHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「案内ボックス HTMLコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「案内ボックス HTMLコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「案内ボックス HTMLコード一覧」をご紹介します。 「...

kopenguin.com

2023.06.18

「白抜きボックスのHTMLソースコード」のご紹介

「白抜きボックスのHTMLソースコード」をご紹介します。

<div class="blank-box">
  コンテンツの中身を入力
</div>

<div class=”●●●●”>部分に下記コードを記述することで白抜きボックスの色を変えることができます。

【白抜きボックスHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「白抜きボックスのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「白抜きボックスのHTMLソースコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「白抜きボックスのHTMLソースコード一覧」をご...

kopenguin.com

2023.06.18

「アイコンボックスのHTMLソースコード」のご紹介

「アイコンボックスのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box">
  コンテンツの中身を入力
</div>

クラス名（information-box）を以下に変更することでアイコンボックスの見た目を変更できます。

【アイコンボックスHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「アイコンボックス HTMLコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「アイコンボックス HTMLコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「アイコンボックス HTMLコード一覧」をご紹介しま...

kopenguin.com

2023.06.18

「付箋風ボックスのHTMLソースコード」のご紹介

「付箋風ボックスのHTMLソースコード」をご紹介します。

<div class="blank-box sticky">
  <p>コンテンツの中身を入力</p>
</div>

stickyの後に以下のクラス名を追加することで色の変更ができます。

【付箋風ボックスHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「付箋風ボックスのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「付箋風ボックスのHTMLソースコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「付箋風ボックスのHTMLソースコード一覧」をご...

kopenguin.com

2023.06.18

「タブボックスのHTMLソースコード」のご紹介

「タブボックスのHTMLソースコード」をご紹介します。

<div class="blank-box bb-tab bb-check">コンテンツの中身を入力</div>

クラス名（bb-check）を以下に変更することでタブ内を変更可能です。

【タブボックスHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「タブボックスボックスのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「タブボックスのHTMLソースコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「タブボックスのHTMLソースコード一覧」をご紹介...

kopenguin.com

2023.06.19

「囲みボタンのHTMLソースコード」のご紹介

「囲みボタンのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-l">
</div>

「マイクロバルーンのHTMLソースコード」のご紹介

「マイクロバルーンのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-micro-balloon-2 micro-balloon micro-top micro-copy">
  <span class="micro-balloon-content micro-content">マイクロコピーバルーン</span>
</div>

• マイクロバルーンを丸にする場合は micro-topの後に mc-circle クラスを追加、
• マイクロバルーンを下寄りにする場合はmicro-topをmicro-bottomに変更して下さい。

【マイクロコピーHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「マイクロコピーのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「マイクロコピーのHTMLソースコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「マイクロコピーのHTMLソースコード一覧」をご...

kopenguin.com

2023.06.19

「マイクロテキストのHTMLソースコード」のご紹介

<div class="wp-block-cocoon-blocks-micro-text micro-text micro-copy micro-top">
  <span class="micro-text-content micro-content">マイクロコピーテキスト</span>
</div>

マイクロテキストを上寄りにする場合は「micro-top」を「micro-bottom」に変更して下さい。

「ボタンのHTMLソースコード」のご紹介

「ボタンのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-button-1 button-block">
  <a href=" class="btn" target="_self">ボタン</a>
</div>

ボタンを円形する場合は btn の後に btn-circle を追加、ボタンを光らせる場合は btn の後に btn-shine を追加して下さい。

WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」をご紹介します。

バッジ(オレンジ)

<span class="badge">バッジ(オレンジ)</span>

クラス名を以下に変更することでタブ内をデザインを変更することができます。

【バッジHTMLコード一覧】WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」のご紹介

WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」のご紹介 ご訪問ありがとうございます。 今回は、WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」をご紹介します。 「...

kopenguin.com

2023.06.19

「アコーディオン（トグル）のHTMLソースコード」のご紹介

「アコーディオン（トグル）のHTMLソースコード」をご紹介します。

「アコーディオン見出し」をクリックすると「   コンテンツの中身 」が表示されます。

<div class="wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box">
  <input id="toggle-checkbox-20220604171603" class="toggle-checkbox" type="checkbox">
  <label class="toggle-button" for="toggle-checkbox-20220604171603">アコーディオン見出し</label>
  <div class="toggle-content">
    コンテンツの中身を入力
  </div>
</div>

「input id」と「 label for 」の属性値（toggle-checkbox-xxxxxxxxxx）は統一して下さい。

「「吹き出しのHTMLソースコード」のご紹介

「吹き出しのHTMLソースコード」をご紹介します。

「img src=”〇〇〇」”に画像URLを、「 alt=”●●●●●”」に画像の説明を記載して下さい。

div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-sn cf block-box">
  <div class="speech-person">
    <figure class="speech-icon">
      <img src="画像URL" alt="画像の説明" class="speech-icon-image">
    </figure>
  </div>
  <div class="speech-balloon">
    <p>コンテンツ（吹き出し）の中身を入力</p>
  </div>
</div>

「2カラムのHTMLソースコード」のご紹介

「2カラムのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-column-2 column-wrap column-2 column-2-2-1-1 layout-box">
  <div class="wp-block-cocoon-blocks-column-left column-left"></div>
  <div class="wp-block-cocoon-blocks-column-right column-right"></div>
</div>

クラス名（column-2-2-1-1）を以下に変更することで2カラムの左右の比率を変更することができます。

「3カラムのHTMLソースコード」のご紹介

「3カラムのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-column-3 column-wrap column-3 layout-box">
  <div class="wp-block-cocoon-blocks-column-left column-left"></div>
  <div class="wp-block-cocoon-blocks-column-center column-center"></div>
  <div class="wp-block-cocoon-blocks-column-right column-right"></div>
</div>

「検索案内のHTMLソースコード」のご紹介

「検索案内のHTMLソースコード」をご紹介します。

「タイムラインのHTMLソースコード」のご紹介

「タイムラインのHTMLソースコード」をご紹介します。

<div class="wp-block-cocoon-blocks-timeline timeline-box cf block-box">
  <div class="timeline-title">タイムラインのタイトル</div>
  <ul class="timeline">
    <li class="wp-block-cocoon-blocks-timeline-item timeline-item cf">
      <div class="timeline-item-label">ラベル</div>
      <div class="timeline-item-content cf">
        <div class="timeline-item-title">タイトル</div>
        <div class="timeline-item-snippet"></div>
      </div>
    </li>
  </ul>
</div>

ホームページ作成/運用関連サイトマップのご紹介

ホームページ作成/運用サイトマップをご紹介します。

ホームページ作成/運用サイトマップのご紹介

学び/学習TOP > IT|ゲーム作り|HP作成

HP作成Top > WordPress|Cocoon|便利テクニック

【ワードプレス/WordPress】 ディレクトリ・ファイル構造|画面表示までの流れ(概要|詳細)|データベース一覧 ■サーバー移行時のエラー・トラブル解決 画面が表示されない| 【テーマ：Cocoon】 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 【便利テクニック】 サクラエディタ|正規表現

【レンタルサーバー】

Xサーバー  特徴|||||

■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ ●ゲームTOP > ランキング│傑作・名作│機種別│ジャンル別 ●学び/学習TOP > IT|ゲーム作り|HP作成 ●ホビーTOP > プラモデル│ミリタリー│エアガン ●映像＞アニメ(ロボットアニメ)│映画│ ●書籍・マンガ > ゲーム雑誌│マンガ

シューティングゲーム | ゲーム | 中古・新品通販の駿河屋

ホームページ作成・運用関連ページのご紹介

ホームページ作成・運用関連ページをご紹介

「学ぶ」学習用関連サイトマップのご紹介

「学ぶ」学習用関連サイトマップをご紹介します。

「学ぶ」学習用関連サイトマップのご紹介

学び/学習TOP > IT|ゲーム作り|HP作成

【IT】エディタ/正規表現|プログラミング| 【ゲーム作り】STG作り方|C言語の入門/基礎|リファレンス/サンプル文 【HP作成】WordPress|Cocoon|便利テクニック

■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ ●ゲームTOP > ランキング│傑作・名作│機種別│ジャンル別 ●学び/学習TOP > IT|ゲーム作り|HP作成 ●ホビーTOP > プラモデル│ミリタリー│エアガン ●映像＞アニメ(ロボットアニメ)│映画│ ●書籍・マンガ > ゲーム雑誌│マンガ

シューティングゲーム | ゲーム | 中古・新品通販の駿河屋

「学ぶ」学習用関連ページのご紹介

「学ぶ」学習用関連ページをご紹介

コペンギン・サイトマップ

コペンギンのサイトマップをご紹介します。

懐かしの名作から最新作までの豊富な品揃え！通販ショップの駿河屋

コペンギンサイトマップ関連ページのご紹介

コペンギン関連ページをご紹介します。

【ゲームTOP】ゲーム関連ページのご紹介

【ゲームTOP】ゲーム関連ページのご紹介

【TOP】ゲーム関連ページのご紹介 ご訪問ありがとうございます。 今回は、ゲーム関連ページをご紹介します。 PS5ソフトELDEN RING

kopenguin.com

2022.03.15

【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介

【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介

書籍・雑誌サイトマップ関連ページのご紹介 ご訪問ありがとうございます。 今回は、書籍・雑誌サイトマップ関連ページをご紹介します。 その他コミック初版)AKIRA(デラックス版) 全6巻セット / 大友克洋

kopenguin.com

2022.03.15

【ホビーTOP】ホビーサイトマップ関連ページのご紹介

【ホビーTOP】ホビーサイトマップ関連ページのご紹介

【TOP】ホビーサイトマップ関連ページのご紹介 ご訪問ありがとうございます。 今回は、ホビーサイトマップ関連ページをご紹介します。 プラモデル1/100 MG MS-09 ドム 「機動戦士ガンダム」

kopenguin.com

2022.03.15