アイコンリスト

[Cocoon] アイコンリストで二項対立のスライドを作るCSS とりあえずのメモ

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立(dichotomy)のスライドになります。追加されたCSSポイントは、 display: flex; j...
[CSS]ラベルボックスをスライド画像風にした プログラミング

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス(Cocoon汎用ブロック)を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...
[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した とりあえずのメモ

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。 追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...