Create Self Rails

「自分の世界を創る」と決意した 28 歳の男が、自分が発信したいと思ったことを発信するブログである。

はてなブログをもっとカスタマイズしてみたので方法をまとめたよ

 f:id:projectkanata:20170818163411j:plain

どうも、カナタです。

 

また、ブログのカスタマイズに凝りだしてしまいました笑

 

ブログは中身も重要ですけど、見た目も案外重要なんです。

「人は見た目が9割」という本が一昔前に流行ったように、人も第一印象が重要なように、

ブログも見た目をきれいにしないと、読者はすぐにブラウザバックしてしまいます。

 

というわけで、今回は僕のブログに施したカスタマイズとその方法をご紹介します。

 

 

アイコンを使う

f:id:projectkanata:20170818163558p:plain 

グローバルヘッダの文章の左に、 などのアイコンがありますよね。

これは、FontAwesomeというWebで使える簡易アイコンです。

アイコンをつけるだけでも、だいぶ印象が違って見えてきませんか?

 

このFontAwesomeを使うには、まず

設定詳細設定検索エンジン最適化headに要素を追加、に以下のコードを追加します。

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

 

使えるアイコンは以下のサイトにあります。

 

f:id:projectkanata:20170818163355p:plain

ここからアイコンの検索ができます。

(サイトが英語なので、英語で検索する必要がありますが・・・)

サイト中のどれかのアイコンをクリックすると、このような画面がでてきます。

f:id:projectkanata:20170818163400p:plain

赤丸で囲んだ部分がアイコンを表示するHTMLです。

これをコピペすればアイコンが表示されます。

カスタマイズで使う分にはこれで良いですが、はてなブログの記事内でアイコンを使う場合は「HTML編集」にコピペしただけでは表示されません。

これを解決するには、スクリプトに赤字部分を追加します。これで正しくブログ記事にアイコンが表示されます。

(「見たまま編集」には表示されません。「プレビュー」で確認してください。)

<i class="fa fa-star-o" aria-hidden="true">&nbsp;</i>

 

アイコンは量が多く、目的のアイコンを探すのは結構大変です。

僕が使っているアイコンを以下にまとめました。

参考にしてみてください。

アイコン 名前 スクリプト
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
ノートパソコン <i class="fa fa-laptop" aria-hidden="true"></i>
Twitterマーク <i class="fa fa-twitter" aria-hidden="true"></i>
封筒 <i class="fa fa-envelope-o" aria-hidden="true"></i>
魔法の杖 <i class="fa fa-magic" aria-hidden="true"></i>
スマートフォン <i class="fa fa-mobile" aria-hidden="true"></i>
書類 <i class="fa fa-file-text-o" aria-hidden="true"></i>
<i class="fa fa-book" aria-hidden="true"></i>
ハート <i class="fa fa-heart" aria-hidden="true"></i>
スパナ <i class="fa fa-wrench" aria-hidden="true"></i>

 

フッターを好きなように変更する

f:id:projectkanata:20170818163602p:plain

こんな風に、ページの下にある文字列(フッター)を自由に変更できます。

 

はてなブログProの場合は、

設定詳細設定ヘッダとフッタ、の「ブログにヘッダとフッタを表示しない」にチェックを入れてください。 

そうでない場合は、以下のサイトを参考に、フッタを消してください。

 

次に、以下のコードを

デザイン→フッタ

に記述してあるHTMLの一番下に追加します。 

<div id="copyright">© 2017 あなたのブログ名</div>

 

そして、以下のCSS

デザイン→デザインCSS

に追加します。

#copyright {
    padding: 20px;
    text-align: center;
    background: #87CEFA;/*背景色*/
    font-size: 14px; /*文字の大きさ*/
    color:#222;/*文字の色*/
}

背景色、文字の大きさ、文字の色はあなたのブログに合わせて変更してくださいね。

 

見出しのタグを自動変更する

はてなブログでは、

タイトルにh1タグ、大見出しにh3タグ、中見出しにh4タグ、小見出しにh5タグが使われています。

なので、h2タグが使われていません。

 

検索サイトから見ると、hタグがh1、h3、h4、h5というように歯抜けになっていると

「このサイト、HTMLの記述が正しくないな?」

と思われて評価が下がってしまう可能性があります。

 

これは大見出しをh2、中見出しをh3、小見出しをh4にすることで回避できます。

でも、いちいち手作業でタグを変えるのは面倒くさい…。 

ですが、なんとこの作業を自動でやってくれる素晴らしい方法が以下のサイトにのってます。

 

これを使うと、過去の記事の見出しタグも変えてくれるし、これから書く記事のタグも自動で変えてくれます。

うん、便利便利。

 

デザインCSS内でh3、h4、h5タグを使っている場合は、それぞれh2、h3、h4タグに変更してください。

また、使用しているブログテーマによっては見出し部分の装飾がおかしくなることがあります。(僕の使ってるBrooklynではおかしくなりました。)そうなった場合は以下の参考記事を参照してください。

 

あわせて読みたい記事を表示

f:id:projectkanata:20170818163511p:plain

記事の下に、「あわせて読みたい記事」を自動で追加します。

 

最近はてなブログに「関連記事」が追加されたので、どちらを使うかはお好みで。

 

あわせて読みたいのほうはカテゴリごとに関連記事が表示される一方、

公式の関連記事のほうはシンプルです。

 

サイドバーに目次を追従

f:id:projectkanata:20170818163403p:plain 

サイドバーに、追従する目次を追加します。

 

長い記事の途中で、「あ、あそこの見出しに飛びたい!」って思ったことはありますか?

僕は、ブログカスタマイズ中にちょっとだけ思いました。

目的のところまでスクロールしないといけないので意外と面倒なんですよね。

「どこにあったっけ?」と思った日にはさらにストレスたまります。

 

それを解決するのが、追従する目次です。

これがあれば、目的の見出しにすぐ飛べますよ。

 

「見出しのタグを自動変更する」と組み合わせる場合

先ほど説明した、「見出しのタグを自動変更する」と

この目次追従を両方使おうとすると、そのままでは正しく動きません。

これを解消するには目次追従のスクリプトを変更する必要があります。

 

var SECTION_QUERY = 'h3,h4,h5';

var SECTION_QUERY = 'h2,h3,h4’;

に変更してください。

 

また、

// 段落作成
if (self.nodeName.toLowerCase() == 'h4') {
  level = 1;
 else if (self.nodeName.toLowerCase() == 'h5') {
  level = 2;
}

// 段落作成
if (self.nodeName.toLowerCase() == 'h3’) {
   level = 1;
} else if (self.nodeName.toLowerCase() == 'h4’) {
   level = 2;
}

に変更してください。

 

「あわせて読みたい記事を表示」と組み合わせる場合

先ほど説明した、「あわせて読みたい記事を表示」と

この目次追従を両方使おうとすると、

目次の最後にあわせて読みたい記事が入ってしまいます。

f:id:projectkanata:20170818174055p:plain

これを解消するには目次追従のスクリプトを変更する必要があります。

 

// サイドバーに目次を追加する
lastModuleChild.parent().before('<div class="hatena-module-title">目次</div>');
lastModuleChild.append('<div class="sectionList"><ol>' + list.join('') + '</ol></div>');

// サイドバーに目次を追加する
lastModuleChild.parent().before('<div class="hatena-module-title">目次</div>');
list.pop();
lastModuleChild.append('<div class="sectionList"><ol>' + list.join('') + '</ol></div>');

としてください。

 

文章を目立たせる

f:id:projectkanata:20170818163517p:plain 

このように文章を枠で囲って目立たせられます。

 

 

使う枠の種類を増やしたい場合

使う枠の種類を増やしたい場合は、CSSをコピペして増やし、.emphasize-linkの部分を任意の文字列に変更します。

HTMLのほうも同じく変更します。

 

FontAwesomeのアイコンを使いたい場合

FontAwesomeのアイコンを枠見出しに使いたい場合は、

font-family: "blogicon";

font-family: "FontAwesome";

に変更します。

 

また、

content: "\f029";

の赤字部分をFontAwesomeサイトのアイコンの赤線部分の文字列に変更します。

f:id:projectkanata:20170818232713p:plain

 

普通の文章を目立たせる場合

参考サイトではリンクを枠線で囲む方法が紹介されていますが、

ちょっと工夫すればリンクだけではなく普通の文章も目立たせられます。

f:id:projectkanata:20170818222437p:plain

 

普通の文章を目立たせる場合は、

.entry-content .emphasize-link p:last-child

.entry-content .emphasize-link div:last-child

に変えてください。そうしないと、枠内で文章の改行ができません。

 

また、使う際は

<p class="emphasize-link">

ではなく、

<div class="emphasize-link">

としてください。

 

最終更新日を表示

f:id:projectkanata:20170818163457p:plain

このように、記事を書いた日の隣に記事の最終更新日を表示してくれます。

これがないと、古い記事を更新したとしても、読者からは古い情報だと思われてしまいます。

 

RSSFeedlyボタン設置

f:id:projectkanata:20170818163408p:plain 

ブログの更新情報を受取るときに、

はてなブログユーザーであれば読者登録を使いますが、

そうでない場合は主にRSSリーダーを使用すると思います。

 

リピーターを増やすためにも、ブログの更新情報を受け取れる手段はできるだけ多いほうがよいでしょう。

 

僕は、RSSFeedly2つを設置しました。

Feedlyボタンは以下のサイトを参考に設置しました。

 

RSSボタンは参考サイトにはありませんが、FeedlyボタンCSSを参考にして

CSSHTMLを少し変えるだけでできてしまいます。

 

まずは以下のコードを

デザインデザインCSS

に追加します。

.sidebar-follow-buttons .rss {
    background: #FF8C00;
    color: #ffffff;
}
.sidebar-follow-buttons .rss:hover {
    background: #FFBC30;
}

上のbackgroundは表示される背景色、

下のbackgroundはマウスを置いたときの背景色です。

 

そして表示させたい場所に以下のHTMLを追加します。

このHTMLはサイドバー用です。

<a class="rss" href=“あなたのブログURL/rss" target="_blank">
<i class="blogicon-rss lg"></i>
<span class="inner-text">RSS</span>
</a>

 

サイドバー以外に設置する場合でも、

同じようにCSSとHTMLを変えることでできますよ。

 

Feedlyのアカウントを作成したときに気づいたんですが、このブログにはFeedlyへのリンクがないにもかかわらずFeedlyをフォローしてくれた方がいました。ありがとうございます!)

  

「自分のID」と「◯日前」を消す

f:id:projectkanata:20170818163502p:plain

この、地味〜に邪魔なヤツを消してしまう方法。

 

年齢を自動で計算

最後はちょっとした小技を紹介。

 

プロフィールなどに年齢を書いている場合、

1年に1回誕生日を迎えるたびに更新しないといけませんよね。

1年に1回だし、そこまで面倒くさくはない?

いや、1年に1回だからこそ忘れてしまう可能性が高いです。

そのままにしておくと、年齢詐称してしまうかも

 

そこで役に立つのが以下のスクリプト。

<script type="text/javascript">
// ゼロパディングするための関数
const paddingZero = (num, digit) => ('0000' + num).slice(-1 * digit);
 
// 誕生日
const birth = new Date("年-月-日");// あなたの誕生日をいれる
const y2 = paddingZero(birth.getFullYear(), 4);
const m2 = paddingZero(birth.getMonth() + 1, 2);
const d2 = paddingZero(birth.getDate(), 2);
 
// 今日の日付
const today = new Date();
const y1 = paddingZero(today.getFullYear(), 4);
const m1 = paddingZero(today.getMonth() + 1, 2);
const d1 = paddingZero(today.getDate(), 2);
 
const age = Math.floor((Number(y1 + m1 + d1) - Number(y2 + m2 + d2)) / 10000);
 
document.write(age);
</script>

これを年齢を表示したいところに追加すれば、

自動的に現在の年齢が計算され、誕生日になると自動で年齢が1つ加算されます。

  

 

追記:

どうやら、参考サイトが間違っていたようで正常に動作しませんでした。

誕生日の部分は「("年-月-日")」にしてください。

また、1つのページ内で複数回使う場合、2回目以降は

document.write(age)

を記述するだけで年齢が表示されます。

 

さいごに

今回はブログのカスタマイズ方法をご紹介しました。

 

前に僕が書いたこちらの記事も参考にして、

あなたのブログを色々とカスタマイズしてみてくださいね。

 

それでは!ヾ| |