まじメモ|白兎Blog -副業×会社員×お金-

「副業×会社員×お金」をテーマにしたサイトです。働きながら給料以外に収入を得たい人に読んで欲しい副業ノウハウを経験談を交えてご紹介してます。

【はてなブログのカスタマイズ】副業ではてなブログをやる時にカスタマイズしておきたい場所!

f:id:shiro-usagi:20200724235904j:plain


 

こんにちは

白兎(@shirousagi_memo)です。

 

ブログの記事を「会社員×副業×お金」に変えてから中々更新が出来ませんが、頑張って更新していきますね。今日ははてなブログはけっしてワードプレスに負けないよ!と言う記事です。

 

ワードプレスでブログを2年ほどやっていて、本業でもワードプレスを使うのですが、どうしても機能的な部分を考えるとはてなブログよりもワードプレスの方が強くなります。やっぱりワードプレスのプラグインは強いなと言う印象です。

 

でも、デザインや機能で勝てないとしても、SEOとか収入面では絶対にはてなブログは負けてないと思っています。今日は、はてなブログで僕が実際に行っているカスタマイズをご紹介します。

 

今日ははてなブログの強化の記事って事で良いですか?

そうだよ!特にSEOにかかわってくる所や収益に関わる所なので大事だよ!

 

副業ではてなブログをやる時にカスタマイズしておきたい場所はココ

 ブログで記事を「noindex」させる意味

忘れもしない2020年の5月、僕のブログはアクセスが大幅減しました。その1つの要因に雑記ブログだったからと言うのがあります。雑記ブログが故に、質の低い記事や本来のネタと関わりの低い記事もあり、Googleアップでデートの餌食となったともいえます。

 

この「noindex」とは何かと言うと、記事は公開してるけど、Googleの検索に引っ掛けないようにする方法。それを聞くと、記事を書いたのに検索に出さないのは意味ないじゃん!と思う人いると思うのですが、それは違うんです。

 

Googleはどのページがnoindexしてあって、その記事の内容はどんな事が書かれているのかを見ています。その記事にどのくらいの人が来てるのかも見てます。関連性の低い記事をnoindexにする事でむしろサイトの評価葉が上がる事がよくあります。

noindexをまとめると
  • 記事は公開するけど検索には出さない
  • Googleはnoindexページを全部見てる
  • 関連性の低い引きをnoindexにする事でブログ評価があがる
  • はてなブログでも記事単位のnoindexは可能

 

noindexとは、Googleの検索エンジンにインデックスされないようにするため、htmlコードに記述するmetaタグ(meta要素)の値になります。つまり、HTMLにnoindexを記述することで、どのようなキーワードで検索してもGoogleの検索結果にそのページが表示されなくなるのです。ただし、noindexの設定で検索エンジンのインデックスからは対象外となりますが、ロボットの巡回は行われるため、noindexを設定しているページに発リンクがあれば、ページランクは渡されます。

 引用:noindexとは? SEOでの効果的な使い方を理解しよう!|アクセス解析ツール「AIアナリスト」ブログ

はてなブログの記事毎にnoindexさせる方法

  1. <script type="text/javascript">
  2.     // 追加するmetaタグの作成
  3.     var newMeta = document.createElement("meta");
  4.     newMeta.setAttribute("name","robots");
  5.     newMeta.setAttribute("content","noindex");
  6.     // 作成したmetaタグをhead要素内末尾に追加
  7.     document.getElementsByTagName("head")[0].appendChild(newMeta);
  8. </script>

 

方法簡単!

上のJacvaScriputを記事に埋め込むだけ!

 

f:id:shiro-usagi:20200823153542p:plain

 

埋め込む場所も簡単で、はてなブログを書く時の画面の「HTML編集」をクリックして、記事の一番上にこれを入れるだけ!簡単。

 

このJacvaScriputは記事に埋め込んでもユーザからは見えないので安心してくださいね。このソースを入れた記事は数日かけて検索から消えていきます。公開前の記事に入れておけば、公開はされて、読者は来てくれるけども検索からは見えないという事になります。

はてなブログで「PC」と「スマホ」で違うバナーを出しわける方法

はてなブログでと書きましたが、はてなブログでもワードプレスでも普通のWEBサイトでも使える簡単な方法。これはどんな時に使うのか?と言うと...

 

アフィリエイトバナーの時が多いですね。実際僕も使っています。このブログの記事下にはてなブログproのバナーが出ています。PCの時は横長が表示されますが、スマホで見ると正方形のバナーが表示されます。正にこんな時に使いますね。

 

特にブログで収益を上げたいと思っている人は、この悩みは結構多いはず。当然、ブログの記事内でも使えますので、上手く使って収益を上げましょう!

PCとスマホでバナーを出し分ける方法

CSSの設定
  1. /* パソコンで見たときは"pc"のclassがついた画像が表示される */
  2. .pc { display: block !important; }
  3. .sp { display: none !important; }
  4. /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  5. @media only screen and (max-width: 750px) {
  6. .pc { display: none !important; }
  7. .sp { display: block !important; }
  8. }

 

  • はてなブログの管理画面 ▽
  • デザイン設定 ▽
  • ペンチマーク ▽
  • デザインCSS 〇

 

上の順番でCSSの設定画面まで行き、上のCSSのソースをコピーしてデザインCSSの一番下に加えて保存。これでCSSの設定は完了。これは超簡単!

HTMLの設定
  1. <img class="pc" src="../img/forPc.png" alt="パソコン用の画像">
  2. <img class="sp" src="../img/forSp.png" alt="スマートフォン用の画像">

 

上は画像を切り分ける場合の設定だね。ここで混乱しないでね。大事なのは「class="pc"」と「class="sp"」の部分。要はPCのみに出したい場合はHTMLソースから「class="pc"」を足してあげればいい。

 

classがない時のHTMLは...

  1. <img src="../img/forPc.png" alt="パソコン用の画像">

 

となるけど、自分で切り分けのclassを追加すると…

  1. <img class="pc" src="../img/forPc.png" alt="パソコン用の画像">

 

となる!簡単^^。

 

もしPCとスマホでバナーを出し分けたい時は、同じ場所にPCとSPのHTMLが2つ入る事になるので混乱しないでね。2つ入ると言うか、classの部分だけが変わった同じようなHTMLが二つ入るって言った方が良いですね!

 

(引用:https://fastcoding.jp/blog/all/frontend/responsive_img/

まとめ

はてなブログで本気で稼ぎたいと思った場合、上記の設定2つは絶対覚えておいたほうが良いですね。特にSEOと収益に大きく関わる所なので、設定は必須だと思います。また、追加の設定があればこの記事に足して行きますので、皆さん宜しくお願いします。