ゆーんの徒然日記

3歳の甘えん坊主りーくんとの毎日。

はてなブログにはない「見出しh2」を導入|それに伴い訂正した箇所

こんにちは、ゆーんです。

 

最近ちょっとブログのデザインテーマを変更しようか悩んでいます。

 

現在「minimalism」を使っているのですが、iPadでブログを見ているとなんだか少し見辛いような気がして。横に広くて、文字が小さいんですよね。

 

でもiPadだとデザインの大幅な変更は色々と厄介そうなので、夏帰省が終わってからPCで作業しようと思います。

 

デザインテーマを変更するとなると、これまで追加したデザイン設定って全部消えてしまうんですよね?だいぶ辛い、、、

 

でもなんだか気になってしまったら止まらないのです。。

 

なのでとりあえず、直近で変更を加えたはてなブログの見出しについてまとめておきたいと思います。

f:id:xoyu-nxo:20190730152027j:image

はてなブログの見出し問題

はてなブログには見出しh2がない

ことの発端はたよらこさんのこちらの記事でした。

www.tayorako-hiraya.com

はてなブログに「h2」見出しがないこと、みなさんご存じでしたか?

 

はてなブログはブログタイトルが「h1」、記事内の見出しは「h3」から始まっており、「h2」がありません。

 

わたし自身は、「h2」見出しがないことは知っていましたが、まぁいっか、とさして気にしていませんでした。

 

(以前書いたデザイン変更の記事でも「見出しh3〜」で紹介しています) 

www.xoyu-nxo.work

が、どうやら見出しに「h3」がないことは、SEO的にあまりよろしくないそうです。

 

検索流入もそこまで多くもない「ゆーんの徒然日記」ですが、対策しておくに越したことはないでしょう。

 

ということで、これまで書いてきた100記事以上の「見出しh3」を全て「h2」にするにはどうすれば良いのか。

h3をh2に一括変換する方法

たよらこさんに紹介して頂き、おおまめさんの記事にたどり着きました。

おおまめさん、以前から読者登録させて頂いてたのに、、、!!!

 

それに実はこの記事、たぶんわたしブログ始めた最初の最初のほうに、読んでいました、、、、

 

当初はデザインCSSナニソレ状態だったので(今もそこまで進歩していませんが)そんなのもあるんだな、、、難しいからもう少し慣れてからにしよう、、、で終わらせてしまってたんですね。。

 

あの時もっとちゃんと読んで対策していれば、、、!!(ノ_<)泣

 

だがしかし。今回改めて「よしh3→h2にするぞ!!」と意気込んで読んでみてもやはり自分が何をすれば良いのか明確に分からなかったので←おおまめさんにアドバイスをいただきました。

わたしは「見たまま編集」を利用していますが、記事数がすでに100近くあった為jQuery→h2の方法を取ることとなりました。コードをコピー、わたしは記事上に貼り付けました。

 

おおまめさんの分かりやすい解説のおかげで、無事「h3→h2、h4→h3、h5→h4」といったかたちで、一括変更することができました。

 

たよらこさん、おおまめさん、この件では大変お世話になりました、、感謝感謝感謝でございますm(__)m!!

見出しh2導入後にやったこと

見出しデザイン変更

見出しh2を無事導入できたのは良いのですが、これまでの見出しデザインが総崩れしました。

 

h3→h2、h4→h3とした為、これまで大見出しとして使っていたデザインが中見出しのデザインになり、肝心の大見出しのデザインはただの太字、という感じになってしまったんですね(ーー;)

 

ですがコレは案外すんなり解決しました。

 

見出しデザインで使用しているコードを、一つ一つ、手動で書き換えていきました

 

h3→h2、h4→h3、h5→h4

 

といった感じですね。1つのデザインコードの中にいくつかh〜というのがあるので、全て間違えないよう変更です。 

ブログタイトル下の紹介文はh2

そして見出しデザインを変更したことで気付いたのですが、どうやらはてなブログのブログタイトル下の紹介文はh2のようです。

 

なぜ分かったかというと。

 

大見出しのデザインコードをh3からh2に変更したところ、そのデザインが紹介文にも反映されてしまったんですね。

 

おおまめさんにも相談しましたが、ブログタイトル下に大見出しの「吹き出し」のデザインがついてしまいました(´Д` )

 

結局解決方法が分からなかった為、現状紹介文を消している状態です。

記事中アドセンスのコード変更

わたしは記事中アドセンスを自動で貼り付けられるようにしています。

www.xoyu-nxo.work

このコードの設定が、1つ目の大見出しと、3つ目の大見出しの上という設定にしていた為、ズレが生じたんですね。

 

こちらも手動で、h3をh2に全て書き換えました。

 

でも、記事中アドセンスについては今後デザイン変更に伴いちょっと配置を改めたいなぁ、と思っています。

 

現状1つ目の大見出しの上に広告が来るようにしていますが、ゆーんのぼやき記事なんかの時には見出しすらつけないことも多いんですよね。

www.xoyu-nxo.work

それに、「目次」を入れたり入れなかったり、大見出しの位置も記事によってバラバラだったりするので、今後ひとつひとつ記事を確認しながら、「記事上(記事タイトルの下)」にコードを貼れるように統一していきたいなと思います。

「はてな記法」だと記事内アドセンスが反映されない

アドセンスを「記事上」にしたいのにはもう1つ理由がありまして。

 

先にも書きましたがわたしは普段は「見たまま編集」でブログを書いているのですが、おおまめさんの記事を読んで「はてな記法」にも挑戦してみたんですね。

 

夏の帰省中はPCではなくiPadでのブログ更新になる為、「はてな記法」のほうが効率が良さそうだと思ったからでした。

 

実際やってみると、「はてな記法」とても良かったです。

 

これは先日アップしたブログを「はてな記法」で書いている画面ですが、2画面でプレビューを常に表示しながら書くことができるんですね。

f:id:xoyu-nxo:20190730132523j:plain

もちろん大きな画面で編集を行いたい際には、右上の目みたいなボタンで消すことができます。

 

何より、PCだと画面上に常に文字の装飾画面が出てくれていますが、iPadだとスクロールして上まで戻らないといけないですよね。それが面倒くさい。文字の範囲選択もマウスが無いのでやり辛いです。

 

iPadでブログを書くなら「はてな記法」のほうが良いと感じました。

 

が。

 

「はてな記法」で書いて投稿した結果、記事内アドセンスがひとつも反映されていませんでした( ̄◇ ̄;)

 

このミーのお財布ショルダーの記事、有難いことにはてなブックマークのどっかしらに載ったらしく、たくさんの方からアクセス頂いたのですが(ブックマークしていただけたみなさまのおかげです。いつもありがとうございます(^人^))

www.xoyu-nxo.work

残念ながらアドセンスが反映されていないことに気付いたのは1日を過ぎた頃。

 

うそおぉぉお(゚ω゚)!?と思いながら直接コードを入力しその後は反映されていましたが、、ちょっとショックでした、、、、、泣

 

その後も「はてな記法」で試してみましたが、反映されず。

 

「はてな記法」では「*」で大見出しとなりますよね。

 

それにわたしが使っている記事内アドセンスのコードが対応していないのか、、?

 

せっかく「はてな記法」の良さに気付けたのですが、アドセンスコードの対策が取れていない為、再び「見たまま編集」で書いております。。。

 

てわけで、アドセンスを「記事上」にすれば「はてな記法」にできるよね。ということですね。

 

もしくは一度コードを全部取っ払って、改めて整理して貼り直す、というのも手なのかなと思っております。

 

なんにせ、夏帰省後、マイノートPCちゃんが手元にあるときですね。iPadのコピペのし辛さったらない。

今後 

これらを踏まえ、わたしが今後やっていきたいことをまとめます。

 

  • 文字の大きさの変更(大きくするコードを入れたが反映されなかった)
  • ブログのデザインテーマの変更を検討(iPadで見たときに横に長く見辛い)
  • アドセンスの配置を検討(できたら記事上にして統一感を)
  • 「はてな記法」にアドセンスを対応させる(大見出しが多くなるときは1つくらい入れたいですよね、、そもそも自動広告がちゃんと働いてくれたら、、)

 

て感じでしょうか。

 

本当はもっと言えば記事一覧でアイキャッチ画像が見切れまくっている問題もなんとかしたいし自分のアイキャッチももうちょっとなんとかならんもんかと思ってるしヘッダーになんかしら背景を入れたいとか色々、、色々あるのですが、、、、

 

とりあえずやり出したらキリが無さそうだし、現状iPadしか手元にありませんのでお大人しくブログを更新しようと思います。

 

最後はただのぼやき(笑)

 

ゆーんでした。