【はてなブログ無料版】初心者もこれでOK！サイトを作る11手順

当サイトは、はてなブログ無料版を使っています。

お金を一切かけずに、そこそこの見栄えのブログを作りたい！という方に、はてなブログ無料版はオススメです。

私がはてなブログをゼロから始めるとき、いろんな方のサイトを参考にしたので、備忘録としてこちらにまとめました。

この記事を読めばできること

テーマの変更
ヘッダー画像の設定
見出しのデザイン
グローバルメニューの設置
スマホのボトムメニューの設置
サイドバーの編集
サイト情報の設置（プロフィール、プライバシーポリシー、お問い合わせフォーム）
目次のデザイン
定形文貼り付け（囲み枠、蛍光ペン風マーカーライン、リストボタン）
スマホのトップ画面の一覧表示
文字の大きさ、行高の調整

それでは順番に説明していきます！

はてなブログ無料版を始めよう

①テーマを「Minimalism（ミニマリズム）」に変更する

管理画面の「デザイン」→「デザインテーマ（パレットのアイコン）」→「テーマストアでテーマを探す」

「Minimalism」を選択→「プレビューとしてインストール」→「このテーマをインストール」

ポイント！

Minimalismはデフォルトで余計なデザインがついていないので、カスタマイズがしやすく、テーマストアでも人気No.1なので安心です。

②ヘッダー画像を設定する

まずヘッダーの画像を用意（フリー素材でも自作でもOK）。画像サイズは1000px×200pxが最適とされています。

「デザイン」→「カスタマイズ（工具マーク）」→「ヘッダ」→「ファイルの選択」で画像をアップロード。

表示設定は、それぞれプレビューが出るのでお好みで選んで下さい。「画像だけ表示」の場合は、Canva（無料）などのサイトを使って予め画像にブログ名を入れておきましょう。

③見出しのデザイン

見出しの設定は、Font Awesomeというアイコンが使えるように、<head>～</head>内にコードを書き込むといいようです。

「<head>要素にメタデータを追加」

ここに以下のコードをコピペ→「変更する」ボタンを押す。

※虹の子育てblogさんのコードをお借りしました（一部デザイン変更）

<!-- フォントオーサム -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

<style>

/*大見出し*/
h3 {
  background: #bfdfff;
  box-shadow: 0px 0px 0px 5px #bfdfff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}

/*中見出し*/
h4 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px #bfdfff;
}

/*小見出し*/
h5 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #bfdfff;/*左線*/
}

</style>

見出しのデザインや色は、サルワカさんのサイトや原色大辞典などを参考に、自由に変えてみて下さい。

ポイント！

はてなブログは、大見出しがh3、中見出しがh4、小見出しがh5になるので、サルワカさんのコードのh1の部分を、それぞれh3、h4、h5に変えて下さい。

参考サイト

はてなブログ無料版のカスタマイズまとめ。これさえやっておけばOK。 - 虹の子育てblog

④グローバルメニューを設置する

グローバルメニューとは、サイトのカテゴリーのリンクを貼ったメニューバーです。これがあるととっても便利ですよね。

今回は、スマホでもメニュー（ハンバーガーメニュー）が上部に表示される設定をしていきます。

↓こういうやつです。

まずは「デザイン」→「スマホアイコン」→「詳細設定」のところの、「レスポンシブデザイン」にチェックを入れて「変更を保存する」。

「デザイン」→「カスタマイズ」→「ヘッダ」の「ブログタイトル下」に以下のコードをコピペ→「変更を保存する」。

＊HTML

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='URL'>Home</a></li>
<li><a href='URL'>カテゴリー１</a></li>
<li><a href='URL'>カテゴリー２</a></li>
<li><a href='URL'>カテゴリー３</a></li>
<li><a href='URL'>カテゴリー４</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>

このコード内の「カテゴリー」と「URL」の部分を、自分のブログの各カテゴリー名とURLに変えて下さい。

これだけだとまだレイアウトができていないませんね↓

以下のコードを「{ }デザインCSS」にコピペ→「変更を保存する」ボタンを押す。

＊CSS

/*===============================
　global navigation bar (top)
=================================*/
#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;

}
/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #f0f8ff;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}