読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてな匿名ダイアリー(増田)は文章が広がって見にくいのでCSSで読みやすくする設定

はてなブログをカスタム ソフトウェア CSS Chrome

PCのブラウザで増田を読むと文章が横に広がって見にくい。ついでに文字を大きくするなどの微調整をCSSでしたので公開するよ。

ビフォーアフター画像

PCでご覧の方はクリックで画像を拡大できるよ。スマホやfeedlyの方ごめん。

画面全体

画面全体(1920x1080)のキャプチャー。クリックで拡大。

Before

After

一部分

原寸大の一部分をキャプチャー。

Before

After

下図で確認できる変更点は次のとおり。

  • 文字を大きく
  • キーワードの下線解除
  • 広告非表示

追加するユーザーCSSコード

ニーズに合わせて微調整してちょ。

/*
はてな匿名ダイアリー(増田)は文章が広がって見にくいのでCSSで読みやすくする設定
http://hapilaki.hateblo.jp/entry/custom-anonymousdiary
ver1.0.0.140514
*/
.afc,div#afc_footer,[id*="div-gpt-ad"] {
    display: none;/*広告を非表示*/
}
a.keyword {
    border: 0;/*キーワードの下線を解除*/
}
.hatena-body {
    font-size: 30px;/*記事本文の文字の大きさ*/
    max-width: 1000px;/*記事本文の横幅*/
}

ユーザーCSSをどうやって追加するの?

デフォルトで設定が可能なブラウザもあるが、Chromeだと次の拡張機能を使うと便利。

ユーザースタイルシートを編集できるChrome拡張機能stylebotの使い方 - はぴらき合理化幻想

まとめおよび所感

HTML、Class、CSSがよく変更されるので、時間の経過とともに上記設定では対処できなくなるかも。筆者が増田を読み続けている限りは今後CSSをアップデートするよ、たぶん。

Amazon.co.jp: 本物志向 高品質 ガイ ・ フォークス 仮面 ( アノニマス の マスク ) 肉厚 PVC製 ヨーグルト ・ ホワイト: 食品&飲料

Amazon.co.jp: 増田 神鏡 1.5号

Amazon.co.jp: ますだおかだ寄席~15周年記念単独ライブ~ [DVD]

てすとてすと