はてなブログのフォント、フォントの大きさを変える
こんにちは、いつも初心者のぽんきちさんです。
今日は、はてなブログのフォントをいじってみたいと思います。
フォントの大きさ
フォントの大きさを変えたいなあと思います。
私は３９歳で、ど近眼なので
かねてから
「ブログの文字は大きい方がありがたい」と思っていました。
今後、年齢を重ねて老眼などが始まったらますますその傾向は強まることでしょう。
そして日本語のブログを読むであろう方々の平均年齢が
今後上がって行くであろうということを考えると
圧倒的に、文字は大きい方が見やすいはずです。
そう思い、パソコン版のフォントの大きさを変えてみることにしました。
「デザイン」→「カスタマイズ」（スパナのアイコンのマーク）→cssの編集画面に
このようなコードをはりつけました。
/* 文字の大きさ */
.entry-content {
font-size:18px;
line-height:1.8em;
}
最初の文字は16pxくらいの大きさかな、と思いました。
少し大きくするということで、18pxにしました。
line-heightは行の高さだと思うのですが
行間はある程度大きい方が見やすいと思ったので、今回はこのままで。
フォントの大きさの変更の仕方については、
この記事を参考にさせていただきました。どうもありがとうございます。
フォントを変える
デフォルトのフォントも読みやすいですが、
今回は時的に違うフォントにしたいと思います。
「といっても、フォントに詳しいわけじゃないんですよね💦」
好きなのはヒラギノ角ゴシック、丸ゴシック、明朝。
あとメイリオ。
「今回はメイリオにしてみよう」
はんぺん山みたいな顔の人、今回はメイリオにすることにしたようです。
フォントの変換に関しては、このサイトを参考にさせていただきました。
ありがとうございます。
cssのところに、次のコードをはりました。
/* フォント */
body {
font-family: "メイリオ", Meiryo;
}
「メイリオ」のところに好きなフォントを書けばいい感じです。
「そろそろフォントにくわしくなりたいなあ」
社会人になりたてのころは平気な顔で総英角ゴシックをつかっていました。
この話をするといろんな人に嫌な顔をされます。へへへ。
スマホ版は、proに登録しないとだめみたい
パソコン版をいじったら、やっぱりスマホ版もいじりたくなりますね。
これまでスマホ版には完全にノータッチでした。
使わせていただいているデザイン
は、レスポンシブデザイン対応ですが
私は今回はスマホ版には適用していません。
できるだけ軽くしたい…と思っているからなのと、
はてなブログのデフォルトデザインのシンプルさがとっても好きなのとで
そのままにしたいと考えています。
あとはど近眼の39歳にも見やすいフォントサイズに。
…と思いましたが、
はてなブログproに登録しないと
どうもフォントサイズはいじれないみたいですね。
今現在は無料サービスの範囲内でやりたいと考えているので、
残念ながら無理でした。
はてなブログproについてはこちらで説明されています。
写真に枠をつける
ブログの画面をスクリーンショットで写した写真を載せていましたが
あまりにも見づらかったので
写真を枠で囲んでしまうことにしました。
これは、こちらのサイトを参考にさせていただきました。ありがとうございます。
ブログ投稿画像に枠（輪郭）を付ける方法 - はてなブログのカスタマイズ - いやまいったね！
もともとは「ヨッセンス」
の記事内の引用だそうです。
どの記事か見つけられませんでした。すみません。
「設定」から「詳細設定」を選び、
「headに要素を追加」の欄に以下のコードをはりつけました。
<style>
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}
</style>
完全にコピペなのですが
写真の下にうっすら影がついていい感じです（＊＾＾＊）
これで、スクリーンショットでとった白背景の写真が
本文の記事と混ざらずに、見やすくなりました。感謝！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ところで余談ですが、
はてなブログの「HTML編集」を選んで、
コードの見やすさに驚きました。
「ひえー、見やすい！」
ちゃんと一行ずつになっていて、なんて見やすいのでしょう✨
（え？これ普通なの？？）
これなら、私でもわかる気がしますよ！
「改行といえば<br/>しか知らなかったよ…」
ここまでやってみて、ほとんど知識のない
htmlや、cssについて学んでたいなあと思うようになりました。
明日からは、htmlとcssについて学んでみたいと思います！
楽しみである！
