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

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

機能	備考	micata2	AFFINGER4
codeNEW	こんな＜div class="hoge”>風に	◯	◯
p	Pタグで囲みます	◯	◯
太字	サンプル	◯	◯
赤太字	サンプル	◯	◯
大文字	サンプル	◯	◯
小文字NEW	サンプル	◯	◯
ドット線NEW	サンプル	◯	◯
黄マーカーNEW	サンプル	◯	◯
赤マーカーNEW	サンプル	◯	◯
参考	サンプル	◯	◯
写真に枠線NEW		◯	◯
記事タイトルデザイン		◯	◯
アドセンス		◯	◯
オリジナルSCNEW		◯	◯
目次（TOC+)NEW		◯	◯
YouTubeIDNEW	YouTubeを画像で表示することで重くなることを防ぐショートコードを挿入	◯	◯
固定ページに子ページリンク	子ページの一覧を表示	◯	◯
公式ボタン（AFFINGER4のみ）	サンプル	◯	◯
詳細ボタン（AFFINGER4のみ）	サンプル	◯	◯
グレーボックス	サンプル	◯	◯
黄色ボックス	サンプル	◯	◯
薄赤ボックス	サンプル	◯	◯
引用風	サンプル	◯	◯
olタグを囲む数字ボックスNEW	色は変更可能です 色は変更可能です 色は変更可能です	◯	◯
ulタグを囲むチェックボックスNEW	色は変更可能です 色は変更可能です 色は変更可能です	◯	◯
table横スクロール修正	横幅の長いテーブルをスクロール表示します	◯	◯
装飾なしテーブル	デフォルトでCSSで装飾されたテーブルデザインを解除します（カスタマイザーでも変更可能）	◯	◯
スマホに表示しないボックス	スマートフォンに表示しないエリアの作成	◯	◯
PCに表示しないボックス	PCに表示しないエリアの作成	◯	◯
PCのみ左右%ボックス	PC閲覧時に左右2列で表示するレイアウトボックス（30～70%）	◯	◯
全サイズ左右50%ボックスNEW	PCとスマホどちらでも50%の2列で表示するボックス	◯	◯
ランキング大見出し	ランキングCSS管理の「大見出し」と同じデザイン	-	◯
ランキングエリア背景	ランキングCSS管理の「背景」と同じデザイン	-	◯
イベント	イベントトラッキングを挿入	◯	◯
nofollow	nofollowを挿入	◯	◯
はてなマーク	アイコンの色はカスタマイザーで変更できます	◯	◯
注意マーク	アイコンの色はカスタマイザーで変更できます	◯	◯
チェックマーク	アイコンの色はカスタマイザーで変更できます	◯	◯
メモマーク	アイコンの色はカスタマイザーで変更できます	◯	◯

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

使い方

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

赤い太字にしてみます。

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

リストの作成

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

リストになりました。

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

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

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

※カラーは変更可能

マークの挿入

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

 

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

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

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

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

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

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

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

ショートコード

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