私は【はてなブログpro】を利用しています。
ここで紹介するブログのデザインは2021年1月に私が自分のブログデザインに採用したものです。
それ以降、デザインは変更する場合があります。
ド素人がちょっとかじったことをドヤ顔で披露する内容なので海より広い心で見てください。
そしてCSSにコピペする単語や数字をなんと呼ぶのかちょっとかじったくらいではよくわからず･･･その辺もお許しください。
デザインCSSをいじるときはバックアップをとってから！
目次のデザイン
このページにもある目次のデザインにしました。
変更の方法がすごくわかりやすく書かれていて、そのとおりにやってできました。
こちらのサイト様には他の部分でもお世話になりました。
見出しのデザイン
見出しは下記のデザインに変更してみました。
こちらのサイトを参照しました。
中見出しの丸を変えようとコピペしたコードに色見本の数字（#のついた数字）を入れたらマットな感じになりました。
見本となにか違う。
参照したものと同じように透けた感じにしたい。
蛍光ペンの色にも使えます。
トップページのカードにのせるカテゴリもこのサイトを利用して、ちょっと透けさせてみました。
はてなブログの記事の見出しは「.h3」「.h4」「.h5」
サイドバーの見出しは「.hatena-module-title 」
で表されている。
ということは記事の見出しである「.h3」「.h4」「.h5」の部分を
「.hatena-module-title 」にすればサイドバーの見出しに変更される。
ということがわかりました。
囲み枠のデザイン
囲み枠は
- 枠だけのもの
- 枠にタイトルがついたもの
- 枠のなかにリストがついたもの
- 枠にタイトルと枠のなかにリストをつけたもの
の4種類ありました。
あまり多くの囲い枠を使うとわけがわからなくなりそうです、
しかしなんだかんだで多くなってしまいました。
もう少し数を整理したい。
コピペしただけではうまくいかなかった二つを書いておきます。
それ以外はコピペで思うようにできました。
リスト（点）つき囲み枠
コードをコピペしたのはこちらのサイトです。
上の囲み枠はコードに何も触れていないのになぜかちょっと短い。
これは枠の外側の余白をなんとかすればいいはず。
CSSには「ul」の前に「.dot」を追加しました。
（dotの部分は任意）
カッコ内に以下を追加
margine: 0px;/*枠の外側の余白*/
HTMLはコピペしたコードを挟むように以下のものを付けたしました
コピペしたコード
</div>
そうしないとブログのデザインが崩れてしまいました。
初心者（私）はコードをコピペするなら「はてなブログのカスタマイズ」と書いてあるブログのものを参考にしたほうがよいのかもしれないと思いました。
タイトルとリストつき囲い枠
コードをコピペしたのはこちらのサイトです。
タイトルがつけれて、リストもある囲い枠を使いたかったからです。
でも、ちょっと気になる部分が･･･
少し文字の上下部分の余白が均一ではない。
枠の内側の余白は「padding: 0.5em 1em;」となっていました。
これなら上下の余白は同じになるはずでは･･･?
わからないのでなんとなく数字を変えてみて上下の余白が同じくらいになるような数字を見つけました。
私の答えは「padding: 1em 1em 0;」に変更すること。
これで同じになったと思うので解決。
「余白」については「トップページNo.1」の最後のほうに参考ページをのせています。
- 定型文貼り付け
今回、カスタマイズをしている途中でこの機能を知りました。
こんな便利なものがあったとは！
もっと早く知っていれば楽だったなと思いました。
囲み枠の吹き出し（文字の長さに枠を合わせる）
ブログカードを貼ったときにその説明文をいれるために追加しました。
文字の大きさを少し小さくしたり余白を自分好みにちょっと調整しました。
文章の長さに枠の長さを合わせたいと思い探しました。
いろいろ検索するなかで便利なサイトを見つけました。
任意の数字を入力すれば「吹き出し付き囲み枠を作ってくれるサイト」です。
このサイトだと枠線を1pxで作れます。
「見出しのデザイン」の透けた色の番号を調べるサイトにも同じようなものがのっています。
そちらは、囲いの種類を選べるので便利だと思います。
そして、矢印の高さが低いものをつくることができました。
どっちを採用しようかな･･･? どうしよう。
しかし･･･
この後、ブログカードを貼るのは極力避けようと考え直したので、出番はあまりないかも。
会話風の吹き出し
会話の場面で使いたいと思い、Haruniのときから使っています。
こんにちは、なすみです
吹き出しの私のアイコンはIconponのイケてる似顔絵で作成しました。
- Iconpon：イケてる似顔絵メーカー | Iconpon
その他のアイコンはCanvaとACイラストで探しました。
蛍光ペンをひく
記事を書きながらあるといいなと思っていました。
こんな感じ。
なかなか心の余裕がなくて探せませんでした。
今回デザインを変えるためにいろいろ検索する中でやっと追加できました。
「斜体」を押すと蛍光ペンが引かれる仕様です。
もう一つはCSSを活用して蛍光ペンをひく場合です。
記事の下にSNSのシェアボタンを設置
参照サイトの通りにやってすぐにできました。
思い通りにすぐにできるとうれしい。
ボタンの上に「＼ share ／」を追加しました。
付けたし
私はコードを自分で作成することはできません。
しかし、コピペしたコードの一部を変更するだけでもブログの雰囲気はけっこう変わりました。
例えば、線の太さを変える、背景の色を変える、角を丸くする、枠の内または外側の余白を変えるなど。
おそらく基本のき
| 枠の線の太さ | border: | 10px; | 数字が大きいほど太くなる |
| 枠の角の丸さ | border-radius: | 10px; | 数字が大きいほど丸くなる |
| 背景の色 | background: | #fff; | 背景の色を変えられる |
| 文字の色 | color: | #fff; | 文字の色を変えられる |
| 枠の内側の余白 | padding: | 0.5em; | 「トップページNo.1」の記事で参考サイトを紹介しています |
| 枠の外側の余白 | margin: | 10px; |
他にも線の種類（点線や二重線など）を変えたりするのも初心者には簡単にデザインを変えられてよかったです。
こちらのサイトに丁寧に書かれていてとても参考になりました。
次から次へとカスタマイズしたくなってしまう
これからも少しづつやっていきたい
デザインの参考にさせてもらったサイトをまとめてはてなブックマークにブックマークしています。
参照させてもらったサイトの皆さま、感謝でいっぱいです。
ありがとうございました _(._.)_