- テーマを変更しました
- FontAwesomeの導入
- Jqueryの導入
- サイドバーのタブ化
- 追従する目次をサイドバーに追加
- 吹き出し型に変更
- 無料でも結構カスタマイズできる
- カスタマイズすればするほどパフォーマンスは落ちる
- その他
- 5月の収益が入金されるのか…
テーマを変更しました
Minimalismにテーマを変更しました。
以前は「Neumorphism」でしたがシンプルな方が良いですね。
FontAwesomeの導入
使いこなせていない自覚はありますが、一旦導入してみました。
設定→詳細設定→<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追加
こちらのサイトを参考にさせていただきました。
サイドバー→モジュールを追加→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;/*タブの下線*/
}
追従する目次をサイドバーに追加
こちらのサイトを参考に追加させていただきました。
中々うまくいかず、、、でしたが何とか出来ました。
吹き出し型に変更
賛否両論あるみたいですが、一旦様子見で導入しました。
定型文貼り付け、として吹き出しを用意しておきました。
文章を入力する
書き換えれば終わり。Shift+Enterで改行
無料でも結構カスタマイズできる
- サイドバーのタブメニュー化
- アイコンの導入
- 追従する目次
等、無料版でも結構カスタマイズ出来ました。
出来ないカスタマイズ
カスタマイズすればするほどパフォーマンスは落ちる
Googleから提供されている「PageSpeedInsights」でサイトのパフォーマンスを測定できます。
これを見ながら、もう少しパフォーマンスを改善しないとと思います。
その他
PVが伸びない…
原因はGoogle検索からの流入できていない、という事に最近気づきました。
Googleトレンド
特定の「検索ワード」に対して、「関連ワード」が見られます。
Google Search Console
Googleから自サイトへのアクセスを見られる計測出来ます。
が…
「ブログで飯を食いたい」というモチベーションは無いので、
そこまでガッツリやらなくて良いかと思ってます。
5月の収益が入金されるのか…
5月分の収益は6月末に入金されるようで、Googleから銀行への「入金確認」は完了。
あとは、5月の収益が無事に入金されれば…という状況です。