はてなブログのデザインをおしゃれにカスタマイズ！初心者向けのテンプレートを紹介！
はてなブログのデザインをおしゃれにカスタマイズする方法を解説していきます。初心者におすすめのおしゃれな無料テンプレートもご紹介しますので参考にしていただき、はてなブログのデザインをおしゃれなテーマに設定してみてください。
目次
- 1はてなブログのデザインを設定しよう！
- ・そもそもはてなブログとは
- ・テンプレートは無料でインストール可能
- ・ブログをおしゃれなデザインにする利点
- 2はてなブログのデザインをおしゃれにカスタマイズする方法
- ・デザインテンプレートで設定する
- ・レスポンシブ設定をする
- ・はてなブログPROに登録してデザインする
- ・独自のデザインをカスタマイズする（HTML・CSS）
- 3初心者におすすめのはてなブログのデザインテンプレート
- ・テーマのインストール方法
- ・Minimalism
- ・Brooklyn
- ・SOHO
- ・Material
- ・ZENO-TEAL
- ・Codomisu flat
- ・DUDE
- ・UNDER SHIRT
- ・Haruni
- ・Innocent
- 4はてなブログのデザインをもっとおしゃれにカスタマイズするポイント
- ・テーマとなるカラーを決定する
- ・上手なカスタマイズをしているブロガーを探す
- ・初心者にもわかりやすいサイトを利用する
- ・デザインの基礎を学ぶ
- 5はてなブログのデザインをおしゃれにカスタマイズしよう
はてなブログのデザインを設定しよう！
ここでは、はてなブログのデザインを設定する方法を解説していきます。
そもそもはてなブログとは
はてなブログとは人気のブログ執筆ツールで、デザインテンプレートをインストールすることで簡単にブログのデザインの設定及び変更が可能なので人気を集めています。
テンプレートは無料でインストール可能
はてなブログでは、無料でおしゃれなデザインテンプレートを簡単にインストールできるので初心者にもおすすめです。おすすめのデザインテンプレートとその設定方法については記事の後半で紹介をします。
ブログをおしゃれなデザインにする利点
ブログをおしゃれなデザインにすることには利点があります。自分のお気に入りのデザインにすることで、愛着が湧いたりブログ更新のモチベーションがわいたりすることももちろんですが、ブログを訪れた読者からの信頼度が上がることやブログ内に滞在してくれやすくなるというメリットもあります。
はてなブログのデザインをおしゃれにカスタマイズする方法
ここからは、はてなブログのデザインをおしゃれにカスタマイズする方法を解説していきます。
デザインテンプレートで設定する
はてなブログに登録されているデザインテンプレートで設定することで、無料でおしゃれなデザインにすることができます。実際に設定する際の手順をみていきましょう。
- はてなブログの管理画面を開く
- 「デザイン」をクリックする
- 左側に表示されるデザインテンプレートから気に入ったデザインを選択する
レスポンシブ設定をする
ブログのデザインにおいて「レスポンシブ設定」というのは重要な要素の1つです。「レスポンシブ設定」とは、PCやタブレット、スマホなどの異なる画面サイズの端末に合わせて、それぞれ画面表示を最適化してくれる設定のことです。
スマホとPCを同じデザインにする方法
まず、デザイン設定の管理画面からスマホのマークをクリックしてタブを切り替えます。最下部の「詳細設定」から「レスポンシブデザイン」のチェックボックスにチェックを入れて保存することでスマホとPCのデザインが同じになります。
スマホとPCを違うデザインにする方法
なお、はてなブログでスマホとPCを違うデザインにしたい場合には先ほどの「レスポンシブデザイン」のチェックボックスのチェックを外しておきましょう。
はてなブログPROに登録してデザインする
はてなブログには「はてなブログPRO」というサービスがあり、はてなブログに登録してデザインを設定することも可能です。
はてなブログPROとは
「はてなブログPRO」とは、はてなブログ内の有料サービスで、無料のはてなブログ会員よりも様々な機能を使えるのでメリットも非常に多いサービスです。なお、コースの種類および料金は下表の通りです。
| コース | 料金 |
| 1ヶ月コース | 1,008円 |
| 1年コース | 8,434円 |
| 2年コース | 14,400円 |
はてなブログPROの利点
はてなブログPROに登録することで得られるメリットは以下の通りです。
- アドセンスの配置数が増える
- 広告を消すことができる
- 独自ドメインを使用できる
- 記事一覧形式にすることができる
- より細かいカスタマイズが可能になる
独自のデザインをカスタマイズする（HTML・CSS）
HTML・CSSというタグを使うことで独自のデザインをカスタマイズして使うことができます。初心者にとっては馴染みが無く難しい印象ですが、初心者でも利用できるようにHTML・CSSのコードを公開してくれている人がたくさんいますのでコピペして使ってみることから始めるといいでしょう。
ここでは、独自のデザインをカスタマイズして使う際の基本的なコードの設定方法とおすすめのデザイン等をご紹介していきます。
文字の大きさを変更する方法
- 「デザイン」＞「カスタマイズ」＞「デザインCSS」と順にクリックする
- 以下のコードをコピペする
なお、「20」の部分を任意の数字に置き換えることで文字のサイズを自由に変更することができます。
見出しデザインを変更する方法
前提として、見出しは以下の3種類に分類して表されます
- 大見出し：h3
- 中見出し：h4
- 小見出し：h5
このあとご紹介するデザイン変更用のコードは全て大見出し用になっていますので、コードをコピペする際には、デザインを変更したい見出しに合わせて、コード内の「h3」の部分を「h2」「h3」に適宜置き換えてください。
見出しに下線をつけたい場合
- 「デザイン」＞「カスタマイズ」＞「デザインCSS」と順にクリックする
- 以下のコードをコピペする
.entry-content h3{ color: #3f3f3f; padding: 10px 15px; border-bottom: 3px solid #e07000; }
見出しに点線下線をつけたい場合
- 「デザイン」＞「カスタマイズ」＞「デザインCSS」と順にクリックする
- 以下のコードをコピペする
見出しに上下線をつけたい場合
- 「デザイン」＞「カスタマイズ」＞「デザインCSS」と順にクリックする
- 以下のコードをコピペする
目次をつける方法
はてなブログ内で目次をつける方法は非常に簡単で、記事中に[:contents]と入力するだけで目次を自動的に生成してくれます。[:contents]と入力する際には前後には文字や空白を入れずに1行で指定する必要がありますので、この点だけは注意が必要です。簡単なので覚えておくといいでしょう。
画像をフィットさせる方法
- 「デザイン」＞「カスタマイズ」＞「デザインCSS」と順にクリックする
- 以下のコードをコピペする
/* タイトルイメージ調整 */ #blog-title { padding-top: 5px; /* 画像上部の余白*/ padding-bottom: 5px; /* 画像下部の余白*/ height: initial; } .header-image-only #blog-title #blog-title-inner { height: 250px; /* 画像の高さ */ background-size: contain; } @media (max-width: 480px) { .header-image-only #blog-title #blog-title-inner { height: 150px; /* 画像の高さ */ } }
SNS関連の設定方法
SNS関連の設定は少し複雑になってきますので、公開されているコードの説明をしっかり読んで手順に従うことが重要です。公開されているコードと設定を参考にして実際に設定してみるといいでしょう。
関連記事の表示方法
関連記事の表示方法としておすすめなのが、フッターとして自動的に関連記事が表示されるデザインです。こちらについても単なるコピペではなく、個別のカスタマイズ設定が必要で少し複雑になってきていますので、公開されているコードおよび設定手順に沿って行うのがいいでしょう。
検索窓の表示方法
続いて、自身のブログ内記事を検索できる検索窓をスマホで上部に表示する方法です。こちらは基本的にはコピペと置き換えで設定が完了するので、初心者の人でもぜひ設置してみることをおすすめします。コピペするのは、はてなブログのスマホデザインのヘッダ部分です。
<div class="hatena-module search-box">
<div class="hatena-module-body">
<form class="search-form" name="search" role="search" action="ブログのURLsearch" method="get">
<input type="text" name="q" class="search-module-input" value="" placeholder="ブログ内検索" required>
<input type="submit" value="検索" class="search-module-button" />
</form>
</div>
</div>
赤字の「ブログのURL」の部分を自身のブログURLに置き換えて使ってください。
本文のカスタマイズ方法
本文のカスタマイズ方法は無限にありますが、今回は特に人気が高く、ブログが一気に上級者のような印象になる吹き出しの設定方法と公開コードをご紹介します。
文中に吹き出しをつけて会話形式でブログ内の進行をしている記事を見たことがあるという方も多いかもしれませんが、自分のブログ記事でも吹き出しをつけたいという場合、カスタマイズ設定はこれまでよりも難しい内容となっていますので、作業前には必ずこれまでのコードをメモ帳などの別の場所に保存しておくようにしてください。
公開されているコードとカスタマイズして設定をよく確認しながら実際の作業をしてプレビューなどでしっかり反映されていることを確認しましょう。
文中にアドセンス広告を設置したい場合
- 「ダッシュボード」＞「デザイン」＞「カスタマイズ」＞「記事上下のカスタマイズ」＞「記事ページのプレビュー」から「記事下」または「記事上」を選択する
- 以下のコードをコピペ・URL部分の置き換えを行う
<script>
var adsenseCode = (function () {/*
<p>広告</p>
<!-- 自分のアドセンスコードの2箇所の「/script」を「/scrip」に修正してここにコピペ -->
<p> </p>
*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');
addEventListener("DOMContentLoaded", function() {
var $target = $('.entry-content h3,h4,h5');
$target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));
$('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>
ご自身のアドセンスコードをコピペした後、2箇所ある「/script」を「/scrip」に修正してくださいに変更する必要がありますので注意しましょう。
はてなブログPro(はてなブログプロ)の特典とメリット！料金プランも解説！初心者におすすめのはてなブログのデザインテンプレート
ここからは、はてなブログ初心者におすすめのおしゃれな無料デザインテンプレートをご紹介していきます。先述の通り、HTMLやCSSといったコードを用いればデザイン性も自由度も高いブログ設定が可能ですが、ブログ初心者にはハードルが高いと感じる方も多いかと存じますので、最初はぜひおしゃれな無料のテンプレートを使ってみてください。
各デザインテーマのリンクを貼っておきますので実際のイメージをしながらデモサイトを確認して選んでみるのがおすすめです。
テーマのインストール方法
はてなブログにログインした状態で、テーマストアから「プレビューしてインストール」をクリックしブログを選択後、「このテーマをインストール」をクリックするだけで簡単にテーマを無料でインストールすることができます。
Minimalism
シンプルなデザインながらもどこかかわいらしい雰囲気のあるデザインテンプレートです。まだどのようなブログを作っていくか迷っているという初心者の方にもおすすめです。レスポンシブ設定に対応しているのでPCでもスマホでも安心です。
Brooklyn
白と黒を基調としたシンプルなデザインテーマで、カスタマイズに特化したテンプレートで人気となっています。
SOHO
SOHOはスタイリッシュな印象を与えるデザインで、レスポンシブ設定に対応しているのでスマホでも簡単かつ綺麗に表示ができます。
Material
レスポンシブ対応で、Googleの新しいデザインガイドライン「Material Design」に沿ったスタイルのテンプレートとなっており、見やすいブログにすることができます。
ZENO-TEAL
トップページがカード型になっているので、ブログ読者に見やすいデザインテーマになっています。こちらもレスポンシブ対応なのでさまざまなデバイスから綺麗に表示することが可能です。
Codomisu flat
おしゃれなフラットデザイン風のデザインテーマで、初心者でも簡単におしゃれなブログにカスタマイズができるのでおすすめです。
DUDE
「気取ったおしゃれ」がテーマとなっているので、おしゃれなブログにしたいけれどもそれを選ぶか悩んでしまうという方にもおすすめのテンプレートです。
UNDER SHIRT
UNDER SHIRTは装飾が少ないのでカスタマイズしやすいのが特徴で、レスポンシブ対応です。なお、2カラムのテーマですがスマホから見ると1カラムとなります。
Haruni
「春」をテーマにしたかわいらしいデザインで女性から人気が高いおすすめのデザインです。
Innocent
シンプルでおしゃれなレスポンシブ対応のデザインテーマです。
今回ご紹介したデザインテンプレート以外にもおしゃれな無料テンプレートはたくさんありますので、ストア内からな自分好みの無料テンプレートを探してみてください。
Googleアドセンスとは？ブログ運営で収益をあげるための使い方！はてなブログのデザインをもっとおしゃれにカスタマイズするポイント
無料のテンプレートでも十分におしゃれなブログにすることができますが、はてなブログをさらにおしゃれにカスタマイズしたいという時に押さえておきたいポイントを解説していきます。
テーマとなるカラーを決定する
まずは、テーマとなるカラーを決めましょう。ブログ内のカラーを統一することでまとまりが出るので一気におしゃれな印象になります。
上手なカスタマイズをしているブロガーを探す
はてなブログ内に上手なカスタマイズをしているブロガーがいれば参考にするといいでしょう。特に、ブログの記事内でブログのカスタマイズに関する投稿が無いかチェックするのがおすすめです。
初心者にもわかりやすいサイトを利用する
初心者がはてなブログをカスタマイズする際には「サルワカ」というサイトを参考にするのがおすすめです。HTMLやCSSのデザインコードを公開し、説明してくれているのでぜひ活用するといいでしょう。
デザインの基礎を学ぶ
書籍を購入するなどしてサイトのデザインの基礎を学ぶというのもいいでしょう。もっとも正攻法とも言えますが、一度頭に入れておくと今後のブログデザインにも役立ちます。
Twitterのタイムラインを埋め込みする！ブログやホームページに表示するには？はてなブログのデザインをおしゃれにカスタマイズしよう
ここまで、はてなブログのデザインをおしゃれにカスタマイズする方法を解説してきました。無料のデザインテーマのテンプレートを使えば、初心者の方でも簡単におしゃれなブログにすることができ、レスポンシブ対応のものを選べばスマホ、PC、タブレットといったさまざまなデバイスからのアクセスでも安心です。
ぜひお気に入りのデザインテーマを見つけてはてなブログをおしゃれにカスタマイズしてみてはいかがでしょうか。
