はてなブログカスタマイズ
おはようございます。
ふと、「ブログをカスタマイズしたい」と思い、さっそくチャレンジしてみました。初心者です。CSSとかなんの略かもわかっていません。
ググりながらの編集です。スクリーンタイムで確認したところ、昨日のSafariを開いていた時間は２時間58分でした。
＼めっちゃググってる！／
結論
結果から言うと、初心者でもカスタマイズできました。基本的にコピペ・編集です。自分で書いたコードは、ほとんどありません。色や太さを変更しました程度です。美しいコードも、私の手によって汚されているかもしれません。「このように記述するといいよ」というアドバイスがあれば、コメント欄によろしくお願いします。
こちらのブログが大変参考になりました。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
カスタマイズした箇所①
「ダッシュボード」ー「デザイン」ー「カスタマイズ（スパナアイコン）」ー「｛｝デザインCSS」に記述しました。
- ブログのタイトル
フォントサイズのみの変更で、32pxに変更しました。
#blog-title a{
font-size: 32px;
}
- 記事タイトル
左寄せにしています。タイトルを「」で囲むものに設定しました。
.entry-title {
text-align: left;
position: relative;
line-height: 1.4;
padding:0.25em 1em;
}
.entry-title :before, :after{
content:'';
width: 20px;
height: 30px;
}
.entry-title :before{
border-left: solid 3px #FF8C00;
border-top: solid 3px #FF8C00;
top: 0;
left: 0;
position: absolute;
}
.entry-title :after{
border-right: solid 3px #FF8C00;
border-bottom: solid 3px #FF8C00;
bottom: 0;
position: absolute;
}
- カテゴリー
記事タイトルの下に表示されるカテゴリーです。左寄せにしました。
.categories{
text-align: left;
}
- 大見出し
大見出しのフォントサイズを20pxにし、左側に縦のバーを表示させました。
.entry-content h3{
font-size: 20px;
padding: 0.25em 0.5em;
border-left: solid 3px #FF8C00;
}
- 箇条書き
箇条書きを点ではなく、チェックマークに変更しました。
.entry-content ul li {
list-style-type: none;
position: relative;
}
.entry-content ul li:after {
display: block;
content: '';
position: absolute;
top: .6em;
left: -1em;
width: 8px;
height: 3px;
border-left: 2px solid #FF8C00;
border-bottom: 2px solid #FF8C00;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
カスタマイズした箇所②
「ダッシュボード」ー「設定」ー「詳細設定」ー「headに要素を追加」に記述しました。
- 太字
太字に蛍光ペン風の下線が引かれるようにしました。
<style type="text/css">
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 78%, rgba(255, 140, 0, 0.65) 20%) !important;
}
</style>
その他
- 小ネタ？
スマホで記事を書くとき、＃（見出し）を１回押すと「大見出し」、２回押すと「中見出し」、３回押すと「小見出し」、４回押すと「標準（元に戻る）」になります。
- コードの記載
コードをコピペし、「HTML編集」でコードの前に<pre><code>、コードの後ろに</code></pre>を貼り付けると、このページで記載したコードのように表示されます。
- 見出し
大見出しを編集する際は"h3"、中見出しを編集する際は"h4"、小見出しを編集する際は"h5"です。
- 書きかえは自己責任
必ずパックアップをとっておくことをおすすめします。私のページからコピペし、「レイアウトが崩れた！」ということになっても責任は取れません。
編集まとめ
現時点での編集した総まとめを画像で残しておきます。（今後、再度カスタマイズした際に見た目が変わってしまうため。）
ブログ執筆に関わって
- 使用したデバイス
- iPhone 7
- MacBook Pro 13インチモデル
- 使用したアプリ
