コンテンツ4 サムネイル 1×1

contents-4-3840x3840

注目
流行ってます
割引中

add_reactionedit_squareボックスデザイン内のアイコン使用例

【I-1】は、「boxes-suspend」のボックスデザインセットの中の、「image-box」のclassに「app-icon」を併記

【I-2】は、「boxes-suspend」のボックスデザインセットの中の、「image-box」のclassに「circle-icon」を併記

data_checkボックス上乗せ 画像の代替 moreボタン

【I-3】は3パターン、「boxes-suspend」のボックスデザインセットの中の上から、
(1)ボックスの上乗せアイコンは「icon-box」の中に span Material Iconを
(2)「image-box」の中に span Material Iconを
(3)「more-button」の classに「double-arrow」を併記して、span Material Icon「keyboard_double_arrow_right」を。ちなみに【I-4】では classに「arrow」を併記して span Material Icon「arrow_forward_ios」、【I-5】では classに「reply」を併記して span Material Icon「reply」、【I-6】では classに「shortcut」を併記して span Material Icon「shortcut」を
なお、この「shortcut」は shortcut となるのでCSSで「transform: scaleY(-1)」を設定して上下逆さまに

data_check上乗せで 左・中・右 複数をまとめて左・中・右 間隔開けて整列

【I-4】以降は、「boxes-suspend」のボックスデザインセットの中の、「icon-box」の classに【I-4】「left」を、【I-5】「center」を、【I-6】「right」を併記
【I-7】以降は「icon-box」の classに「multi」を併記して複数アイコン対応、「left」「center」「right」でまとめて左・中・右に、およびflexboxなので「around」「evenly」「between」などで間隔を空けてIconを整列させる

 

アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース