ブログカスタマイズ。テーマインストールから見出しまで

こんにちは。

私は、Webの知識はありません。超、超初心者が知識ゼロから始めています。詳しい方が丁寧に説明してくださっていますが、それでも私には理解できませんでした。自分の向学のため、今後自分がカスタマイズしやすくするために、同じような超初心者の方の参考になればと今回の記事を書いてみようと思います。

私が理解できなかった部分は省略してしまっています。詳しい内容が知りたい場合は、テーマの作者様がカスタマイズ方法を説明してくださってますので、そちらを参考にしてください。

ブログの文字

はてなブログのカスタマイズ

テーマをインストール

今回は、「Minimalism」を使わせていただきました。ありがとうございます。

デザイン→パレットマーク→テーマストア→テーマを選んでインストール

レスポンシブデザインにチェックを入れる

レスポンシブデザインとは、パソコンとスマホの表示を別々に設定しなくてもきれいに表示されるようになること。SEOにいいと色んな方が解説してくださっています。私は素人ですのでこれについては解説できません。すみません。

デザイン→スマホマーク→詳細設定→□にチェックを入れる

ナビゲーションメニューの設置

<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"></i> カテゴリの名前</a></div>
<div class="menu"><a href="URL"></i> カテゴリの名前</a></div>
</div>
</nav>
  • 赤字のところにURL,カテゴリーの名前を入れる
  • 下線のところを必要な数だけつくる
  • できたコードをデザイン→スパナマーク→ヘッダ→タイトル下に貼る

アイコンを使う

Font Awesome

無料、すべてを選択して、copy codeをクリックする。

自分のブログの管理画面→設定→詳細設定→headに要素を追加→コードを貼る

他のコードがあっても適当に改行して貼り付けたら大丈夫。

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

見出しを変更してみる

見出しについて

  • h1からh6まである
  • <h3>大見出し</h3> ←これが見出しのタグ
  • h1は、ブログのタイトル、記事のタイトルに使われている
  • 「大見出し」はh3
  • 本当はh2があったほうがいい
  • Chromeストアにはてなブログの拡張機能があるのでインストールすると簡単にh2タグをつけられる

 素敵なデザインの見出しを使わせてもらう

かわいい感じ

saruwakakun.com

おしゃれ

コピペでどうぞ。はてなブログ用の見出しCSSカスタマイズをとりあえず25個ほど – つばさのーと

 

とても素敵なデザインをたくさん紹介してくださってます。ありがたく使わせていただきます。

 

h2タグ

.entry-content h2{
position: relative;
padding: 0.25em 1em;
border-top: solid 2px #ADD8E6;
border-bottom: solid 2px #ADD8E6;
}
h2:before, h2:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: #ADD8E6;
}
h2:before {left: 7px;}
h2:after {right: 7px;}

大見出し

.entry-content h3 {
position: relative;
padding: 6px 0 6px 34px;
color: #111;
border-bottom: 2px solid #ADD8E6;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
background-color: #ADD8E6;
content: '';
}
.entry-content h3::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.entry-content h3::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}

 中見出し

h4 {
position: relative;
padding-left: 1.2em;
line-height: 1.4;
}

h4:before{ font-family: "Font Awesome 5 Free";
content: "00c";
position: absolute;
font-size: 1em;
left: 0;
top: 0;
color: #ADD8E6;
}

 赤字はカラーコードです。

www.colordic.org

好みの色のカラーコードを探して、赤字の部分と入れ替えると好きな色にできます。

出来たコードをデザイン→スパナマーク→デザインCSSに張り付ける

それぞれのコードの間は改行して開けておくとわかりやすいです。メモ帳などに保存しておいたほうがいいです。もう一回作るの大変だし。文字が小さくて見えないし。老眼だからね。

作ってくださった方ありがとう

全くの初心者でも使えるように紹介してくださって本当にありがとうございます。もっといろいろ勉強してちゃんと理解できるようになりたいと思います。

上記のコードはカラーコードなどが変更されています。きちんとした内容が知りたい方は、作者様のページをご覧になってください。