【AFFINGER5】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

2020年5月18日 2021年3月9日

悩む男性

バナーリンクって作るの難しそうだな〜

ムロ

アフィンガーなら、すごい簡単に作れるよ！コードがあるからそれ使うだけなんだよ

悩む男性

そうなの！？簡単なんだ！？バナーリンクからカテゴリーページに飛んでいけると読者の人も検索しなくて楽だよね( ^ω^ )

他のブログでバナーリンクを見かけたことありませんか！！

カッコいいけど作るのめんどくさそうですよね・・・(´・ω・`)

ムロ

今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGER５の使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

【#AFFINGER】

使っている初心者さんに簡単な使い方記事を作成しました！

記事を読みやすくデザインするために

1、ステップ
2、バナーリンク
3、ブログカード
4、スライドボックス

基本を意識したので😊https://t.co/QugONm9wgL

— ムロ (@hittky1114) May 18, 2020

こんな感じになります

⬇️

AFFINGER

AFFINGER5 なら自分で画像をいじらなくても手軽にバナーリンクを作ることができるのです。

カーソルを合わせると、画像が鮮明になります。

コチラは『AFFINGER5』公式サイトです

最強のブログテーマAFFINGER5

＞＞WPテーマ「WING（AFFINGER5）」多くのブロガーに愛されているテーマ

「もっと美しく、簡単に。」基本デザインパターンも48種！

無駄な時間はとことん省く、通常なら知識が必要な時間かかるカスタマイズもAFFINGERならクリック1つ。

記事がサクサク書ける！豊富で自由度の高いデザインパーツ

記事作成に欠かせない様々な装飾をクリック1つで設定できる

バナーリンクを作る

step
1タグからバナー風デザインを選択

「タグ」 > 「ボックスデザイン」 > 「バナー風ボックス」 > 「基本」を選択
バナーリンク作成用のコードが表示される

step
2リンク・画像・タイトルを入力する

ここでの注意はテキスト画面での入力です。

st-flexbox url="" にリンク先の URL を入力する
※例: st-flexbox url="https://hittky0823.net/category/AFFINGER"
※リンクさせたくない場合は「st-flexbox url="#"」とする
title="" にバナーに表示させたい文言を入力する
※例: title="AFFINGER"
backgroud_image="" にバナーリンクで使用したい画像ファイルの URL を指定する
backgroud_image="hittky0823.net/wp/wp-content/uploads/2021/02/img_4920.jpg"