ものづくり推進部

AFFINGER5の記事作成パーツ(スタイル編)

2020年4月7日

AFFINGER5の記事作成パーツ
きのぷー
2012年に「いいね!南三陸町」のウェブサイトを立ち上げてから一貫して、外注せず独学&自腹でウェブサイトを作り上げて参りました。

傍から見れば非効率、時間の無駄としか見られてないでしょうが、その結果、自前で運用できるまでのスキル&資産に変えることができました。

そんな自分が得た知識やスキルが、誰かのお役に立てれば幸いです。

今日は「WING」の記事作成パーツの紹介

2020年4月のリニューアルにあたり、WORDPRESSテーマを赤マーカー(細)「AFFINGER WING」に切り替えました

今日はこのテーマで用意されている、記事投稿で使えるパーツを紹介したいと思います。

販売元サイト

スタイル

テキスト装飾

太字 <span class="huto">いいね!南三陸町</span>

赤字 <span class="hutoaka">毎日配信</span>

大文字 <span class="oomozi">いいね!南三陸町</span>

小文字 <span class="komozi">いいね!南三陸町</span>

点線 <span class="dotline">小文字</span>

参照リンク <p class="st-share"><a href="#"></a></p>

参考マーク <span class="sankou">参考</span>

必須マーク <span class="st-hisu">必須</span>

打ち消し <del>打消し</del>

コード表示 <code>code</code>

参考マークと必須マークはspanタグで囲ってるだけなので文字変更可

アニメーション

45°揺れ <span class="fa faa-wrench animated st-animate">45°揺れ</span>

ベル揺れ <span class="fa faa-ring animated st-animate">ベル揺れ</span>

横揺れ <span class="fa faa-horizontal animated st-animate">横揺れ</span>

縦揺れ <span class="fa faa-vertical animated st-animate">縦揺れ</span>

点滅 <span class="fa faa-flash animated st-animate">点滅</span>

バウンド <span class="fa faa-bounce animated st-animate">バウンド</span>

回転 <span class="fa faa-spin animated st-animate">回転</span>

ふわふわ <span class="fa faa-float animated st-animate">ふわふわ</span>

大小 <span class="fa faa-pulse animated st-animate">大小</span>

シェイク <span class="fa faa-shake animated st-animate">シェイク</span>

シェイク強 <span class="st-shake st-animate">シェイク強</span>

拡大(ゆれ) <span class="fa faa-tada animated st-animate">拡大(ゆれ)</span>

過ぎる <span class="fa faa-passing animated st-animate">過ぎる</span>

戻る <span class="fa faa-passing-reverse animated st-animate">戻る</span>

バースト <span class="fa faa-burst animated st-animate">バースト</span>

歌津りょう 顔アイコン  画像や絵文字にも適用可能です

アイコン

アイコンの色はカスタマイザーの「オプション」から設定可能。

はてな

<span class="hatenamark2 on-color">はてな</span>
<span class="hatenamark2 on-color"></span>はてな

※上がデフォルトですが、下でも表示されました。

注意 <span class="attentionmark2 on-color">注意</span>

人物 <span class="usermark2 on-color">人物</span>

チェック <span class="checkmark2 on-color">チェック</span>

メモ <span class="memomark2 on-color">メモ</span>

王冠 <span class="oukanmark on-color">王冠</span>

初心者 <span class="oukanmark on-color">初心者</span>

見出し

マーカー

黄マーカー <span class="ymarker">黄マーカー</h4>

黄マーカー(細) <span class="ymarker-s">黄マーカー(細)</h4>

赤マーカー <span class="rmarker">赤マーカー</h4>

赤マーカー(細) <span class="rmarker-s">赤マーカー(細)</h4>

青マーカー <span class="bmarker">青マーカー</h4>

青マーカー(細) <span class="bmarker-s">青マーカー(細)</h4>

鼠マーカー <span class="gmarker">鼠マーカー</h4>

鼠マーカー(細) <span class="gmarker-s">鼠マーカー(細)</h4>

キャッチコピー

キャッチコピー見出しタグ

<h5><span class="st-h-copy">キャッチコピー</span>見出しタグ</h5>

見出しタグこんな風にキャッチコピー

<h5>見出しタグ<span class="st-h-copy">こんな風にキャッチコピー</span></h5>

カウント

設定したテキストや見出し等に自動で番号を振る。
CSSで採番するため、目次などにも反映されない仕様。

わっほい!

わっほい!

わっほい!

<p><span class="st-count">わっほい!</span></p>
<p><span class="st-count">わっほい!</span></p>
<p><span class="st-count">わっほい!</span></p>

まとめ用の見出し

まとめ用の見出し

<h4 class="st-matome">まとめ用の見出し</h4span>

まとめ用の見出しはカスタマイザーの「各テキストとhタグ(見出し)」で、個別に設定が可能。

ランキング

※AFFINGER又はEX版のみの対応。

1位

2位

3位

4位以下

<h4 class="rankh4 rankno-1">1位</h4>
<h4 class="rankh4 rankno-2">2位</h4>
<h4 class="rankh4 rankno-3">3位</h4>
<h4 class="rankh4 rankno-4">4位以下</h4>

ランキング見出し(AFFINGER又はEX版のみ)

※☆ランキング付き

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

[st-rank rankno="1" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="5"]ランキング1位[/st-rank]
[st-rank rankno="2" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="4"]ランキング2位[/st-rank]
[st-rank rankno="3" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="3"]ランキング3位[/st-rank]
[st-rank rankno="4" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="2"]ランキング4位以下[/st-rank]

写真

写真枠

キャプションあり
椿島

椿島(つばきしま)

[caption id="" align="alignnone" width="1280"]<img src="#" alt="" />キャプションを追加[/caption]

ポラロイド風

キャプションなし
田束山展望台

<div class="st-photohu"><img src="#" alt="" /></div>

キャプションあり(リンク付き)

<div class="st-photohu">[caption id="" align="alignnone" width="1280"]<img src="#" alt="" /> <a href="#">キャプションを追加</a>[/caption]</div>

ボックス

うっうー

<div class="yellowbox">
<p>黄色ボックスです</p>
</div>

ぐさぁーっ! うぎゃー!

<div class="redbox">
<p>薄赤ボックスです</p>
</div>

美味しいから大丈夫だよ

<div class="graybox">
<p>グレーボックスです</p>
</div>

カニも女子力よ!!

<div class="inyoumodoki">
<p>引用風のボックスです</p>
</div>

ワイド(EX限定デザイン)

※EX版を使っていないため、正しいデザインが反映されていないかもしれません。。

ぎゃおおおおん!

<div class="st-wide-background">
<p>ここにテキストを入力</p>
</div>

キャハっ!

<div class="st-wide-background-left">
<p>ここにテキストを入力</p>
</div>

くぃどぅるるる

<div class="st-wide-background-right">
<p>ここにテキストを入力</p>
</div>

ショートコードタグで背景色や画像が設定可

ふーん、あんたが私のプロデューサー?……まあ、悪くないかな…。

[st-wide-background myclass="" backgroud_image="" bgcolor="#FFF9C4" align=""]
<p>ここにテキストを入力</p>
[/st-wide-background]

大丈夫、貴方が育てたアイドルだよ

[st-wide-background myclass="" backgroud_image="" bgcolor="#F8BBD0" align="l"]
<p>ボックスの色は自由に変更可能。align="l"で左寄せ。</p>
[/st-wide-background]

誰かの笑顔のために戦える人、それがヒーローだ!

[st-wide-background myclass="" backgroud_image="" bgcolor="#B3E5FC" align="r"]
<p>ボックスの色は自由に変更可能。align="r"で右寄せ。</p>
[/st-wide-background]

リスト

ドット下線(リスト)

  • ドームですよっ!ドームっっ!
  • なんとっ!
  • にょわー☆

<div class="st-list-border">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

マル(リスト)

  • 働いたら負け
  • なんなのなの!?
  • さいぱんスーパーアリーナ

<div class="st-list-circle">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

マル+ドット下線(リスト)

  • ほっとかない、ほっとかないよ!
  • まぁまぁ眼鏡どうぞ
  • まっこまっこりーん

<div class="st-list-circle st-list-border">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

簡易チェック(リスト)

  • みりあもやるー
  • むーりぃー
  • 目指すのは、歌もダンスも世界レベル

<div class="st-list-check">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

簡易チェック+ドット下線(リスト)

  • めっちゃやむ
  • 闇に飲まれよ!
  • わかるわ

<div class="st-list-check st-list-border">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

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

ulタグの番号なしリストを囲むとチェックボックス風のデザインに。

  • これはダミーのリストんご
  • がんばルビィ!
  • ハグ……しよ?

<div class="st-square-checkbox st-square-checkbox-nobox">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

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

※ulタグの番号なしリストを囲むとチェック風のデザインに。
※カスタマイザーの「オプション」でカラー変更が可能。

  • ここに来てくれた人が絶対に自慢できるようにしてみせるから!
  • 未来ずらぁー!!!
  • 全速前進、ヨーソロー!!!

<div class="maruck">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

ナンバリング(番号付きリスト)

※olタグの番号付きリストを囲むとチェック風のデザインに。
※カスタマイザーの「オプション」でカラー変更可能。

  1. 出来るかどうかじゃない、やりたいかどうかだよっ!
  2. にっこにっこにー!
  3. 飛べるよ…いつだって飛べる。あの頃のように!

<div class="maruno">
<ol>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ol>
</div>

ナンバリング四角(リスト)

  • 学校の許可~?認められないわ!
  • 変わることを恐れないで、突き進む勇気。私はあの時、あなたの手に救われた
  • ナニソレイミワカンナイ!

<div class="st-list-no">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

ナンバリング四角+ドット下線(リスト)

  • 何にも囚われないで一番やりたいこと、一番面白そうなものに怯まず真っ直ぐに向かって行く…それは穂乃果にしかないものかもしれません
  • みんなのハート打ち抜くゾ!バーン!
  • 私は皆が決めた事、やりたい事にずっとついていきたい。道に迷いそうになる事もあるけれど、それが無駄になるとは私は思わない。皆が集まってそれぞれの役割を精一杯やりきれば、素敵な未来が待っているんじゃないかな

<div class="st-list-no st-list-border">
<ul>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
<li>ここにテキストを入力</li>
</ul>
</div>

レイアウト

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除

センター寄せ

歌津りょう 顔アイコン

<div class="center"><img src="#" alt=""></div>

下に余白

(例)要素の下に「10px」の余白を設定

歌津りょう 顔アイコン

<div style="padding-bottom: 10px;"><img src="#" alt=""></div>

ランキングボックス(AFFINGER/EX版のみ)

「ランキング一覧背景色」と同じスペースを設定

width100%リセット

max-width: initial; display: inline;を設定してmax-widthをリセット

imgインラインボックス

display: inline;を指定

カードスタイル

基本形
※記事ID6で設定

[st-card id=6 label="" name="" bgcolor="" color="" readmore="on"]

※ブログカードに別のデザインを設定(全サイズで縦型)

<div class="st-cardstyle">
<p>[st-card id=6 label="" name="" bgcolor="" color="" readmore="on"]</p></div>

カードスタイルB

ブログカードに別のデザインを設定(PC、タブレット閲覧時のみ縦型)

<div class="st-cardstyleb">
<p>[st-card id=6 label="" name="" bgcolor="" color="" readmore="on"]</p></div>

テーブル

横スクロール

スマートフォン閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させる。

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

中央配置

table内のテキストを上下左右の中央に配置。

テキスト テキスト テキスト テキスト
テキスト テキスト テキスト テキスト

装飾なし

テーマで用意されたデフォルトデザインを解除

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

この記事が気に入ったら
いいね ! しよう

  • この記事を書いた人
  • 最新記事

きのぷー

2010年南三陸町初訪問。震災後もボランティア活動等を通じて地元との交流を重ね、2012年4月より「いいね!南三陸町」をスタート。町内各地を訪ねて見つけた町の魅力を伝えます。

-ものづくり推進部
-,

© 2012 いいね!南三陸町