AFFINGER5

【AFFINGER5】ブログ内にリンクボタンを貼る方法

2020年9月29日

リンクボタン

 

りの
他のサイトへのリンクを貼りたい!
リンクは、ボタンがいいな~

 

今回は、初心者さん向けに簡単なリンクボタンの貼り方を解説します。

(AFIINGER5ユーザーさん向けの記事になります)

 

AFFINGER5でリンクボタンを作るには

 

AFFINGER5の「リンクボタン」のサンプルは、こちらです ↓

このように2種類の「リンクボタン」が作れます。

デフォルトでは、

ボタンA(赤)とボタンB(水色)になります。

ボタンの色はカスタマイズできます

 

それでは、早速作ってみましょー!

 

まず、WordPressの記事の編集画面内で、リンクボタンを貼りたいところでクリックします。

(編集は「クラシックエディタの「ビジュアル」でOKです)

 

編集画面の上にある「タグ」→  「カスタムボタン」を選択。

 

 

次に「ボタンA」か「ボタンB」を選択。

今回は「ボタンA」を選びます。

 

 

そうすると、このようにボタンAが表示されます。(小さいので拡大して見てくださいね)

 

ビジュアルエディタではこの状態でも、「更新」→「プレビュー」で確認すると、赤い「ボタンA」が表示されています。

 

↓ ボタンAの前でクリック。Deleteキーで「ボタンA」を削除する。

※ちなみにボタンAの後ろでクリックし、BackSpaceキーで削除したらボタンが消えてしまいました。
文字入力してから、ボタンAを削除してもいいですね。

 

↓今回は「プロフィール」と入力してみました。

お好きなボタンの名前をつけてみてくださいね。

 

 

すぐ下の鉛筆のマーク「編集」をクリック。

 

↓シャープ「#」は削除して・・・

 

「リンク先URL」を枠内にコピーしましょう!

 

リンク先URLを貼り付けたら、右の「適用」をクリック。

 

↓「適用」をクリックすると、下のようなリンクボタンの完成!

 

「更新」 →「 プレビュー」で確認すると、ちゃんとボタンが表示されています!

こんな感じです♪

 

リンクボタンの編集

 

りの
作ったボタン、リンク先やボタンの名前を変えたいな

 

という場合は・・・

 

 

↓ リンクボタンの上をクリックしてから、「編集」をクリック。

 

↓ 変更したい「リンク先URL」を貼り付け、右の「適用」をクリック。
その隣の「リンク設定」をクリックして、編集画面からも変更できます。

 

↓  「リンク先URL」や、その下の「リンク文字列」なども編集できます。

編集したら、右下に「更新」ボタンがあるのでクリックすれば完了です。↑

 

おつかれさまでした♪

「タグ」機能で、とっても簡単にリンクボタンが作れますよね。

 

最後までご覧いただきありがとうございました!

 

スポンサーリンク

-AFFINGER5
-, ,

© 2021 りのまど linomado Powered by AFFINGER5