ウェブサイトマスターの為の覚書きウェブサイトマスターの為の覚書きウェブサイトの運営をしていて気のついたこと、発見したことなどの記録です。コピー2017.04.19サイトの記事は閲覧しているユーザーに読みやすく作るのはもちろんですが、検索エンジンにも読みやすく作るのが鉄則です。ユーザーに対する読みやすさはライティングをしている本人が確認しながら出来ますが、検索エンジンに対して読みやすい記事はHTMLタグの使い方によって変わります。『ユーザーにも検索エンジンにも読みやすい記事の作り方』は2回に分けて、1回目はWordPressにディフォルトで使えるいろんなHTMLタグについて説明します。2回目はオリジナルで作るHTMLタグ用のCSSファイルについて説明します。今日は1回目、ディフォルトで使えるいろんなHTMLタグについて。投稿画面にこれらのHTMLタグを使う為のボタンがありますが、意外と使っていないこともあります。オリジナルのCSSファイルを使っている私もほとんど使っていませんでした。そこで、バージョン4.7.3–jaで用意されているHTMLの使い方をまとめました。箇条書きとリスト表示の注意点まとめ投稿画面に用意されているHTMLタグの使い方バージョン4.7.3–jaの投稿画面の画像です。「テキスト」タブで表示します。[b]は文字を太くして検索エンジンに対して「強調したい言葉」を示すタグ強調したい文字をドラッグして[b]ボタンを押すと、<strong>強調したい文字</strong>がstrongタグで囲まれて、強調したい文字となります。人の目にも検索エンジンにも強調したい言葉としてアピールできます。[i]は強調したい文字を指定します文字を強調する「em」タグが入力されます。見た目には分かりませんので検索エンジンに対してのタグです。「strong」よりは強調具合が弱いです。href=””></a>とaタグで囲まれて、リンクURL、リンクタイトル、別窓か同一ウィンドウかの選択をしてリンクを作ります。[b-quote]は他のサイトからの引用文を示します他のサイトに掲載されていた文章を「引用」する場合には、このタグを使って本文と引用文を明確に区別します。著作権法上の「引用」のルールに定められいますので、このタグを使います。使い方は引用文全体をドラッグして[b-quote]ボタンを押すと<blockquote>引用文</blockquote>となります。引用文でもないのに、他の部分と区別する為に「blockquote」タグを使っているケースを時々見かけますが、「blockquote」タグで囲まれた部分の文章量が多くなると、検索エンジンの評価が下がる可能性がありますので要注意です。ここが引用文です[del]は記述した文章を削除する意味です削除する文章を記載したままにしておく方が、全体の文章の流れがつかめて理解しやすいことがあります。その為、削除する文章を「del」タグで表示します。使い方は上の[b-quote]と同じようにドラッグして使います。[ins]は文章を追加して記述する意味です以前にアップした記事に追記する場合に使います。更新した部分がはっきり分かるので、リピーターの読者には有難いタグです。[img]は画像を貼りつけるタグ画像を挿入する時に使うタグです。[img]ボタンを押すと画像のURLを入力するダイアログボックスが表示されます。画像がサーバー上に無い場合や、URLが不明な時は「メディアを追加」で画像をアップロードして下さい。[ul]は文章を箇条書きにするタグ箇条書きの文章を作る時は「ul」タグや「ol」タグを使います。<ul><li>ここに1番目の文章</li><li>ここに2番目の文章</li><li>ここに3番目の文章</li></ul>このように使うのですが、[ul]ボタンを1回押すと<ul>が、もう1回押すと</ul>が入力されます。実際の表示は以下です。ここに1番目の文章ここに2番目の文章ここに3番目の文章[ol]は文章をナンバー付きの箇条書きタグ番号を付けた箇条書きタグです。「ul」と同様にすると<ol><li>ここに1番目の文章</li><li>ここに2番目の文章</li><li>ここに3番目の文章</li></ol>となり、実際の表示は次のようになります。ここに1番目の文章ここに2番目の文章ここに3番目の文章[li]はリスト表示する項目を表します「ul」や「ol」の要素となる「li」タグを作ります。ひとつずつの文章をドラッグして[li]ボタンを押すと<li>ここに文章</li>となりますし、[li]を押して文章を記述してもう一度[li]を押すと</li>で閉じることができます。[code]はプログラムのソースコードを意味します記事の中でソースコードを記述する時にこのタグを使います。本文中で使っているhtmlタグと区別できるので便利です。「<」や「>」は反映されないようです。[more]は「もっと読む」とか「つづきを読む」の時に使います投稿ページの冒頭部分を表示させて、「つづきを読む」リンクで記事ページにジャンプさせるタグですが、最近は一覧ページがディフォルトで「つづきを読む」になっていますので、あまり使うことはないと思います。[タグを閉じる]はhtmlの閉じタグです文章をドラッグしてタグボタンを押さずに、あるタグの開始タグを入力して後で閉じタグを入力する時に使います。<hoge>を入力して文章を記述してから</hoge>で閉じる・・・こんな使い方です。(こんな表現で理解できたでしょうか?)[太字]は文字を太くするタグ文字を太くする<bold>タグを作ります。太くしたい部分をドラッグして[太字]ボタンを押します。[赤字]は文字を赤色にするタグ文字を赤くするタグを作ります。#ff0000;が指定されていると思います。[太い赤字]は太く赤い文字にするタグ「bold」と「red」を合せた指定をするタグです。使い方はこれまでと同じ、赤く太くしたい部分をドラッグします。[赤アンダーライン]は文字に赤いアンダーラインを引きますボタンの名前の通りに赤いアンダーラインが引けます。[黄色マーカー]は文字に黄色の蛍光ペンを塗ったようにしますこれもボタンの名前のとおり黄色の蛍光ペンになります。[黄色アンダーラインマーカー]はアンダーラインを黄色のマーカーで塗ったようにしますこれも同じように黄色のマーカーでアンダーラインを引いたように見せます。[打消し線]は文字を訂正する意味です[del]と同じく一本線の打ち消し線を引きます。短い文節や単語などの訂正に使います。[バッジ]はバッジのようなボタン表示するタグ広告とかPRとかNEWなど、目を引かせたいポイントに使います。[キーボード]はキーボードのキーのようなボタンタグキーボードのキーを説明する時に使うと便利です。ctrlとか[補足説明(i)]「注意」レベルの補足説明文を記述します効果的に使うとメリハリのある記事になります[補足説明(?)]「はてな?」レベルの補足説明文を記述しますこんなタグが用意されているとは[補足説明(!)]「ビックリ!」レベルの補足説明文を記述しますはっきり言ってビックリでした[primary][success][info][warning][danger]文章を目立たせたい時に使います。箇条書きについては、わざわざ「ul」とか「ol」といった、リストタグがあります。リストタグを使わなくても「改行」を繰り返すと見た目は箇条書きになります。ところが「改行」を使った箇条書きを、検索エンジンは箇条書きと認識しません。その為、「改行」で箇条書きをしてしまうとおかしな日本語になります。文字を太くするタグ文字を斜めにするタグ文字を赤くするタグ箇条書きをリスト表示しています。<li>タグがあるので検索エンジンは箇条書きと認識します。ところが改行で上のような表示にしようとすると、下のようになります。/>ですが、検索エンジンは改行を無視して一連の文章と見做します。上の箇条書きは・文字を太くするタグ・文字を斜めにするタグ・文字を赤くするタグこんな一連の文章になります。「・」を取り除くと文字を太くするタグ文字を斜めにするタグ文字を赤くするタグこんな文章として認識されるわけです。検索エンジンにとっては『何を書いているのかわかんない!』ことになってしまうので、箇条書きはきちんとリストタグを使わなければならないことになっています。まとめこうして書いてきて気がついたのは“使えそうなタグが意外とある”ってことでした。「補足説明」とか「primary」だとか、使う人が多くなると似たようなサイトが増えるので、どうかなとも思います。管理人をフォローする管理人ウェブサイトマスターの為の覚書き関連記事シニア講座レンタルサーバーの契約と独自ドメインの設定(シニア講座2回目)独自ドメインを取得した後はレンタルサーバーを借りて、ウェブサイトを立ち上げる準備をします。レンタルサーバーには共用サーバーと専用サーバーがありますが、専用サーバーは大きなショッピングサイトやポータルサイトなど、膨大なトラフィック...2017.02.06シニア講座サイトを育てる意欲と便利なツールとテクニック(シニア講座12回目)サイトを育てていくには粘り強く更新を継続し、アクセスの状況を確認してユーザーの訪問数を増やす工夫をつづけていかなければなりません。時にはモチベーションが下がってしまったり、やるべきことを適当に片づけてしまうといったこともあります。結果が...2017.02.19シニア講座デザインと機能を重視したWordPressテーマの選び方(シニア講座6回目)WordPressのテーマは約4,000~5,000種類あります。管理画面の「外観」→「テーマ」を見てみるとディフォルトで3種類のテーマが表示されています。この3種類はよく使われているテーマです。左に...2017.02.09シニア講座サイトタイトルを決める時の考え方~キーワードの捉え方(シニア講座15回目)ウェブサイトへのアクセスに大きな影響を与えるサイトタイトル。キーワードは大切ですが単にキーワードをタイトルにしただけでは意味がありません。タイトルとキーワードの関係はサイト全体の戦略に関わることです。掲載する画像を短時間で収集する方法(シニア講座8回目)サイトに掲載する画像、アイキャッチにしたりコンテンツの一部として使うこともあります。画像の準備をしてコンテンツを作成してと、ウェブサイトは地道な作業の連続です。画像の中には必ずしもオリジナルなものである必要が無い場合もあります。そん...2017.02.14シニア講座スパムの攻撃を防ぐサイトの設定方法(シニア講座4回目)スパムという言葉、だいぶん普及してきていますので聞いたことがあると思います。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。△△△の複合キーワードがほとんどですが、中には3つのキーワードの場合もあります。グラフがあればがあればみたいです。1位なったサイ...上位表示されるまでの時間に法則は無いが上位表示されないとアクセスは増えないは法則だ管理人2018.01.28SiteOriginButtonで作ったボタンは画像データでは無いので使い回しはできないようですね。幅についてはサイズの設定でWidthの数値を統一するといいと思います。あとボタンの幅を一定にしたいのですがどうすれば良いのか分かりません。△△△の複合キーワードがほとんどですが、中には3つのキーワードの場合もあります。グラフがあればがあればみたいです。1位なったサイ...上位表示されるまでの時間に法則は無いが上位表示されないとアクセスは増えないは法則だ管理人2018.01.28SiteOriginButtonで作ったボタンは画像データでは無いので使い回しはできないようですね。幅についてはサイズの設定でWidthの数値を統一するといいと思います。あとボタンの幅を一定にしたいのですがどうすれば良いのか分かりません。httpタイトルとURLをコピーしました。