羊をかぶったライオンのブログ

サラリーマン向けの副業・資産運用をご紹介

h3をh2へ、パンくずリスト導入、目次導入、記事中にGoogleAdsense導入、Minimalism導入。

スポンサードリンク

f:id:goodman-1qaz:20170617140804p:plain

パンくずリスト導入」「h3タグをh2タグへ変更」「記事中にGoogleAdsense導入」「目次導入」「ブログテーマの変更」を行いました。

 

身バレ防止で大幅にブログを編集しました

LINEスタンプからこのブログが身バレすることを恐れて先月から大幅にブログを編集しました。

今まで投稿したすべての記事(約100記事)のイラストやLINEスタンプ関連のリンクを編集するために、すべての記事を1つずつ編集画面を開いて編集を行いました。かなり時間がかかってブログ更新ペースが落ちてしまいました。

これだけ大掛かりな編集は当分しないはずなので、この際ずっと放置していた「パンくずリスト導入」「h3タグをh2タグへ変更」というカスタマイズを行いました。

カテゴリーの編集&パンくずリスト導入

ブログを始めたばかりの僕は「パンくずリスト?なにそれ?あんまり大事じゃなさそう」と思ってパンくずリスト機能は使っていませんでした。

ブログを始めて1か月くらい経った時にポジ熊 (id:pojihiguma) さんの記事を見ました。

パンくずリストって大事なんだ。。。」というのが正直な感想でした。でも内容が難しくて放置していたので、この機会に導入しました。カテゴリーもグズグズだったので消したり名前を変えたりしました。

www.pojihiguma.com

ポジ熊さんの記事の中にも書かれていますが、実際のカスタマイズ方法は池田仮名 (id:bulldra) さんの記事で紹介されています。僕の独学では絶対にできない内容です。本当に尊敬します。

効果があるかは僕の少ない記事数とアクセス数では検証が不十分です。でもこのカスタマイズは将来的に必ず行うものなので、まだの方は簡単なので是非やってみてください。

bulldra.hatenablog.com

h3,h4をh2,h3にすべて変更

これもポジ熊 (id:pojihiguma) さんの記事を見て、ブログ初心者の僕は全然頭に入ってこない内容だけど「なんとなく大事そう」ということだけ覚えていました。

www.pojihiguma.com

簡単にいうと、「はてなブログの機能をそのまま使ったら、大見出しがh3タグ、中見出しがh4タグになる。Googleさんから見たらh2タグどこ行ったの?ってなるのでh2タグを見出しに使った方が良さげです」という内容です。

実際にh2タグを導入してアクセス数が上がった人もいるようなので、やって損はないカスタマイズだと思ったので僕も導入しようとしましたが「とにかく手間がかかる

自動でタグを変更してくれるツールも検索したらあったのですが、僕はすべての記事にたいして「編集するボタン」を押す決意はした後だったので全部手動で変更することにしました。

その時に出会ったのがシロマティ (id:shiromatakumi) さんのこのChrome拡張機能。

www.notitle-weblog.com

実際に僕のChromeにもインストールしてみたら、説明書がいらないくらいシンプルな作りで「h2」がすぐに目に止まりました。記事編集画面でこのボタンを押したら簡単にh2タグを導入できました。

「なんて素晴らしいアプリを作って下さる人がいるんだ」と改めて感動しました。

f:id:goodman-1qaz:20170711180111p:plain

記事中にアドセンスを入れる

これも「前からやってみようかなぁ」と思って放置していたので、今回導入しました。この記事を見てそのままコピペさせてもらったらできます。

uxlayman.hatenablog.com

注意点としては、見出しにh2タグを使っている方はコードの真ん中らへんを編集しないと、広告がいい感じに表示されずに固まってしまうはずです。

この「h3,h4,h5」を「h2,h3,h4」に変更してください。h2タグを導入していない方はそのままで大丈夫です。

addEventListener("DOMContentLoaded", function() {
    var $target = $('.entry-content h3,h4,h5');

目次[:contents]を導入

よく読ませていただいている方の記事にはだいたい「目次」がついています。僕は

「これはきっと高度なカスタマイズをしないとダメそうだから僕にはまだ早い」と思い込んで目次を入れることから逃げていました。

でもシロマティ (id:shiromatakumi) さんのChrome add-onをインストールして、アプリを開いてみたら「目次」っていうボタンがありました。押してみました。

f:id:goodman-1qaz:20170711180057p:plain

パソコンで「見たままモード」を使って記事を書いている時に「ここに目次を入れたいなぁ」と思ったところで、このボタンを押すと簡単に目次が作れます。

HTML編集の画面を見ると<p>[:contents]</p>と挿入されています。不安だったらプレビューも見てください。

「こんなに簡単に目次を入れれるならすべての記事に入れよう」ということで、このカスタマイズも100回編集画面を開く際に同時に行いました。

ブログテーマを「Minimalism」に変更

ブログテーマはPCページ用に「Brooklyn」、スマホページはいろんなカスタマイズ記事を参考に組み合わせて使っていました。

ずっとウズウズしていました。こどみす (id:codomisuさんが新しく作った「Minimalism」というテーマが出てからずっと使いたくてしょうがなかったんです。

hitsuzi.hatenablog.com

導入してからビックリしたのが「本当に簡単なカスタマイズだけで使えるようになる」 という点です。

僕がこのテーマをインストールしてからおこなったカスタマイズはこの3点だけです。

  • ナビゲーションメニューを設定
  • h2とh3タグのデザイン編集
  • シェアボタン導入

手順はこどみすさんのブログにすべて書かれていますので簡単に設定できます。僕はレスポンシブで使っていて、スマホ版もシュッとしたデザインでとても気に入っています。

さいごに

この記事を見てもらったらわかるように、困った時は検索したらすでに誰かが対応してくれているんです!しかも丁寧に手順まで教えてくれるんです。

Chrome拡張機能を入れていない方は絶対に入れるべきです。目次もh2タグも簡単に入れれますし、背景をグレーにするボタンや中央寄せのボタンもあるのでかなり使い勝手がいいです。

ブログテーマは自分がしっくりくるものに巡り合うまでは、ころころ変えて試してみることをおすすめします。