絶景@日本

素人写真で紹介する日本の絶景スポット

絶景@日本

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


スポンサーリンク

  旧ブログの記事について
現在、過去の記事の整理を行っている為に投稿日時がバラバラになっています。

ブログ開設当初から「 ZENO-TEAL」、「 マテリアルぽっぷ」を使用していましたが、今回「 Innocent」を新たに使用する事にしました。そこで、本テーマで行ったカスタマイズについて、備忘録も兼ねて改めてまとめてみました。

なお、以前の「 マテリアルぽっぷ」で行ったカスタマイズについては以下でまとめてあります。

 

ヘッダー画像の設置

以前からヘッダーに画像を設置していましたが、以前のカスタマイズではヘッダー画像からトップページにリンクする事ができず、また、タイトルやブログ説明を消す作業が必要でした。しかし、これらタイトルなどを消すコードの追加の必要がなく、トップページにリンクする事ができるカスタマイズ方法を見つけたのでそちらのコードに変更しました。
参考にしたサイトはコチラです。

 ヘッダー画像をどんなテーマでもサイズピッタリに調整するカスタマイズ - 人生RPG

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

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

 はてなブログテーマ「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">
<!-- アイコンフォント終わり -->

テキストリンクとお勧め記事の設置

今現在はwordpressでブログ運営をしているそうですが、当初ははてなブログでブログ運営をしていたそうで、はてなブログのカスタマイズについて書いてある  マリさんの「Migaru-Days」を参考にヘッダー画像の下にテキストリンクとお勧め記事を設置しました。

 はてなブログのヘッダーに細長いテキストリンクを挿入する方法 | Migaru-Days

 はてなブログのヘッダーにおすすめ記事をCSSだけで作ってみた | Migaru-Days

人気記事の表示

PC版のみとなりますが、テーマストアで紹介されている人気記事を表示するコードを追加しました。

 はてなブログテーマ「Innocent」に「おすすめ記事リスト機能」を追加しました - MoonNote

404ページのカスタマイズ

アクセスした時にページが存在しない場合、デフォルトでは「Entry is not found」と表示されるだけですが、こちらのページを参考にエラーページでも記事が表示されるようにしました。

 はてなブログで404ページをカスタマイズして人気記事を表示させる - あさの畑

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

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

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

更新日の自動表示

あまり頻繁に更新できていませんが、最新情報などを記載する場合も多少あり、wordpressのように更新日が表示できたらいいと思い、下記サイトを参考に更新日を自動表示するようにしました。。

 【表示の不具合に対応】はてなブログで記事の最終更新日を自動表示させる方法を紹介しますの! - 元IT土方の供述

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

サイドバー同様、デフォルトでは本文中の見出しが白色背景で目立たないので、下記のコードをデザイン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】コピペするだけ!「目次」をカスタマイズする方法 - えむしてっく

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

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

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

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

コピーライトの記載

著作権を表すコピーライト。
まぁ、殆ど誰?っていう人間の自己満足の日記のようなものですので、大した著作物ではないのですが、ちょっと格好付けてみたくて、以下のサイトを参考にコピーライトを表記してみました(笑)

 シンプルなコピーライトをはてなブログの一番下に表示させるやり方 - うえのブログ

記事下のIDと時刻の非表示

通常、記事の最後に記事を書いた人のIDと時間が表示されていましたが、以下のコードをデザインCSSに追加して非表示にしました。

カスタマイズ > デザインCSS

/******記事下のIDと時刻非表示始まり******/
span.author.vcard{
display:none;
}
span.entry-footer-time {
display: none;
}
/******記事下のIDと時刻非表示終わり******/

サイドバーの固定

少しボリュームのある記事を書くとどうしてもサイドバーの所に余白ができてしまいます。折角ブログを読んでくれているのに、その状態は勿体ないのでサイドバーを固定しました。

 【最強コピペのみ】はてなブログでサイドバーを下2つを固定する方法!! - swankys

アイキャッチ画像の作成

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

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

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

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

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

 はてなブログのカテゴリーをタグっぽくするCSS
 はてなブログのフッター、フッターメニューまわりのカスタマイズ - Minimal Green
 【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30