暮らしとお金

結婚を機に税金や資産運用、老後資金等について考える

暮らしとお金

「innocent」で行ったカスタマイズ まとめ

ゆう(@life__money)です。
現在、「Innocent」のテーマを使用していますが、
当ブログで行ったカスタマイズについて忘備録も兼ねてまとめました。

ヘッダー下のグローバルナビ

テーマサイトで紹介されているカスタマイズの中にもグローバルナビの設定について紹介されていますが、今回はコチラ(↓)のサイトを参考に設置しました。

 スマホで横2列の縦組み、パソコンで均等な横並びになるレスポンシブなナビゲーションメニュー

公式サイトにあるナビゲーションバーの設置

当初、上記のコードでグローバルナビを設置していましたが、数を増やしたりアイコンフォントを使用すると崩れてしまうので、テーマストアで紹介されているコードでグローバルナビを設置しました。

 はてなブログテーマ「Innocent」のカスタマイズ(ナビゲーションバー編)

なお、アイコンフォントは下記の2つのサイトを使用しています。

 はてなブログで使えるアイコンフォント(Webフォント)120種類
 Awesome Icons

もし、「Awesome Icons」を使用する場合は、下記のコードをheadの要素を追加に入れると表示されると思います。

 設定 > 詳細設定 > headに要素を追加
<!-- アイコンフォント始まり -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- アイコンフォント終わり -->

ヘッダー下にリンクの挿入

グローバルメニューの下によくある1行のリンク
下のHTMLとCSSをそれぞれグローバルメニューの下に書き込みました。

カスタマイズ > タイトル下
<!--ヘッダー下テキストリンク始まり-->
<div class="header-info">
<a href="リンクのURL" target="_blank">リンクのタイトル</a>
</div>
<!--ヘッダー下テキストリンク終わり-->

 

カスタマイズ > デザインCSS
/******グローバルナビ下のテキストリンク始まり ******/
.header-info {
  position: relative;
  max-width: 100%;
}
.header-info a {
  font-weight: bold;
 display: block;
 font-size: 15px;
 text-decoration: none;
 text-align: center;
 color: #0000cd;/* 文字色 */
 background: #f5f5f5;/* 背景色 */
 padding: 0.5em 1em;
 border-radius: 0px;
}
/******グローバルナビ下のテキストリンク終わり ******/

サイドバーのカスタマイズ

デフォルトだとサイドバーの背景が白く変わり映えがないので、こちら(↓)のサイトを参考にサイドバータイトルをカスタマイズしました。

 はてなブログのサイドバーのカスタマイズ方法 [コピペで使える]

「トップへ戻る」の設置

記事を読み進めて行くと上に戻すのにスクロールでは面倒です(笑)
多くのサイトでも取り入れている「トップへ戻る」ボタンを下記のサイトを参考にフッターとデザインCSSにタグを入れました。

まずは、headに下記のタグを入れました。

 設定 > 詳細設定 > headに要素を追加
<!-- トップへ戻る始まり -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- トップへ戻る終わり -->

 

カスタマイズ > フッター

<!--トップへ戻るボタン始まり-->
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});

// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="blogicon-chevron-up lg"></i></a>
<!--トップへ戻るボタン終わり-->

 

カスタマイズ > デザインCSS
/*****トップへ戻るボタン始まり****/
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#c0c0c0;
    font-size:30px;
  background color:rgba(0,0,0,0.4);
}
/*****トップへ戻るボタン終わり****/

本文中見出しのカスタマイズ

サイドバー同様、デフォルトでは本文中の見出しが白色背景で目立たないので、下記のコードをデザインCSSに追加しました。

カスタマイズ > デザインCSS
/*****本文中見出し始まり****/
.entry-content h2 {
  padding: 4px 10px;
  color: #111;
  border-top: 3px solid #0000ff;
  border-bottom: 3px solid #0000ff;
}
.entry-content h3 {
  padding: 4px 10px;
  color: #111;
  border-bottom: 3px solid #0000ff;
}
/*****本文中見出し終わり****/

目次のカスタマイズ

デフォルトでは四角で囲まれただけだったので、こちら(↓)のサイトのコードをそのまま使わせて頂きました。(背景の色は変えています。)

 【CSS】コピペするだけ!「目次」をカスタマイズする方法 - えむしてっく

関連記事「Milliard」を2列にカスタマイズ

他の方のブログでもよく見かける「Milliard」という、関連記事を載せるブログパーツをこのサイトに従って2列(スマホ版は1列)にカスタマイズして設置しました。

 関連記事「Milliard」を2列にカスタマイズして設置

画像を拡大するカスタマイズ

表などを使用する為、少しでも見やすいようにとマウスオーバーした時に画像が拡大できれば、、、と思いこちら(↓)のサイトを参考にコードを追加しました。

 【コピペ一発】はてなブログでマウスオーバーした時に画像を浮かせる方法

なお、コード内の
webkit-transform: scale(1.05);
transform: scale(1.05);
の赤文字が拡大率になっているので、ひとまず1.05としました。

アイキャッチ画像の作成

アイキャッチ画像をオシャレに!
って事で、こちら(↓)を参考にアイキャッチの画像を作ってみました☆

簡単ですが、やはり、センスは問われるようです(笑)

 PC版「Canva」の使い方とデザインの基本【初心者向け】

その他、カスタマイズの参考になるサイト

今回は使用しませんでしたが、カスタマイズ方法を色々と見ている中で参考になるサイトをまとめました。
こちらは随時更新していこうかと思います。

 はてなブログのカテゴリーをタグっぽくするCSS

 はてなブログのフッター、フッターメニューまわりのカスタマイズ - Minimal Green