ぽんむらのーと。

明石に在住するぽんむらの自由帳。カメムシになりたい

はてなブログカスタマイズまとめ【2017】

こんちゃす!

メインサイトはWordPressな ぽんむら です!

こっちのはてなブログも更新を頑張りたいのでWordPressとの違いにもたつきながらもカスタマイズをもちもちと進めています

f:id:ponmura:20170115141934j:plain

今回は自分自身の備忘録も兼ねて実装した内容と参考にしたサイトをご紹介します

カスタマイズ内容が増えたら随時更新するかも!?

SNSシェアボタンと読了時間

f:id:ponmura:20170115132810j:plain

SNSシェアボタンは色々な方が作られていますが、一番見た目が好みだったこちらのデザインを使わせていただいています

shiromatakumi.hatenablog.com

読了時間の表示は下記の効果があるようなので

  • 滞在時間が13.8%向上
  • SNSへの登録が67%向上

WordPressでも定番のカスタマイズですし、邪魔になるものでもないですしね?

basanote.hatenablog.com

SNSフォローボタン

フォローボタンはこちらをベースにしてサードバーに。Facebookは今のところアカウントがないので省いています

www.dreamark.tokyo

サイドバーのプロフィールの下にタイトル無しでモジュールを追加したら隙間が気になったので・・・

f:id:ponmura:20170115131221j:plain

詰めました!

f:id:ponmura:20170115131237j:plain

「プロフィールモジュール」の下部余白(margin-bottom)を「0」にしただけなので「デザインCSS」に下記のコードを入力すればOK

.hatena-module-profile {
    margin-bottom: 0;
}

色味とかはもうちょっと他のカスタマイズに合わせて調整しようと思っています!

トップへ戻るボタン

あれば便利な「トップに戻るボタン」。なくても別に問題はないけれど簡単に実装できるのでつけておいて損はないと思います

basanote.hatenablog.com

トップページを最新記事一覧に

最初は1つ1つの記事に「続きを読む」設定をしていました。こんな便利なカスタマイズがあったとは・・・!

powerbombkun.hatenablog.j

このあたりは公式の設定で変更できればいいのになーとも思いますけどね

画像リンクを無効化

はてなブログって本文に画像を挿入すると勝手に元画像へのリンクが挿入されますよね。あれが不要だと思うので!

同じように思っている場合は「デザインCSS」に下記のコードを入力すればOK

.hatena-fotolife {
    pointer-events: none;
}

画像挿入時に「.hatena-fotolife」というクラス名が付与され、「img」タグに直接「src」属性が付与されるので、そこに対してリンク無効化トラップ発動!

画像挿入時リンクが付かないようにしているのではなく、リンクを打ち消している状態ですね。もうちょっとスマートなやり方があるとは思いますが、一番簡単だと思います

画像挿入後に自分でリンクを設定した場合は「img」タグを「a」タグで囲む形になるので正常にクリックできるはずです。

本文中の画像を中央揃え(センタリング)

はてなブログで不便だと思ったのがツールバーに「中央寄せ」や「右寄せ」といった設定項目がないことです。

f:id:ponmura:20170115141502j:plain

これはWordPressの投稿画面の画像です

はてなブログの場合はタグを直打ちしないといけないので、個別に設定したい場合は投稿画面の「HTML編集」を開いて、「img」を囲う「p」タグ、もしくは「div」タグなどに「style="text-align:center;"」を設定すればOKです

<p style="text-align:center;">imgタグ</p>

「p」と「style」の間に半角スペースを入れるのをお忘れなく

一々設定するのは面倒くさい! 全てセンタリング派! というあなたは「デザインCSS」に下記のコードを追記しちゃってください

.hatena-fotolife{
    display: block;
    margin: 0 auto;
}

全部中央寄せしちゃったけど時々は左に寄せたいというときは「left」にしちゃえばOK

<p style="text-align:left;">imgタグ</p>

まとめ

先人たちの情報のお陰で困難なカスタマイズが捗ります。ありがたいですね・・・

私もそこまで詳しくはないですがカスタマイズ関係の情報を更新できるように頑張りたいと思います!