
リンクは、ボタンがいいな~
今回は、初心者さん向けに簡単なリンクボタンの貼り方を解説します。
(AFIINGER5ユーザーさん向けの記事になります)
AFFINGER5でリンクボタンを作るには
AFFINGER5の「リンクボタン」のサンプルは、こちらです ↓
このように2種類の「リンクボタン」が作れます。
デフォルトでは、
ボタンA(赤)とボタンB(水色)になります。
(ボタンの色はカスタマイズできます)
それでは、早速作ってみましょー!
まず、WordPressの記事の編集画面内で、リンクボタンを貼りたいところでクリックします。
(編集は「クラシックエディタの「ビジュアル」でOKです)
編集画面の上にある「タグ」→ 「カスタムボタン」を選択。
次に「ボタンA」か「ボタンB」を選択。
今回は「ボタンA」を選びます。
そうすると、このようにボタンAが表示されます。(小さいので拡大して見てくださいね)
ビジュアルエディタではこの状態でも、「更新」→「プレビュー」で確認すると、赤い「ボタンA」が表示されています。
↓ ボタンAの前でクリック。Deleteキーで「ボタンA」を削除する。
※ちなみにボタンAの後ろでクリックし、BackSpaceキーで削除したらボタンが消えてしまいました。
文字入力してから、ボタンAを削除してもいいですね。
↓今回は「プロフィール」と入力してみました。
お好きなボタンの名前をつけてみてくださいね。
すぐ下の鉛筆のマーク「編集」をクリック。
↓シャープ「#」は削除して・・・
↓「リンク先URL」を枠内にコピーしましょう!
リンク先URLを貼り付けたら、右の「適用」をクリック。
↓「適用」をクリックすると、下のようなリンクボタンの完成!
「更新」 →「 プレビュー」で確認すると、ちゃんとボタンが表示されています!
こんな感じです♪
リンクボタンの編集

という場合は・・・
↓ リンクボタンの上をクリックしてから、「編集」をクリック。
↓ 変更したい「リンク先URL」を貼り付け、右の「適用」をクリック。
その隣の「リンク設定」をクリックして、編集画面からも変更できます。
↓ 「リンク先URL」や、その下の「リンク文字列」なども編集できます。
編集したら、右下に「更新」ボタンがあるのでクリックすれば完了です。↑
おつかれさまでした♪
「タグ」機能で、とっても簡単にリンクボタンが作れますよね。
最後までご覧いただきありがとうございました!