【動画付き】アフィンガーの投稿ページ画面の使い方【よく使う記事装飾デザイン一覧】

悩み

アフィンガーでブログ記事を書きたいけど、装飾デザインってどうやるの？

こんにちは、こんばんは、トレンディです。

ブログ記事の投稿は順調ですか？

WordPressの有料テーマ「アフィンガー」を導入したものの、はじめはタグの使い方も文字色の使い方も、いまいちわからなくて苦労している方も多いのでないかと思います。

今回はこんな悩みについて、知見や経験をもとに解説記事を書いていきます。

WordPressテーマ「アフィンガー」の投稿ページ画面の使い方を【動画付き】で解説。

【超基礎】ブログ記事の装飾方法・よく使う記事装飾デザインを厳選して紹介。WordPress初心者は必見です。

本記事の信頼性

• 職業：フリーランスブロガー・Webデザイナー
• 経歴：Web業界10年目・30代未経験で異業種への転職成功（広告代理店・通販会社経験）
• 実績：会社員時代に複数のSEOメディアを立ち上げ・運営(月間30万PV以上)・収益化

X(Twitter)：トレンディ

今ならブログを開設するのに必要なレンタルサーバー「エックスサーバー」が超オトクなキャンペーンを実施中です。

これからWordPressブログを開設する人は必見です。

＼キャンペーン中がオトク／

本記事を最後まで読んでいただくことで、ブログ記事の執筆を効率化できます。ぜひ今後のブログ活動に役立ててください！

「AFFINGER」の導入をまだ検討中の方は、下記の記事も参考にしてみてください。

それでは、解説していきます。

【超基礎】アフィンガー6の投稿ページ画面の使い方

本記事では、旧編集画面の「ビジュアルエディター」を前提に投稿画面の使い方を解説しています。

「Classic Editorプラグイン」をまだ導入していない方は、WordPressダッシュボード＞プラグイン＞新規追加から検索してインストール・有効化しておきましょう。

WordPressプラグインの導入手順は、下記の記事でくわしく解説しています。

Classic Editorプラグインの導入｜使いやすい旧編集画面切替え

Classic Editorプラグインを入れると、旧編集画面の「ビジュアルエディター」を使えるようになります。

ブロックエディターとビジュアルエディターの違い

デフォルトのブロックエディター (Gutenberg)編集画面

デフォルトのブロックエディター (Gutenberg)編集画面は、メニューの場所がわかりづらく、記事の文字数カウントが表示されない。

トレンディ

デフォルトのブロックエディター (Gutenberg) のままでもブログ記事は書けますが、はっきりいって使いづらいです。動きも若干もっさりして重い感じがします。

旧編集画面の「ビジュアルモード」の編集画面

旧編集画面の「ビジュアルモード」を使うと操作性が向上するだけでなく「記事の文字数」がカウント表示されたり、記事ごとの設定がしやすくなります。

インターネット上でWordPressの使い方を検索してみると、多くのブロガーは旧編集画面の「ビジュアルモード」を前提に解説していることがわかります。

「ビジュアルモード」を使ったほうが、ブログ記事の執筆や装飾を効率化できるからです。

旧編集画面の「ビジュアルエディター」を利用したい方は、Classic Editorプラグインを導入しましょう。

さらに「Advanced Editor Tools (previously TinyMCE Advanced)」プラグインを追加することで、ブログ記事の編集機能をさらに増やせます。

「Advanced Editor Tools (previously TinyMCE Advanced)」は、ブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) の機能を拡張することが可能です。

Advanced Editor Toolsの設定画面

上記の設定画面で自分に合ったアイコンを自由に配置できます。

Classic Editorはいつまで使えるのか？

Classic Editorは、2021年12月31日にサポートが終了する予定でしたが、最新の情報では、少なくとも2024年末まではサポートが継続されるようです。

WordPressを長く使っているユーザーには、ありがたいプラグインなのでサポートは残してほしいですね。

ビジュアルモードとテキストモードの違い

ブログ記事を作成するときに使うのが「投稿の編集画面（エディタ）」です。

この投稿画面には、下記の2種類のモードがあります。

使う目的によって、編集モードの切替をします。

ビジュアルモードの操作パネルはこちらの部分です。

ビジュアルエディタのメニュー画面

WordPressテーマ「アフィンガー6」では、「ビジュアルモード」を使うことで、サクサク快適に文章を装飾したり見た目をデザインすることが可能です。

【超基礎】よく使う文字装飾デザイン

それでは「よく使う文字装飾」から解説していきます。

①見出し

見出しタグ（ｈタグ）は、ページの構成や構造をつくるのにとても重要な要素です。

見出しの付け方は、

入力した文字全体を選択して

の中から選んでクリックします。

②強調タグ

強調タグ(strongタグ)は、「太字の装飾」と見た目は似ていますが、HTMLのタグに違いがあります。

強調タグは、次のショートカットからでも簡単にHTMLで装飾できます。

③太字

太字付け方は、

入力した文字全体を選択して

の順にクリックします。

④細マーカー

細マーカーの付け方は、

入力した文字全体を選択して

の順にクリックします。

⑤アニメーション文字

アニメーション文字の付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

ぶるぶる！

⑥アイコン

アイコンの付け方は、

入力した文字の先頭を選択して

の順にクリックします。

【表示例】

アイコン

⑦リスト

リストの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

⑧センター寄せ（センタリング）

センター寄せの付け方は、

入力した文字全体を選択して

の順にクリックします。

⑨引用

引用の付け方は、

入力した文字全体を選択して

をクリックします。

⑩リンク

リンクの付け方は、

入力した文字全体を選択して

をクリックします。

入力欄にURLを入力してエンターキーを押します。

【超基礎】よく使う便利機能

つづいて「よく使う便利機能」を解説していきます。

どれも操作方法を覚えると「伝わりやすい文章」になるので重宝します。

①テキストパーツ

テキストパーツの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

テスト表示ひょうじ

②ステップ

ステップの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

step
1テスト表示

step
2テスト表示

step
3テスト表示

③ボックスデザイン

ボックスデザインの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

④ボックスリスト

ボックスリストの付け方は、

の順にクリックします。

【表示例】

テスト表示

⑤カスタムボタン

カスタムボタンの付け方は、

の順にクリックします。

【表示例】

テスト表示

詳しくはコチラ

⑥会話吹き出し

会話ふきだしの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

トレンディ

テスト表示

⑦ランキング

ステップの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

⑧レイアウト

レイアウトの付け方は、

の順にクリックします。

【表示例】

⑨タブ

タブの付け方は、

の順にクリックします。

【表示例】

⑩タイムライン

タイムラインの付け方は、

の順にクリックします。

【表示例】

• ここに見出しテキスト

  ここにコンテンツ




• ここに見出しテキスト

  ここにコンテンツ




• ここに見出しテキスト

  ここにコンテンツ

⑪スター

スターの付け方は、

の順にクリックします。

【表示例】

評価：

評価：

評価：

評価：

評価：

⑫ブログカード

ブログカードの付け方は、

入力した文字全体を選択して

の順にクリックします。

【表示例】

装飾デザインのカラー設定

装飾デザインのカラーを変更したい場合は、

の順にクリックします。

プレビュー画面を見ながらあなたの好みのカラー設定をしていきましょう。

まとめ

文字装飾やボックスデザインは、記事を読みやすくする効果があります。

中には、直接「SEOに影響」するものあるので何度も使って慣れていきましょう。

AFFINGER５では、それぞれのパーツを組み合わせることによって、いろんなパターンの装飾が可能です。

ただ大事なことがあります。

はじめのうちは、自分が良く使うものを整理して操作方法に慣れていくのがおすすめ。

慣れてきたら他の機能を使ってみたりできることを増やしていきましょう！

今回は以上です。