WordPressのテーマは無料のCocoonを利用しております。
毎回、記事を書く際に「あれ、このスタイルはどんな風に表示されるんだっけ？」となるので、自分メモ用に書いてみました。
Coroonの公式サイトでもサンプルはありますが、CSSを自分好みにいじっていますので、どんな見栄えになるか一覧で表示したく。
見出し
見出し３
見出し４
見出し５
見出し６
スタイル
インライン
太字
赤字
赤太字
赤アンダーライン
青
青太字
緑
緑太字
打ち消し線
キーボードキー
マーカー
黄色マーカー
赤色マーカー
青色マーカー
黄色アンダーラインマーカー
赤色アンダーラインマーカー
青色アンダーラインマーカー
パステルカラーな感じで可愛いですね。
インラインとマーカーをあわせてこんな感じにもできます。
フォントサイズ
フォントの大きさが変わるだけなので省略
ボックス（アイコン）
ボックス（案内）
プライマリー（濃い水色）
セカンダリー（濃い灰色）
サクセス（薄い緑）
インフォ（薄い青）
ワーニング（薄い黄色）
デンジャー（薄い赤色）
ライト（白色）
ダーク（暗い灰色）
よく目立たせる目的で黄色で囲っちゃうんですけど、意味合いとしては「ワーニング」なんですね。
ボックス（白抜き）
灰色
黄色
赤色
青色
緑色
こちらは文字色は変わらず色のついた枠だけがつきます。
ちなみに「ボックス（案内）」のプライマリー（濃い水色）「ボックス（白抜き）」の黄色を合わせるとこんな感じ。
ボックス（タブ）
コメント灰色
ヒント黄色
NG赤色
ピックアップ青色
ブレイク緑色
この「ボックス（タブ）」は、基本的に左上のアイコンと文字が変わる×５色。
種類がいっぱいあって使いこなせないくらいですね。すごい。
ボックス（付箋風）
灰色
黄色
赤色
青色
緑色
使いどころないだろうけど、タブと付箋風をあわせたらどんな風になるのか気になってしまうのが人の性。
バッジ
オレンジ
レッド
ピンク
パープル
・・・と色のついた小さな文字が作成されます。
ブルー、グリーン、イエロー、ブラウン、グレー
とあと５色あるけど省略。
このバッジの使い道が分からなかったのだけれど、公式サイトを見ると
注目！とのえていこのブログ
みたく、リンクの前に貼って目立たせる例が出されています。
マイクロコピー
吹き出し（上）左側
吹き出し（上）中央
吹き出し（上）右側
吹き出し（下）左側
吹き出し（下）中央
吹き出し（下）右側
このマイクロコピー、ちょっとした説明を付け加えるのによいんでしょうが、よくデザインが崩れます。。
使いこなせません。
ボタン
色とお気差の組み合わせ。
リンクと組み合わせると目立つリンクボタンとなります。
囲みボタン
レッド小
ピンク中
パープル大
なんと。
私のブログでは色別に反応しません。
変なとこいじっちゃったかな。
囲みブログカードラベル
ちなみに「囲みブログカードラベル」を適用しなくても、URLをぺたっとペーストするだけで枠は表示されるみたいです。
シンプルライフのために私が手放したもの
Denise HustedによるPixabayからの画像 シンプルライフのために。 もっと、モノもココロの縛りも手放したい。身軽になりたい。 当たり前のように「なくてはならない」と思っていたことたちについて、一度吟味してみました。 なくて...
tonoelife.com
2020.04.15
コメント