- WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」のご紹介
- WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」のご紹介
- 「ラベルボックスのHTMLソースコード」のご紹介
- 「タブ見出しボックスのHTMLソースコード」のご紹介
- 「見出しボックスのHTMLソースコード」のご紹介
- 「アイコンリストのHTMLソースコード」のご紹介
- 「案内ボックスのHTMLソースコード」のご紹介
- 「白抜きボックスのHTMLソースコード」のご紹介
- 「アイコンボックスのHTMLソースコード」のご紹介
- 「付箋風ボックスのHTMLソースコード」のご紹介
- 「タブボックスのHTMLソースコード」のご紹介
- 「囲みボタンのHTMLソースコード」のご紹介
- 「マイクロバルーンのHTMLソースコード」のご紹介
- 「マイクロテキストのHTMLソースコード」のご紹介
- 「ボタンのHTMLソースコード」のご紹介
- WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」のご紹介
- 「アコーディオン（トグル）のHTMLソースコード」のご紹介
- 「「吹き出しのHTMLソースコード」のご紹介
- 「2カラムのHTMLソースコード」のご紹介
- 「3カラムのHTMLソースコード」のご紹介
- 「検索案内のHTMLソースコード」のご紹介
- 「タイムラインのHTMLソースコード」のご紹介
- ホームページ作成・運用関連ページのご紹介
- 「学ぶ」学習用関連ページのご紹介
- 【ゲームTOP】ゲーム関連ページのご紹介
- 【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介
- 【ホビーTOP】ホビーサイトマップ関連ページのご紹介
WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」のご紹介
ホームページ作成/運用関連サイトマップのご紹介
ホームページ作成/運用サイトマップをご紹介します。
 ホームページ作成/運用サイトマップのご紹介 |
|||
| 学び/学習TOP > IT|ゲーム作り|HP作成 | |||
| HP作成Top > WordPress|Cocoon|便利テクニック | |||
| 【ワードプレス/WordPress】 ディレクトリ・ファイル構造|画面表示までの流れ(概要|詳細)|データベース一覧 ■サーバー移行時のエラー・トラブル解決 画面が表示されない| 【テーマ：Cocoon】 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 【便利テクニック】 サクラエディタ|正規表現 |
|||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」のご紹介
WordPressテーマ Cocoon拡張デザイン「ブロック系のHTMLソースコード一覧」をご紹介します。
|
WordPressテーマ Cocoon拡張デザイン
「ブロック系のHTMLソースコード一覧」のご紹介 |
| ラベルボックスのHTMLソースコード |
| タブ見出しボックスのHTMLソースコード |
| 見出しボックスのHTMLソースコード |
| アイコンリストのHTMLソースコード |
| 案内ボックスのHTMLソースコード |
| 白抜きボックスのHTMLソースコード |
| アイコンボックスのHTMLソースコード |
| 付箋風ボックスのHTMLソースコード |
| タブボックスのHTMLソースコード |
| 囲みボタンのHTMLソースコード |
| マイクロバルーンのHTMLソースコード |
| マイクロテキストのHTMLソースコード |
| ボタンのHTMLソースコード |
| バッジのHTMLソースコード |
| アコーディオン（トグル）のHTMLソースコード |
| 吹き出しのHTMLソースコード |
| 2カラムのHTMLソースコード |
| 3カラムのHTMLソースコード |
| 検索案内のHTMLソースコード |
| タイムラインの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ソースコード：カラー」のご紹介 | |
| primary-box プライマリー | 濃い水色 |
| secondary-box セカンダリー | 濃い灰色 |
| info-box インフォ | 薄い青 |
| success-box サクセス | 薄い緑 |
| warning-box ワーニング | 薄い黄色 |
| danger-box デンジャー | 薄い赤色 |
| light-box ライト | 白色 |
| dark-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ソースコード：カラー」のご紹介 | |
| blank-box | 灰色 |
| blank-box bb-yellow | 黄色 |
| blank-box bb-red | 赤色 |
| blank-box bb-blue bb-green | 青色 |
【白抜きボックス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ソースコード：見た目」のご紹介 | |
| information-box | 補足情報(i) |
| question-box | 補足情報(?) |
| alert-box | 補足情報(!) |
| memo-box | メモ |
| comment-box | コメント |
| ok-box | OK |
| ng-box | NG |
| good-box | GOOD |
| bad-box | BAD |
| profile-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ソースコード：色」のご紹介 | |
| 空白 |
灰色は初期値のためクラス名の追加は不要
|
| st-yellow | 黄色 |
| st-red | 赤色 |
| st-blue | 青色 |
| st-green | 緑色 |
【付箋風ボックス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ソースコード：クラス種類」のご紹介 | |
| bb-check | チェック |
| bb-comment | コメント |
| bb-point | ポイント |
| bb-tips | ティップス |
| bb-hint | ヒント |
| bb-pickup | ピックアップ |
| bb-bookmark | ブックマーク |
| bb-memo | メモ |
| bb-download | ダウンロード |
| bb-break | ブレイク |
| bb-amazon | Amazon |
| bb-ok | OK |
| bb-ng | NG |
| bb-good | GOOD |
| bb-bad | BAD |
| bb-profile | プロフィール |
【タブボックス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ソースコード」のご紹介 | |
| マイクロバルーン：丸 |
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 を追加して下さい。
| 「ボタンのHTMLソースコード」のご紹介 | |
| ボタン（円形） | btn-circle を追加 |
| ボタン（光らせる） |
btn-shine を追加
|
WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」のご紹介
WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」をご紹介します。
バッジ(オレンジ)
<span class="badge">バッジ(オレンジ)</span>クラス名を以下に変更することでタブ内をデザインを変更することができます。
| WordPressテーマ Cocoon拡張デザイン「バッジのHTMLソースコード一覧」のご紹介 | |
| バッジ (オレンジ) | badge |
| バッジ (レッド) |
badge badge-red
|
| バッジ (ピンク) |
badge badge-pink
|
| バッジ (パープル) |
badge badge-purple
|
| バッジ (ブルー) |
badge badge-blue
|
| バッジ (グリーン) |
badge badge-green
|
| バッジ (イエロー) |
badge badge-green badge-yellow
|
| バッジ (ブラウン) |
badge badge-brown
|
| バッジ (グレー) |
badge badge-grey
|
【バッジ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カラムの左右の比率を変更することができます。
| 「2カラムのHTMLソースコード：比率一覧」のご紹介 | |
| column-2-2-1-1 | 1:1比率 |
| column-2-3-1-2 | 1:2比率 |
| column-2-3-2-1 | 2:1比率 |
| column-2-4-1-3 | 1:3比率 |
| column-2-4-3-1 | 3:1比率 |
「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】 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 【便利テクニック】 サクラエディタ|正規表現 |
|||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
ホームページ作成・運用関連ページのご紹介
ホームページ作成・運用関連ページをご紹介
「学ぶ」学習用関連サイトマップのご紹介
「学ぶ」学習用関連サイトマップをご紹介します。
「学ぶ」学習用関連サイトマップのご紹介 |
|||
| 学び/学習TOP > IT|ゲーム作り|HP作成 | |||
| 【IT】エディタ/正規表現|プログラミング| 【ゲーム作り】STG作り方|C言語の入門/基礎|リファレンス/サンプル文 【HP作成】WordPress|Cocoon|便利テクニック |
|||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
「学ぶ」学習用関連ページのご紹介
「学ぶ」学習用関連ページをご紹介
コペンギン・サイトマップ
コペンギンのサイトマップをご紹介します。
| 【コペンギンTOP】サイトマップ | ||||
| コペンギンTOP > ゲーム│ホビー│書籍・マンガ│ | ||||
■■│コペンギン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