はてなブログ無料版をご利用の方、こんな事でお悩みではないでしょうか？
- はてなブログを始めたけど、カスタマイズのやり方がわからない。
- 無料版だと思うようにカスタマイズできない。
- カスタマイズに時間をかけたくない。
そんな方向けに、無料版でもシンプルかつキレイなデザインのカスタマイズを方法をお伝えします。
まず、この記事のカスタマイズで出来る完成物はこちら↓
https://muryou-sample.hatenablog.com/
（実際には、はてなブログの広告が入ります。）
【カスタマイズのセット内容】
- 文字の大きさ。
- 見出しのデザイン。
- 蛍光ペン風アンダーライン。
- ヘッダーをすっきり。
- 余計な要素を排除。
- テーマの変更。
- グローバルナビの設置(PC画面のみ)。
- サイドバーの編集。
無料版だとどうしても制限が出てきてしまうので、
グローバルナビはPC画面のみになります(スマホ画面にはHTMLを書く枠がない)。
レスポンシブデザインにすれば早いのでは？
と思うかもしれませんが、
無料版でレスポンシブデザインにしてしまうと、かなり読みづらい表示になってしまいます。
これについては記事の最後に説明します。
このカスタマイズは基本的にコピペで出来るので、簡単にできます。
それでは早速見ていきましょう。
はてなブログ無料版のカスタマイズ。
順に説明していくので、順番通りにやってみて下さい。
文字の大きさ、見出しデザイン、蛍光ペン風アンダーライン、ヘッダーをすっきり、余計な要素を排除。
「設定」→「詳細設定」
→「headに要素を追加」
ここに、以下のコードを書いてください。
(ちなみにこの部分に書いたコードはPC・スマホ両方に反映されます。)
<!-- フォントオーサム -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<style>
/*文字大きさ*/
.entry-content{
font-size:17px;
}
/*大見出し*/
h3 {
position: relative;
background: #f5a2a2;/*見出し色*/
box-shadow: 0px 0px 0px 5px #f5a2a2;/*見出し色*/
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;/*大見出し文字色*/
}
h3:after {
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ee827c;/*左上のペロッとめくれた所*/
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
/*中見出し*/
h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #f5a2a2;/*左線*/
}
/*小見出し*/
h5 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
h5:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";/*アイコンのユニコード*/
font-weight: 900;
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #f5a2a2; /*アイコン色*/
font-weight: 900;
}
/*蛍光ペン風アンダーライン*/
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #5bed3b 60%) !important;
}
article i{
font-style:oblique !important;
}
/* ヘッダーメニューを非表示 */
#globalheader-container {
display:none;
}
/* ヘッダーのアイコンを非表示 */
.header-blog-icon {
display: none;
}
/* 記事を書く・記事の管理を非表示*/
.footer-action-wrapper {
display: none;
}
/* はてなブログ開発ブログ等を非表示 */
.touch-item-list{
display:none;
}
/* フッタ―の「Powered by Hatena Blog」等を非表示 */
.footer {
display: none;
}
/* フッダーのダッシュボード等を非表示 */
#footer-menu {
display:none;
}
/*ヘッダー余白調整・背景色*/
#container{
padding-top:0 !important;
}
#blog-title{
background-color:#f5a2a2 !important;/*PCのヘッダー背景色*/
}
#header{
margin:0 !important;
padding-top:44px !important;
padding-bottom:15px !important;
width:100% !important;
background-color:#f5a2a2;/*スマホのヘッダー背景色*/
}
/*PC画面ブログタイトル文字色*/
#title a,#blog-title #blog-description{
color:#fff;
}
/*スマホ画面ブログタイトル文字色*/
#header #title a,#header #blog-description{
color:#fff !important;
}
</style>
ちょっと長いですが、問題ありません。
最後に一番下の「変更する」ボタンを押すのを忘れずに。
蛍光ペン風アンダーラインは、斜体(i)にするとなります。
ブログを確認してみて下さい。反映されてますよね？
色など変えたい場合は、後ほどやり方を説明します。
テーマの変更。
次にテーマを変更します。
テーマはMinimalism(ミニマリズム)を使います。
「デザイン」
→「パレットのアイコン」→一番下の「テーマストアでテーマを探す」
Minimalismを選択し、「プレビューしてインストール」
これでテーマが変わったはずです。
(ちなみにテーマはPCにしか反映されません)
変わっていなかったら、上の「公式テーマ」を「インストールしたテーマ」にして、Minimalismを選択して下さい。
最後に上の「変更を保存する」を押すのを忘れずに。
なぜMinimalismなのかというと、
他のテーマだと元々見出しなどにデザインが入っていて、デザイン同士がぶつかってしまうからです。
グローバルナビを設置。
次にグローバルナビを設置します。
デザイン→スパナのアイコン→ヘッダ
→タイトル下
そこにこのコードをコピペして下さい↓
<nav id="gnav"><nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
<div class="menu"><a href="URL"> カテゴリー</a></div>
</div>
</nav>
このコードはこちらのサイトを参考にさせて頂きました↓
https://hitsuzi.hatenablog.com/entry/minimalism
コードの「カテゴリー」の部分を、自分のブログの各カテゴリー名に変えて、
「URL」の部分を、各カテゴリーのURL(https…)に変えて下さい。
最後に「変更を保存する」を忘れずに。
サイドバーの編集。
最後にサイドバーを編集していきます。
必要なものを追加し、いらないものを削除します。
「デザイン」→「スパナのアイコン」→「サイドバー」→「モジュールを追加」
から
「カテゴリー」と「注目記事」を追加して下さい。
「リンク」はいらないので削除しましょう。
クリックしたまま上下に動かすと順番が変わります。
以上でカスタマイズは終わりです。
色など自分好みに変えたい場合。
色など自分好みに変えたい場合は、最初に「headに要素を追加」の部分にコピペしたコードをいじります。
コードのどの部分を変えればいいのかを説明していきます。
コードに日本語のメモでどの部分のコードか書いてあるので、参考にして下さい。
(「なぜコードに日本語がかいてあるの？」「大丈夫なの？」と思うかもしれませんが、
/* */で囲まれた部分はコードに影響せず、メモとして書き込めるんです。)
文字の大きさを変えたい場合。
文字の大きさは「17px」の所を16pxとか18pxとかにして、大きさを変えられます。
見出しのデザインを変えたい場合。
見出しデザインは、サルワカさんのサイトを参考にさせて頂きました↓
https://saruwakakun.com/html-css/reference/h-design
デザインを変えたい場合はこちらのサイトを参考にして下さい。
ただし、はてなブログは大見出しがh3、中見出しがh4、小見出しがh5になります。
サルワカさんのコードのh1の所をh3やh4に変えて下さい。
色を変えたい場合は、
カラーコードを参考に、#f5a2a2の所を変えてみて下さい。
蛍光ペン風アンダーラインの色を変えたい場合。
蛍光ペン風アンダーラインはこちらのサイトを参考にさせて頂きました↓
https://www.manochang.com/entry/under-line
色を変えたい場合は、#5bed3bの所を、ピンクなら#ff99cc、青なら#99ccff、黄色なら#ffff00、オレンジ#ffa500、紫なら#cc99ff、に変えてみて下さい。
ヘッダーの背景色を変えたい場合。
ヘッダーの背景色を変えたい場合は、
#f5a2a2のところを、カラーコードを参考に変えてみて下さい（PCとスマホの2か所あります）。
レスポンシブデザインにすれば早いのでは？
「デザイン」→「スマホのアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れて、
レスポンシブデザイン(PCとスマホが同じデザイン)にすれば早いのでは？と思うかもしれませんが、
無料版だとトップページに記事全文がズラ～っと表示されてしまい、下までスクロールしないと次の記事が読めません。
スマホだと特に見づらくなってしまいます。
なので、無料版ではレスポンシブデザインはおすすめできません。
有料版(Pro)にすると、
「設定」→「詳細設定」→「トップページの表示形式」→「一覧形式」にして、
タイトル一覧表示に変えられます。
はてなブログ無料版のカスタマイズまとめ。
いかがでしょうか？
今回ははてなブログ無料版のカスタマイズ方法をお伝えしました。
これさえやっておけば、無料版でもシンプルかつキレイなデザインに出来ます。
是非やってみて下さい。
もし分からないという方は、ココナラでもカスタマイズ受け付けてます↓