AFFINGER

AFFINGER6の目次・会話吹き出し・光るボタンの設定方法

悩みを抱えている人

・有料テーマの「AFFINGER6」を導入したけど使い方がよくわからない

・目次の設定や会話の吹き出しはどうやるの?

・ついでに光るボタンのやり方も知りたい!

 

上記疑問について解決します。

 

 本記事の内容

・AFFINGERの目次設定

・会話の吹き出し設定

・光るボタンの使い方

 

こんにちは、ねとまるです。

 

「目次の設定」「会話吹き出し」「光るボタン」みんなどうやってるの?!自分も同じように使いたい!と悩んでいませんか?

 

実は、この記事で紹介する手順通りに操作を進めていくだけで誰でも簡単にAFFINGERの機能を扱えるようになります。

 

なぜなら、当ブログは有料のWordPressテーマ 「ACTION(AFFINGER6)」を導入しているからです。

 

この記事では、AFFINGERの機能である「目次の設定」「会話吹き出し」「光るボタン」の設定方法をご紹介します。

 

記事を読み終えると、今後AFFINGERの機能を使いこなせるようになり、操作に悩まなくなりますよ。

 

それでは、さっそくいきましょう~!

 

有料のWordPressテーマAFFINGER6の目次を設定する方法

 

まずは、記事を書く前に設定しなければいけないのが「目次」です。

 

下の画像が目次ですね!

 

このような「目次」をAFFINGER6で作る為にはプラグイン「table of Contents Plus」を導入しなければいけません。

 

導入手順

 

導入手順

①プラグイン→②新規追加→③「table of Contents Plus」検索→④インストール&有効化

 

新規追加を押すとこちらに画面が切り替わります。

 

 

プラグインの導入が完了したら、「table of Contents Plus」の設定をしていきます。

 

table of Contents Plusの設定

 

table of Contents Plusの設定手順

プラグイン→table of Contents Plus→設定

 

設定にいくと下記画像のページになります。

 

ねとまる
最初は、僕と同じ設定でもいいですし気に入らなかったら色々いじって好みの状態にしてくださいね。

 

表示条件は2つ以上にしておくことをおすすめします。

 

なぜなら、3つや4つに設定して記事作成をした時に2つしか見出しがなかった場合は目次が作成されません。

 

なので、2つ以上がおすすめです。

 

見出しの作り方

記事作成の画面から見出しにしたい文字を選択し「段落→見出し2」を選ぶ

 

見出し3を選ぶと上記画像のように表示されます。

 

ねとまる
これで、目次の設定方法は完璧ですね

 

AFFINGER6で会話の吹き出しを設定する方法

ねとまる
この吹き出しみたことありませんか?

 

こちらがアイコン付きの吹き出しですね
ふく先生

 

このように会話をしているように吹き出しを作ることができます。

 

その方法を今から説明していきますね。

 

会話アイコン設定手順

 

アイコン設定手順

①「AFFINGER」→②会話アイコン→③アップロード→(アイコン名はお好きに)→SAVE(保存)

 

こちらのアイコンのようにバウンドさせたいときは下記の「会話アイコンを少し動かす」にチェックをいれます。
ふく先生

 

そして、記事作成に戻り先程登録した会話吹き出しを使用します。

 

使い方

①タグ→②会話吹き出し→③設定した「会話1」を選択

 

 

「会話1」を選択するとこのようになります。

記号と記号の間に入れたい文字を下記のように入力すると

ねとまる
この間に文字を打ち込むとOK!

↑このようになります。

 

会話吹き出しは記事作成画面ではわからないので、プレビュー画面でどのように表示されているのか確認してみてください。

 

ねとまる
左に吹き出し
右に吹き出し
ふく先生

 

右に吹き出しをする方法は右にしたい「会話」を選択し、最初の数字の横を半角スペースを押して「r」と入力するだけ。

 

右にアイコンがくるよ
ふく先生

 

会話吹き出しの設定方法はここまでです。

 

最後に、光るボタンのやり方についてご紹介しますね。

 

AFFINGERのカスタムボタンを光らせる方法

AFFINGERの光るボタン機能は種類がたくさんあります。

 

詳しくはコチラ

詳しくはコチラ

 

↑こんな感じのやつです。

 

角丸タイプ

角丸ボタン

角丸ボタン

 

ミニタイプ

詳しくはコチラ

 

詳しくはコチラ

 

大きいタイプ

 

などなど他にも種類が豊富です。

 

それでは、光るボタンの使い方を説明していきますね。

 

AFFINGERで光るボタンを出す手順

 

光るボタンを出す手順

①「タグ」→②「カスタムボタン」→③「ノーマル」→④「詳しくはコチラ(色はお好みで)」

 

選択すると下記の画像のようにコードが表示されます。

 

“#”ここに表示させたいURLをいれます。

“詳しくはコチラ”の部分を「おすすめASPはコチラ」に変えてみます。

するとこのように光るボタンの出来上がりです↓

おすすめASPはコチラ

 

アフェリエイトリンクを光るボタンにする方法

 

アフェリエイトリンクを光るボタンにする手順

入れたいASPを選ぶ→提携中のプログラムから→「テキストリンクコードを選ぶ」→下の画像のように「"   "」で囲まれている部分をコピーする

 

「“ ”」この部分がASPの計測となる部分なのでコピーして、先程と同じように“#”ここに入力します。

“詳しくはコチラ”の部分を「表示させたいテキスト」に変えるとOKです。

 

試しに「U-NEXT」を光るボタンにするとこんな感じです↓

U-NEXTでお試し体験する

 

AFFINGERのボタンAとボタンBが光らない

「ボタンA」と「ボタンB」を光らせるためには設定が必要です。

 

「ボタンA」「ボタンB」を光らせる手順

「ランキング管理画面」→「基本設定」→「ボタンに光る演出を入れる」をチェック

 

基本設定の一番下にある「ボタンに光る演出を入れる」にチェックすると他のボタンと同じように光らせることができます。

 

まとめ:AFFINGERを活用していこう

今回は有料テーマの 「ACTION(AFFINGER6)」の中でも使用頻度の高い機能をご紹介させて頂きました。

 

あらためておさらい

・AFFINGERの目次設定

・会話の吹き出し設定

・光るボタンの使い方

 

についてご紹介致しました。

 

どれも慣れると簡単に扱えるようになるのでめげずにどんどん活用していきましょう。

 

まだ 「ACTION(AFFINGER6)」をテーマにしていない方はこちらからどうぞ↓

 

\ 「ACTION(AFFINGER6)」をテーマにする /

 

AFFINGER6のWebアイコンの使い方・色・サイズの変更方法はこちら

こちらもCHECK

AFFINGER6のWebアイコンの使い方・色・サイズの変更方法

続きを見る

 

AFFINGER6のブログカード(内部リンク)を記事内に貼る方法

こちらもCHECK

AFFINGER6のブログカード(内部リンク)を記事内に貼る方法

続きを見る

 

今回は以上です。




-AFFINGER