AFFINGER4_LinkButton

ブログカスタマイズ

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

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

Affinger4がおすすめな5つの理由
ブロガーでも快適に使える機能豊富なAFFINGER4がおすすめな5つの理由

Affinger4が気になっているブロガーの方々!安心してください!   履いてますッ!   じゃなかった、とってもブロガーの方々にもおすすめできるWordpressテーマ、それが ...

続きを見る


ブログ管理人
としちる

ミスチルと青い鳥が好き。大学生活前半は冊子制作に打ち込むも紆余曲折あって研究者を目指すことに。夢はアカデミーを作ること。研究の狭き道でも生きていくこととやりたいことを両立させるために、サイト運営やライティング、Webデザインといったメディア系スキル・ビジネスのイロハも学んでる。つれづれ“ちる”ままに、時に激しく主にダラダラがモットー。

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

Twitter で

おすすめ記事

1

社会風刺の効いたMr.Children『マシンガンをぶっ放せ』の紹介。世の中にものを申したい。それが僕のブログを書く理由。

2

一緒くたにされがちな「批判」と「非難」の違いを解説。問題を指摘する点は同じだが、その指摘の仕方が異なるのが「批判」と「非難」の使い分けポイント。ただ文句やケチをつけるのは「批判」ではありません!

Feedly→Pocket→Evernoteで情報収集の効率化2 3

情報を制すものは人生を制す。「Feedly→Pocket→Evernote」の順に情報収集しながら、面白い・役に立つ・保存したい記事を効率的にストックしていく方法を解説。

-ブログカスタマイズ
-

Copyright© TIRU LABO , 2017 AllRights Reserved.