【カスタマイズ参考】AFFINGER5「タグ>カスタムボタン〜ショートコード補助」まとめ一覧

2019年11月16日

AFFINGER5のカスタマイズをしたい方「AFFINGER5で記事の装飾をしたいけど、機能が多すぎてどれを使えばいいかよくわからない。どんな装飾ができるか一覧で見たい」

 

という悩みにこの記事でお答えします。

 

AFFINGER5で記事装飾をするときに「どんな機能があるのか」わかっていれば、どれをカスタマイズして使うか考えやすくなります。

 

今回紹介するのは「タグ>カスタムボタン〜ショートコード補助まで」の機能です。

 

タグ>カスタムボタン〜ショートコード補助

 

もしも「AFFINGER5を持ってはいないけど、何ができるのか見に来た!」という方がいたら、こちらも記事や公式サイトもよければご覧ください。

 

 

タグ>カスタムボタン一覧

ノーマル:11個

基本

詳しくはコチラ(オレンジ)

詳しくはコチラ(レッド)

詳しくはコチラ(グリーン)

詳しくはコチラ(ブルー)

お問合せ

もっと詳しく(オレンジ)

もっと詳しく(ピンク)

もっと詳しく(ブルー)

人気ランキング

ランキングはコチラ

 

ミニ:5個

基本 詳しくはコチラ(オレンジ) 詳しくはコチラ(レッド) 詳しくはコチラ(グリーン) 詳しくはコチラ(ブルー)

 

MCボタン:4個

太字のテキスト

今すぐ申し込む

※MCボタン(オレンジ)

太字のテキスト

今すぐ申し込む

※MCボタン(レッド)

太字のテキスト

今すぐ申し込む

※MCボタン(グリーン)

太字のテキスト

今すぐ申し込む

※MCボタン(ブルー)

 

ボタンA

 

ボタンB

会話ふきだし

こんな感じで会話風のふきだしがつくれます
反対側もOKです!

 

↓会話風ふきだしは「外観>カスタマイズ>[+]オプションカラー>会話風ふきだし」で背景色などカスタマイズ可能です。

 

ランキング

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

 

レイアウト

PCとTab3分割

左側のコンテンツ33%

真ん中のコンテンツ33%

右側のコンテンツ33%

 

PCとTab左右40:60%

左側のコンテンツ40%

右側のコンテンツ60%

PCとTab左右50%

左側のコンテンツ50%

右側のコンテンツ50%

 

全サイズ左右30:70%

左側のコンテンツ30%

右側のコンテンツ70%

 

全サイズ左右50%

左側のコンテンツ50%

右側のコンテンツ50%

 

全サイズ左右free%

※自分で左右の比率を変えることができます。

 

左側のコンテンツ%

右側のコンテンツ%

 

均等横並び

  • 横並びコンテンツ
  • 横並びコンテンツ
  • 横並びコンテンツ

 

背景ワイド

背景ワイド

 

Div

自分でクラスを設定できます。

 

マージン

マージン(余白)を設定するようのボックスをつくれます。

 

タブ

※タブは2つ・3つのどちらかでつくれます。

 

タブ1のコンテンツ

タブ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をカンマ(,)で区切って複数出せるのと、ランキングアイコンを左上に出すかどうかを選べます。

 

使い方

・「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"にしています。

・none: 順序なし
・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"がデフォルトになっています。

ただ1点「fullsize_type=""」という項目があります。

・card:アイキャッチ画像のみ
・text:アイキャッチ+記事タイトル
・何も入れない:アイキャッチ+記事タイトル+記事内容抜粋

 

2019/11/28

【脳内活性】オーディオブックをもっと活用する方法

オーディオブックを効果的に使いたい方「オーディオブックをもっと効果的に使う方法がないかを探しているけど、いい方法ないかな?」   という悩みに答えていきます。     この記事をみていただくと、オーディオブックを「もっと効果的に活用する方法」と「実際にどんな良い効果が出たのか」が分かります。     この記事を書いている僕は、オーディオブックにハマりすぎて、5月から10月の6ヶ月で78本読んでいるのでその実体験をお話しします。   ※この記事ではaudiobook. ...

ReadMore

2019/11/28

【裏ワザ】オーディオブックを最も安くお得に買う方法

オーディオブックをお得に使いたい方「オーディオブックを聞きたいけど、できる限り安いコストでたくさん聞きたい」   という悩みに答えていきます。     この記事をみていただくと、「オーディオブックを最も安く購入する方法が具体的にわかります」   この記事を書いている僕は、オーディオブックにハマりすぎて、5月から10月の6ヶ月で78本読んでいて、実際に僕が使っている方法の紹介です。   そもそもオーディオブックがおすすめな理由ってなに?と思った方はこちらの記事も合わせ ...

ReadMore

2019/11/27

おすすめオーディオブック-武器としての決断思考-

面白いオーディオブックを探している方「最近AIや最新技術の革新についてメディアで取りざたされることが多くて、将来自分の仕事がいらなくなりそうで不安だな、、」   という悩みに答えてくれる1冊です。   武器としての決断思考 瀧本 哲史 (著) Amazon楽天audiobook   以下で記載していく内容は僕が実際にオーディオブックを聞いてみて気になった部分の内容のサマリと意見や感想です。   記事の内容「武器としての決断思考」はこれからの時代にはマストな理由著者に ...

ReadMore

2019/11/27

おすすめオーディオブック-東大教授が教えるやばい日本史-

面白いオーディオブックを探している方「日本史や歴史物が好きで楽しく学びたい。教科書的な勉強はしたくないから、内容はライトなものがいい」   という悩みに答えてくれる1冊です。   以下で記載していく内容は僕が実際にオーディオブックを聞いてみて気になった部分の内容のサマリと意見や感想です。   東大教授がおしえる やばい日本史 本郷 和人 (監修) AmazonKindle楽天audiobook   記事の内容自分はダメだ、、なんて思う必要はない。歴史上の人物ですらや ...

ReadMore

2019/11/28

【忙人補完計画】オーディオブックをおすすめする理由

オーディオブックを使ったことのない方「オーディオブックに興味があるけど、耳から聞く本ってどうなの?やっぱり紙の本の方がいいのではないかと不安」   という悩みに答えていきます。     この記事をみていただくと、「オーディオブックを利用するべき理由」が分かります。   忙人補完計画とは? 元ネタは「新世紀エヴァンゲリオン」の中に出てくる「人類補完計画」です。 エヴァが好きすぎてタイトルを寄せてみました。   この記事を書いている僕は、オーディオブックにハマりすぎて、 ...

ReadMore

 

おすすめ記事一覧

 

↓「AFFINGER管理>おすすめ記事一覧」で設定している記事が出てきます。

 

条件表示:9個

・コメントアウト:読者には見えないので、「この記載内容はまだ出したくない」と思った時などに使えます。

・エディタ用メモ:読者には見えないので、自分用のメモとして使えます。

・PC閲覧時のみ表示・非表示:PCユーザーだけ見える・見えないの設定。

・AMPページのみ表示:AMPページの時だけ見える・見えないの設定。

・フロントページのみ表示・非表示:「AFFINGER管理>トップページの設定」でこのタグを使って入れた文字はトップページだけ表示されます。

・指定したカテゴリーIDのみ非表示:どう使うかが不明です、すみません。

 

ショートコード補助

Webアイコン(クラス):27個

ショートコードの"fontawesome"で使うためのアイコンです。「テキストパーツ>ミニふきだし」に使ったときの例を出します。

メモ

チェック(v)

チェック[v]

注意

はてな

虫めがね

虫めがね[+]

矢印右

矢印下

矢印右2

矢印下2

ハート

ユーザー

コメント

電球

おしらせ

メール

コード

ギフト

ダイヤモンド

ダウンロード

Twitter

Facebook

Youtube

amazon

王冠

初心者

 

アニメーション(クラス):16個

ショートコードの"class"に使うためのアニメーションです。「カスタムボタン>ノーマル>基本」に使ったときの例を出します。

動きがありすぎて、アクションゲームの避けるやつみたいになってますね(*•ω•*)

 

45°揺れ

ベル揺れ

横揺れ

縦揺れ

点滅

バウンド

回転

ふわふわ

大小

シェイク

シェイク(大)

拡大(ゆれ)

過ぎる

戻る

バースト

落ちる

 

HTMLカラーコード:17個

ショートコードで色を選ぶときに使います。「color=""」「bgcolor=""」などの中に入れて使います。

色見本として、「タグ>カスタムボタン>ミニ>基本」のbgcolorを変えています。

赤濃 赤薄 青濃 青薄 緑濃 緑薄 橙濃 橙薄 黒濃 黒薄 黄薄

 

HTMLカラーコード(ブランド)

以下のブランドのカラーコードを簡単に呼び出せます。

・Twitter:#40a2f5

・Facebook:#415c9d

・hatena:#3290e1

・Wordpress:#2d88c0

・amazon:#eb9100

・LINE:#39b900

 

定型文:4個

以下の定型文を呼び出すことができます。

 

\ バンザイ /

※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。

※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。

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

 

まとめ

機能が多くてすごい長い記事になってしまいましたが、辞書的にこの記事を使っていただけたら幸いです(^ ^)/

 

もしもAFFINGER5をまだ使っていない方で、「AFFINGER5気になる」という方はよければこちらの記事や公式サイトをご参照ください。

 

Twitterでブログ更新や情報発信してますよければフォローお願いします(・∀・)

  • この記事を書いた人

たか

副業ブロガーの「たか」です。 「アーティストのように好きなことで自由に生きるために必要な勉強」について発信しています。勉強・副業・投資などの発信がメインです。 気軽にTwitterフォロー・リプなどいただけたら嬉しいです(・∀・)

-Affinger

Copyright© ARTなSTUDY , 2021 All Rights Reserved.