WING WordPress ブログ運営

WING(Affinger5)のキラリと光るボタンの使い方!

投稿日:2018年4月4日 更新日:

ついにAffinger4が大型アップグレードされ、颯爽と登場した『WING(Affinger5)』を導入してみました。こちらのサイトはまだAffinger4を使用していますが、いずれ移行しようかなと考えています。

ところで、WINGにして早速使ってみたかった「きらりと光るボタン」に四苦八苦してしまったので、ちょっと書き留めておこうかなと。Affinger4すらまともに使いこなせていないので、なんとも…慣れないと大変ですね。機能面は凄いですけど。

さて、では「キラリと光るボタン」について説明していきます。

キラリと光るボタン=カスタムボタン

まず、きらっと光るボタンがどこにあるか分からなかった私。ビジュアルエディタならココです、ココ。

タグ⇒その他パーツ⇒「カスタムボタン」

 

ちろ
これ探すのにボタン入れまくりました…

みなさんこういうのすぐ分かってさっさと使ってしまうんでしょうか…。WordPress初心者の私は世知辛い。

WING(Affinger5)のきらりと光るボタンリンク方法

カスタムボタンぽちるとビジュアルエディタにも何やら文字の羅列(ショートコード)が…。

 

おっと…。

ビジュアルとテキスト行ったり来たりして記事書いてるWordPress初心者の私としては、ちょっとびっくりしてしまいましたが、内容見るとそんなに難しいこと書いてない。

リンク先

きらりと光るボタンのリンク先は、文字列頭の部分で指定します。

ちろ
mybutton url="#" の部分です

例えばボタンのリンクをこのサイトのTOPにする場合は、以下のようにします。

mybutton url="https://chiro-web.com"

 

ボタンに表示する文字

これは「=ボタン」となっているので分かりやすいですね。

あおねこ
title="ボタン"のところだね!
そうそう!そこの「ボタン」を好きな言葉に変えてね
ちろ

 

WING(Affinger5)のキラリと光るボタンを別窓(別ウィンドウ)で開く方法

キラリと光るボタンはデフォルトでは、今見ているページでリンク先を開くようになっています。

内部リンクするときはこのままでも困らないのですが、外部リンクの場合、別窓(別ウィンドウ)で開きたいというときがあるかと思います。別窓にしていないと元のページは消えてしまいます。わざわざ元のページに戻って記事を読んでくれる人がどれだけいるのか、まぁそんな人いないだろうというわけで、外部リンクは別窓で開いたほうがいいかもしれませんね。

くろねこ
別窓で開きたいときは、target=""の部分に書き足します。
target=”_blank”とすると別窓で開くよ
ちろ

 

注意点

×「”target=”_blank”」

○「” target=”_blank”」

『”』と『 target』の間には半角スペースを入れます。削除してしまうと別窓で開かなくなるので、注意してくださいね。

 

ボタンの色を変える方法

文字色

color="#"

背景色

bgcolor="#"

囲い線の色

bordercolor="#"

 



きらりと光るボタンマニュアル記載ヶ所

公式のマニュアルのどこに書いてあるか見つけられなかったがために四苦八苦したわけですが、記載ヵ所見つけました。

投稿、固定ページの「ボタンについて」というところです。不明な場合は、検索で「ボタンについて」と入力して検索かけてみてください。

 

クイックタグを利用して簡単に

因みに、WING公式マニュアルで、無料プラグイン「AddQuicktag」を使用してすぐ使える「データ」が配布されています。

 

こんな感じのボタンが簡単に入力できます。

ありがたやー!

 

WING(Affinger5)きらりと光るボタンまとめ

結局、WINGを導入後、どこから「きらりと光るボタン」を使うのかが分からなかったがために時間がかかってしまいました。

まぁマニュアル読めという話だったのですが、機能が充実している分自分が知りたいことを探すのもちょっと大変でした。

きらりと光るボタンの使い方については、WING公式マニュアルページで「ボタンについて」で検索です!

 

【WING(AFFINGER5)】スライドショーにそれぞれリンクを設定する方法

この度、当サイトのトップページにスライドショーを挿入し、それぞれの画像に別々のリンクを設定してみたので、そのやり方をまとめておきます。 「MetaSlider」というプラグインを使ってスライドショーを ...

続きを見る

WordPressのメニューを階層構造(ドロップダウン・入れ子)にする方法

WordPressのメニューを階層表示(ドロップダウン、入れ子)にする方法をご紹介します。やってみるとCSS編集も必要なく、実に簡単なのですが…方法にたどり着くのに苦労しました。メニューの表示がすっき ...

続きを見る

-WING, WordPress, ブログ運営
-, ,

Copyright© もちろんウェブ , 2018 All Rights Reserved.