どうも、トレンディです。
ブログ記事の投稿は順調ですか？
はじめはタグの使い方も文字色の使い方もいまいちわからなくて苦労している方も多いのでないかと思います。
そこで
今回はこんな悩みについて、知見や経験をもとに解説していきます。
本記事の概要
- 【超基礎】アフィンガー6の投稿ページ画面の使い方
- 【超基礎】よくある文字装飾
- 【超基礎】リスト・ボックスなど便利機能の紹介
AFFINGER５では、装飾パーツの数も多い為、よく使う装飾だけに絞り込みました。その理由は、まとめで解説していきます。
それでは、解説していきます。
【超基礎】アフィンガー6の投稿ページ画面の使い方
ブログ記事を作成するときに使うのが「投稿画面（エディタ）」です。
この投稿画面には
- ビジュアルモード：視覚的表示（見た目で操作可能）
- テキストモード：HTMLタグ表示
の2種類のモードがあります。
使う目的によって、編集モードの切替をします。
ふだんは、初心者にもやさしい「ビジュアルモード」で記事を書いていきましょう。
特にWordPressテーマ「アフィンガー6」では、「ビジュアルモード」でサクサク快適に文章を装飾したり見た目をデザインすることが可能です。
ビジュアルモードの操作パネルはこちらの部分です。
【超基礎】よく使う文字装飾デザイン
それでは「よく使う文字装飾」から解説していきます。
- 見出し
- 強調タグ
- 太字
- 細マーカー
- アニメーション文字
- アイコン
- リスト
- センター寄せ（センタリング）
- 引用
- リンク
①見出し
見出しタグ（ｈタグ）は、ページの構成や構造をつくるのにとても重要な要素です。
見出しの付け方は、
入力した文字全体を選択して
段落＞見出し2～見出し６
の中から選んでクリックします。
SEO検索エンジンの評価にも関わるので早めに慣れておきたい装飾です。
ポイント
応用として、複数の見出し用文章を選択した状態で、段落から見出し設定をすると1度の操作で複数の見出しを作ることができます。
たとえば、見出し用の文だけ先に入力▶5行あれば5行すべてを選択▶見出し3（h3）タグを設定する
②強調タグ
強調タグは、「太字の装飾」と見た目は似ていますが、HTMLのタグに違いがあります。
SEO上でも重要で、1記事に２、３個が適切ともいわれてます。使いすぎるとSEO評価が悪くなる可能性もあります。
③太字
太字付け方は、
入力した文字全体を選択して
スタイル＞テキスト＞太字
の順にクリックします。
④細マーカー
細マーカーの付け方は、
入力した文字全体を選択して
スタイル＞マーカー＞黄マーカーなど
の順にクリックします。
⑤アニメーション文字
アニメーション文字の付け方は、
入力した文字全体を選択して
スタイル＞アニメーション＞動きを選ぶ
の順にクリックします。
【表示例】
ぶるぶる！
⑥アイコン
アイコンの付け方は、
入力した文字の先頭を選択して
スタイル＞テキスト＞参考
の順にクリックします。
【表示例】
アイコン
⑦リスト
リストの付け方は、
入力した文字全体を選択して
スタイル＞リスト＞リストの種類
の順にクリックします。
【表示例】
- りんご
- みかん
- パイナップル
⑧センター寄せ（センタリング）
センター寄せの付け方は、
入力した文字全体を選択して
スタイル＞レイアウト＞センター寄せ
※アイコンボタンからでも操作可能
の順にクリックします。
⑨引用
引用の付け方は、
入力した文字全体を選択して
引用アイコン
をクリックします。
⑩リンク
リンクの付け方は、
入力した文字全体を選択して
リンクアイコン
をクリックします。
入力欄にURLを入力してエンターキーを押します。
【超基礎】よく使う便利機能
つづいて「よく使う便利機能」を解説していきます。
どれも操作方法を覚えると「伝わりやすい文章」になるので重宝します。
- テキストパーツ
- ステップ
- ボックスデザイン
- ボックスリスト
- カスタムボタン
- 会話吹き出し
- ランキング
- レイアウト
- タブ
- タイムライン
- スター
- ブログカード
①テキストパーツ
テキストパーツの付け方は、
入力した文字全体を選択して
タグ＞テキストパーツ＞種類
の順にクリックします。
【表示例】
テスト表示
テスト表示
ココがポイント
テスト表示
テスト表示
テスト表示
②ステップ
ステップの付け方は、
入力した文字全体を選択して
タグ＞テキストパーツ＞ステップ
の順にクリックします。
step_no="ここに番号入力"
【表示例】
step
1テスト表示
step
2テスト表示
step
3テスト表示
③ボックスデザイン
ボックスデザインの付け方は、
入力した文字全体を選択して
タグ＞ボックスデザイン＞種類＞種類
の順にクリックします。
【表示例】
参考
テスト表示
④ボックスリスト
ボックスリストの付け方は、
タグ＞ボックスデザイン＞マイボックス（＋CSS）＞種類
の順にクリックします。
【表示例】
テスト表示
簡単な流れ
- テキスト
- テキスト
- テキスト
⑤カスタムボタン
カスタムボタンの付け方は、
タグ＞カスタムボタン＞種類
の順にクリックします。
【表示例】
テスト表示
⑥会話吹き出し
会話ふきだしの付け方は、
入力した文字全体を選択して
タグ＞会話ふきだし＞会話番号
の順にクリックします。
【表示例】
⑦ランキング
ステップの付け方は、
入力した文字全体を選択して
タグ＞ランキング＞ランキング順位
の順にクリックします。
【表示例】
テスト表示
⑧レイアウト
レイアウトの付け方は、
タグ＞レイアウト＞種類＞種類
の順にクリックします。
【表示例】
⑨タブ
タブの付け方は、
タグ＞レイアウト＞タブ＞種類＞種類
※アイコンボタンからでも操作可能
の順にクリックします。
【表示例】
タブ1のコンテンツ
タブ2のコンテンツ
タブ3のコンテンツ
⑩タイムライン
タイムラインの付け方は、
タグ＞レイアウト＞タイムライン＞種類
の順にクリックします。
【表示例】
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
ここに見出しテキスト
ここにコンテンツ
⑪スター
スターの付け方は、
タグ＞その他のパーツ＞スター＞種類
の順にクリックします。
【表示例】
評価：
評価：
評価：
評価：
評価：
⑫ブログカード
ブログカードの付け方は、
入力した文字全体を選択して
タグ＞記事一覧/カード＞ブログカード＞種類
※アイコンボタンからでも操作可能
の順にクリックします。
id="記事ID" label="参考"
【表示例】
-
-
AFFINGER6の評判と使った感想、メリット・デメリットをわかりやすく解説【インストール手順付】
続きを見る
装飾デザインのカラー設定
装飾デザインのカラーを変更したい場合は、
WordPress管理画面＞外観＞カスタマイズ＞[＋]オプションカラー＞リスト（数字・チェック/ボックスタイプ）
の順にクリックします。
プレビュー画面を見ながらあなたの好みのカラー設定をしていきましょう。
まとめ
文字装飾やボックスデザインは、記事を読みやすくする効果があります。
中には、直接「SEOに影響」するものあるので何度も使って慣れていきましょう。
今回、紹介した使い方は、固定ページの操作も投稿ページと同じです。
AFFINGER５では、それぞれのパーツを組み合わせることによって、いろんなパターンの装飾が可能です。
ただ大事なことがあります。
ポイント
デザインにこだわり過ぎたり、AFFINGER５の機能すべてを使いこなそうとすると膨大な時間を費やすことになります。CSSなど専門知識がないと理想のデザインにならないパーツもあります。目的によりますが収益化を目指すなら「読者にとって有益となる記事」をつくることを心掛けていきましょう。そうでないと自己満足でサイトが伸び悩み原因となりかねません。あ
はじめのうちは、自分が良く使うものを整理して操作方法に慣れていくのがおすすめ。
慣れてきたら他の機能を使ってみたりできることを増やしていきましょう！
今回は以上です。
-
-
【超初心者向け】画像付きアフィンガー5のカスタマイズデザイン編 トップページの作り方【WordPress】
続きを見る
