バックパックの記事を書いてから気付いた……
見出しや目次の見た目は自分でカスタムしなきゃいけないことに……！
で色々やってみた結果、CSSの知識は全くなかったけどなんとか形になりました。
はじめに
・このカスタマイズは「Naked」をベースに行っています。他のテーマだと違ったデザインになるかもしれません。
・デザインCSSにコピペするだけで使えます。たぶん←ここ重要
カスタマイズが初めての方へ
どんなデザインにするか、着手する前に決めておきましょう。特に見出しは記事を増やす前に確定しておいた方がいいです。
見出しのデザインをテキトーに決めて記事を書くとえらいことになります。
記事が少ないうちはいいかもしれませんが……
必要なもの
・ChromeやEdgeなどのデベロッパーツールが使えるブラウザ
ブラウザ上で余白の変更、色の変更、罫線の追加などのテストができるのでカスタマイズがめちゃくちゃ楽になります。
・完成させるぞという気持ち
↑これが一番大事かもしれませんね。
CSSの知識はなくても大丈夫。なんとかなる。
使用テーマ
最初は公式テーマの「Handwriting」で、見出しと目次だけ変えられればいいかなーと思ってたけど、レスポンシブデザインに対応してないんですよね。
スマホも同じ見た目にしたかったので、レスポンシブ対応＆カスタマイズOK＆デフォルトの背景色が好みな「Naked」に変更しました。
オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース！ - Yukihy Life
まずやるべきだったこと
プライバシーポリシーの設置
わりとどこのブログにもあるよなーとは思ってましたが、調べてみると個人ブログにもほぼ必須のようです。
コピペOKとして文章を載せているサイトもありますが、どういうことが書いてあるのかわからないまま丸写しして終わりにするのも良くないと思うので、私はコピペOKの文章を参考にして手入力しました。
書いたものは固定ページを作成してサイドバーのリンクに設定しています。
★参考★
設定
アイコンフォントとクエリの導入
jQuery
ダッシュボード→設定→詳細設定→スクロールして『headに要素を追加』へ以下のコードを入れます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Font Awesome
同じく『headに要素を追加』へ以下のコードを入れます。jQueryのコードの後ろに改行して入れちゃってOK。
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
公式サイトの「Start for Free」の下に書いてあるのが最新のバージョン番号？
★参考★
・公式
・詳細な使い方
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
blogicon
一応Font Awesomeも導入はしたものの、今のところ初めから使えるblogiconだけを使っています。
★参考★
はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点 - Takeuchi BLOG
記事のデザイン
更新日追加
導入したけどうまく表示されないな？と思ったら、トップページじゃなくて記事ページじゃないと表示されないんですね。
★参考★
・設置方法
【コピペOK】【はてなブログ】更新日付を自動表示したい！設定方法を解説^^ - tomomore
・Naked向けカスタマイズ
はてなブログで更新日時を自動表示させる方法 - Try Something New
・日付のハイフンをドットに置換
リライト記事の更新日時表示のカスタマイズで時刻まで表示されるようになった件について - Minimal Green
記事タイトルまわり
記事タイトルの下に水色→透明のグラデーションライン、カテゴリの下に点線を入れました。
タイトル下
.entry-title:after {
content: "";
display: block;
height: 10px;
background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
background: linear-gradient(to right, rgb(80 186 255 / 59%), transparent);
}
カテゴリ下
.entry-categories {
margin-top: 5px;
border-bottom: dashed 1px #dadada;
padding-bottom: 3px;
}
シェアボタン
記事上に表示しているシェアボタンの見た目を統一しました。
★参考★
コピペで簡単！はてなブログのSNSシェアボタンをカスタマイズ | SHIROMAG
Font Awesomeを使わない場合は、『記事上か記事下に貼るコード』の
<i class="fa fa-facebook-square lg">
を
<i class="blogicon-facebook">
に変更する必要があります。
更に、ボタン下にカテゴリと同じ点線を入れました。
.share-btn-type3 {
margin: 10px 0 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 5px;
border-bottom: dashed 1px #dadada;
}
本文
行間
行間が広く感じたので狭くしました。
デフォルトでは1emだったのを0.2emへ変更。
.entry-content p {
margin: 0.2em 0;
line-height: 1.7em;
}
アンダーライン
一部のタグを使った時に蛍光ペン的なアンダーラインを引くようにしました。
uでアンダーライン（黄色）
デフォルトのアンダーラインは細くて目立たないので……
article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}
emでアンダーライン（緑）
emは斜体なので、font-style: normal;で斜体を解除する必要があります。
iでやるとシェアボタンのアイコンにアンダーラインがついてしまうので、emのみ。
article em {
text-decoration: none;
font-style: normal;
background: linear-gradient(transparent 50%, #8cffae 50%);
}
★参考★
はてなブログでアンダーラインを蛍光ペン風にする方法 - Random Life Blog
目次
小見出しを表示しない（h2、h3のみ表示）設定にしました。
★参考★
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
見出し
見出しのタグはh1から始まり、h6まであります。
はてなブログでは、記事タイトルがh1。見たままモードのプルダウンで『大見出し』を選択すると、h3になります。h2は使われていないみたいです。
それではもったいないのでh2にもデザインを適用し、これからはマークダウン記法で書くことにしました。
h2
.entry-content h2 {
margin: 32px 0px 20px 0px;
position: relative;
padding: 0.6em;
color: #000;
font-size: 140%;
background: #97d9ff;
border-left: 0px;
letter-spacing: 1px;
}
.entry-content h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #97d9ff;
width: 0;
height: 0;
}
h3
.entry-content h3 {
padding: 0.5em;
background: #fffaf4;
border-left: solid 5px #69daf9;
font-size: 18px;
}
h4
.entry-content h4 {
margin: 20px 0 15px 0;
font-size: 17px;
border-left: solid 5px #6dd6d4;
border-bottom: 0;
padding: 0.5em;
}
h5
.entry-content h5 {
padding-left: 1.2em;
margin-block-end: 0.8em;
}
.entry-content h5::before {
font-family: 'blogicon';
content: "\f006";
font-size: 1em;
left: 0;
top: 0;
border: 0;
color: #6dd6d4;
font-weight: 900;
}
★参考★
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
箇条書き
サンプルはボックスデザインですが、応用して箇条書きに適用しました。
ulが黒点の箇条書き、olが数字の箇条書き。
両方とも同じデザインにしたかったので
.entry-content ul, .entry-content ol
でまとめて指定しています。
.entry-content ul, .entry-content ol {
padding: 0.5em 0.5em 0.5em 2em;
margin: 0.5em 0;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
★参考★
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
引用
コードを貼りつけただけだと見た目がかなり変わるので、かなり手直しが必要でした。
※以下のコードは変更済みのものです。
.entry-content blockquote {
margin: 10px; 5px 0 5px;
padding: 25px 10px 10px;
box-sizing: border-box;
background: #f3f3f3;
}
.entry-content blockquote:before{
opacity: 1;
display: inline-block;
top: -8px;
left: 9px;
width: 40px;
height: 30px;
text-align: center;
content: "\f704";
font-family: 'blogicon';
color: #FFF;
font-size: 120%;
line-height: 30px;
background: #09e5d0;
font-weight: 900;
}
.entry-content blockquote:after{
opacity: 1;
content: '';
top:-8px;
left: 49px;
bottom: auto;
right: auto;
border: none;
border-bottom: solid 8px #6cacb5;
border-right: solid 9px transparent;
}
.entry-content blockquote p {
position: relative;
padding: 0;
margin: 0;
z-index: 3;
line-height: 1.7;
}
@media screen and (max-width: 680px) {
.entry-content blockquote {
padding: 25px 10px 10px;
}
.entry-content blockquote::before,
.entry-content blockquote::after {
font-size: 150%;
}
}
★参考★
CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
続きを読む
色を変更＆丸みを強くしました。
これはブラウザ上でいじっていい感じになったものをコピペしました。
a.entry-see-more {
padding: 10px 30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: #259fff;
}
本文〜脚注〜記事下の区切り線
本来は本文から区切りなく続いていますが、区切り線が欲しいなと思ったので、本文と脚注の間に点線、脚注と記事下の間に二重線を入れました。
脚注
div.footnote {
font-size: 90%;
margin-top: 3em;
border-top: dashed 1px #000000;
}
記事下
.entry-footer {
font-size: 90%;
margin-top: 10px;
border-top: double 5px #c3cbc9;
}
サイドバーのデザイン
メインの見た目
タイトルを水色、本体を白にして、枠をつけました。
.hatena-module-title {
position: relative;
background: #81dcff;
margin-bottom: 0px;
padding: 0 0 0 1.8em;
border-top: solid 2px #979797;
border-left: solid 2px #979797;
border-right: solid 2px #979797;
}
.hatena-module-body {
background-color: #fff;
border-right: solid 2px #979797;
border-bottom: solid 2px #979797;
border-left: solid 2px #979797;
}
タイトルアイコン
モジュールごとにアイコンを変えるためにこんなコードを書きました。
書き方が合ってるかは知らんが問題なさそうなのでヨシ！
/*HTML（プロフィールとして使用）*/
.hatena-module.hatena-module-html .hatena-module-title::before {
font-family: "blogicon";
content: "\f016";
}
/*最新記事*/
.hatena-module.hatena-module-recent-entries .hatena-module-title::before {
font-family: "blogicon";
content: "\f031";
}
/*カテゴリー*/
.hatena-module.hatena-module-category .hatena-module-title::before {
font-family: "blogicon";
content: "\f022";
}
/*注目記事*/
.hatena-module.hatena-module-entries-access-ranking .hatena-module-title::before {
font-family: "blogicon";
content: "\f029";
}
/*検索*/
.hatena-module.hatena-module-search-box .hatena-module-title::before {
font-family: "blogicon";
content: "\f01a";
}
/*リンク*/
.hatena-module.hatena-module-links .hatena-module-title::before {
font-family: "blogicon";
content: "\f042";
}
プロフィール
『プロフィール』ではなく『HTML』を使用。
『記事を書く』の見たままモードで書き、HTMLをコピーし、ちょっと手直し。
フォローボタンもデフォルトから変更しました。
★参考★
最新記事
間に点線を追加し、一番下の線を削除。
点線の両端はPaddingを使って枠から離しました。
.recent-entries,
.entries-access-ranking,
.related-entries {
margin: 0 0 0 0;
padding: 0 5px;
}
.urllist-item {
list-style-type: none;
margin-bottom: 0px;
padding: 5px;
background-color: #fff;
border-bottom: dashed 1px;
}
.urllist-item:last-child {
border-bottom: 0px;
}
.urllist-item a {
color: #444;
text-decoration: none;
}
.urllist-date-link a,
.urllist-categories a {
color: #888;
font-size: 10px;
}
カテゴリー
区切り線
カテゴリー間に線を引きました。
.hatena-module-category .hatena-urllist {
list-style: none;
margin: 0px 0;
padding: 0;
}
.hatena-module-category li:last-child {
border-bottom: 0px;
}
階層化
まだカテゴリーが少ないので、折りたたみはしなくていいかな？と思い、階層化のみ行いました。
★参考★
はてなブログのカテゴリーを階層化する（jQueryなし） - IMUZA.com
検索
選択時のアニメーションを消し、全体的に丸くしました。
.search-form {
padding: 5px 0;
}
.search-module-input {
width: 70%;
margin: 0 5px;
padding: 0 10px;
border: solid 1px #979797;
border-radius: 30px;
background-color: #ffffff;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
transition: 0s;
}
.search-module-input:focus {
background-color: #fff;
color: #fff;
border: solid 1px #979797;
}
input[type="text"]:focus {
outline: 0;
}
input[type="submit"]:focus {
outline: 0;
}
.search-module-button {
top: 5px;
right: 10px;
border: double 3px #979797;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
★参考★
inputタグで入力中に出てくる青い枠を消す方法 - 脳汁portal
フッター
デフォルトのフッターを非表示にし、コピーライトを入れました。
★参考★
フッターにコピーライトを表示させる方法 - Theme Naked Blog
最後に
今後やるかもしれないこと
・グローバルメニューの設置
・開閉式目次
・開閉式カテゴリー
個人的な話
色々調べてるうちに、「独自ドメインを取るなら早い方がいい」という話を見かけたのでそうしちゃいました。
いいですね、独自ドメイン。なんか愛着湧きますね。ブログ続けるぞって気持ちになりますね。
