WING(Affinger5)

WING(アフィンガー5)の使い方補足マニュアルー記事の投稿編ー

更新日:

WING(アフィンガー5)記事投稿

WING(アフィンガー5)初心者向け使い方マニュアル、今回はいよいよ本題とも言える、記事の投稿編です。

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

特に

  • ワードプレスが初めて
  • Affinger5の公式マニュアルを見たけどよくわからない・・

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

 

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

 タイトル設定

WINGタイトル画面

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

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

  • 検索需要のあるキーワードを含める
  • 記事の内容とタイトルがミスマッチしていない
  • タイトルを見て、ユーザーが得られそうな情報を想像できる

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

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

ちなみに

  • 全角
  • 半角
  • スペース

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

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

Affinger5タイトル文字数

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

ココに注意

何文字が表示される最大か?は検索する人のデバイスや環境、その他要因によって変わります。

35文字を超えても表示されることもありますし、逆に途中で切れてしまうことも。どんな場合でも表示されるように・・と考えると、30文字程度でまとめるのが無難です。

 

 パーマリンクの変更

Affinger5パーマリンク画面

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

パーマリンクの説明

パーマリンク説明

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

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

Affinger5パーマリンク設定画面

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

パーマリンク変更

URLは記事内容と関連する文字列で、なおかつ英語の方がサーチエンジンが認識しやすく、SEO的に良いとされています。

 

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

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

 

 記事投稿画面の説明

 記事の編集画面は2種類

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

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

 WINGのビジュアルエディタ

WINGビジュアルエディタ

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

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

 

 WINGのテキストエディタ

WINGテキストエディタ

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

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

 

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

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

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

 

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

 クイックタグとは

クイックタグ

Affinger5クイックタグ

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

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

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

 

参考リンク

WING(アフィンガー5)の使い方補足マニュアループラグイン導入編ー

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

続きを見る

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

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

続きを見る

 

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

Affinger5クイックタグ役割

 

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

 

参考リンク

WING(アフィンガー5)の使い方補足マニュアループラグイン導入編ー

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

続きを見る

 

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

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

 

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

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

  • AddQuick tag
  • ステ子

という、「プラグインで追加できるクイックタグ」ですが、文字装飾関連のショートカットは全てこの2つにまとめ、登録して入れておくと記事作成の効率が上げることができるのでオススメです。

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

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

やってるうちに

あれやりたい!これやりたい!

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




 

 文字装飾のやり方

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

 

 見出し(h2、h3、…タグ)

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

 

h2~h5見出しタグ見本

 h2タグ

 h3タグ

h4タグ

h5タグ

 

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

  • 見出しにしたい文字をドラッグ、選択反転した状態
  • 何も文字を選択していない状態

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

Affinger5見出し

 

ココに注意

「AddQuick tag」に見出しタグを登録して使う場合は「見出しにしたい文字をドラッグ、選択反転した状態」でしかタグを挿入できません。

「ステ子」に見出しタグを登録して使う場合は、逆に「何も文字を選択していない状態」でしか見出しタグを挿入することができなくなります。

 

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

 

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

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

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

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

 

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

見出し(全角15文字)

内容を記述

ココがポイント

内容

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

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

どういうこと?
囲みデザインは、エディタ上の表示はこんな感じになっちゃうだよね~。

 

Affinger5複合タグ

 

ああ・・なるほど。テキストエディタっぽい表示にしかならないのね!
イエス。まぁ見た目の問題だけで、操作は簡単だけどね!

 

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

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

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

 

 チェックボックス

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

  • テキスト1
  • テキスト2
  • テキスト3

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

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

 

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

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

Affinger5チェックボックス作り方1

画像は少し前のバージョンなのでチェック(ulタグ)と表示されてますが、現在は「チェックリスト」になります。

 

step
2
色付きボックス挿入

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

Affinger5チェックボックス作り方2

step
3
チェックマーク挿入

「番号なしリスト」をクリック

Affinger5チェックボックス作り方3

step
4
完成

チェックボックスの完成

Affinger5チェックボックス作り方4

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

「AddQuick tag」の場合

開始タグ

<div class="maruck graybox"><ul><li>

終了タグ

</li></ul></div>

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

<div class="maruck graybox">
<ul>
<li>テキスト1</li>
<li>テキスト2</li>
<li>テキスト3</li>
</ul>
</div>

を登録します。

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

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




 

 画像挿入の方法

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

affinger5画像挿入方法1

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

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

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

affinger5画像挿入方法3

どの項目を入力すべきか?というと、重要なのは「代替テキスト」です。これは「altタグ」といって、設定しておくとその画像が何を表しているのかというのを検索エンジンに伝えることができます。

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

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

 

「キャプション」は設定しておくと、画像の下部などにその文字列を表示することができるようになります。

 

また、右下の表示設定で”画像表示の位置”や”表示サイズ”を調整できます。

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

 

 リンクの挿入方法

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

Affinger5リンク挿入

テキストリンク

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

テキストリンクの例(トップページへのリンク)

 

ボタンリンク

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

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

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

 

 カードリンク

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

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

 

 リンクの編集方法

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

Affinger5リンク編集方法

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

カスタムボタンリンク編集方法

 

次のページでは、「メタディスクリプション」など、その他の設定について解説!

次のページへ >

-WING(Affinger5)
-, ,

Copyright© LeGoon Blog-我が家の忘備録- , 2019 All Rights Reserved Powered by AFFINGER5.