これからの教養を考える としちるのブログ

ブログカスタマイズ

【修正】AFFINGER4にてデフォルトのリンクボタンをたったの2ステップで使用する方法

投稿日:2017年2月24日 更新日:

AFFINGER4を使い始めて早2ヶ月!

なんで気づかなかったんだって話なのですが、やっとデフォルトで備わっているAFFINGER4のおしゃれなリンクボタンの使い方が分かったので紹介しちゃいます。

AFFINGER4にデフォルトで備わっているリンクボタンとは

AFFINGER4にはおすすめ商品のランキングを簡単に設置することができるますよね。

これです。

なのにAFFINGER4の公式紹介ページのどこを見ても、リンクボタンの設置の仕方が書いてないんです

使えるって言っているのに使えないなんて…と思ってたらすごく分かりにくいところにさりげなくあったので紹介します!

AFFINGER4のリンクボタンがある場所

WordPressの記事作成画面右上に「ビジュアル」と「テキスト」と書いたタグがありますよね。

AFFINGER4の記事作成画面説明(ビジュアルとテキスト)

ここの「テキスト」をクリックすることで、HTMLのコード画面を見ることができます。

開いたら、ズラーッとさまざまなボタンが並ぶ中にありました(笑)

公式ボタン」が赤いボタン、「詳細ボタン」が青いボタンとなっています。

試しにAFFINGER4の公式サイトへのリンクとAFFINGER4に関して紹介した当ブログの記事リンクボタンを作ってみます!

AFFINGER4のリンクボタンの作り方

まずは、ボタンに表示したい文字を打ち込んでください。そしてその後に「テキスト」画面にてその文字を選択します。

その後に、表示したいボタンを選択します。そうするとこうなります。

<div class="rankstlink-r2"><p>公式サイトへのリンク</p></div>

このままだとリンク先が設定されていないのでボタンになりません。

再び表示したい文字を選択してリンク先を設定します。

そうするとこうなるはずです。

<div class="rankstlink-r2">
<a href="http://the-money.net/">公式サイトへのリンク</a>
</div>

これで、表示したかったリンクボタンが作成できました!

まとめ

作成する方法をまとめましょう。

  1. 表示する文字を打ち込む
  2. テキスト画面にて文字を選択して表示したいボタンをクリック
  3. 再び文字を選択してリンクを挿入して完成

いやー、やっと出来たわけですがちょっとこれだと手間が多いのでAFFINGER4でもおすすめされている「AddQuicktag」というプラグインを使用してもっと手軽にリンクボタンを使えるようにしちゃいましょう!

AddQuicktag」でたったの2ステップでリンクボタンを作成する方法

まだ「AddQuicktag」のプラグインを入れていない方はぜひ導入しちゃいましょう。

導入方法や詳細な解説はこちらを参考にしてみてください。

インストールして有効化したら、設定画面を開きこのように入力します※ 訂正あり!

AddQuickTagの説明(AFFINGER4リンクボタン)

追記

リンクが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はデフォルトでも必要最低限なデザインと、サイト運営を行う上で快適な機能が詰め込まれていて良い感じ!

まだ持ってなくて気になる人は下記記事を参考にしてみてください。



学ぶ編集者

としちる

日本サッカー協会に入るため筑波大学体育専門学群を目指すも、受験前に父親が逃亡し、やむなく部活を辞める。教材費と受験費を稼ぐためにバイトしながらの宅浪生活を2年間送った後、国際総合学類に入学。タイにて日本語指導と留学も経験。帰国後、「人から始まる学問の見える化」を旗印とした『入門学術メディア Share Study』を創設。運営サイトは4つ、記事執筆数は250以上、イベント運営に携わった数は50以上(17年8月現在)。最近、VALUも動かしてます。

この記事が気に入ったら
いいね!しよう

Twitter で

「教養」をテーマにフリーランス系アカデミアンとして活動するとしちるのLINE@を始めました。ブログやTwitterではなかなか語れないことやLINE@登録者限定の資料も公開していく予定でっす!つれづれちるままに基本不定期更新で、執筆した記事をまとめて配信。確実に購読して、よりよく生きたい方どうぞ登録してやってくださいーッ!

-ブログカスタマイズ
-

Copyright© TIRU LABO , 2017 All Rights Reserved.