テーマには予めクリックするだけで様々なデザインなどが挿入されるクイックタグボタンを豊富に用意してあります。
機能 | 備考 | 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%」のテキストをそれぞれ適時変更します。
画像を入れるとこんな感じです。
ショートコード
アドセンスやオリジナルショートコード(ウィジェット参照)も簡単に挿入できます。