WING(AFFINGER5及びSTINGER PRO2)のマニュアルはコチラです※パスワードは商品フォルダ内テキストを確認

AFFINGER4 micata3 STINGER PRO

便利なクイックタグについて

2016-08-18_21h40_09

テーマには予めクリックするだけで様々なデザインなどが挿入されるクイックタグボタンを豊富に用意してあります。

機能 備考 micata2 AFFINGER4
codeNEW こんな<div class="hoge”>風に
p Pタグで囲みます
太字 サンプル
赤太字 サンプル
大文字 サンプル
小文字NEW サンプル
ドット線NEW サンプル
黄マーカーNEW サンプル
赤マーカーNEW サンプル
参考 サンプル
写真に枠線NEW medium_2233632419-580x386
記事タイトルデザイン  
アドセンス  
オリジナルSCNEW  
目次(TOC+)NEW  
YouTubeIDNEW YouTubeを画像で表示することで重くなることを防ぐショートコードを挿入
固定ページに子ページリンク 子ページの一覧を表示
ボタンA(AFFINGER4のみ)
ボタンB(AFFINGER4のみ)
グレーボックス
サンプル
黄色ボックス
サンプル
薄赤ボックス
サンプル
引用風
サンプル
olタグを囲む数字ボックスNEW
  1. 色は変更可能です
  2. 色は変更可能です
  3. 色は変更可能です
ulタグを囲むチェックボックスNEW
  • 色は変更可能です
  • 色は変更可能です
  • 色は変更可能です
table横スクロール修正 横幅の長いテーブルをスクロール表示します
装飾なしテーブル デフォルトでCSSで装飾されたテーブルデザインを解除します(カスタマイザーでも変更可能)
スマホに表示しないボックス スマートフォンに表示しないエリアの作成
PCに表示しないボックス PCに表示しないエリアの作成
PCのみ左右%ボックス

medium_2233632419-580x386

robin-1084615_640

PC閲覧時に左右2列で表示するレイアウトボックス(30~70%)

全サイズ左右50%ボックスNEW

medium_2233632419-580x386

robin-1084615_640

PCとスマホどちらでも50%の2列で表示するボックス

ランキング大見出し ランキングCSS管理の「大見出し」と同じデザイン -
ランキングエリア背景 ランキングCSS管理の「背景」と同じデザイン -
イベント イベントトラッキングを挿入
nofollow nofollowを挿入
はてなマーク アイコンの色はカスタマイザーで変更できます
注意マーク アイコンの色はカスタマイザーで変更できます
チェックマーク アイコンの色はカスタマイザーで変更できます
メモマーク アイコンの色はカスタマイザーで変更できます

※「マークアイコン」など一部のスタイルはビジュアルエディタでは反映されません。

使い方

2016-08-18_21h49_01

基本的にはデザインをしたいテキストを選択状態にしてクイックボタンをクリックします。

2016-08-18_21h41_25

赤い太字にしてみます。

2016-08-18_21h41_54

スタイルが反映されました。

リストの作成

2016-08-18_21h42_16

リストにしたい文字を全て選択してリストボタンをクリック

2016-08-18_21h42_30

リストになりました。

さらにクイックタグでデザインを追加します。

2016-08-18_21h43_16

リストは選択しにくいので、こういう場合は一度「テキスト」モードにしてから選択します。テキストモードにも沢山のクイックタグがあります。

2016-08-18_21h43_41

デザインが反映されました。
表示ページは以下のようになります。

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです

※カラーは変更可能

メモ

クイックタグを多用する場合は大きいエリアから小さいエリアという順に設定していくのがコツです。

同じテキストに複数設定する場合は「テキストモード」で設定した方がタグが崩れることがなく安心です。

マークの挿入

2016-09-29_13h04_49

「はてな」「注意」「メモ」「チェック」マークを挿入します。

 2016-09-29_130107

挿入はブラウザ表示にてjQueryで挿入されます。エディタ画面には代わりに青い背景で反映が表示されます。

2016-09-29_130209

アイコンはカスタマイザーで着色可能です。

レイアウトボックスの挿入

予め用意された2列のレスポンシブレイアウトを挿入します。

2016-08-18_21h44_33

「タグ」のドロップダウンボックスから「全サイズ左右50%ボックス」を選択

2016-08-18_21h44_20

挿入されたボックスの「左側(右側)のコンテンツ50%」のテキストをそれぞれ適時変更します。

画像を入れるとこんな感じです。

shutterstock_238106908

shutterstock_259261364

ショートコード

アドセンスやオリジナルショートコード(ウィジェット参照)も簡単に挿入できます。

2016-08-18_21h44_57

ボタンの作成

ビジュアルエディタで「ボタンA」又は「ボタンB」をクリックするとボタンが挿入されます

①テキストを編集して②のアイコンをクリック

リンクURLを記入して②「矢印アイコン」をクリックすれば完了です。その下の歯車アイコンをクリックすると

リンクを新しいタブで開く設定が可能です(WordPressの仕様)

上手くできないときは?

タグが崩れると上手く作成できませんのでその場合は「HTMLモード」で挿入、編集する方が良いかもしれません。

ボタンカラーの変更

AFFINGER4の場合は「ランクCSS管理」よりカラー変更が可能です

ボタンA → アフィリエイトリンクボタン背景色
ボタンB →オリジナルリンク背景色

 

NEW大幅に進化した新バージョンWING(AFFINGER5 / STINGER PRO2)好評発売中!

ユーザー様の声

ユーザーの声をさらに見る

新バージョン「WING」を見る

ご利用バージョンやテーマにより設定方法やキャプチャ画像が異なる場合がございます

※テーマアップデートにより情報が一部異なる場合がございます

-AFFINGER4, micata3, STINGER PRO

Copyright© STINGER's MANUAL , 2020 All Rights Reserved Powered by AFFINGER5.