アフィンガー6初心者向け使い方マニュアル【記事の書き方・投稿編】

ACTION（アフィンガー6）初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の書き方編です。

ACTIONはどのように記事を書いていけばいいの？各画面の役割は？というあたりを順を追って解説していきます。

特に

という方は参考になる部分があるかと思いますのでご覧ください！

 

 

 

 新旧エディタ（Gutenberg、Classic Editor）について

まず、大前提として、記事を書く編集画面についての説明をします。

編集画面は大別すると

の２種類。

現在、Wordpress編集画面の新仕様エディタ「Gutenberg（グーテンベルグ）」の配布が進んでいて、移行が取りざたされています。

ただ、新エディタの「Gutenberg」は現在進行形で頻繁に仕様のアップデート・変更が行われていて予期せぬバグが発生する可能性があります。

そもそも、「Classic Editor」はかなり完成された使いやすい編集画面で「Gutenberg」の配布が進んでいる中でも現行ユーザーの根強い要望が多い状況。

サポート期限も当初2021年末までということでしたが、正式に「2022年中はもちろん、必要なくなるまでのサポートを行います」とアナウンスされています。

なので、Gutenbergへ移行するにしても、もう少し様子を見てからの方が得策です。よって当サイトでは、Classic Editorでの使い方の説明をしています。

 

Classic Editorを使うには 

現状がClassic Editorを使えるようになっていない場合の対応手順を説明します。

 

step
1Classic Editorプラグインを有効化

「プラグイン」⇒「新規追加」で検索窓に「classic Editor」と入力してプラグインをインストール・有効化します。

 

step
2投稿からエディタ画面を呼び出す

左側サイドメニュー「投稿」⇒「新規追加」でエディタ画面を呼び出します。

 

step
3Classic Editorへ切替

右上のメニュー画面から「旧エディターに切替」をクリックします。

 

以上でClassic Editorが使えるようになります。

 

 タイトル・パーマリンクの設定

エディタの説明が終わったところで、ここからは実際の記事の書き方について説明をしていきます。

 

 タイトル設定

記事投稿画面の中でも一番上に出てくる箇所で、最初に設定するのがタイトル。ユーザビリティー・SEO的にすごく重要な部分になります。

どんなタイトルをつけるのがいいのか？というのは本題から逸れるので詳細は割愛しますが、最低限下記を意識するのが良いでしょう。

 

 

そして文字数は35字以内とすることがオススメです。

なぜか？というと、条件によっては多少前後することもありますが、検索エンジンで表示される最大の文字数が約35文字だから。

ちなみに

上記は全て1文字とカウントされます。

ACTIONではタイトルを入力すると、上記のカウント基準にて自動で何文字か？表示されるようになっているので便利ですよ。

文字数を調整しながら、タイトルを何回か入力・調整する・・というのをWINGではすることができます。

 

 パーマリンクの変更

最初は表示されてませんが、タイトルを入力すると、そのすぐ下にパーマリンクの設定画面がでてきます。パーマリンクというのは、その記事に割り当てられる個別のURLのこと。

日付や好きな文字列など、何をパーマリンクにするか？は「設定　⇒　パーマリンク設定」から変更することが可能。

ちなみにACTION公式マニュアルでは投稿名をパーマリンクにすることを推奨していて、そうしておくのが無難です。

上記のように設定後、タイトルを入力すると下記のように自動でパーマリンクが入力されますが、パーマリンクは記事と関連する英語の文字列に変更するのがオススメ。

 

記事を公開した後にパーマリンク変更をしてしまうと、それまでにせっかく高まっていたSEO評価がまた戻ってしまいます。なので最初に投稿する段階で決めてしまいましょう。

タイトルほどこだわる必要がある部分ではないので、上記の通り関連する文字列で簡潔なものに編集し、登録しておけばOKです。

 

 記事投稿画面の説明

次に、いよいよ記事本文の書き方について。

 記事の編集画面は２種類

ワードプレスClassic Editorには「ビジュアルエディタ」と「テキストエディタ」という２種類の記事編集画面があります。

それぞれのエディタを簡単に紹介します。

 ACTIONのビジュアルエディタ

実際サイトに表示される画面に近い形で、記事の編集ができるのがビジュアルエディタ。

記事の完成形をイメージしながら作業できるので、普段はビジュアルエディタを使った方が作業がしやすいです。

 

 ACTIONのテキストエディタ

一方、テキストエディタは「HTML言語」と呼ばれるWebページ作成のためのプログラミング言語を直接編集する画面です。

細かい調整をしたい時など、場合によってはこちらの方が作業がやりやすいこともありますが、HTML言語をある程度理解していないと難しい。テキストエディタは、どちらかというと上級者向けと言えるでしょう。

 

 初心者向けなのはビジュアルエディタ

ビジュアルエディタとテキストエディタを見比べるとわかりますように、直感的に操作できて使いやすいのはビジュアルエディタ。

特に初心者の場合、当面メインで使っていくのはビジュアルエディタになりますので、次のチャプターからは、ビジュアルエディタでの使い方をメインに説明をしていきます。

 

 エディタ画面のクイックタグ

 クイックタグとは

クイックタグはエディタの上部にあるショートカットキーのこと。押すと様々な装飾パーツを記事内に挿入することができます。

エディタにどのクイックタグを表示するか？は、プラグインを使えば編集することができます。慣れてくるとよく使うタグと使わないタグに分かれてきますので、自分がやりやすいようにエディタを編集してみましょう。

やり方は下記リンクにて説明していますので、参考にしてみてください。

 

【初心者向けおすすめプラグイン】アフィンガー5(WING)を使いこなす！

WING（アフィンガー５）は、操作の丁寧な解説がされた公式マニュアルが用意されています。 なので購入後も、マニュアルを見ながら設定・編集していけば充分に使うことが可能！ですが、ワードプレス初心者の方に ...

続きを見る

アフィンガー5(WING)エディタのデフォルトタグ消去・編集方法まとめ

WING（アフィンガー５）はすごく使いやすいWordpressテーマ！ ですが、ノートパソコンで作業してるとちょっと使いづらさを感じたことありませんか？それはもしかしたら、画面が小さくて記事の編集作業 ...

続きを見る

 

 よく使うクイックタグの役割

 

使用頻度が高くなると思われるクイックタグと、その役割の簡単な紹介が上図になります。上記のタグは先に紹介したプラグインで編集し、エディタ画面に入れておくのがオススメ。

 

【初心者向けおすすめプラグイン】アフィンガー5(WING)を使いこなす！

WING（アフィンガー５）は、操作の丁寧な解説がされた公式マニュアルが用意されています。 なので購入後も、マニュアルを見ながら設定・編集していけば充分に使うことが可能！ですが、ワードプレス初心者の方に ...

続きを見る

 

オレンジで囲ったのは文字装飾の時によく使うタグ。クリックして装飾パーツを選んで使っていくことになります。

・・なんですが、やりこんでいくとわかりますが、WINGは文字装飾パーツがとっても多いのでよく使うパーツが階層の深いところにあると、アクセスに時間がかかって使いづらいです。

 

 装飾パーツ類に素早くアクセスできるタグ

そんな時に役立つのが、図の中で赤字で囲ったショートカットタグ。

 

 

という、「プラグインで追加できるクイックタグ」です。

文字装飾関連のショートカットは全てこの２つにまとめ、登録して入れておくと記事作成の効率が上がるのでオススメです。

もし上記の追加は面倒で、あまり初期設定をいじりたくない・・という場合は、赤線で囲った以外のショートカットタグがいくつか、ACTIONにデフォルトで用意されています。

最初よくわからないうちは、とりあえず記事を書く時にデフォルトのショートカットタグを使っていっても全く問題ありません。

そしてやってるうちに

 

 

と、こだわりがでてきますので、そうしたら順次追加をしていきましょう！

 

 文字装飾のやり方

ACTIONでは多種多様な文字装飾パーツが用意されています。その中でも、使用頻度が高くなるものを中心に、やり方を紹介します。

 

 見出し（h2、h3、…タグ）

各文章の冒頭部分に配置する、下記のような「見出しタグ」の挿入。h2、h3、h4・・と数が大きくなるに従って細かいまとまりの見出しになっていきます。

 

 

見出しは「段落」タグのクリックによって挿入可能。

 

 

どちらの状態でも入れることができます。慣れてきたら、見出しタグを「AddQuick tag」や「ステ子」に登録して入れておくのもいいですね。

 

 

ちなみに見出しのデザインを変えたい場合は、「外観　⇒　カスタマイズ」から設定することによって変更することができます。

 

 太線やマーカー、文字色の変更

変更した文字を選択した状態で、「スタイル」タグをクリック。付加したい装飾を選ぶことで挿入できます。

ACTIONでは赤字、太字、赤太字、太マーカー、細マーカー、の他にもこんなアニメーションのようなものまで、入れることができます。

使用頻度の高いものは、さきほどの「AddQuick tag」に登録しておくのがオススメです。

 

ボックスデザインや複合タグ

のような囲みデザインのボックスもACTIONでは手軽に入れることができます。

ただ、囲みデザインは、ビジュアルエディタで入力した時点ではサイトで見られる形式で反映されないので直感的に操作することはできません。

 

 

 

 

これらのパーツの色を変えるなどの編集方法は「公式マニュアル」に詳しく載っているので割愛します。

自分好みのボックスデザインができたら、「AddQuick tag」や「ステ子」にどんどん登録して追加しておくと便利ですよ！

最初に時間をかけてボックスデザインを沢山作って登録しておけば、後々の記事作成の大幅時短になりますので。

 

 チェックボックス

このサイトでも度々使っている

のようなチェックボックスの作り方。

まともにやる場合は、下記のようなステップを踏む必要があります。

 

step
1チェックボックス挿入

対象テキストをドラッグ、反転選択した状態で「スタイル　⇒　ボックス　⇒　チェックリスト（番号なしリスト）をクリック」する。

番号付きリストにしたい場合は、この時点でナンバリング（番号付きリスト）を選択。

 

step
2色付きボックス挿入

そのままの状態で、「スタイル　⇒　ボックス　⇒　背景にしたい色（黄色 or 薄赤 or グレー）」をクリック

 

step
3チェックマークか番号を挿入

「番号なしリスト」「番号付きリスト」の、使いたい方をクリックする。

これで完成です。

 

ただ、毎回この操作を繰り返すのは面倒なので、このチェックボックスも「AddQuick tag」もしくは「ステ子」に登録しておくのがオススメ。

「AddQuick tag」の場合

を設定、「ステ子」の場合は

を登録します。

上記は背景色がグレーの場合ですが、色を変えたい時は赤字の「graybox」の部分を「yellowbox」または「redbox」に書き換えましょう。

ちなみにチェックボックスに関しては、「ステ子」に登録しておいた方が使い勝手が良好です。

 

会話吹き出しの挿入方法 

Affingerの公式マニュアル「会話吹き出し機能」に詳細が載っていますので参考にしてみてください。

 

 画像挿入の方法

記事内に画像を挿入するには、エディタ上部の「メディアを追加」タグをクリックします。

クリックすると、下記のような画面になります。「ファイルを選択」をクリックして、挿入したい画像をパソコンのフォルダなどからワードプレス上にアップロードしましょう。

アップロードが完了すると「メディアライブラリ」に画像が一覧表示されますので、挿入したい画像を選択。

選択すると右のほうに入力画面が出てきます。

どの項目を入力すべきか？について、重要なのは「代替テキスト」。

これは「altタグ」といって、設定しておくとその画像が何を表しているのかというのを検索エンジンに伝えることができます。

なので、「代替テキスト」には強調したいキーワードを含んだ文字を設定しておくのがオススメです。

その他の項目については重要度は低いため、空欄でも問題ありません。ただ、「タイトル」は必要なので、「代替テキスト」と同じ文字列を入力しておきましょう。

 

 

また、右下の「添付ファイルの表示設定」で”画像表示の位置”や”表示サイズ”を調整できます。

ちなみに「リンク先」は「メディアファイル」と設定すると、画像をクリックした時に別ウィンドウで拡大表示することができるようになります。

 

 リンクの挿入方法

テキストをクリックすると他のurlページに飛ぶようにする（リンクさせる）には、下記の３種類のボタンを主に使用します。

テキストリンク

オーソドックスなテキスト文字列からのリンクです。

テキストリンクの例（トップページへのリンク）

 

ボタンリンク

ボタン型のリンクになります。

デフォルトで予め上記の２種類の色が用意されていますが、「ランキング管理　⇒　CSS」から色の変更や光る演出などのカスタマイズが可能です。

また、「タグ　⇒　カスタムボタン」からも挿入することができて、こちらではコードをいじることによってさらに細かい仕様の調整をすることができます。

 

 カードリンク

ブログカード風のリンク。

基本的には内部リンクだけで使えるものになりますが、Affinger公式サイトで販売されている追加のプラグインを購入して設定すると、外部サイトのurlでもリンク設定ができるようになります。

 

 リンクの編集方法

テキストリンク、デフォルトのショートカットキーからのボタンリンクはクリックすると下記のような画面が出るので「リンクしたいURL」「表示したい文字列」をそれぞれ設定します。

その他のカスタマイズ方法は、公式サイトに詳細が載っていますので、そちらを参考にしてみてください。

 

 その他の設定

記事の投稿画面の、その他の設定項目について。

 メタキーワード・メタディスクリプションの設定

記事編集画面より下にいくと、上記のような画面となります。

 titleタグ

Twitter表示のタイトルの検索表示のタイトルを変えたい場合などに使いますが、上級者向けなのでとりあえず空欄で問題ありません。

 

 メタキーワード

検索エンジン向けに、どのようなキーワードについて記事が書かれているか？伝えるためのタグです。

ただ、現状Googleはメタキーワードを検索評価の対象としてません。なので、記載しても効果はないのですが、一方で将来的に評価対象とすることも否定してない状況。

もし評価対象となった場合に、後から全ての記事にメタキーワードを追加するのは大きな労力がかかりますので、設定しておくのがオススメです。

キーワードがべらぼうに多すぎると一つ一つの重みが薄れますし、スパム判定される可能性もあるので、関連するキーワード５個以内で設定しておくと良いでしょう。

 

 メタディスクリプション

検索エンジンで見た時に、タイトルの下に表示される文章がメタディスクリプション。

タイトルを補足する記事の概要文章になるので、検索者が思わず読みたくなるような文章を上手に書けば、クリックされる確率が高まります。

ただ、メタディスクリプションは設定しても必ず表示されるわけではなく、検索しているキーワードや状況によっては、サイトの記事内の抜粋文章が自動で表示されます。

また、仮に設定していなくても抜粋文章が自動で表示されるので、まだ慣れなく労力をあまりかけたくない場合は書かないという選択肢もアリです。

 

アフィンガー6のサイトデザイン設定方法！初心者用の一番カンタンな手順

アフィンガー6（ACTION）の初心者の方向けマニュアル！今回はサイトのデザイン編です。 アフィンガー6はすごく多機能なテーマなので、こだわればいくらでも凝ったデザインにしていくことは可能。 ただサイ ...

続きを見る

【初心者向けおすすめプラグイン】アフィンガー5(WING)を使いこなす！

WING（アフィンガー５）は、操作の丁寧な解説がされた公式マニュアルが用意されています。 なので購入後も、マニュアルを見ながら設定・編集していけば充分に使うことが可能！ですが、ワードプレス初心者の方に ...

続きを見る

【Ticovaオフィスチェア評判】首と肩が疲れない人間工学椅子レビュー

テレワークが主流になりつつある今日この頃。 家で仕事するために長時間座ってても、首や肩が疲れない椅子が欲しいですよね。 そのために「Ticova人間工学椅子オフィスチェア」を候補に入れている貴方は、素 ...

続きを見る