hiibii.net

MENU

【備忘録】はてなブログカスタマイズ方法まとめ


どうも。ヒビ(@hiibii256)です。

僕が、はてなブログにて行ってきたカスタマイズをまとめてみました。
ほぼほぼ、コピペ。簡単に行えるものだけです。ぜひ、ご活用ください。

お世話になったまとめサイト

ポジ熊の人生記

はてなブログを運営していくのなら、お世話になるサイト。
カスタマイズだけでなく、文章術、モチベーション、広告…etc
はてなブログに関するいろんなお話を聞けます!
このあとのサイトも、こちらのサイトから知りましたし…

はてなブロガー1年生に向けた最強のページはこちら↓↓

ばさのーと

javascriptを使ったものなど、凝ったカスタマイズを知ることができるサイト。
一見、必要なさそうな機能も、効果あり。導入はお早めに。

Yukihy Life

見出しやフォローボタンなど誰もが必要なカスタマイズができるようになるサイト。
最低限度のカスタマイズは、こちら。

テーマ

使用させていただいたテーマは「Brooklyn」 shiromatakumi.hatenablog.com シンプルで使いやすい。いろんな方が使われているので、カスタマイズ例が豊富。
コピペであれもこれも出来ちゃいます。 カスタマイズが苦手な方は是非。
マジで感謝感謝です。

追記:2017/02/27

オリジナルテーマに変更しました!!

www.hiibii.net

タイトル画像

  1. スマホ用の画像を用意 →レスポシンブデザインでは意味なかった…
  2. PCにも使える大きな画像を用意。スマホなら小さくするというカスタマイズで解決。
    なお、画像はいろいろなサイズを試したところ、幅900px*高さ200pxが最適でした。
    小さくするためのCSSは↓を参考にしました。

追記:2017/02/27

オリジナルテーマに従い、タイトル画像をなくしました。

ナビゲーションバーの設置・色変更

色の変更は「検索&置換」を使うと1度にまとめて変更出来るのでオススメ。

追記:2017/02/27

テーマ変更に伴い、ナビゲーションバーも変更しました。

www.yukihy.com

文字や行間のサイズ変更

デフォルトでは、行間が広すぎたので変更。ついでに、文字サイズも変更しました。

見出し

見出しのカスタマイズはいろんなサイトがあると思いますが、こちらのサイトがシンプルで使いやすいと感じたので、参考にさせていただきました。

目次

目次のカスタマイズといったら、このサイト。
目次の背景色はあんまり濃い色は使わないほうがいいです。文字が読めなくなっちゃう。

フォローボタン

URLの設定があるので独自ドメインにしてからのほうがいいかも。

シェアボタン

こちらのボタンのデザインが好きで使わしていただきました。

追記:2017/03/25 AddThisに変更しました

プライバシーポリシー例文

すでに、Googleアドセンスを貼っていたため、載せておきました。
そのまま使うとパクリとしてSEO的に問題かな?と思い、サイドバーに追加することにしました。(少し手を加えたけど…)

サイドバーへの追加方法

  1. 記事投稿画面にコピペ。
  2. このままでは、リンクが黒字でよくわからないので、アンダーラインとつけ、文字色を青っぽく変更。
  3. html画面にして、サイドバーのhtmlにコピペ。

Adsense自動

毎回、手動で追加することは面倒なので導入。
広告ユニットは新規作成すると、しばらく表示されないので焦らず、待ちましょう。
気づくまで何度、htmlをいじったことか…

もっと楽になったそうです!!!ありがたやー! uxlayman.hatenablog.com

リスト(箇条書き)

丸や四角、ダイヤなどいろんなものを選べます。

関連記事

超簡単かつ、オシャレに関連記事を表示できます!

ドメイン(記事)移行後にやる(といい)こと

基本的に、URLが必要なもの。

  • フォローするボタンのリンク修正・確認(はてな、freedly)
  • ナビゲーションバーのカテゴリーページへのリンク
  • Googleアナリティクスの「www」追加
  • (WordPressからの移行した人は、カテゴリー分類も。タグがカテゴリー扱いになってます!)

まとめ・総評

いかがだったでしょうか?
よく使う、カスタマイズを中心に、まとめてみました。

まとめた感想としては、こんなにカスタマイズしてたのかって感じです笑

どれも、コピペで行えるところがなによりいい!!