タグサンプル等(28字以内推奨、原則25~28文字で)

masman

by nishimura

更新日:2018-09-06

公開日:2015-06-15

抜粋が自動反映されてます。 投稿ページの下部に記入スペースあり。 右の画像はアイキャッチ画像。これも自動反映。 アイキャッチは正方形状が好ましい。



プレビューと編集画面の両方を見比べてみてください   

↓の目次は初出h2の直前に自動で生成されます。
一旦、無視してください。

頻出のタグと使い方、凡例

ここでは頻出のタグとその使い方、凡例等を紹介します。
また、各タグの諸注意等もまとめました。

タグの使い方

タグは基本的に<x></x>の形
この中に内容を挟むと、指定の処理をしてくれます。

したい処理がある場所に<x></x>で単にマークをつけているだけですので、
かなり簡単です。

また、
<x><y></y></x>
のように入れ子状にすることも可能です。
入れ子にすることで、指定の処理を組み合わせられます。

(※ 実際のタグはすべて半角です 表示等の問題から全角で書いています)

頻出のタグと使い方、凡例

頻出タグの使い方とその凡例です。
前に書いてあるものほど重要です。
最低でもulタグまでは覚えて欲しいです。

======================
【hタグ】

これがh2です

これがh3です

これがh4です

これがh5です
これがh6です

hタグは見出し用のタグです。
基本的にh2とh3のみを使います。(後述)
h2が大見出し、h3が小見出しとなります。

======================

【pタグ】

pタグ 普通の文を書くときはこの中に書く

pタグは一応ワードプレスが自動でつけてくれます。
ただ、各自で毎回書くようにしてください。
pタグは段落に対応しており、段落を変えたいとき複数のpタグを使ってください。
段落間の行間が少し空き、見やすくなります

~~~~~~~~~~~~~~~~~~~~~~

・同一pタブ内での改行 同一段落用改行

同一タブ内での改行 前↓
同一タブ内での改行 後↑

~~~~~~~~~~~~~~~~~~~~~~

・pタブを変えた段落改行 段落変え用改行

pタブ変更での段落改行 前↓

pタブ変更での段落改行 後↑

======================

【strongタグ】
strongタグ:太字になる

======================

【空白文字】
空白文字「 」「 」
半角で と書くと明示的にスペース記入可能
半角で<p> </p>と書くと大きめの行間空けられる

~~~~~~~~~~~~~~~~~~~~~~

・pタブを変えただけの改行 行間小さい

pタブを変えただけの改行 前↓

pタブを変えただけの改行 後↑

~~~~~~~~~~~~~~~~~~~~~~

・pタブ変更と  行間大きい

pタブを変えただけの改行 前↓

 

pタブを変えただけの改行 後↑

======================

【aタグ(アンカーリンク)】
同タブ内で指定URLに飛びます 同一サイト内の他記事に飛ぶときに使います
別タブで指定URLに飛びます 外部サイトに飛ぶときに使います

======================

【uタグ】
uタグでは下線が引かれます

======================

【spanタグ】

赤い文字

spanタグはフォント等を変える用のタグです。
#ff0000で色の指定をしています。
たとえば青は#0000ffなので

赤い文字

とすると青い文字になります。
原色大辞典というサイトに色と対応する番号が書いてあるので、
適宜変えてください。

======================

【moreタグ】

記事には何の影響もないタグです。
記事一覧ページ等の「続きはこちら」みたいな文が入る部分を明示します。
これがないと記事一覧にこの記事全体が載ってしまいます。
このmoreタグは導入文直後あたりに書いてください。
この記事の最初の方にも書かれています。

======================

【adsタグ】

広告用のタグが入っています ↓


国家資格バナー

PR




広告用のタグが入っています ↑

広告が入る場所を指定するタグです。
ads1~3は各1個ずつ各記事に入れます。
記事全体に分散するように配置してください。
新しいh2タグやh3タグの前とかに配置することが多いです。

======================

【ulタグ】

  • 1つ目
  • 2つ目
  • 3つ目

ulとliを使うと箇条書きができます。
ulをolに変えると(下参照)番号付きで箇条書きできます。

              

  1. 1つ目
  2. 2つ目
  3. 3つ目

          

======================

【table】

1-1 1-2 1-3
2-1 2-2 2-3

tableを使うと表が作成できます。
tr内が列、tdが各要素に対応します。
width とかを使うと列幅を指定できたりします

100px幅 200px幅 300px幅
2-1 2-2 2-3

======================

【div】

ひとかたまりの範囲として定義するブロック要素です
HTMLはブロック単位でいろいろと書くことが多いので、このタブは頻出します。
たとえば、このdivではこのグロック内の文章を中央揃えにしています。

(最初はdivの名前を知るだけや「ブロック単位で内容を扱える」くらいの認識で大丈夫です。)

 

======================

【blockquoteタグ】

引用文 他サイトから引用するときにはこの中に書く

======================

【リンクカード】

毛筆書写検定になるには?難易度・仕事内容・合格率・給料相場
毛筆書写検定資格取得者は他には書道検定(1974年~1990年)という名称で呼ばれております。資格名:毛筆書写検定毛筆書写検定の資格は「民間資格」です。資格広場では毛筆書写検定をとるには?毛筆書写検定とる...

url=””で飛び先URLを指定する
サイトへ飛ぶ用のタグみたいなもの
役割的には内部リンク用のaタグと同一
ただ、aタグより詳細まで書かれ、画像もあるから見た目もいい
aタグとは臨機応変に使い分けしてください。

======================

【コメントアウト】
<!--  コメントしたい内容  -->


======================

以上が頻出なタグです。

タグに関する注意点等

【hタグ】
SEO記事では見出しとタイトルが重要となります。
重要度順にタイトル(=h1)、h2、h3、、、h6の順です。

タイトルとh1は1記事に原則1つです。
資格広場ではh1はタイトルを自動的に反映するので無視して下さい。

h4以降は使うことは滅多にないです。
資格広場では、h4以降のCSSを準備していないのを使用しないでください。

基本的に使用するhタグはh2とh3です。

各タグの文字数
(資格広場の場合)
タイトル:全角28字以内
h2:字以内
h3:字以内
PCでの横幅文字やSEOに関わるので、この字数を超えないでください

タイトル、h2、h3の役割
タイトル、h2、h3は階層構造となっており、
タイトルに関する内容を大見出しとしてh2に、
h2に関する内容を小見出しとしてh3に書きます。

 

【タグ関連のミス】
タグ関連で意図しない結果になる原因はスペルミスとタグの不一致です。
例えば、strongタグのスペルをミスると

s「rt」ong

このように太字になりません。
また、タグを閉じ忘れると(</strong>を忘れると)

タグ閉じ忘れ

このように太字範囲が想定外のところにも反映されてしまいます。
最初の方は特にミスりやすいので、タグ関連がうまくいっていないときは、
「スペルミス」と「タグの不一致」が生じていないか確認してください。

 

ワードプレスでの投稿

記事投稿時に設定する主要項目

  • 記事記入
  • タイトル書く(一番上)
  • カテゴリ、タグを設定(右側)
  • アイキャッチ設定(下側)
  • スぺニット編集(下側 Yoast SEOのスぺニット編集タブ)

 

基本的に上記すべてが必須です。
漏れがないように気を付けてください。

ワードプレスの細かい使い方等

左上の「メディアを追加」で、画像を記事に挿入できます。

  1. 画像を入れたい場所にカーソルを合わせる
  2. 「メディアを追加」をクリック
  3. 画像をドラッグ&ドロップで追加
  4. 選択して添付ファイルの表示設定から配置、大きさを指定
  5. 「投稿に挿入ボタン」を押す

右上のプレビューで記事の表示確認ができ、
下書き状態なら、下書きを保存で保存ができます。
すでに公開状態なら、更新ボタンを押すことで編集内容を更新できます。

右上のビジュアルタブ、テキストタブには注意をして下さい。
ビジュアルモードでの編集は最初は視覚的で使いやすいかもしれないですが、
細かい部分が編集しにくく、途中から不便になります。
最初からテキストモードで編集するのを推奨します。

テキストとビジュアルを切り替えると、
若干テキストの内容(タグなど)がワードプレスによって変更されることがあります。
レイアウトが崩れたりするので、不用意に切り替えないでください。

知っておくと便利な機能

【リビジョン】
既に公開済みのページなら、右上にあるリビジョンを押すと更新履歴をみえます。
ここに簡易なバックアップがあるので、記事を間違えて消してしまっても、大方復元できます。

【公開状態】
これも右上にあります。
この設定をいじることで、ページ状態を非公開にできます。
誤って公開を押してしまった時はここで非公開にすると、サイト訪問者に見えない状態になります。

SEOに優しい記事づくり

SEOとはそもそも何か、SEO対策を施した記事を書くには何に気を付けるべきか等を紹介していきます。

SEOとは

SEOとは検索エンジン最適化のことです。
簡単にいうと検索上位に表示されやすくするコツやテクニックです。

検索上位に表示されるかどうかはグーグルがクローラというもので機械的に決めています。
クローラは記事内容すべてを均等に扱わず、タイトル、h1,h2,h3、記事の詳細内容の順に優先度が振られています。
なので、クローラに効率よく記事内容を把握してもらうことで、検索上位になりやすくなります。
この効率よく把握してもらうためにすることがSEO対策と言われるものです。

SEO対策としてやるべきこと

主要なSEO対策としてやるべきことは
・タイトル、hタグにキーワードを最低2~3つ含める
・タイトル、hタグの文字数を適量にする
・タイトル、hタグの前方にキーワードを集中させる(hタグの中でも特に前方が重視されるため)
などです。

そのほかにも、
・指示語「この」「その」「あの」は控える。
・画像にaltタグを入れる
・hタグの階層性を意識する
などです。

記事作成時に気を付けること

SEO的にはタイトル、hタグあたりを気を付ければ最低限は大丈夫です。
ただ、SEO対策はあくまで、クローラに見つけてもらいやすくするための、
ちょっとしたテクニックであって記事の質などとはあまり関係はありません。

検索上位に挙がったとしても、記事内容が良いないと上位に残り続けられないです。
ここからは、読者に読みやすい記事をつくるコツ、などについて書いていきます。

ペルソナの設定

ペルソナとはもともと仮面を意味する言葉で、
Webライティング業界ではターゲットとする読者の人物像のことを指します。
ペルソナの設定では読者を1人、「具体的に」想定します。
想定する項目としては、

  • 年齢
  • 性別
  • 住所
  • 職業
  • 学歴
  • 家族構成、人間関係
  • 生活パターン
  • 趣味嗜好
  • 価値観、行動心理、購買心理
  • ニーズ

などです。
(これらはある程度適当に決めていただいて構いません。
また、1サイトにペルソナは1つで十分です。)

ターゲットの詳細な情報を決めることで、抽象的にものを考えるよりも、
書き方や方針、アプローチの仕方を具体的に決めやすくなります。
方針が具体的に決まれば決まるほど、記事の軸がぶれにくくなり、
結果として、読者にわかりやすくかつ、ライターも書きやすくなります。

ライターの人物像も意識する

ペルソナ設定では読者の人物像を意識しましたが、
ライターも書き手としての自分自身の立ち位置、人物像を意識する必要があります。

例えば入門的な内容を説明する記事だったら、
自分の知っている知識を優しく丁寧に教えてあげる語調をとったり、
なるべく難しい用語は避けて具体例を多く挙げたりするのが望ましいです。

もし、専門的な記事を書くのであれば、語調は堅くても、抽象的な内容ばかりでも大丈夫です。
テーマや話題は1つのことに特化し、濃い内容の展開が望ましいです。

こんな感じで、読者層に合わせ、ライターは自身の立ち位置や目線を変えて記事を書くようにしましょう。

サイトコンセプトを意識する

記事を掲載するサイトのコンセプトもできる限り配慮しましょう。
派手めなサイトなら装飾等にこだわっても良いですが、
シンプルなサイトなら色を多用しすぎないようにしましょう。

また、PC閲覧が多いのか、スマホ閲覧が多いのかなども意識しましょう。
このサイトはPC閲覧を想定し、改行を多用しています。
PCなら改行の多さがそこまで気にならないと思いますが、
スマホだと改行の多さがかなり目立ち、非常に見にくくなります

(PCでもスマホ画面を確認できます。
Ctr+Shift+I or F12 → (Ctr+Shift+M →) Responsiveをiphone6/7/8に変更
とかを試してみてください。)

PCでもスマホでも見やすいサイトを作るのは結構大変です。
サイトの閲覧者層を想定して、どちらかに絞って記事を書いていくのが無難です。

コメントを残す

*

*