アフィンガー5(WING)

アフィンガー5【装飾使い方一覧&カスタマイズ】保存版

投稿日:2018年12月6日 更新日:

アフィンガー5はボタンひとつで記事の装飾ができます

アフィンガー5文字装飾のメリット

  • 記事にメリハリがつき読みやすい
  • 簡単に装飾できるから記事を集中して書ける
  • 読みやすい&わかりやすい→ブックマークやSNSシェアしてくれる
  • シェアされるとサイトへの入り口が増える
  • このBOXもボタンひとつ!

CSSが分からなくてもOK!モーマンタイ!

覚えるとすごく楽!
アルパカ
フクロウ
読みやすい・読んでくれる記事に仕上がるほー

使い方をまとめた記事装飾一覧、ご活用ください

目次が長いので不要な方は[非表示]をクリックするとたためます

Sponsored Link

この記事の目次

【はじめに】プラグイン「TinyMCE Advanced」を導入

TinyMCE Advancedはビジュアルエディタ拡張プラグインです

記事をビジュアルエディタで書くことが多いと思います

アルパカはいつもビジュアルエディタです!
アルパカ

投稿される記事の見栄えに近い形で記事が書けるのがいいですよね

導入すると

便利なボタンを増やせる

使いやすく配置を変えられる

 

インストール&有効化

早速導入してみましょう(導入済みの方は飛ばしてください)

1.プラグイン

2.新規追加

3.検索窓に「TinyMCE Advanced」

4.インストール→有効化

TinyMCE Advanced

 

設定

1.設定

2.TinyMCE Advanced

TinyMCE Advanced設定

 

1.エディターメニューを有効化するにチェック(デフォルトで入ってます)

2.アフィンガー5で「スタイル」を使うために必ず表示させます

後はお好みで表示・非表示、配置を決めてください

ツールバー切り替えは、一段にしたり二段にしたりできるものです

一番上に入れないと機能しません

設定

 

アルパカの設定

1.高度なオプションの「段落タグの保持」にチェック

高度なオプション

最後に「変更を保存」をクリックします

変更を保存

 

アフィンガー5【スタイル】使い方一覧

アフィンガー5【スタイル】ボタンの使い方を一覧にしました

アフィンガー5スタイルボタン

 

【スタイル】>テキスト

【スタイル】ボタンの「テキスト」の使い方

文字を書く→反転させる→装飾を選んでクリック

テキストの使い方例

 

 

 

スタイルボタンテキスト

赤字

文字を赤い文字にできます

太字

文字を太くできます

赤字(太字)

一発で赤い太字dにできます

大文字

文字を大きくできます

小文字

文字を小さくできます

ドット線

文字の下にドット線を引きます

参照リンク

あふぃたす

参照リンクの前にリンクマークを設置できます

参考

参考文字を反転しクリック

長い文章もOK------------------------------------

必須

必須読んで欲しい部分のワンポイントや必須項目に

使い方は「参照」と一緒です

打ち消し

古い記事で更新するときに使えます

例)

●●です

--20●●/12追記---

現在●●に変更されています

code

<span class="st-hisu">必須</span>

HTMLコードなどをそのまま表示できます

code風

普通に入力

普通に入力(code風適用)

NotoSans(フォント)

Google FontsのNotoSansを適用できます

ありがとう→ありがとう(NotoSans適用)

RoundedM+1c(フォント)

Google FontsのRoundedM+1cを適用できます

ありがとう→ありがとう(RoundedM+1c適用 )

 

【スタイル】>アニメーション

【スタイル】ボタンの「アニメーション」の使い方

文字や画像にアニメーションを加えることができます

アフィンガー5アニメーション

45°揺れ

アルパカ会話

マウスホバー時のみ45°揺れさせることもできます

ショートコード内(テキストモードで見れます)に「-hover」を追加

faa-wrench animated → faa-wrench animated-hover

アルパカ会話

ベル揺れ

アルパカ会話

←BOX内のアイコンにアニメーションを加えることもできます

横揺れ

アルパカ会話

縦揺れ

アルパカ会話

点滅

アルパカ会話

バウンド

アルパカ会話

回転

アルパカ会話

ふわふわ

アルパカ会話

大小

アルパカ会話

シェイク

アルパカ会話

シェイク(強)

アルパカ会話

拡大(ゆれ)

アルパカ会話

過ぎる

アルパカ会話

戻る

アルパカ会話

バースト

アルパカ会話

落ちる

アルパカ会話

 

【スタイル】>アイコン

【スタイル】ボタンの「アイコン」の使い方

 

アフィンガースタイルアイコン使い方

アイコンの色(全て)を変えることもできます

外観>カスタマイズ>オプションカラー>記事内のWebアイコン

アイコンの色変更

 

はてな

はてな

注意

注意

人物

人物

チェック

チェック

メモ

メモ

王冠

王冠

外観>カスタマイズは全て色が変更になりますが、ひとつづつ色も変えることも可能です

<span class="oukanmark on-color">王冠</span>

外観>カスタマイズ>追加CSS

.no1 {color:#d3cb1d}
.no2 {color:#9E9E9E}
.no3 {color:#8D6E63}

HTML(記事テキストエディタ)

<span class="oukanmark no1">一位</span>

<span class="oukanmark no2">一位</span>

<span class="oukanmark no3">一位</span>

  • 一位
  • 二位
  • 三位

初心者マーク

初心者マーク

 

【スタイル】>見出し

【スタイル】ボタンの「見出し」の使い方

アフィンガー5スタイル見出し使い方

 

カウント

①カウントをつけたい行をまとめて反転させます

②スタイル

③見出し

④カウントをクリック

アフィンガーカウントの使い方

いちばん

にばん

さんばん

記事タイトル

記事タイトル

h2風

h2に設定したデザインの見出しそっくりに再現し挿入できます

実際のh2タグではありません

h2風

h3風

h3に設定したデザインの見出しそっくりに再現し挿入できます

実際のh3タグではありません

h3風

h4風

h4に設定したデザインの見出しそっくりに再現し挿入できます

実際のh4タグではありません

h4風

h5風

h45設定したデザインの見出しそっくりに再現し挿入できます

実際のh5タグではありません

h5風

まとめ

まとめタグが挿入されます

まとめ風ではないので挿入すると目次に反映されます

(目次に反映されるため下記のまとめは画像です)

まとめタグ

 

 

 

【スタイル】>ランキング(管理CCS対応)

【スタイル】ボタンの「ランキング」の使い方

アフィンガー5ランキング使い方

アフィンガー5には「ランキング管理」があり、ランキングに見出しや説明文を設定したりできます

今回はスタイルのボタンで簡単に挿入する方法のみご紹介します

ランキングを挿入すると目次に反映されてしまいます

下記は画像で表示しておりますが、テキスト表示し目次に表示したくない場合はこちらの記事を参考にしてください

ランキング
アフィンガー5ランキング
アフィンガー5【ランキング】目次に出ないようカスタマイズ

アフィンガー5にはランキング見出しが簡単に設置できるボタンがあります! ポチっと押して文字を入力&★必要ならつけるだけ♪(ショートコードタイプ) とっても便利なのですが・・・ toc+で目次を ...

続きを見る

ランキング1位(基本)

ランキング1位

 

ランキング2位

ランキング2位

 

 

ランキング3位

ランキング3位

 

 

ランキング4位以下

ランキング4位

 

 

 

【スタイル】>マーカー

【スタイル】ボタンの「マーカー」の使い方

アフィンガーマーカー使い方

自動的に太字になります

黄マーカー・黄マーカー(細)

黄マーカー

黄マーカー(細)

赤マーカー・赤マーカー(細)

赤マーカー

赤マーカー(細)

青マーカー・青マーカー(細)

青マーカー

青マーカー(細)

鼠マーカー・鼠マーカー(細)

鼠マーカー

鼠マーカー(細)

蛍光色マーカーカスタマイズ

外観>カスタマイズ>追加CSS

.ygmarker,
.ygmarker-s,
.ormarker,
.ormarker-s
{
font-weight:bold;
}
.ygmarker {
background:#66FF33;
}
.ygmarker-s {
background:linear-gradient(transparent 70%,#66FF33 0%);
}
.ormarker {
background:#FF9900;
}
.ormarker-s {
background:linear-gradient(transparent 70%,#FF9900 0%);
}

HTML(記事テキストエディタ)

<p><span class="ygmarker">黄緑マーカー</span></p>
<p><span class="ygmarker-s">黄緑マーカー(細)</span></p>
<p><span class="ormarker">オレンジマーカー</span></p>
<p><span class="ormarker-s">オレンジマーカー(細)</span></p>

黄緑マーカー

黄緑マーカー(細)

オレンジマーカー

オレンジマーカー(細)

 

【スタイル】>写真

【スタイル】ボタンの「写真」の使い方

アフィンガー5写真カスタマイズ使い方

画像や写真を素敵に装飾できます

【元画像】

 元画像

枠線

境界があいまいな画像に便利です

この画像だと必要ないですね

枠線

背景が白い画像を使用するとこうなります

背景白い画像に枠線

キャプションをつけれます

枠線

エックスサーバー

ポラロイド風

ポラロイド

キャプションをつけれます

リンク付キャプションも可能

ワイド

幅いっぱいワイドに表示されます

ワイド

 

【スタイル】>ボックス

【スタイル】ボタンの「ボックス」の使い方

アフィンガー5スタイルボックス使い方

黄色薄赤グレー引用風チェックボックス(番号なしリスト)チェックリスト(番号なしリスト)ナンバリング(番号付きリスト)

黄色

黄色ボックス

薄赤

薄赤ボックス

グレー

グレーボックス

引用風

引用風ボックス

チェックボックス(番号なしリスト)

①チェックボックスをつけたい複数行を反転させる

②スタイル

③ボックス

④チェックボックス(番号なしリスト)をクリック

⑤最後に「番号なしリスト」ボタン(ulタグ)をクリックします

先にスタイルを適用

最後にOLボタン

  • だみー
  • だみー
  • だみー

先にスタイル適用→olボタンと覚えると良いですね

チェックリスト(番号なしリスト)

  • だみー
  • だみー
  • だみー

ナンバリング(番号付きリスト)

  1. だみー
  2. だみー
  3. だみー

 

【スタイル】>レイアウト

【スタイル】ボタンの「レイアウト」の使い方

 

アフィンガー5レイアウト使い方

 

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します

回り込み解除しない場合は画像横に文章が表示されます

回り込み解除しました

センター寄せ

センター寄せ(スマホのみ)

PC表示

スマホではセンター表示になります

【スマホでの表示】

スマホのみセンター

下に余白

下に余白(10px)ができます

カードスタイル

①記事IDを記入し反転させる

②「カード」ボタンクリック

カードスタイル使い方

③反転させて ④スタイル>⑤レイアウト>⑥カードスタイル をクリックする

カードスタイル使い方2

縦型のカード表示になります

 

2つ横並びにできます

カードスタイルB

PC、タブレット閲覧時のみ縦型表示になります

【PC、タブレットでの表示】

【スマホでの表示】

カードスタイルBスマホ表示

width100%リセット

max-width: initial; display: inline;max-widthをリセット

imgインラインボックス

display: inline;を指定

 

【スタイル】>テーブル

【スタイル】ボタンの「テーブル」の使い方

アフィンガー5テーブル使い方

横スクロール

スマホで横長のテーブルをスクロール表示できます

よこなが よこなが よこなが よこなが よこなが よこなが よこなが よこなが よこなが よこなが

【スマホでの表示】

テーブル横長スマホ

中央配置

文字が中央に 文字が中央に 文字が中央に 文字が中央に

装飾なし

装飾なし 装飾なし 装飾なし 装飾なし

 

まとめ

アフィンガー5の使い始めは戸惑うこともあると思います

出来ることが多いので項目も多いです

でも大丈夫

記事を書いてるうちにすぐ慣れます♪

【スタイル】でできること一覧を活用しながら素敵な記事を書いてください♪

長くなったので【タグ】でできることは次回!

 

ワードプレステーマ「AFFINGER5

AFFINGER5

crown

イチオシ「ムームードメイン」

もっと詳しく公式サイトへ

crown

イチオシ「エックスサーバー」

                               ↑ ↑ ↑

「記事へ」「公式サイトへ」ボタンはそれぞれクリックできます♪

エックスサーバーの記事はこちらをクリック エックスサーバー公式サイトはこちらをクリック

Sponsored Link
Sponsored Link

-アフィンガー5(WING)
-, , ,

Copyright© あふぃたす , 2020 All Rights Reserved.