はてなブログ”Minimalism”の初期設定とカスタマイズ【コピペで完結】

  • URLをコピーしました!
  • デザインが気になって記事執筆に集中できない
  • 最低限のデザインでいいからサクッと設定を済ませたい
  • Minimalismを入れてみたけどどう設定したらいいかわからない

はてなブログテーマ”Minimalism”を入れたばかりの方に向けて、最低限のカスタマイズをまとめました。

カスタマイズ作業はとても時間がかかるので、「ちょっと修正したいだけだったのに、気づけば日が暮れていた…」という経験はないでしょうか?

ですが、ブログの本質は記事を書くことです。

どんなに完璧にカスタムしても記事がなければ意味はないので、ブログを始めたての頃はとにかく記事を書くことに集中すべき。

本記事を参考にしていただければ、最低限のカスタマイズと収益化の準備まで完結します。

記事がかなり長くなってしまったので、ぜひ目次のリンクから必要な情報にアクセスしてお使いください。

本記事を読むとわかること
  • 必要最低限のデザイン設定の方法
  • ブログ収益化の初歩

※ なお、どうしてもはてなブログのデザインが決まらないと感じている方はWordPressへの乗り換えをおすすめします。そう感じるのは当然で、実ははてなのカスタムは難易度が高いからです。詳しくは次の記事をどうぞ。

» 参考:WordPressに切り替えるメリット・デメリットと切り替えの方法

はてなブログの基本設定

Minimalismのデザインを整える前に、はてなブログの基本設定から解説します。

基本設定は後から変更するのが面倒なもの。そのため、ブログ開設当初にざっと済ませておくのが吉です

このセクションで編集するのは【ダッシュボード > 設定 > 基本設定】の部分です。

少し面倒な作業が続きますが、一気に終わらせてしまいましょう!

ブログ名

ブログ名は後からでも変更できるので、まずは適当なものを設定しましょう。

ここで真剣に考えたい方は以下を目安に考えてみましょう。

印象に残るブログ名をつけるポイント
  • できるだけ短い
  • 発音しやすい
  • 他のブログとかぶらない
  • ドメインが空いている

基本的には読者に覚えてもらいやすいものが理想です。

ちなみにこの段階でドメイン(自分だけのURLが取得できる)が空いているかをエックスドメインなどで調べておくのもおすすめです。

ドメインは世界に一つしかないので、他の人がすでに取得していると自分が取得することはできないからです。

ブログアイコン

読者の方があなたのブログをお気に入り登録したときに表示されます。

独自のものを設定することで読者のお気に入り画面で目立たせたり、Webブラウザのタブアイコンで表示されることで親しみを感じてもらうこともできます。

ファイル形式は「JPEG」または「PNG」で、大きさは「192×192ピクセル以上の正方形」がはてなの推奨です。

自作派の方はCanvaICOOOM MONOがおすすめです。

多少お金がかかっても良いという方はココナラなどでプロのクリエイターさんに依頼することもできます。

やっぱりプロは仕上がりが違いますので、本気でブログをやりたい方はすごくおすすめです。

ブログのひとこと説明

ブログ名の近くに表示されるコメントで、サブタイトルのようなものです。

後から変更できますし、ブログ名ほど重要なものではないので最初は空欄でもOKだと思います。

編集モード

編集モードには次の3種類があります。

編集モードの種類
  • 見たままモード:実際のブログ記事の表示に近い状態で編集
  • はてな記法モード:はてな記法を使用して編集
  • Markdownモード:Markdown記法で編集

特別な理由がなければ「見たままモード」がおすすめです。

記事を公開した後とほぼ同じ見た目で編集ができるので、公開後のレイアウトやデザインを考えながら執筆を進められます。

コメント設定

参考までに僕の設定を共有します。

編集モードの種類
  • コメント許可:ユーザー(ログインしているはてなユーザーのみ)
  • コメント承認:未チェック
  • コメント表示順序:古いコメントから表示
  • コメント通知メール:コメントが書かれたらメールで通知

はてなユーザーに限定しておくとスパム的なコメントがなかったので、承認もなしにしています。

また、コメント通知メールはオンにしておくのがおすすめです。

ブログを始めてすぐはアクセスも少ないですから、コメントがつくとブログを続けるのに大きな励みになります。

詳細設定

詳細設定で設定できるのは次の内容です。

詳細設定で変更できること
  • 独自ドメインに切り替え Pro
  • アイキャッチ画像
  • トップページの表示形式 Pro

残念ながらアイキャッチ以外の項目は「はてなブログPro」でしか変更できません。

独自ドメイン Pro

有料版のはてなブログProを契約されている方は、ぜひ独自ドメインを設定してみましょう。

ドメインとはブログの住所のことで、当ブログであればkarochoa.comに当たる部分です。

無料版のはてなブログでは「株式会社はてな」のドメインの一部を間借りさせてもらっている状態で、ドメインの所有者はあなたではありません。

ドメインは個人が自由に取得することができ、あなたが独自に取得したドメインを独自ドメインといいます

独自ドメインの取得には年額1,000円程度〜の費用がかかりますが、次のようなメリットがあります。

独自ドメインのメリット
  • 検索エンジンからの評価を個人に蓄積できる
  • ドメイン名がついたメールアドレスが取得できる

例えば、僕はkarochoa.comというドメインを持っているのでmaster@karochoa.comのようなメールアドレスが自由に作れます。

ちょっと企業っぽいですよね。

また、はてなブログからWordPressなどに転出するときは、独自ドメインをそのまま使うことで検索エンジンからの評価を引き継げるメリットもあります。

検索エンジンからの評価が高ければブログの検索順位が上がりやすくなりますから集客力を個人に蓄積できます。そのため、ドメインには資産性があるといえますね

ドメインはドメイン会社から購入でき、有名なのは「お名前.com」などです。

僕も一時期「お名前.com」を使ってましたが、メールマガジンの登録解除が面倒だったり画面がわかりにくいためエックスドメインに切り替えました。

» 参考:エックスドメイン

アイキャッチ画像

こちらは特にいじらなくてOKです。

アイキャッチ画像とは、ブログ記事の一番上に表示されたりSNSシェアしたときの画像として表示されるものをいいます。

目を引く画像という意味でアイキャッチ画像と呼ばれますね。

もし自分好みのアイキャッチ画像を作りたいなら、次の流れがおすすめです。

アイキャッチ画像の作り方
  1. O-DAN」で素材画像を探す
  2. Canva」でいい感じに画像編集する

どちらも無料で使えるサービスなので、おしゃれな画像をサクッと作りたいならおすすめです。

トップページの表示形式

「はてなブログPro」の方はぜひ一覧表示にしましょう。

ブログのトップページにアクセスしたときに記事の一覧が表示されるので、読者が記事にアクセスしやすくなります。

全文表示だとトップページに最新記事の全文が表示され、とても見づらいんですよね。

僕がはてなブログを使っていたときに「はてなブログPro」に切り替えた理由の一つが一覧表示にしたかったことです。

無料プランの方は切り替えられないので我慢して使うしかないです。

「{}デザインCSS」でブログを見やすくカスタマイズ

いよいよブログデザインをカスタマイズしていきましょう。

デザインを変更するには、あなたが変更したいデザインに合わせたCSSコードを打ち込んでいく必要があります。

これまでプログラミングに触れてこなかった方にとっては「コード!?自分にもできるんだろうか…」と不安になると思いますが、ぜんぜん問題なしです。

というのも、先人たちが見本のコードを残してくれているので、僕たちはそれをコピペしてくればOK

微調整はコードの中の数字を増減させれば良いので、プログラミング知識ゼロでもある程度のデザインはできます。

まずはダッシュボードからデザインを選択。

続いてスパナマークをクリックして、{}デザインCSSというボタンをクリックしましょう。

ここに色々とデザイン変更のためのコードを入れていきましょう。

ブログ全体の文字サイズ

Minimalismの標準のフォントサイズは小さいので、17pxにしてみましょう

/*フォントサイズ*/
.entry-content
p {font-size: 17px;}

これだけでかなり記事が読みやすくなるはずです。

ここで17pxにする理由は、検索エンジン最大手のGoogle社が17pxのフォントサイズを推奨しているからです。

また多くのブログを見渡してみても17px前後のフォントサイズであることが多いので、最初の設定としては17pxで良いでしょう。

行の高さ

行の高さはいじり出すと沼にハマるので、基本はそのままでOKです。

どうしてもデフォルトの行の高さが気になる方だけ次のコードで変更しましょう。

/*行の高さ*/
.entry-content{line-height:2.0em;}

見出しのデザイン

↑ こんな感じのを見出しといいます。

Minimalismのデフォルトの見出しは装飾がまったくありません。

これはこれでミニマルでカッコいいんですが、物足りない方はカスタマイズにチャレンジしてみましょう。

見出しのデザインは、次のページを参考にしてみましょう。

好みのデザインが見つかったら、続いて色を変更してみましょう。

コードの中身をよく見ると#FFC778のような色番号が隠れています。これを好みの色に変更すれば、デザインはそのままに色が変更できます

色番号はGoogle検索で見つけるか、「Color-Sample.com」などを参考にして検索しましょう。

見出しには大きく3種類あります

一番大きな見出しがH3(大見出し)と呼ばれ、H4(中見出し)、H5(小見出し)と数字が増えるごとに小さい見出しになっていきます。

ジャンルの大きさに応じて使い分けるとよく、例を示すと次のような感じです。

<H3>果物の種類</H3>
<H4>南国の果物</H4>
<H5>バナナ</H5>
<H3>日本食</H3>
<H4>麺類</H4>
<H5>蕎麦</H5>

それぞれについて見出しのデザインを変えるのが一般的で、例えばH3には「装飾なしで文字サイズを大きくする」、H4は「文字サイズを少しだけ大きくして左にラインをいれる」などといった感じです。

見出しはH2から始まるのが常識ですが、はてなブログではH3から始まります

H2がないんです。

知ってる人から見るとすごい違和感ですが、「そんなものか」とあまり気にせずに設定を済ませましょう。

先頭が.heading2h2となっている場合には、.entry-content h3と書き換えるとうまくいきます。

シェアボタンの設置方法

読者の方があなたのブログをSNSで拡散する際のボタンは、Yukihiさんのものがおしゃれでオススメです。

なお、「コピペコード①」を貼り付けないと正常に動かないので注意してください。

» はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)

「先頭に戻るボタン」を設置する方法

ページの先頭に戻るボタンを設置します。

特にスマホから見ている読者にとってはありがたい機能になるかもしれません。

こちらの記事を参考に設置しました。

https://www.imuza.com/entry/2017/12/28/114300

引用ボックスのカスタマイズ

「引用ボックス」のデザイン変更は、以下のサイトを参考にしました。

元CAバンビのずぼら日記
はてなブログ★引用デザインをかっこ良くカスタマイズ!コピペでOK! - 元CAバンビのずぼら日記 2018/08/02 はてなブログのテーマ「Palette(パレット)」を発表しました♪♪初心者でもカスタマイズが簡単なテーマです(^-^)どうぞご利用ください! // 他の人の記事を「引...

その他のカスタマイズ

「{ }デザインCSS」以外の場所に入力していくカスタマイズ方法をまとめました。

コピーライトを設置する方法

ブログの画面の下のエリアを、フッターと呼びます。

そこに「Copyright ©かろちょあ  All rights reserved.」のように表示する方法です。

実は、著作権法上はあってもなくても保護されるようですが…

僕の場合は、「かっこいい」という理由でだけで設置してます(笑)

/*コピーライト*/
#copyright {
padding: 20px;
text-align: center;
background: gray;/*背景色*/
font-size: 14px;
color:#fff;/*文字の色*/
}

続いて、「フッタ」にしたのコードを貼り付けましょう。

フッタの場所は「デザインCSS」の一つ上です。

<div id="copyright">Copyright ©**あなたのブログ名** All rights reserved.</div>

サイドバーにTwitterタイムラインを埋め込む方法

ブログのサイドバーに、Twitterのタイムラインを埋め込むことができます。

こちらは「デザインCSS」ではなく、「サイドバー」にコードを入れていきます。

少し説明が長くなるので、別記事に譲りました。

アフィリエイト周りのカスタマイズ

アフィリエイトとはブログに広告を掲載して報酬を受け取れるサービスで、次の2種類があります。

広告の種類
  • クリック型:クリックされるだけで報酬が発生
  • 成果報酬型:クリック + 購入で報酬が発生

おすすめは成果報酬型の方で、1個売れるだけで数千円〜数万円の高額報酬が入ります。クリック型は数円から数百円なので雀の涙ですね。

以前は、はてなブログでアフィリエイトするとアカウントが消されることがありました。それが現在では規制がだいぶ緩くなってきています。

(前略)このような社会情勢を鑑み、より多くの方に良いコンテンツを発信していただけるブログプラットフォームとするため、はてなブログは個人の営利利用を許諾する方針とします

出典:はてなブログの営利利用に関する方針

ただし無制限にOKというわけではないので、詳しくははてなブログの規約を確認してくださいね。

というわけで、はてなブログも基本的にはアフィリエイト活動はOKなので、試行錯誤しつつ収益化を目指すのもありです

特に報酬が発生するアフィリエイトでは、少しのカスタマイズで大きく成果が変わることもあります。

ぜひ収益獲得に向けて、頑張っていきましょう。

成果報酬型のアフィリエイトに必須なボタンカスタマイズ

すでにお伝えしたように、まとまった報酬を獲得するには成果報酬型のアフィリエイトがベストな選択です

カスタマイズという点で成果報酬型のアフィリエイトで成約率を高くする方法の一つが、ボタンデザインの変更です。

こちらの記事ではたくさんのボタンデザインを掲載してくれています。

サルワカ | サルでも分かる図解説...
CSSで作る!押したくなるボタンデザイン100(Web用) HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

なお、アフィリエイト案件はASPという会社に登録して探すのが王道のパターンです。

次に紹介したASPはすべて優良な会社ばかりなので、まだの方は一気に登録を済ませてしまいましょう。

おすすめのASP
  • A8.net:東証一部上場企業が運営するシェアNo. 1のASP
  • Amazonアソシエイト:Amazonで取り扱っている商品を紹介して報酬がもらえる
  • 楽天アフィリエイト:楽天アフィリエイト:楽天市場で取り扱っている商品を紹介して報酬がもらえる
  • A8.net:東証一部上場企業が運営するシェアNo. 1のASP
  • Amazonアソシエイツ:Amazonで取り扱っている商品を紹介して報酬がもらえる
  • 楽天アフィリエイト:楽天市場で取り扱っている商品を紹介して報酬がもらえる
  • Googleアドセンス「スポンサードリンク」の文字を小さくする

    Google Adsenceとは、Googleが提供するクリック型の広告です。「1クリックあたり数円」という感じで報酬が発生します。

    このGoogle Adsenceですが、広告をはりつける際に「スポンサードリンク」という文字を設置することが多いです。

    ところが、はてなブログで「スポンサードリンク」の文言を設置しようとすると、フォントサイズが大きくなってしまいかっ

    https://www.hohonut.com/entry/2018-04-02-075920

    Google Adsenceの登録がまだの方は、Googleにブログを審査してもらいましょう。

    » 参考:Google Adsenceにブログを申請する

    ヨメレバ・カエレバ【CSSのカスタマイズ】

    Amazonや楽天の商品を紹介してアフィリエイト報酬をもらうには、「ヨメレバ」や「カエレバ」が便利です。

    「ヨメレバ」「カエレバ」はそのまま設置するよりもCSSによりカスタマイズする方が見栄えが良くなります。

    次の記事を参考にしました。

    Yukihy Life
    ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! - Yukihy Life はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで...

    商品リンクボタンは読者の反応に直結するので、色々と試しつつどれが一番反応が良いか実験して見ましょう。

    まとめ:デザインはさっと済ませて記事を書こう!

    本記事の内容を一通りこなせば、カスタマイズとしてはある程度形になると思います。

    とはいえ前述のようにはてなブログで完璧なデザインを目指すのは至難のワザです。

    デザインがどうしても気に入らないと感じる方はぜひWordPressも検討してみましょう。

    僕も数年前にはてな→WordPressに移行しましたが、デザインについて全く考えることがなくなったので記事を書くことに集中できてストレスフリーになりました。

    別記事ではメリット・デメリットなども詳しく解説していますので、気になる方はぜひ覗いてみてください。

    この記事が気に入ったら
    フォローしてね!

    シェアしてもらえると喜びます!
    • URLをコピーしました!
    • URLをコピーしました!

    この記事を書いた人

    Pythonを使ってプログラムを書くお仕事をしています。
    業務自動化プログラムの作成が得意で、物販のお仕事をされている方や士業事務所様に業務効率化のツールをご提供させていただいております。
    現在自力でWebサービスを作れるようになるべくDjangoを学習中。
    お仕事のご相談はお気軽にご連絡ください。

    コメント

    コメントする