AFFINGER

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

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

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

ところで、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(AFFINGER5)で使える装飾文字やボックス

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

追記

ver20180417でクイックタグを使わずとも、ビジュアルエディタのタグからそのほとんどが利用できるようになりました。

 

 

タグ⇒デザイン

 

このあたりをポチポチ使うと、以下のようなボックスや飾り文字になります。

 

クリップメモ

ミニふきだし

まるもじ(小)

まるもじ(大)

マイボックス

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

見出し付きフリーボックス

メモボックス

ここに本文を記述

+ クリックして下さい(スライドボックス)

スライドボックス

ラベル

 

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

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

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

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

 

AFFINGER5サイドバーのカスタマイズについて:自サイトのカスタマイズを公開しつつ説明

当サイトのサイドバーカスタマイズについてお問合せをいただいたので、AFFINGER5でどのように設定しているか、可能な限り詳細にご紹介していきます。 子テーマはJETを使用しておりますが、サイドバー部 ...

MetaSliderを使ってWordPressでスライドショーを作る方法

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

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

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

-AFFINGER
-, ,

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