コロナに負けるな!ステイホームでブログを書きます!

カスタマイズパーツ確認用ページ

Cocoonでカスタマイズしている各種パーツの出来などを確認する用のページです😇

目次

SANGO風に。

各種タグ

H1〜H6まで

H1はこんな感じ(タイトル用)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

H2はこんな感じ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

H3はこんな感じ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

H4はこんな感じ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H5はこんな感じ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

H6はこんな感じ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Cocoon製ボックス

タブ付きボックスを整形しています。

元のスタイルよりシンプル?
タブの中身は同じです。
色は少し変えました。

独自に作ったボックス

独自にボックスを作って使っています。

まずはシンプルなやつ

シンプルな色付きボックス
明るい色のボックス
明るい色のボックス
明るい色のボックス
ダークなボックス
  • こうした組み合わせも可能
  • です 
こんな感じでステッチで囲んだものもあります
ステッチだけを使って、ライトなイメージのボックスも

吹き出し系

ここに内容を書く

ここに内容を書く

改行したらこんな感じ

色々特化したやつ

  • こんな人
  • あんな人
  • こういう感じっぽい人
  • こんな人
  • あんな人
  • ああいう感じを醸し出してる人
  • こういう人
  • ああいう人
  • こんな感じっぽい雰囲気の人
  • サンプルテキスト99999
  • サンプルテキスト99999
  • サンプルテキスト99999

アイコン付きボックス

ここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなどここに注意書きなど
質問や疑問を書いたり、出題を書いたりするのに使うといいボックスかも知れません。なんでだろ〜なんでだろ〜。
情報的なことを書く場所として使えるボックスです。
ファイアーーーファイアーーーファイアーーーファイアーーーファイアーーーファイアーーーファイアーーーファイアーーー
オススメ情報とか、ビビッときたことをまとめるときなど、「注意」ではなくて注目な内容などもこのボックスが使えると思います。
メモしておきたいことを書くために使うボックスです。
ここにアイデアとか、気がついたこと、ヒントとかを書きます。
チェックポイントを色々書きます
バッドポイントなどをまとめるボックスです。

タイトルが変えられるボックス

  • サンプルテキスト11-11-11-11
  • サンプルテキスト11-11-11-11
  • サンプルテキスト11-11-11-11
  • サンプルテキスト11-11-11-11
  • サンプルテキスト11-11-11-11
  • サンプルテキスト11-11-11-11
  • サンプルテキスト14-14-14
  • サンプルテキスト14-14-14
  • サンプルテキスト14-14-14
  • サンプルテキスト12-12-12
  • サンプルテキスト12-12-12
  • サンプルテキスト12-12-12
  • サンプルテキスト13-13-13-13
  • サンプルテキスト13-13-13-13
  • サンプルテキスト13-13-13-13
  • サンプルテキスト13-13-13-13
  • サンプルテキスト13-13-13-13
  • サンプルテキスト13-13-13-13
  • サンプルテキスト10-10-10
  • サンプルテキスト10-10-10
  • サンプルテキスト10-10-10
  • サンプルテキスト55555
  • サンプルテキスト55555
  • サンプルテキスト55555
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

リスト色々

続いては箇条書きやまとめ的な時に使えるリストパーツです。

通常のやつ

デフォルトのリスト表示では、

  • こういう
  • とてもシンプルな
  • デザインです

CSSで用意したやつ

それに対してCSSで作ったやつだと、

  • こういう
  • カラーとか
  • デザインも自由自在

になるわけですが、これをさらにボックスで囲ったものをプリセットしておくと捗るんですね。

背景付きも

  • LEOLOGでは
  • このデザインで統一しておりますが、
  • 論理的には無限に作れます

数字リスト

  1. 番号を振りたいときは
  2. これを使っています
  3. ちょっとデザイン変えたい

チェックリスト

  • TODOぽいのとか、
  • ポイントまとめ的なのとか
  • チェックリストは割とよく使ってます

有料テーマだとこういうボックスを作るための機能が充実してる印象です。

強調パーツ

記事の見易さを考えて作った強調パーツいろいろ。

チェック
注意/ポイント
イナズマ
ロケット
はてな
アイデア
ファイアー
お金

比較要素にも

GOOD
BAD

Q & Aにも

QUESTION
ANSWER

比較表

2つの何かを比較するときに使える比較表。

MEN
  • 短髪が多い
  • 基本ズボン
  • 基本化粧はしない
WOMEN
  • 長い髪も多い
  • スカートもはく
  • 大人になると化粧をする

まあこんな感じとか、

ビフォーアフターとかでも使えます。

コロナ前
  • 濃厚接触♡
  • レッツGOエブリウェア
  • マスクは花粉症や風邪の時
コロナ禍
  • ソーシャルディスタンス
  • 不要不急のお出かけ控えましょう
  • 外出時は必須

かなり有用。

タイトルなしも

使い方は工夫次第。

  • リスト1
  • リスト2
  • リスト3
  • リスト1
  • リスト2
  • リスト3

リンク関係

ボックスのみ

関連記事のリンク
あわせて読みたい的なとき

単体

合体

引用

引用ボックスも整形済み。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

引用:引用元の記事タイトル
トップへ戻る
タイトルとURLをコピーしました