はてなブログのデザインをおしゃれにカスタマイズ!初心者向けのテンプレートを紹介!

はてなブログのデザインをおしゃれにカスタマイズする方法を解説していきます。初心者におすすめのおしゃれな無料テンプレートもご紹介しますので参考にしていただき、はてなブログのデザインをおしゃれなテーマに設定してみてください。

はてなブログのデザインをおしゃれにカスタマイズ!初心者向けのテンプレートを紹介!のイメージ

目次

  1. 1はてなブログのデザインを設定しよう!
  2. 2はてなブログのデザインをおしゃれにカスタマイズする方法
  3. 3初心者におすすめのはてなブログのデザインテンプレート
  4. 4はてなブログのデザインをもっとおしゃれにカスタマイズするポイント
  5. 5はてなブログのデザインをおしゃれにカスタマイズしよう

はてなブログのデザインを設定しよう!

ここでは、はてなブログのデザインを設定する方法を解説していきます。

そもそもはてなブログとは

はてなブログとは人気のブログ執筆ツールで、デザインテンプレートをインストールすることで簡単にブログのデザインの設定及び変更が可能なので人気を集めています。

テンプレートは無料でインストール可能

はてなブログでは、無料でおしゃれなデザインテンプレートを簡単にインストールできるので初心者にもおすすめです。おすすめのデザインテンプレートとその設定方法については記事の後半で紹介をします。

ブログをおしゃれなデザインにする利点

ブログをおしゃれなデザインにすることには利点があります。自分のお気に入りのデザインにすることで、愛着が湧いたりブログ更新のモチベーションがわいたりすることももちろんですが、ブログを訪れた読者からの信頼度が上がることやブログ内に滞在してくれやすくなるというメリットもあります。

はてなブログのデザインをおしゃれにカスタマイズする方法

ここからは、はてなブログのデザインをおしゃれにカスタマイズする方法を解説していきます。

デザインテンプレートで設定する

はてなブログに登録されているデザインテンプレートで設定することで、無料でおしゃれなデザインにすることができます。実際に設定する際の手順をみていきましょう。

デザイン

  1. はてなブログの管理画面を開く
  2. 「デザイン」をクリックする
  3. 左側に表示されるデザインテンプレートから気に入ったデザインを選択する
以上の手順で、簡単にデザインテンプレートを設定することが可能です。

レスポンシブ設定をする

ブログのデザインにおいて「レスポンシブ設定」というのは重要な要素の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のコードを公開してくれている人がたくさんいますのでコピペして使ってみることから始めるといいでしょう。

ここでは、独自のデザインをカスタマイズして使う際の基本的なコードの設定方法とおすすめのデザイン等をご紹介していきます。

文字の大きさを変更する方法

  1. 「デザイン」「カスタマイズ」「デザインCSS」と順にクリックする
  2. 以下のコードをコピペする
.entry-content { font-size:20px; }

 

なお、「20」の部分を任意の数字に置き換えることで文字のサイズを自由に変更することができます。

見出しデザインを変更する方法

前提として、見出しは以下の3種類に分類して表されます

 

  • 大見出し:h3
  • 中見出し:h4
  • 小見出し:h5

 

このあとご紹介するデザイン変更用のコードは全て大見出し用になっていますので、コードをコピペする際には、デザインを変更したい見出しに合わせて、コード内の「h3」の部分を「h2」「h3」に適宜置き換えてください。

見出し下線

見出しに下線をつけたい場合

  1. 「デザイン」>「カスタマイズ」>「デザインCSS」と順にクリックする
  2. 以下のコードをコピペする

.entry-content h3{ color: #3f3f3f; padding: 10px 15px; border-bottom: 3px solid #e07000; }

見出し点線下線

見出しに点線下線をつけたい場合

  1. 「デザイン」>「カスタマイズ」>「デザインCSS」と順にクリックする
  2. 以下のコードをコピペする
.entry-content h3{ color: #3f3f3f; padding: 10px 15px; border-bottom: 3px dotted #e07000; }

見出し上下線

見出しに上下線をつけたい場合

  1. 「デザイン」>「カスタマイズ」>「デザインCSS」と順にクリックする
  2. 以下のコードをコピペする
.entry-content h3{ color: #3f3f3f; padding: 10px 15px; border-top: 3px solid #e07000; border-bottom: 3px solid #e07000; }

目次をつける方法

はてなブログ内で目次をつける方法は非常に簡単で、記事中に[:contents]と入力するだけで目次を自動的に生成してくれます。[:contents]と入力する際には前後には文字や空白を入れずに1行で指定する必要がありますので、この点だけは注意が必要です。簡単なので覚えておくといいでしょう。

画像をフィットさせる方法

  1. 「デザイン」>「カスタマイズ」>「デザインCSS」と順にクリックする
  2. 以下のコードをコピペする

/* タイトルイメージ調整 */ #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に置き換えて使ってください。

本文のカスタマイズ方法

本文のカスタマイズ方法は無限にありますが、今回は特に人気が高く、ブログが一気に上級者のような印象になる吹き出しの設定方法と公開コードをご紹介します。

本文吹き出し

文中に吹き出しをつけて会話形式でブログ内の進行をしている記事を見たことがあるという方も多いかもしれませんが、自分のブログ記事でも吹き出しをつけたいという場合、カスタマイズ設定はこれまでよりも難しい内容となっていますので、作業前には必ずこれまでのコードをメモ帳などの別の場所に保存しておくようにしてください。

公開されているコードとカスタマイズして設定をよく確認しながら実際の作業をしてプレビューなどでしっかり反映されていることを確認しましょう。

文中にアドセンス広告を設置したい場合

  1. 「ダッシュボード」>「デザイン」>「カスタマイズ」>「記事上下のカスタマイズ」>「記事ページのプレビュー」から「記事下」または「記事上」を選択する
  2. 以下のコードをコピペ・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」に修正してくださいに変更する必要がありますので注意しましょう。

ThumbはてなブログPro(はてなブログプロ)の特典とメリット!料金プランも解説!
ブログで収益を得るなら、有料サービスのはてなブログPro(はてなブログプロ)を使うことをおす...

初心者におすすめのはてなブログのデザインテンプレート

ここからは、はてなブログ初心者におすすめのおしゃれな無料デザインテンプレートをご紹介していきます。先述の通り、HTMLやCSSといったコードを用いればデザイン性も自由度も高いブログ設定が可能ですが、ブログ初心者にはハードルが高いと感じる方も多いかと存じますので、最初はぜひおしゃれな無料のテンプレートを使ってみてください。

各デザインテーマのリンクを貼っておきますので実際のイメージをしながらデモサイトを確認して選んでみるのがおすすめです。

テーマのインストール方法

はてなブログにログインした状態で、テーマストアから「プレビューしてインストール」をクリックしブログを選択後、「このテーマをインストール」をクリックするだけで簡単にテーマを無料でインストールすることができます。

Minimalism

シンプルなデザインながらもどこかかわいらしい雰囲気のあるデザインテンプレートです。まだどのようなブログを作っていくか迷っているという初心者の方にもおすすめです。レスポンシブ設定に対応しているのでPCでもスマホでも安心です。

Minimalism

Brooklyn

Brooklyn

白と黒を基調としたシンプルなデザインテーマで、カスタマイズに特化したテンプレートで人気となっています。

Brooklyn

SOHO

SOHO

SOHOはスタイリッシュな印象を与えるデザインで、レスポンシブ設定に対応しているのでスマホでも簡単かつ綺麗に表示ができます。

SOHO

Material

Material

レスポンシブ対応で、Googleの新しいデザインガイドライン「Material Design」に沿ったスタイルのテンプレートとなっており、見やすいブログにすることができます。

Material

ZENO-TEAL

ZENO-TEAL

トップページがカード型になっているので、ブログ読者に見やすいデザインテーマになっています。こちらもレスポンシブ対応なのでさまざまなデバイスから綺麗に表示することが可能です。

ZENO-TEAL

Codomisu flat

Codomisu flat

おしゃれなフラットデザイン風のデザインテーマで、初心者でも簡単におしゃれなブログにカスタマイズができるのでおすすめです。

Codomisu flat

DUDE

DUDE

「気取ったおしゃれ」がテーマとなっているので、おしゃれなブログにしたいけれどもそれを選ぶか悩んでしまうという方にもおすすめのテンプレートです。

DUDE

UNDER SHIRT

UNDER SHIRT

UNDER SHIRTは装飾が少ないのでカスタマイズしやすいのが特徴で、レスポンシブ対応です。なお、2カラムのテーマですがスマホから見ると1カラムとなります。

UNDER SHIRT

Haruni

Haruniデモ

「春」をテーマにしたかわいらしいデザインで女性から人気が高いおすすめのデザインです。

Haruni

Innocent

Innocent

シンプルでおしゃれなレスポンシブ対応のデザインテーマです。

はてなブログテーマ「Innocent」を公開しました - MoonNote

今回ご紹介したデザインテンプレート以外にもおしゃれな無料テンプレートはたくさんありますので、ストア内からな自分好みの無料テンプレートを探してみてください。

ThumbGoogleアドセンスとは?ブログ運営で収益をあげるための使い方!
Googleアドセンスとは、Googleが提供するクリック型アフィリエイトのことです。ブログ...

はてなブログのデザインをもっとおしゃれにカスタマイズするポイント

無料のテンプレートでも十分におしゃれなブログにすることができますが、はてなブログをさらにおしゃれにカスタマイズしたいという時に押さえておきたいポイントを解説していきます。

テーマとなるカラーを決定する

まずは、テーマとなるカラーを決めましょう。ブログ内のカラーを統一することでまとまりが出るので一気におしゃれな印象になります。

上手なカスタマイズをしているブロガーを探す

はてなブログ内に上手なカスタマイズをしているブロガーがいれば参考にするといいでしょう。特に、ブログの記事内でブログのカスタマイズに関する投稿が無いかチェックするのがおすすめです。

初心者にもわかりやすいサイトを利用する

初心者がはてなブログをカスタマイズする際には「サルワカ」というサイトを参考にするのがおすすめです。HTMLやCSSのデザインコードを公開し、説明してくれているのでぜひ活用するといいでしょう。

サルワカ | サルでも分かる図解説明マガジン

デザインの基礎を学ぶ

書籍を購入するなどしてサイトのデザインの基礎を学ぶというのもいいでしょう。もっとも正攻法とも言えますが、一度頭に入れておくと今後のブログデザインにも役立ちます。

ThumbTwitterのタイムラインを埋め込みする!ブログやホームページに表示するには?
あなたがTwitterだけでなくブログやホームページを運用していればTwitter上のタイム...

はてなブログのデザインをおしゃれにカスタマイズしよう

ここまで、はてなブログのデザインをおしゃれにカスタマイズする方法を解説してきました。無料のデザインテーマのテンプレートを使えば、初心者の方でも簡単におしゃれなブログにすることができ、レスポンシブ対応のものを選べばスマホ、PC、タブレットといったさまざまなデバイスからのアクセスでも安心です。

ぜひお気に入りのデザインテーマを見つけてはてなブログをおしゃれにカスタマイズしてみてはいかがでしょうか。

Thumb【初心者向け】はてなブログの始め方!開設からアフィリエイトのやり方を解説!
はてなブログは、無料で自分のブログを開設できる人気のサービスです。始め方が簡単なので初心者に...

関連するまとめ

Original
この記事のライター
mi-mo
ママライター。生活の中でちょっと困った時に役立つ情報をお届けしていきます。

人気の記事

人気のあるまとめランキング

新着一覧

最近公開されたまとめ