WordPressテーマ Cocoon拡張デザイン「付箋風ボックスのHTMLソースコード一覧」のご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
ご訪問ありがとうございます。
今回は、WordPressテーマ Cocoon拡張デザイン「付箋風ボックスのHTMLソースコード一覧」をご紹介します。
ホームページ作成/運用関連サイトマップのご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
ホームページ作成/運用サイトマップをご紹介します。
![]() ホームページ作成/運用サイトマップのご紹介 |
|||
学び/学習TOP > IT|ゲーム作り|HP作成 | |||
HP作成Top > WordPress|Cocoon|便利テクニック | |||
【ワードプレス/WordPress】 ディレクトリ・ファイル構造|画面表示までの流れ(概要|詳細)|データベース一覧 ■サーバー移行時のエラー・トラブル解決 画面が表示されない| 【テーマ:Cocoon】 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 【便利テクニック】 サクラエディタ|正規表現 |
|||
【レンタルサーバー】 | |||
Xサーバー 特徴||||| | |||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
「付箋風ボックスのHTMLソースコード」のご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
「付箋風ボックスのHTMLソースコード」をご紹介します。
コンテンツの中身を入力
<div class="wp-block-cocoon-blocks-sticky-box blank-box block-box sticky">
<p>コンテンツの中身を入力</p>
</div>
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
stickyの後に以下のクラス名を追加することで色の変更ができます。
「付箋風ボックスのHTMLソースコード:色」のご紹介 | |
空白 |
灰色は初期値のためクラス名の追加は不要
|
st-yellow | 黄色 |
st-red | 赤色 |
st-blue | 青色 |
st-green | 緑色 |
「灰色 blank-box bb-yellow:付箋風ボックスのHTMLソースコード」のご紹介
「黄色 blank-box bb-yellow:付箋風ボックスのHTMLソースコード」のご紹介
<div class="blank-box sticky">黄色 blank-box bb-yellow:付箋風ボックス</div>
「赤色 st-red:付箋風ボックスのHTMLソースコード」のご紹介
<div class="blank-box sticky st-red">赤色 st-red:付箋風ボックス</div>
「青色 st-blue:付箋風ボックスのHTMLソースコード」のご紹介
<div class="blank-box sticky st-blue">青色 st-blue:付箋風ボックス</div>
「緑色 st-green:付箋風ボックスのHTMLソースコード」のご紹介
<div class="blank-box sticky st-green">緑色 st-green:付箋風ボックス</div>
ホームページ作成/運用関連サイトマップのご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
ホームページ作成/運用サイトマップをご紹介します。
![]() ホームページ作成/運用サイトマップのご紹介 |
|||
学び/学習TOP > IT|ゲーム作り|HP作成 | |||
HP作成Top > WordPress|Cocoon|便利テクニック | |||
【ワードプレス/WordPress】 ディレクトリ・ファイル構造|画面表示までの流れ(概要|詳細)|データベース一覧 ■サーバー移行時のエラー・トラブル解決 画面が表示されない| 【テーマ:Cocoon】 拡張デザイン(一覧|インライン|マーカー|ボックス系(一覧|アイコン|案内|白抜き|タブボックス|バッジ|マイクロコピー)) 【便利テクニック】 サクラエディタ|正規表現 |
|||
【レンタルサーバー】 | |||
Xサーバー 特徴||||| | |||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
ホームページ作成・運用関連ページのご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
ホームページ作成・運用関連ページをご紹介
「学ぶ」学習用関連サイトマップのご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
「学ぶ」学習用関連サイトマップをご紹介します。
![]() 「学ぶ」学習用関連サイトマップのご紹介 |
|||
学び/学習TOP > IT|ゲーム作り|HP作成 | |||
【IT】エディタ/正規表現|プログラミング| 【ゲーム作り】STG作り方|C言語の入門/基礎|リファレンス/サンプル文 【HP作成】WordPress|Cocoon|便利テクニック |
|||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
シューティングゲーム | ゲーム | 中古・新品通販の駿河屋
「学ぶ」学習用関連ページのご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
「学ぶ」学習用関連ページをご紹介
コペンギン・サイトマップ
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
コペンギンのサイトマップをご紹介します。
【コペンギンTOP】サイトマップ | ||||
コペンギンTOP > ゲーム│ホビー│書籍・マンガ│ | ||||
■■│コペンギンTOP > ゲーム│ホビー│書籍・マンガ│■■ |
||||
サイトマップ一覧 |
懐かしの名作から最新作までの豊富な品揃え!通販ショップの駿河屋
コペンギンサイトマップ関連ページのご紹介
![](https://kopenguin.com/wp-content/uploads/2020/03/Penguin-icon-2.png)
コペンギン関連ページをご紹介します。
【ゲームTOP】ゲーム関連ページのご紹介
![](https://kopenguin.com/wp-content/uploads/2022/03/20220314-1308-160x99.jpg)
【書籍・雑誌TOP】書籍・雑誌サイトマップ関連ページのご紹介
![](https://kopenguin.com/wp-content/uploads/2022/03/20220313-2158-160x99.png)
【ホビーTOP】ホビーサイトマップ関連ページのご紹介
![](https://kopenguin.com/wp-content/uploads/2022/03/20220313-2313-160x99.jpg)