【カスタマイズ参考】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

【最初に読みたい本】おすすめオーディオブック厳選7選

オーディオブックを効果的に使いたい方「オーディオブックを読んでみようと思うけど、どんな本を読んだらいいかわからない。読みやすいおすすめを教えて欲しい。」   という悩みに答えていきます。     この記事をみていただくと、「オーディオブックって面白い」と思えて初心者でも聴きやすい本を紹介します。もちろん内容も素晴らしい本です。   この記事を書いている僕は、オーディオブックにハマりすぎて、5月から10月の6ヶ月で78本読んでいるので、その中からの厳選です。   「そ ...

ReadMore

2019/11/27

おすすめ読書本-勝ち続ける意志力-

モチベーションを維持できる本を探している方「意志が弱くていつも途中で投げ出してしまって、どうすればプロや専門家のように意志を強くできるのか考えている」   という悩みに対して、答えをくれる1冊です。   勝ち続ける意志力 梅原 大吾 (著) AmazonKindle楽天audiobook   僕はこの本が本当に好きで、「みんながやっていないことをやりぬく孤独と強さ」が欲しい時に何度でも読み返したくなります。   もしも今、「右にならえ」のみんなと同じ道を外れて挑戦し ...

ReadMore

2019/11/28

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

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

ReadMore

2019/11/28

【2019】オーディオブック用におすすめのイヤホン【Bluetooth】

イヤホン探索中の方「今使っているイヤホンだと満足できないので、オーディオブックを聴くときに出来るだけクリアに聴こえたり、使いやすいものを探しているのでおすすめを知りたい」 という悩みに答えていきます。     この記事をみていただくと、迷わずにおすすめのイヤホンを購入することができます。他のサイトでは5つとか20個の商品が出てきて正直どれを買えばいいかわからない人におすすめです。   価格帯も5000円以下のものを2つしか紹介しません。ちゃんと意味のある2つの商品の紹介をします、僕は2 ...

ReadMore

2019/11/28

【比較】オーディオブック・電子書籍・紙の本【使いわけが重要】

どれで本を読めばいいかわからない方「オーディオブックに興味はあるけど、紙の本や電子書籍の方がやっぱりいいんじゃないかな?そもそも3つの媒体の違いが知りたい」     という悩みに答えていきます。     この記事をみていただくと、「オーディオブック」と「電子書籍」と「紙の本」の使い分けがわかります。   この記事を書いている僕は、オーディオブック、電子書籍、紙の本も大好きで普段から使い分けて読んでいます。   記事の内容オーディオブックと電子紙書籍と紙の本の比較それ ...

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 , 2024 All Rights Reserved.