2019年12月14日TwitterFacebookGoogle+LinkedInPocket見出しやリストは見た目だけでなく、文書構造に応じて「h1〜h6」の見出しタグや「ul,ol,li,」のリストのタグによってマークアップ(HTMLで記述すること)する必要があります。人は見た目で大きく見えたり太字になっていれば「見出し」と認識できますし、箇条書きになっていればリストであると受け取ります。マシーン(視覚障害者用のスクリーンリーダーや検索エンジンのプログラムであるクローラーなど)は、決められたタグを使用していないと判別できません。タグを使用することによって様々な支援機能が使えたり、SEO的に評価されたりします。構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。見出し設定には「h1〜h6(通常ブログ内で使うのはh3かh4くらいまで)」のタグが使われます。例をあげながらその正しい使用方法を紹介します。マシーンが「見出し」と認識することで・スクリーンリーダーでは見出しジャンプができる・アウトライン(目次)を作ることができる・検索エンジンのキーワードとして検出できるなど、ユーザーにとっても作り手にとっても利点がたくさんあります。見出しは見出しタグ「h1〜h6」を使う見た目にいくら大きな字や太字を使っても、見出しタグを使用していなければ見出し機能が働きません。見出しのレベルは飛ばさず順番に使う見出しは「h2→h3→h4」と順番に飛ばさずに使います。新エディター「Gutenberg」と旧エディターに分けて紹介します。見出しタグの設定ができます。*「h1」タグは記事タイトルに使用されているので文章中には使用しません*通常使用するのはh2、h3、h4くらいまでですエディターGutenbergでの設定方法ブロックの追加ボタンをクリックします。ブロックの種類で[見出し]を選択します。見出しの種類を選んでクリックします、見出しの内容を入力します。旧エディター(クラッシックエディター)での設定方法あらかじめ見出しに設定する文字を入力しておきます、入力した文字を選択します。[段落]欄の▲をクリックし、一覧の中から[見出し2]をクリックします。見出し2が設定されます。見出し3が設定されます。リスト設定リストは、「<ol>,<li>」または「<ul>,<li>」のタグを使用します。マシーンが「リスト」と認識することで・スクリーンリーダーではリストの項目数などを補足で読み上げてくれる・スクリーンリーダーでは次のリストへジャンプできる・大項目、中項目のリストも作成できるなどの機能が利用できます。順番のないリスト順番のないリストは、順番情報のない「・」や「■」なのが先頭についたリストのことです。この順番のないリストは<ul>,<li>タグを使用します。「1、2、3・・」や「a、b、c・・」というように順番が決まっているリストのことです。この順番のあるリストは<ol>,<li>タグを使用します。リストの設定方法WordPressでのリスト設定の方法です。エディターGutenbergでの設定方法1ブロック追加の「+」をクリックします2リストのマークをクリックします■順番なしリスト作成→「箇条書きリストに変換」をクリックリスト名を入力して改行すると、次のリスト項目が作成されます。■順番ありリスト作成→「順序付きリストに変換」をクリックリスト名を入力して改行すると、次のリスト項目が作成されます。■順番なしリスト作成→「番号なしリスト」をクリック先頭の図形を選択しますリスト名を入力して改行すると、次のリスト項目が作成されます。■順番ありリスト作成→「番号付きリスト」をクリック、番号の種類を選ぶ。リスト名を入力して改行すると、次のリスト項目が作成されます。簡単な操作で設定できます。自分で記号や数字を入れる必要もないので便利です。マシーンリーダブルという表現この「構造」に関する記事のなかでは、マークアップ(HTMLで記述すること)とマシンリーダブルになるという表現が頻繁に出てきます。「マシンリーダブル=マシンが読みやすい」というのは、文字通り機械にとって理解しやすいということです。具体的に言うと、SEOの面ではGoogleのクローラー(検索エンジンのプログラム)にとって解りやすい、またアクセシビリティの面ではスクリーンリーダにとって解りやすいという事です。これら機械が読み取っているのは、人間がブラウザで見ている表現ではなく、HTMLの構文そのものです。色や形、大きさレイアウトなどがない世界です。決められた構文(タグ)によって構造を認識してもらう(伝える)必要があるのです。え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できること」を指します。具体的に言うと・小さい字が見えにくい・薄い(コントラストの低い)字は見えにくい・ボタンや、導線のわかりづらいページは操作ができない・マウスの操作は慣れていないといったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイトこの記事のトラックバックURLプロフィール訪問いただきありがとうございます。2016年4月岡山県真庭市に引っ越し、デザイン系講師のかたわらブログ制作&ネットビジネスを副業として収入を得ています。主な収入源は、HP作成・アフィリエイト・広告収入・法人メルマガの構築代行などです(^^)このブログは、ネットビジネスの始め方を噛み砕いて解説、内容を実践できるメルマガを配信、ゆとりあるシニアライフを目指す方を応援します。パソコンインストラクターや、コールセンターでのサポート経験を活かし、個々のスキルとスピードに合わせたサポートを心がけています。子育てを卒業!自分のために時間とお金を使える!!でも、「夢見るシニアじゃいられない」と感じているそんなあなたに伝えたい情報です。「ブログやアフィリエイトって、聞いたことあるけど若者(わかもの)や強者(つわもの)しか手を出してはいけない気がして」と思っていませんか?「頑張ってみたけど、若い人の勢いについていけず挫折し諦めた」それでも大丈夫!ちょっと勇気を出して扉をあけてみませんか。お手伝いできれば嬉しいです。rin_ngoりんごの田舎暮らしりんごのメインブログ、飾らない創らないをモットーにありのままの暮らしぶりを綴る。した心の持ち方で「ワンランクあっぷする日常」を提案SNSを活用しようFacebookやTwitterなど代表的な「SNS」の登録方法から活用ノウハウまでわかりやすく紹介しています。新着記事[SEO対策]の基本項目を確認、「ユーザファースト」を目指すGoogleの方向性を見据えてた対策は必須!SEO対策は企業のサイトにとっても、個人のブログ運営にとっても要(かなめ)です。一緒にオリジナルなサイトを作成していきます。人気無料テーマ「Cocoon」を利用してブログのサイドバーをカスタマイズします。実際の作業がギュッと1つにまとめられています。ブログ初心者が「楽しんで稼ぎ続けられる」、そんな資産になるブログ作り方の教科書です。「アフィリエイト」の種類や仕組みを噛み砕いて解説、実践方法をやさしく案内しています。さんエンドウさま、コメントありがとうございます。お問い合わせの件、YahooIDはパソコンに依存しません。さんYahooIDを他のパソコンと共有するにはどうすればよいでしょうか。さんりんごさまお世話になっております。スマホの設定でアカウント画面まで表示され次え、が出てこなかった。さん横山さま、コメントありがとうございます。PC(...りんごの一歩づつサポート「ブログ&メルマガを利用したネットビジネス」に取り組むことで「ワンランクアップした毎日」を目指す方を応援します(*^▽^*)ネットビジネス入門無料メルマガ人と人が繋がる暖かいコミュニケーションがテーマのネットビジネスです。この機会に触れてみてください。