スポンサーリンク

ブログ10年目にしてh3タグを始めて実装しました

グーグル ディベロッパーツール

こんばんわ(・∀・)つ

今日は仕事の日だったのですが、朝6時に目が覚めてしまいました。普段だとそのまま布団の中でじっとしていますが、明日は休日です。今日を乗り切れば問題はありませんので、出勤までブログを触ろうと思い立ったのです。

最初のきっかけはスマホ表示の確認

ライブドアブログの弱点である文字数のことをうっかり失念したまま、すでに文字数が4981文字ある記事の修正をしてしまいました。

文字数が5000文字を超えると、大人の都合で芳(かんば)しくない状況になりますので、記事の文字数を確認しつつ、グーグルクロームブラウザーのディベロッパー機能でスマホ表示を確認していました。

その時にふと、記事のマージンをセンターにしたらどうなるか試してみたくなり、試しに「margin: center;」としてみたところ、画面左端に数ミリの白背景が出現しました。

当方は4:3の液晶ディスプレイを使用していますので、16:9の横長画面でどのような表示になったのか気になりますが、出来る事なら画面中央に当ブログを表示できるように改良をしたいと考えています。

そして自分的には奇跡的な改良方法を発見したのです

今までの当ブログ内の記事見出しは、文字表示の大きさを変えているだけでした。これはSEO的に全く効果がないだけではなく、ライバルに対して明らかなハンデとなっていました。

ブログは基本的にhtmlで記述されていますが、検索エンジンがブログの情報を把握できるように、htmlには一定の記述ルールがあります。

ブログタイトルは、<h1>専業トレーダーの孤独な生活</h1>という「エイチワン・タグ」で指定をすることにより、「この部分がブログタイトルですよ~」と検索エンジンに明示するのが一般的です。そして記事タイトルは<h2>記事タイトル</h2>とすることにより、「h1タグの次に重要です」と検索エンジンに通知する役目があります。

そして、本来は記事内の見出し部分をh3タグで囲むことにより、ブログ内の文章構造を検索エンジンに分かりやすく伝えることが出来るのです。また、このh1タグ~h3タグを適切な順序で使う事により、SEO的に優れた効果を発揮するのです。

今まで10年間もh3タグを使っていない理由

お恥ずかしい話ですが、ただ単に使い方を知らなかっただけです。ブログの管理画面内に「定型文」という項目があるのですが、賢狼はこれを「あいさつ文章などを事前にセットできる程度の物」と認識しており、今まで一度も使ったことがなかったのです。

そして、今朝のインターネットサーフィン中に、偶然にもこの機能の使い方を解説した記事を発見したのでした。そして、実はこの「定型文」機能こそが「h3タグ」を簡単に使えるようにプリセット出来るツールだったと初めて知ったのです。

ブログの設定

定型文の管理

定型文の管理2

賢狼パニ(・∀・)(心の中)(うはあ、定型文なんて書いてあるから、挨拶文章をボタン一つで入力するだけの機能だと思っていた。まさかこの部分にh3タグをプリセットするなんて、想像も出来なかったよ。)

賢狼パニ(・∀・)(心の中)(早速試してみよう。・・・ ポチッ  ・・・  うひょおおおおおお。これは便利~~。これで姉妹サイトも検索エンジンからクロールされた時に高評価を受けやすくなるぞ~。しかし、この事実はとても恥ずかしくてブログでは正直に書けないなあ。

まさかブログ10年選手がh3タグを使っていなかったと知られたら、アンチファンからコメントが殺到するかも? 困ったなあ。しょうがないけど、嘘を書くしかないかな?)

矢印

賢狼パニ(・∀・) 「うむ。今日は記事内見出しにパステルカラーの枠を実装しました。」

( ゚∀゚)アハハ八八ノヽノヽノヽノ \ / \/ \

ちなみにですが、当ブログをPCで表示している時に、画面上でマウスを右クリックすると、当ブログの「ページのソースを表示」出来ます。

そして、ページのソース画面で「ctrlキー+F」を押すと、画面右上にソース内の文字検索ウインドウが開きます。その検索ウインドーに「h3」と入力すると、ソース内のh3部分がハイライトで表示されますので、どの部分がh3なのか簡単に見つけることが出来ます。

ページソース

枠色の選択には、賢狼なりの色彩感覚を取り入れました

原色は記事の流れを分断してしまうような気がするので、パステルカラーの薄い色を選びました。当初はピンク系がいいかなと思いましたが、どうも違和感を感じます。ちなみに昨日の記事は敢えてピンクにして比較できるようにしています。興味がある方は見比べて下さい。

今後はこの色で記事内見出しを書こうかと思います。参考までに「WEB色見本」ページのリンクを貼っておきます。 ←こちらから該当ページへ飛ぶことが出来ます。

尚、そのページの上部には「原色大辞典」「和色大辞典」「モノトーン」「メトロカラー」などのタブがありますので、迷ってしまうほどのサンプルから色彩を選べます。

この色合いの選択は、賢狼の色彩センスなのでご了承ください。

明日は出撃予定20%かな(* ̄∇ ̄*)エヘヘ

明日は休日なので、ブログ関連の作業に没頭する予定です。天気がよければ出撃するかもしれませんが、今はブログが楽しいのでブログを優先すると思います。ぱに

コメント

スポンサーリンク
スポンサーリンク