TA_LOG

TA-LOG

理想の在宅ワーク環境づくり

無料はてなブログでとことん試行錯誤してみた

5月にGoogleAdsenseの審査が通ってから、試行錯誤を繰り返してます。
とことん「無料はてなブログ」を使い倒すべくデザインを色々と変えてみました。

テーマを変更しました

blog.hatena.ne.jp

Minimalismにテーマを変更しました。

blog.hatena.ne.jp

以前は「Neumorphism」でしたがシンプルな方が良いですね。

FontAwesomeの導入

fontawesome.com

使いこなせていない自覚はありますが、一旦導入してみました。

設定→詳細設定→<head>要素にメタデータを追加

<script src="https://kit.fontawesome.com/XXX.js" crossorigin="anonymous"></script>

XXX.js部分はFont Awesomeに登録したときに発行されるものをコピペ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

CSSも同時に記載しておきましょう。

これでアイコンが使用できるようになります。

Jqueryの導入

同じ場所にjqueryのパスを記述しておきました。バージョン古いか?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

サイドバーのタブ化

サイドバーを少し整理しなおしました。

サイドバーにHTML追加

こちらのサイトを参考にさせていただきました。

www.hiroseyonaka.com

サイドバー→モジュールを追加→HTMLに以下を記入

<div class="hatena-module-title2">
<span class="tab">最新記事</span>
<span class="tab">月別</span>
<span class="tab">カテゴリ</span>
</div>

タブを追加したモジュールより3つ取得するようにしました。

順番がずれると、内容もずれます。

フッタに以下追加

<script>
$(function(){
$(".hatena-module-entries-access-ranking,.hatena-module-recent-entries,.hatena-module-category,.hatena-module-archive").addClass("module");
$(".hatena-module-title2").parents(".hatena-module-html").css("margin-bottom",10);
var Module = $(".module");
Module.hide();
Module.first().show();
Module.find(".hatena-module-title").hide();
$(".tab").click(function(){
var index = $(this).index();
$(".tab").removeClass("active");
$(this).addClass("active");
$(Module).hide();
$(Module).eq(index).show();
});
});
</script>

デザインCSSの追加

以下をコピペ。

/*サイドバータブメニュー*/
.tab{
    display: inline-block;
    padding: 8px 15px 5px 15px;/*横に入りきらない場合はこの2番目と4番目の数字を小さく*/
    background: #f0f0f0;/*反応していないタブの背景色*/
    border-radius: 5px 5px 0 0;
    font-size: 12px;/*横に入りきらない場合はここの数字を小さく*/
    cursor: pointer;
}
.active{
    color:white;
    background: black;/*反応しているタブの背景色*/
    border-radius: 5px 5px 0 0;
}
.hatena-module-title2{
    border-bottom: 3px solid black;/*タブの下線*/
}

追従する目次をサイドバーに追加

こちらのサイトを参考に追加させていただきました。

www.it-the-best.com

中々うまくいかず、、、でしたが何とか出来ました。

吹き出し型に変更

賛否両論あるみたいですが、一旦様子見で導入しました。

www.notitle-weblog.com

定型文貼り付け、として吹き出しを用意しておきました。

文章を入力する

書き換えれば終わり。Shift+Enterで改行

無料でも結構カスタマイズできる

  • サイドバーのタブメニュー化
  • アイコンの導入
  • 追従する目次

等、無料版でも結構カスタマイズ出来ました。

出来ないカスタマイズ

 

カスタマイズすればするほどパフォーマンスは落ちる

Googleから提供されている「PageSpeedInsights」でサイトのパフォーマンスを測定できます。

pagespeed.web.dev

これを見ながら、もう少しパフォーマンスを改善しないとと思います。

その他

PVが伸びない…

原因はGoogle検索からの流入できていない、という事に最近気づきました。

Googleトレンド

特定の「検索ワード」に対して、「関連ワード」が見られます。

trends.google.co.jp

Google Search Console

Googleから自サイトへのアクセスを見られる計測出来ます。

search.google.com

が…

「ブログで飯を食いたい」というモチベーションは無いので、

そこまでガッツリやらなくて良いかと思ってます。

5月の収益が入金されるのか…

5月分の収益は6月末に入金されるようで、Googleから銀行への「入金確認」は完了。

あとは、5月の収益が無事に入金されれば…という状況です。