AFFINGER4を使い始めて早2ヶ月！
なんで気づかなかったんだって話なのですが、やっとデフォルトで備わっているAFFINGER4のおしゃれなリンクボタンの使い方が分かったので紹介しちゃいます。
AFFINGER4にデフォルトで備わっているリンクボタンとは
AFFINGER4にはおすすめ商品のランキングを簡単に設置することができるますよね。
これです。
なのにAFFINGER4の公式紹介ページのどこを見ても、リンクボタンの設置の仕方が書いてないんです。
使えるって言っているのに使えないなんて…と思ってたらすごく分かりにくいところにさりげなくあったので紹介します！
AFFINGER4のリンクボタンがある場所
WordPressの記事作成画面右上に「ビジュアル」と「テキスト」と書いたタグがありますよね。
ここの「テキスト」をクリックすることで、HTMLのコード画面を見ることができます。
開いたら、ズラーッとさまざまなボタンが並ぶ中にありました(笑)
「公式ボタン」が赤いボタン、「詳細ボタン」が青いボタンとなっています。
試しにAFFINGER4の公式サイトへのリンクとAFFINGER4に関して紹介した当ブログの記事リンクボタンを作ってみます！
AFFINGER4のリンクボタンの作り方
まずは、ボタンに表示したい文字を打ち込んでください。そしてその後に「テキスト」画面にてその文字を選択します。
その後に、表示したいボタンを選択します。そうするとこうなります。
<div class="rankstlink-r2"><p>公式サイトへのリンク</p></div>
このままだとリンク先が設定されていないのでボタンになりません。
再び表示したい文字を選択してリンク先を設定します。
そうするとこうなるはずです。
<div class="rankstlink-r2"><a href="http://the-money.net/">公式サイトへのリンク</a></div>これで、表示したかったリンクボタンが作成できました！
おすすめポイントを確認する
まとめ
作成する方法をまとめましょう。
- 表示する文字を打ち込む
- テキスト画面にて文字を選択して表示したいボタンをクリック
- 再び文字を選択してリンクを挿入して完成
いやー、やっと出来たわけですがちょっとこれだと手間が多いのでAFFINGER4でもおすすめされている「AddQuicktag」というプラグインを使用してもっと手軽にリンクボタンを使えるようにしちゃいましょう！
「AddQuicktag」でたったの２ステップでリンクボタンを作成する方法
まだ「AddQuicktag」のプラグインを入れていない方はぜひ導入しちゃいましょう。
導入方法や詳細な解説はこちらを参考にしてみてください。
インストールして有効化したら、設定画面を開きこのように入力します。※ 訂正あり！
リンクがPタグで囲まれていないとボタンがうまく表示されないことが発覚しました。チェックして記事にしたのですが、後日見直すと再現できなかったので訂正します。申し訳ありません。
解決方法として、以下のようにしてください。
<div class=”rankstlink-r2″><p>リンク</p></div>
<div class=”rankstlink-l2″><p>リンク</p></div>
こうすることで、後はリンク先のURLを入力すればリンクボタンが出るようになります。「target=”_blank”」は手動で入れなければなりませんが、必要なら入れ直すという形でお願いします！
だいたいリンクボタンを使う時は別タブで開くように設定するので、「target=”_blank”」を入れてあります。
<div class="rankstlink-r2"><a href="URL" target="_blank">リンク</a></div>
<div class="rankstlink-l2"><a href="URL" target="_blank">リンク</a></div>
上が赤いボタン、下が青いボタンで、コードの違いは「r」か「l」かなだけんですけどね。
これでビジュアル画面にて編集を行っている時にただ表示したいボタンを選択して、リンク先を導入するだけでリンクボタンが作れちゃいます。
なんとたったの2ステップ！やったね！
AFFINGER4はデフォルトでも必要最低限なデザインと、サイト運営を行う上で快適な機能が詰め込まれていて良い感じ！
まだ持ってなくて気になる人は下記記事を参考にしてみてください。
ブロガーでも快適に使える機能豊富なAFFINGER4がおすすめな５つの理由
