2022/3/12最終更新
皆さん、はてなブログは上手く使っていますか?
このブログは、かなり色々な部分をカスタマイズして、主に長文の記事とかを読みやすいように工夫しています。
まあ、まだ悩んでるところもあり、本当にこのカスタマイズが正しいのかは分かりませんが、とりあえず、今使っているものをまとめたいと思います。
この記事は、URLもしくはサイト名を明記して頂ければ、自由に内容の掲載、収入があるまとめサイト・検索サイト等へのリンクの掲載、及び、その他の著作権法上の「引用」と認められる範囲の利用が可能です。あらゆる許可は必要ありません。ただし筆者は一切の責任を負いません。具体的な条件はこちら(外部サイト)。
便利な機能
・shift+enterで普通の改行
最初に教えて欲しかった。
はてなブログでは、普通にenterを押すと「段落替え」になってしまい、やたら行間が空いてしまいますが、shift+enterを使うと通常の行間で改行できます。
・開閉ボタン
意外と知らないHTML。
こういうやつ。
クリックして表示
ああああああ下記のページにあるHTMLを、「HTML編集」から書き込むことで使えます。
すぐ出せるように、自分は<details><summary>などの部分を定型文貼り付け機能に登録しています。
(編集画面の右側のアイコンが並んでるところに追加できる機能です)
・続きを読む
記事編集ページから記事に追加できるやつ。記事の内容のうち、これを設定した部分までを、トップページの記事一覧に表示できます。
記事が検索結果にのるためにも重要です。
(参考)
・画像を圧縮する
はてなブログは、デフォルトで画像を遅れて読み込む(文字の部分を優先して読み込む)システムになってるので、正直意味があるかはやや怪しいですが、このブログに載せてる画像は容量を圧縮して、できるだけ早く読み込めるようにしています。
このサイトに画像を突っ込んで、丁度いいくらいの画質にしてダウンロードしています。
本文(文章)
大体のカスタマイズは、スマホ版のページでは特に反映されていません。
テーマは執筆時点でデフォルトとなっている「smooth」です。
色々難もあり、改造した点もありますが、はてなの公式テーマだし色々最適化されてるんだろうと信じて使っています。(実際容量はトップクラスに軽い)
・キーワードリンクを消す
特定の単語に自動的に下線が引かれる、はてなブログ独自の仕様を無くしています。
こちらのサイトのものを利用しています。CSSで下線の装飾を消すだけ(リンクは残ってる)だと、隠しリンク扱いとなりサイトの評価が下がってしまうかもしれないと思い、javascriptを使っています。
・本文の幅
「smooth」のテーマは、自分がフォントサイズを小さくした事もあり(後述)、一行あたりの文字数がかなり多くなるんですよね。
まあ、これはこれで利点もあるのですが、やはり、本文の幅が長いことは、何度も左右に目線を動かさないといけないという難点があります。
という訳で、CSSに次の記述を追加しました。
@media (min-width: 1025px){
#main {
padding: 0 11% 0 0;
}
}
これによって、画像の矢印の部分の幅を増やし、それによって本文の幅を狭くしています。
まあ、フォントサイズを絶対値で指定しているのに幅を割合(相対値)で指定しているので、端末によって多少一行あたりの文字数は違うと思うのですが、大体は良い感じになったと思います。(もっと狭くしてもいいという説もあります。)
min-width: 1025px を指定してることで、これは幅が1025px以上の端末のみに適用されます。
(ipadは1024pxだったので、それより1大きくすることで除外した。)
参考・主な有名サイトの本文の横幅
筆者の環境(windows、14インチノートPC、解像度1920X1080、windows設定の拡大率150%)で2022年2月21日に計測したものです。
・yahooニュース
640px、40文字
・NHK news web
640px、40文字
・日本経済新聞
608px、38文字
・オモコロ
608px(余白を含めると620px)、34文字
・電ファミニコゲーマー
542px(フォントがmeiryo UIなため文字数は不定、多め
ここでは比較的長文の記事が掲載されているサイトを集めましたが、任天堂公式サイトなど、そこまででは無いサイトはもう少し広めの幅のことも多いので、短めの記事・画像を使った記事が多いブログの場合はそんなに狭くする必要は無いかもしれません。
・フォント
このブログでは、Noto Sans JPというwebフォントを採用しています。
導入方法は、
1. 設定→詳細設定→head要素にメタデータを追加
に、
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
を書く
2. デザイン→デザインCSSに
.entry{
font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Noto Sans JP',sans-serif;
}
を書く(あえてmacではヒラギノになるように設定しています)。
詳しい原理を知りたい人は、google fontsの仕組みをggってください(1サイトだけで理解するのは難しい)。
元々は游ゴシックになっていて、これも結構悪くはないフォントなのですが、やっぱりちょっと細すぎたり、記事のスクショを取ったらめっちゃ見づらかったりというのは見逃せない問題だったので変えました。
一般的に(windowsの場合)ニュースサイト等で使われてるフォントはメイリオですが、メイリオって本文に使うためのフォントじゃなくない…?という持論を捨てきれずwebフォントを導入しました。
デメリットとしては、僅かに読み込みが遅くなるのと、あと、あまりにも見やすすぎて疲れるという人ももしかしたらいるかもしれません。(若干文字が太いし)実際そこら辺踏まえて、何が最適解なんだろうなあ。
・フォントサイズ
16.4pxになっています。中途半端なので変えるかも。でも、16pxは小さすぎだし17pxは自分のサイトには大きすぎると思います。
.entry-content{
font-size: 16.4px;
}
・文字と背景の色
このブログでは、背景が白ではなく、わずかにグレーになっています。
また、フォントを変えた(太くなった)のに合わせて、文字の色を薄くして、一般的なニュースサイトと同じくらいにしています。
当ブログの設定は
.entry{
background-color: #fefefd;
color: #444444;
}
です。これだけ見るとめっちゃ単純だけど、本文の部分の背景色を変える方法を探すのが地味に難しかったです。
黒はもっと薄くてもいい説もある。
(一般的なニュースサイトとほぼ同じですが、オモコロなどは更に薄い色に設定されていました。)
Noto Sansはかなり太めに見えるフォント(視認性が高い)ので、その分さらに色を薄くしました。
・行間
デフォルトより少し低くしています。
CSSに
p {
line-height: 1.7;
}
を追加。
・画像の大きさ
デフォルトでは画像は画面幅いっぱいに表示されますが、このブログでは少し小さめに表示されます。
CSSに
.entry-content img, .entry-content video {
max-width: 90%;
height: auto;
}
を追加。
(記事幅を狭くした分以前よりは拡大。何も設定しないと100%)
その他
・軽量SNSシェアボタン(記事上)
はてなブログ標準のtwitterボタンは重いので、これを使っています。
(色は自分で色々いじって逆にしています。
なお、このボタンは「記事上」と「記事下」にしか使えないので注意。(本文中には置けない)
・記事の終わりに自分でtwitterボタン
はてなブログの機能で記事の下にtwitterボタンを置けますが、それはめっちゃ下の方(関連記事の下)に配置されてしまうので、自分で本文中に置いています。
ここにアクセスして、「twitterボタン」→「share buttons」で、出てきたやつをコピペすればできます。
・読者になるボタン(記事下)
これもデフォルトの右におけるやつは重いので、自分で。ようは
https://blog.hatena.ne.jp/kibunchu1/kc1game.hatenablog.com/subscribe
のリンクにつながるボタンを作れば良いという事です。ボタンのデザインは、「ボタン CSS」などで検索して好きな奴を使ってください。(ユーザー名、ブログ名は自分の物)
・スクロールバー
このブログを開設した当初からの悲願でしたが、誰も導入方法を書いてる人がいなかったのでずっと実装できませんでした。
Internet Explorler時代の個人サイトでは皆やってたのに、皆もっとあの頃の精神を思い出して欲しい!!!
デザインCSSに
html::-webkit-scrollbar, #copy-element::-webkit-scrollbar {
width: 13px;
height: 13px;
}html::-webkit-scrollbar-thumb, #copy-element::-webkit-scrollbar-thumb {
background-color: #bbb5eb;
border-radius: 8px;
}html::-webkit-scrollbar-track, #copy-element::-webkit-scrollbar-track {
background: #f6f2e9;
}
を追加。
・右側の目次
長い記事には欲しい機能。
基本的にはこのサイト様で提供されているものを使っています。
この記事の説明はあまりに長く難しいですが、詳しい使い方はggると色々載っています。
・スマホ用の「目次に戻る」ボタン
上の目次では、スマホに対応できないという事で追加しました。基本的にはこの記事と同じですが、一部CSSを変えてデザインを調整しています。
自分は次のようなCSSを「記事上」にstyleタグで囲って入れています。
これに加えて、記事デザインの設定の「同じHTMLを使う」にチェックを入れることで、スマホで見た時だけボタンが表示されるようにしています。
/*目次に戻るボタン*/
.hi-mkj {
display: inline-block;
position: fixed;
bottom: 20px;
right: 3px;
height: 48px;
width: 48px;
line-height:48px;
text-align: center;
opacity: 0.8;
border-radius: 50%;
z-index: 5;
text-decoration: none!important;
background: #fff!important;
border: 1px solid #668ad8;
color: #4b7fc9!important;
}
.hi-mkj:after {
content: "目次へ";
position: absolute;
top: 9px;
left: 8px;
font-size: 11px;
}
.hi-mkj:before {
font-family: blogicon;
content: "\f003";
position: absolute;
top: -10px;
left: 13px;
font-size: 20px; }
@media screen and (min-width: 979px) {
.hi-mkj {
display: none;
}
}
大体こんな感じです。変わったりしたらまた追記します。それでは!