WING(AFFINGER)

WING(AFFINGER)のボックスデザイン

2019年3月10日

この記事は、WING(AFFINGER)のボックスデザイン内のデザインを議事録的にまとめた記事となります。

バナー風ボックス

2019年3月時点でバナー風ボックス内には3個のデザインがあります(基本、背景なし、左寄せ)

 

コードの説明

コードの説明

st-flexbox url="リンク先URL"
rel="nofollow" target="リンクを新しく開く(target)"
fontawesome="Webアイコン"
title="タイトル" width="幅(%)"
height="高さ(px)"
color="文字色"
fontsize="文字サイズ(%)"
radius="角丸(px)"
shadow="タイトルの影色"
bordercolor="枠線カラー"
borderwidth="枠線の太さ(px)"
bgcolor="背景色"
backgroud_image="背景画像のURL"
blur="背景画像のぼかし"
left="左寄せ(on)"
margin_bottom="下の余白(px)"

 

基本

タイトル

 

背景なし(高さ400Px)

400px

高さ400Pxは結構でかいねぇ。

大きさを分かり易くするために、黒枠線にしています。本来は黒枠線もなく真っ白。

このボックスはまだ使いこなせていない。

 

100px

100px

200Px

200px

 

左寄せ

タイトル

 

 

マイボックス

2019年3月時点でマイボックス内には9個のデザインがあります。

基本をベースに見出し色、見出しアイコン、ボックス枠の色、背景色を変えただけのボックスなります。

 

コードの説明

コードの説明

st-mybox title="見出し"
fontawesome="Webアイコン"
color="見出し色"
bordercolor="枠線カラー"
bgcolor="背景色"
borderwidth="枠線の太さ(px)"
borderradius="角丸(px)"
titleweight="見出しの太さ(bold)"
fontsize="見出しのフォントサイズ"
myclass="オリジナルクラス"
margin="ボックスタイトル空白マージンの設定【あまり触らないほうがいい】"

基本

ポイント

基本

 

しかく(枠のみ)

しかく(枠のみ)

 

まるみ

まるみ

 

参考

参考

参考

 

関連

関連

関連

 

メモ

メモ

メモ

 

ポイント

ポイント

ポイント

 

注意ポイント

注意ポイント

注意ポイント

 

はてな

はてな

はてな

 

見出し付きフリーボックス

2019年3月時点で見出し付きフリーボックス内には5個のデザインがあります。

基本をベースに背景色や見出しのアイコンを変えただけのボックスデザインです。

 

基本

見出し(全角15文字)

 

注意

注意

 

はてな

はてな

 

ポイント

ポイント

 

メモ

メモ

 

メモボックス

メモ

 

 

スライドボックス

+ クリックして下さい

 

チェックボックス(番号なしリスト)

 

こんな方におすすめ(V)

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

下段に文字を入れる場合

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

【補足】この部分に文字を入れてみる

+ コード(クリックで開く)

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>

<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
【補足】この部分に文字を入れてみる

</div>

 

タイトルがいらない場合

  • これはダミーのテキストです
  • これはダミーのテキストです

+ コード(クリックで開く)

<div class="st-blackboard">
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

 

チェックがいらない場合

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

+ コード(クリックで開く)

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>

<ul class="st-blackboard-list st-no-ck">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

 

チェックを番号にする(olタグ)

こんな方におすすめ

  1. これはダミーのテキストです
  2. これはダミーのテキストです

+ コード(クリックで開く)

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>

<ol class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ol>
</div>


 

チェックもタイトルもいらない場合

  • これはダミーのテキストです
  • これはダミーのテキストです

+ コード(クリックで開く)

<div class="st-blackboard">
<ul class="st-blackboard-list st-no-ck">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

 

こんな方におすすめ[V]

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

下段に文字を入れる場合

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

【補足】この部分に文字を入れてみる

+ コード(クリックで開く)

<div class="st-blackboard square-checkbox">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">こんな方におすすめ</span></p>

<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
【補足】この部分に文字を入れてみる

</div>

 

タイトルがいらない場合

  • これはダミーのテキストです
  • これはダミーのテキストです

+ コード(クリックで開く)

<div class="st-blackboard square-checkbox">
<ul class="st-blackboard-list st-no-ck-off">
<li>これはダミーのテキストです</li>
<li>これはダミーのテキストです</li>
</ul>
</div>

 

ガイドマップメニュー

 

 

 

 

Copyright© レッツポイ活|スマホで稼げるポイントサイト・お小遣いサイトの副業術 , 2019 All Rights Reserved.