目次
- このページでは人気ワードプレステンプレート、【アフィンガーAFFINGER4】の記事装飾の使い方や機能などを紹介します。
- 見出しのデザインも自由自在! こんな風にかんたんに変更可能です。
- 『クリップメモ』はこんな感じ
- 色々なアイコンマークもデフォルトで装備しています。
- ブログカードはこんな感じです。
- テーブル表の設定も結構色々いじれる
- アフィンガーには会話風吹き出しもプラグイン無しで実現
- 箇条書きに便利!チェックリスト・番号リストのタグの設定
- 『こんな方におすすめ』ボックス
- 『見出し付きフリーボックス』はこんなボックス
- 『マイボックス』はこんなボックス
- メモボックスはこんな感じ
- メモボックス2はこんな感じです。
- スライドボックスは【Q&Aに便利】
- 目次表示機能はこんな感じで設定できます。
- 星マークも簡単に挿入できます!
- ボタンも2種類装備しています
このページでは人気ワードプレステンプレート、【アフィンガーAFFINGER4】の記事装飾の使い方や機能などを紹介します。
アフィンガーはかなり多機能で、使い始めてもう2年ぐらい。
以前からかなり好きで、他のワードプレステンプレートも持っていますけど、なんだかんだでアフィンガーを使ってきました。
でも決して完璧という訳では無く、使っていくうちに不満も出てきて。
コレまでのバージョンでは正直、『イマイチ記事装飾機能が弱いな』という印象でした。
でもまあ、そこまで重要じゃないし、と思っていた所、今回のアップデート。
今回は私の不満が届いたのでしょうか、文字装飾がかなり進化して凄いことになっていてビックリです♪
こんな方におすすめ
- Affinger4の文字装飾機能の使い方や機能などを知りたい人
- アフィンガーの文字装飾の種類を知りたい人
- Affingerを使ってみたいので情報集めをしている人
- AFFINGER4のカスタマイズのバリエーションを知りたい人
発売してからずっとコマメにアップデートを繰り返してきた【アフィンガー】は、2018年に入ってから更に強力にステップアップしてくれました!
今までより更に簡単に、魅力的な装飾が出来る様になってまた惚れ直した感じです♪
このページでは新しくなったアフィンガーの装飾とその使い方を紹介したいと思います。
必須TinyMCE Advancedをインストールしておこう
Affinger4の文字装飾機能を楽に使える様に無料プラグイン【TinyMCE Advanced】を事前に導入しておきましょう!
アフィンガーの記事装飾が簡単で使いやすい理由
参考 記事の装飾を選ぶには
アフィンガーでは基本設定が済んでいればあとは投稿画面の【スタイル】又は【タグ】部分から全ての装飾が選べる様になっています。
見出しは投稿画面左寄りの【段落】のボックスから選びます。
他社製のワードプレステンプレートでは、ショートコードを記入して行くタイプの物もありますが、アフィンガーはその必要も無いので記事作成がダントツ早く便利なのがポイントです。
見出しのデザインも自由自在! こんな風にかんたんに変更可能です。
アフィンガーの各見出しは、H2からH5まで自由でデザイン変更可能です。
見出しのデザインは『アフィンガー AFFINGER4』のカスタマイズ画面から設定する様になっています。
このサイトではテーマカラーに合わせて紫系で揃えてみましたが、もちろんそれぞれ別々の色にする事も可能です。
⇩⇩⇩⇩⇩⇩⇩⇩
『クリップメモ』はこんな感じ
アフィンガーのクリップメモ】はデフォルトではかなり地味な見た目です。
ちょっと地味すぎるかも...
⇩⇩⇩⇩⇩⇩⇩⇩
クリップメモ デフォルトではこんな感じ
⇧⇧⇧⇧⇧⇧⇧⇧
色々なアイコンマークもデフォルトで装備しています。
よく使うマークはデフォルトで装備されているのがポイントです。
⇩⇩⇩⇩ 好みでそれぞれ別々の色に設定可能です。(このサイトでは全て同じ色で設定しました)
ハテナマーク
注意マーク
人物マーク
チェックマーク
メモマーク
ブログカードはこんな感じです。
アフィンガー『AFFINGER4』のブログカードは【カスタマイズ画面】で枠の色、枠線の太さが変更可能になっています。
このブログでは、テーマカラーとは対照的に、目立つ色に変更して太い枠線に設定してみました。
ブログカードを使用するには
ブログカードを使用するには事前に『AFFINGER4管理画面』⇒『投稿固定記事設定』⇒『投稿一覧(管理画面)にサムネイル・ID・文字数を表示』にチェックを入れておきます。
ブログカードは投稿画面の『ブログカード』ボタンをクリックで記事に挿入します。
ブログカードを記事に挿入する場合は、『記事IDを記事内に貼付け』して、IDを選択状態にしてから『ブログカードボタン』をクリックします。
ブログカードの見た目設定は【外観⇒カスタマイズ】から設定できます。
⇩⇩⇩⇩⇩⇩⇩⇩
-
Font Awesome 使い方は実は簡単>アフィンガーでFont Awesomeを使ってみる
今回紹介する、便利アイコンサイト【font awesome】(フォントオーサム)では、無料で使えるベクタースタイルのイラストアイコンが提供されています。 ここではワードプレスの人気テーマ『アフィンガー ...
テーブル表の設定も結構色々いじれる
商品の情報などを上手にまとめる際に便利なのがテーブル表です。
アフィンガーAFFINGER4では簡単に枠線の色や見出しの背景色など設定できるので、サイトのテーマカラーに合わせたり、逆に目立つ様にしたりする事も出来ます。
AFFINGER4の場合、テーブル表のデザインはカスタマイズ画面から色々な設定が出来る様になっています。
- 枠線の色
- 偶数行の色/奇数行の色
- 縦一列目の色/横一列目の色
- 縦一列目の背景色/横一列目の背景色
- 縦一列目を太字にする/横一列目を太字にする
⇩⇩⇩⇩⇩⇩⇩⇩
これがあるとしっかり見出し感が出しやすいです。
アフィンガーには会話風吹き出しもプラグイン無しで実現
会話風の吹き出しもプラグインを使わずに可能になっています。
これはかなり気に入っている機能です♪
このブログでは4つの画像アイコンを設定していますが、最大8個のアイコンを使って吹き出しを設定する事が出来ます。
背景色は、カスタマイズ画面からそれぞれ好みの色に設定出来ます。
⇩⇩⇩⇩⇩⇩⇩⇩
でも吹き出し背景色は『カスタマイズ』から設定するので注意です。
箇条書きに便利!チェックリスト・番号リストのタグの設定
アフィンガーAFFINGER4では箇条書きの時に便利な【チェックリストタイプ】と【番号リストタイプ】のデザイン設定が出来る様になっています。
カスタマイズから設定できる箇所は以下の通りです。
- チェックマーク/番号の色
- 枠線の色
- 背景色
⇩⇩⇩⇩⇩⇩⇩⇩
チェックリスト
- こんにちは
- こんにちは
- こんにちは
番号リスト
- こんにちは
- こんにちは
- こんにちは
『こんな方におすすめ』ボックス
個人的には【こんな方におすすめボックス】はかなりお気に入りで、記事最初の紹介部分などに設置すると目を引くのでかなり気に入っています。
カスタマイザーで色を変える事ができるので、サイトのテーマカラーなどに合わせやすいです。
色を変更出来る箇所は、枠線、背景色、タイトル文字。
タイトル文字下の線は非表示にする事も出来ます。
⇩⇩⇩⇩⇩⇩⇩⇩
『見出し付きフリーボックス』はこんなボックス
見出し付きフリーボックスは、その名の通り見出しが付いたボックスです。
カスタマイザーで背景色や見出し色を変更でき、見出し部分にアイコンなどを挿入する事も出来ます。
⇩⇩⇩⇩⇩⇩⇩⇩
『マイボックス』はこんなボックス
マイボックスはカスタマイザで設定したチェックアイコンがデフォルトで設定されています。
枠線の色、アイコンの種類と色、背景色を個別に設定する事ができます。
⇩⇩⇩⇩⇩⇩⇩⇩
マイボックス
マイボックスのデフォルトデザインはこんな感じです>
いくつかバリエーションを作ってみました。
⇩⇩⇩⇩⇩⇩⇩⇩
ポイント
ボックス内の文字は通常の記事内の文字色と同色です。この様に表示されます。
ポイント
ボックス内の文字は通常の記事内の文字色と同色です。この様に表示されます。
ポイント
ボックス内の文字は通常の記事内の文字色と同色です。この様に表示されます。
メモボックスはこんな感じ
メモボックスはこんな感じです。
カスタマイズ画面で枠線と文字色を変更できます。
⇩⇩⇩⇩⇩⇩⇩⇩
メモ
枠線と文字色のみ変更可能です。
メモボックス2はこんな感じです。
アフィンガー4には【メモボックス2】というボックスもあります。
ボックス内の文字は通常のフォントに比べて小さく表示されます。
また、このボックスでは見出し部分のアイコンが変更出来ません。
⇩⇩⇩⇩⇩⇩⇩⇩
メモボックス2
ここに記載した文章は通常のフォントよりも小さく表示されます。
スライドボックスは【Q&Aに便利】
スライドボックスは「Q&A」形式の質問が簡単に作れます。
カスタマイズ画面で色を設定する事が出来ます。
この機能が始めから付いているワードプレステンプレートは中々無いので、かなり気に入っています。
⇩⇩⇩⇩⇩⇩⇩⇩
テーマカラーに合わせて色いろ試してみて下さい。
目次表示機能はこんな感じで設定できます。
アフィンガー4では『Table of contents』といいう無料プラグインを導入する事でオリジナルデザインを使える様になっています。
このサイトでは紫で統一したイメージにしました。(無駄な主張が無い方が良いと思ったので。)
好みで好きな色にしても面白いと思います。
変更可能箇所は以下の通りです。
- 目次色
- 第1リンク文字色
- 第2リンク以降の文字色
- 下線と第3リストアイコン
- ボーダー色(枠線色)
- 背景色
⇩⇩⇩⇩⇩⇩⇩⇩
ワードプレスの目次プラグイン『Table of Contents Plus』のインストール方法、設定方法を紹介しています。
-
【ワードプレス プラグイン】 目次を【Table Of Contents Plus】で設定してみた!カンタンな使い方>
【ワードプレスプラグイン】目次プラグインの定番【Table of contents Plus】のインストールから設定方法までを紹介します。 ワードプレスで作ったページのトップによく見かける【目次】を表 ...
星マークも簡単に挿入できます!
アフィンガー4では☆マークを簡単に挿入できる様になっています。
商品の評価などにも使いやすいと思います
☆は最大五個までです。
使い方も簡単で、投稿画面の【タグ】をクリックし、一番下から【スター】を選択します。
投稿画面内ではデフォルトで『star5』というタグが表示されますが、ここの数字部分を変えると☆の数を変更する事が出来ます。
⇩⇩⇩⇩⇩⇩⇩⇩
星5つ
星4つ
星3つ
星2つ
星1つ
ボタンも2種類装備しています
アフィンガーは簡単にボタンを設置する事ができます。
とりあえず『2種類のボタン』がすぐに使える様になっています。
ボタンAが赤いボタンで、ボタンBが青いボタンです。
それぞれリンクを付ける事も出来ます。
各ボタンは投稿画面のに『ボタンA』『ボタンB』と表示されている所をクリックする事で記事に挿入できます。
⇩⇩⇩⇩⇩⇩⇩⇩