という悩みにこの記事でお答えします。
AFFINGER5で記事装飾をするときに「どんな機能があるのか」わかっていれば、どれをカスタマイズして使うか考えやすくなります。
今回紹介するのは「タグ＞カスタムボタン〜ショートコード補助まで」の機能です。
タグ＞カスタムボタン〜ショートコード補助
もしも「AFFINGER5を持ってはいないけど、何ができるのか見に来た！」という方がいたら、こちらも記事や公式サイトもよければご覧ください。
タグ＞カスタムボタン一覧
ノーマル：１１個
ミニ：５個
基本 詳しくはコチラ（オレンジ） 詳しくはコチラ（レッド） 詳しくはコチラ（グリーン） 詳しくはコチラ（ブルー）
MCボタン：４個
ボタンA
ボタンB
会話ふきだし
↓会話風ふきだしは「外観＞カスタマイズ＞[+]オプションカラー＞会話風ふきだし」で背景色などカスタマイズ可能です。
ランキング
ランキング１位
ランキング２位
ランキング３位
ランキング４位以下
レイアウト
PCとTab３分割
左側のコンテンツ33%
真ん中のコンテンツ33%
右側のコンテンツ33%
PCとTab左右４０：６０％
左側のコンテンツ40%
右側のコンテンツ60%
PCとTab左右５０％
左側のコンテンツ50%
右側のコンテンツ50%
全サイズ左右３０：７０％
左側のコンテンツ30%
右側のコンテンツ70%
全サイズ左右５０％
左側のコンテンツ50%
右側のコンテンツ50%
全サイズ左右free％
※自分で左右の比率を変えることができます。
左側のコンテンツ%
右側のコンテンツ%
均等横並び
- 横並びコンテンツ
- 横並びコンテンツ
- 横並びコンテンツ
背景ワイド
背景ワイド
Div
自分でクラスを設定できます。
マージン
マージン（余白）を設定するようのボックスをつくれます。
タブ
※タブは２つ・３つのどちらかでつくれます。
タブ１のコンテンツ
タブ2のコンテンツ
その他パーツ
Googleアイコン
※Googleのマテリアルアイコンが使えます。ただし、デフォルトでは機能オフになっています。
「AFFINGER管理＞デザイン＞Googleマテリアルアイコン」で「使用する」にチェックを付けましょう。
cake phone_iphone tablet_mac timer location_on directions_bike directions_run directions_car directions_transit subway flight local_parking restaurant store_mall_directory cake smoking_rooms arrow_back arrow_downward arrow_forward arrow_upward radio_button_unchecked close mood mood_bad sentiment_satisfied sentiment_very_dissatisfied thumb_up_alt thumb_down_alt error new_releases
スター
画像付きコメント
アドセンス
「外観＞ウィジェット＞広告・Googleアドセンスのスマホ用」に設定している広告が表示されます。
オリジナルショートコード
「外観＞ウィジェット＞オリジナルのショートコード作成ウィジェット」に設定している広告が表示されます。
Youtube
このタグを使うときはidを指定して貼り付ける方法です。
ただ、基本的にはYoutubeのURLをそのままコピペすれば埋め込めるのでそんなに使わないかもしれません。
三角（下矢印）
スクロールナビ
目次（カスタム）
目次（TOC+）
TOC+というプラグインの目次をショートコードで呼び出すことができます。
記事一覧
記事一覧
出したい記事IDをカンマ(,)で区切って複数出せるのと、ランキングアイコンを左上に出すかどうかを選べます。
-
1
-
【カスタマイズ参考】AFFINGER5「タグ>テキストパーツ」まとめ一覧
2019/11/28
-
2
-
【カスタマイズ参考】AFFINGER5「タグ>ボックスデザイン」まとめ一覧
2019/11/28
使い方
・「st-postgroup id="Aの投稿ID,Bの投稿ID"」のように複数記事の時はカンマで区切って設定します。
・ 「rank="1"」のように設定します。1などの適当な数字を入れるとランキングが出て、何も入れないとランキングがつきません。
↓記事IDは「投稿一覧」から確認できます。
カテゴリ一覧
使い方
・「st-catgroup cat="AのカテゴリID,BのカテゴリID" 」で設定します。
・「page="記事の表示数"」で設定します。上記の設定は"3"にしているので、3記事しか出てきません。
・「order="降順、昇順"の設定です。desc=降順(新しい順)、asc=昇順(古い順)。
・「orderby="並び順の設定"です。僕の設定は"rand"にしています。
・id：投稿IDの順番
・title：タイトルの順番
・name：設定しているスラッグの順番
・type：投稿タイプの順番
・date：日付の順番
・modified：更新日の順番
・parent：投稿・固定ページの親IDの順番
・rand：ランダム
・comment_count：コメント数の順番
・「child="子カテゴリーも表示させるかどうか"の設定。"on"と"off"で切り替えます。
・「slide="スライドショーにするかしないか"」の設定。"on"と"off"で切り替えます。
・「slides_to_show="960px以上の列数、600〜959pxの列数、599px以下の列数"の設定です。僕の設定は"3,3,3"にしています。
・「slide_date="投稿日表示するかしないか"の設定。"on"と"off"で切り替えます。
・slide_more="表示させたい文字"の設定。僕の設定は「詳細を見る」にしています。
・slide_center="スライドをページの中央にするかしないかです"。"on"と"off"で切り替えます。
↓カテゴリIDは「カテゴリー」から確認できます。
カテゴリ一覧（スライドショー）
カテゴリ一覧の時と設定項目はほぼ一緒です。slide="on"がデフォルトになっています。
ただ１点「fullsize_type=""」という項目があります。
・text：アイキャッチ＋記事タイトル
・何も入れない：アイキャッチ＋記事タイトル＋記事内容抜粋
おすすめ記事一覧
↓「AFFINGER管理＞おすすめ記事一覧」で設定している記事が出てきます。
条件表示：９個
・コメントアウト：読者には見えないので、「この記載内容はまだ出したくない」と思った時などに使えます。
・エディタ用メモ：読者には見えないので、自分用のメモとして使えます。
・PC閲覧時のみ表示・非表示：PCユーザーだけ見える・見えないの設定。
・AMPページのみ表示：AMPページの時だけ見える・見えないの設定。
・フロントページのみ表示・非表示：「AFFINGER管理＞トップページの設定」でこのタグを使って入れた文字はトップページだけ表示されます。
・指定したカテゴリーIDのみ非表示：どう使うかが不明です、すみません。
ショートコード補助
Webアイコン（クラス）：２７個
ショートコードの"fontawesome"で使うためのアイコンです。「テキストパーツ＞ミニふきだし」に使ったときの例を出します。
メモ
チェック(v)
チェック[v]
注意
はてな
虫めがね
虫めがね[+]
矢印右
矢印下
矢印右２
矢印下２
ハート
ユーザー
コメント
電球
おしらせ
メール
コード
ギフト
ダイヤモンド
ダウンロード
Youtube
amazon
王冠
初心者
アニメーション（クラス）：１６個
ショートコードの"class"に使うためのアニメーションです。「カスタムボタン＞ノーマル＞基本」に使ったときの例を出します。
動きがありすぎて、アクションゲームの避けるやつみたいになってますね(*•ω•*)
HTMLカラーコード：１７個
ショートコードで色を選ぶときに使います。「color=""」「bgcolor=""」などの中に入れて使います。
色見本として、「タグ＞カスタムボタン＞ミニ＞基本」のbgcolorを変えています。
白 赤濃 赤 赤薄 青濃 青 青薄 緑濃 緑 緑薄 橙濃 橙 橙薄 黒濃 黒 黒薄 黄薄
HTMLカラーコード（ブランド）
以下のブランドのカラーコードを簡単に呼び出せます。
・Twitter：#40a2f5
・Facebook：#415c9d
・hatena：#3290e1
・Wordpress：#2d88c0
・amazon：#eb9100
・LINE：#39b900
定型文：４個
以下の定型文を呼び出すことができます。
＼ バンザイ ／
※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。
※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。
これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
まとめ
機能が多くてすごい長い記事になってしまいましたが、辞書的にこの記事を使っていただけたら幸いです(^ ^)/
もしもAFFINGER5をまだ使っていない方で、「AFFINGER5気になる」という方はよければこちらの記事や公式サイトをご参照ください。
Twitterでブログ更新や情報発信してますよければフォローお願いします(・∀・)
画像付きコメント
◯代男性