- ブログデザインが気になって記事執筆に集中できない
- 必要最低限のデザインを先にサクッと終わらせたい
- デザイン変更に役立つサイトを一気に知りたい
- アフィリエイトのデザインもいじりたい
このような方に向けて、テーマ”Minimalism”の「初期設定」と「カスタマイズ」をまとめました。
ブログのカスタマイズって、時間がかかりますよね。「気付いたら日が暮れていた」という経験をお持ちの方も多いのではないでしょうか？たしかにカスタマイズをすれば、デザインが洗練され、記事が読みやすくなります。
ただし、ブログの本質はあくまで「記事を書くこと」です。
ここでは、最低限の初期設定・デザインをサクッと仕上げて、記事を書くのに集中するための準備を終わらせてしまおう！というテーマで書いていきます。
前半は、はてなブログの基本的な「初期設定」、後半に主に「デザインのカスタマイズ」になっています。
記事が長くなってしまったので、よろしければ次の目次のタイトルをクリックして目的のページにスキップしてください。
※なお、「どうにもカスタマイズがうまくいかない」という場合には、はてなブログ自体のカスタマイズ性の限界である可能性もあります。
その場合は、WordPressへの移行を検討検討してみてください。詳細は「はてなブログからWordPressへの移行」にまとめました。
はてなブログの「初期設定」を済ませよう
「Minimalism」のカスタマイズをする前に、はてなブログの初期設定を済ませてしまいましょう。
初期設定なしでもブログを書けますが、長くブログを続けると「改めて初期設定をする」作業はとても億劫です。できるだけ早い段階で終わらせてしまいましょう。
【設定 ＞ 基本設定】から始めよう
まずははてなブログの「ダッシュボード」を開きましょう。
左側のメニューから「設定」を選択します。その後、右側に現れる3つのタブのうち、「基本設定」をクリックします。
ここでは、まず「基本設定」を一通り済ませていきます。
ブログ名を入力します。（このサイトであれば、「かろちょあ 」です）
お気に入りに設定した時に表示される画像を、ファビコンと言います。
はてなブログの公式ヘルプによれば、「ファイル形式はJPEG、PNG、大きさは192×192ピクセルより大きな正方形の画像」良いとされています。
ご自分で作成したい場合には、「ICOOOM MONO」や「Canva」を使うと簡単にそれっぽいものを作れます。「Canva」だけでも素材が充実しているので、これだけで結構形になるかもですね。
作成が面倒な方は「ココナラ」や「クラウドワークス」などのクラウドソーシングで外注するのもアリだと思います。
ブログでどんな情報を発信するかを、短いフレーズで紹介しましょう。
ブログ名の下に表示されるので、意外と読者さんの目にとまる場所に表示されます。適当につけるのではなく、ある程度考えたものにするのがオススメです。
とはいえ、後から変更もできます。迷ってしあまりに時間がかかりそうな場合や、内容がまだ決まっていない場合は「ブログの内容を一言でいったら？」と自問自答して作ってみましょう。
「aboutページ編集」は、あと回しで大丈夫だと思います。プロフィールなどを編集することができますが、入力しなくてもそこまで影響がありません。
- title要素 (ページのタイトル)
- 自由記述欄
- プロフィール
- リンク
- ブログ投稿数
- ブログ日数
- 継続期間
- 読者
参考までに、上のような内容を設定できます。
記事の書き方として、はてなブログでは三つの方法が用意されています。
迷ったら、「見たままモード」にするのをオススメします。投稿後に表示されるのと同じレイアウトで書き続けることができます。
読者の方からコメントの設定です。
自分のブログにコメントを書ける人の範囲を決められます。
「ゲスト」は、なんの制限もつけないパターン。
「ユーザー」は、はてなのユーザーのみコメントを許可するパターン。
「なし」は、コメントを一切受け付けないパターンです。
僕の場合は「ユーザー」として設定していました。スパム的なコメントがイヤだったことと、とは言えはてなユーザーならそこまで変なコメントもつかないだろうと思ったのが、その理由です。実際、はてなユーザーの方のコメントは厳しかったり誹謗中傷のようなものはなく、ブログ運営に励みになるようなものばかりでした。
ブログをはじめたての頃は「ユーザー」がオススメかもしれません。何か問題があれば、「なし」に変更するのでも全然いいと思います。
コメントが直ちに反映されず、承認して初めてコメントが表示される設定です。
基本、チェックを入れておくと良いと思います。承認したものだけ表示されるようにすれば、記事が荒れにくいのかな、と思っています。
コメントの並び順を決めることができます。
古い順、新しい順から選ぶことができますが、よくみるのは「新しい順」かなと思います。こちらは好みで設定していただいていいかと思います。
コメントがされたときに、メールでお知らせしてくれる機能です。
僕はチェックを入れていました。そもそもそんなにコメントがつかなかったので、「おぉ！読んでもらえてコメントまでくださった！」と感動・モチベーションが上がったのでそうしていました。
コメントを受け付けたくないユーザーを指定して、ブロックできます。
スパムがあれば、これでブロックできます。僕は一度も使わなかったです。
続いて「詳細設定」をしよう
基本設定が終わったら、「詳細設定」を進めていきましょう。ここでご説明するのは、次の内容です。
- 独自ドメイン【Pro】
- アイキャッチ画像
- HTTPS配信
- トップページの表示形式（PC版）【Pro】
ドメインとはURLにあたる部分のことで、いわばブログの「住所」です。
はてなブログのデフォルトでは「xxx.hatenablog.com」などとなっていますが、「karochoa.com」のように自分の好きな文字列に変更できます。つまり、独自にドメインを設定できるのが「独自ドメイン」です。
そのまんまですね。
設定は２ステップに分かれています。
まず一つめのステップは、ドメイン会社より好みのドメイン（〇〇.comなど）を取得すること。普通、年間1,000円くらいの利用料を支払って使える権利をもらえます。（「住所」にあたるので、他の人が使っているものは取得できません）
二つめのステップは、はてなブログに取得したドメインを登録するステップです。つまり、ここで紹介している入力フォームですね。
入力フォームの下の「独自ドメインの設定方法は？」から、詳しい設定方法が見れます。
お金を払ってまでドメインを取得する理由は、検索エンジンのドメインに対する評価が積み上がっていくからです。
つまり、独自ドメイン内で良質なブログ記事を書き続けると、検索エンジンから「このドメインは有益な記事がある」と評価されます。そうすると、低品質な記事を書いているドメインに比べてキーワード順位が上がりやすくなるというわけです。つまり、集客力が上がるといえます。
ドメインはあなただけのものですから、育てた集客力があなたの資産になってくれるというわけです。
ドメイン取得サービスは「お名前ドットコム」が有名です。
「GMOインターネット株式会社」という上場企業が運営しているサービスのため、安心して利用できます。（かろちょあ.comでも、お名前ドットコムを利用してます。）
「アイキャッチ画像がない場合」に表示する画像を設定できます。
アイキャッチ画像とは、記事の先頭に表示する画像のことです。SNSなどにシェアする場合などに、タイトルと共に表示されるので記事にアクセスするかどうかの判断に重要な役割があると言われています。
アイキャッチ画像がないと、見た目がさびしいばかりでなくアクセス率も下がってしまいます。記事を発表した時にアイキャッチ画像を設定しなかったとしても、画像を表示させることは意味があります。
画像素材として「O-DAN (オーダン）」は、オススメです。いろいろな無料画像ダウンロードサービスから「横断的に」検索でき、素材として使うことができます。（商用もOKですが、使用許諾がある場合には念のため目を通しておくことをオススメします。）
「HTTPS配信」は、基本的に「有効」にしましょう。
以前は「HTTP」という方式が多く取られていましたが、今の主流は「HTTPS」です。セキュリティレベルが上がり、世界一の検索エンジンであるGoogleも「HTTPS化」を推奨しています。
よほどのことがない限り、有効にしておきましょう。
ブログのトップページの表示方法を設定します。
無料版のはてなブログでは「全文形式」のみ、選択ができます。「全文形式」とは、トップページに最新記事の本文が表示されるものです。記事一覧などはないため、読者の方からするとブログ内から目的の記事にアクセスするのが大変なのが難点。
はてなProでは「一覧形式」の設定ができます。「一覧形式」とは、ブログのトップページに記事一覧が表示されるものです。まず、トップページに記事ごとのタイトルが表示されるので、他の記事へアクセスする時にも簡単です。
主に読者の方のアクセスの簡単さというところが違いになりますが、僕はやはり「一覧形式」が読者の方に親切ですし、見やすいと思っています。
タイトル画像
デザイン＞カスタマイズ＞ヘッダ＞タイトル画像＞ファイルの選択
グループの設定
グループ＞はてなグループを見る＞カテゴリを選ぶ＞グループに参加
ブログの概要・キーワード設定
設定＞検索エンジン最適化
ブログの概要は、空欄にします。
ブログのキーワードは”,” で区切って2〜5個入力しておくのがいいと言われています。
{ }デザインCSS【ブログを見やすくカスタマイズ】
ブログデザインの変更には、「{}デザインCSS」にコードを打ち込みます。
「コードなんて書いたことないよ！難しそう…」
そう思えますが、カンタンなのでご安心を。
すでに先人たちが、デザインごとにコードをまとめてくれています。僕らはコピペするだけで、ブログデザインを変更できます。思ったほど敷居は高くないので、安心して作業を進めていきましょう。
コードを貼り付ける場所は、以下のとおりです。
まず、ダッシュボードの「デザイン」をクリックします。
上の方にある「スパナマーク」をクリックして、「{ }デザインCSS」を開きましょう。
ここにコードをコピペしていきます。
「ブログ全体の文字サイズ」を変更する
ブログ全体の文字サイズを「17ピクセル」程度に設定しましょう。
この大きさにする最大の理由は、Google推奨といわれているからです。
また、多くのブログでは17ピクセル前後の大きめのフォントサイズが採用されています。よって、特別な狙いがなければ17ピクセルにしておくのが無難。
記事が読みにくいと感じたら、次のコードを「{ }デザインCSS」にコピペしてみてください。ブログのすべての記事が17ピクセルに変更できます。
/*フォントサイズ*/
.entry-content p {font-size: 17px;}行の高さを変更する
行の高さも、文章の読みやすさを左右します。
イジり出すと沼にはまっていきますので、デフォルトで問題なければそのままでOKです。
文章が読みにくい場合には、下のコードを参考にカスタムしてみてください。
/*行の高さ*/
.entry-content {line-height:2.0em;}見出しを変更する
↑「見出しを変更する」と書かれた、こんな感じのを「見出し」といいます。装飾をつけたり、フォントサイズを大きくして「見出し感」を出すことが多いです。
見出しは【h3（大見出し）→h4（中見出し）→h5（小見出し）】のように分かれます。
CSSでは、それぞれの見出しの種類に対して、装飾を決めることができます。
例えば、h3には装飾なしで文字サイズを大きくする、h4は文字サイズを少しだけ大きくして左にラインをいれる、などといった感じです。
Minimalismのデフォルトは装飾がほぼない状態なので、ここを触るだけで外観がガラッと変わります。
自分でデザインするのは難しいですが、先人たちがいろいろなデザインを残してくれています。そこから気に入った見出しデザインを見つけて、コピペしましょう。
見出しデザインを公開してくれているページを紹介します。
見出しは「h2」から始まるのが普通なのですが、はてなブログではなぜか「h3」から始まる仕様になっています。「h2」がないんです。コードを調べていくと、このことで違和感があるかもですが、「そんなものかな」と頭の片隅に置いておくと混乱せずにすむと思います。
コピペしたコードの「#」で始まる記号が、色を表しています。
まずは設定したい色のコードを「Color-Sample.com」から検索して、コピペしたコードの色番号を置き換えればOKです。
シェアボタンの配置方法
SNSシェアボタンはおしゃれなYukihiさんのものがオススメです。
なお、「コピペコード①」を貼り付けないと動作しませんので注意です。
» 参考：はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)
ページの先頭に戻るボタンを設置する方法
ページの先頭に戻るボタンを設置します。
スマホで記事を読んでいて「ページの先頭に戻りたい」と思ったときにあると親切かも。
» 参考：ページトップへ戻るスムーズスクロール（jQueryなし）
マーカーをひく方法
よくみる蛍光ペンで塗ったような効果も、CSSで実装できます。
» 参考：ブログで蛍光ペンのような「色の付いた下線」を引く方法” site=”トレードが10倍楽になる基礎講座
引用ボックスのカスタマイズ方法
「引用ボックス」のデザイン変更は、以下のサイトが参考になりました。
参考 はてなブログ★引用デザインをかっこ良くカスタマイズ！コピペでOK！元CAバンビのずぼら日記その他のカスタマイズ
「{ }デザイン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」ではなく、「サイドバー」にコードを入れていきます。
少し説明が長くなるので、別記事に譲りました。
» 参考：サイドバーにTwitterのタイムラインを・記事内にツイートを埋め込む方法【はてなブログ】
アフィリエイトの設定
ブログから収益を得るためには、アフィリエイトの設定が必須です。
- 広告を扱っているアフィリエイトASPに会員登録する
- アフィリエイトASPが扱っている広告の中から、あなたが紹介したい商品のリンクをブログにはる
- 商品がクリックされて、売れればあなたに紹介報酬が入る
基本的には上記の流れでして、「完全成果報酬型」です。
アフィリエイトにはあやしいイメージもありますが、そうともいえません。例えば「A8.net」は、東証一部上場の株式会社ファンコミュニケーションズが運営しています。きちんと運営主体を調べたり、情報収集すれば変なサイトに登録することもありません。
アフィリエイトASPは有名なものだけでも数十社ありますが、この３つのサイトはブロガー・アフィリエイターなら誰もが登録しているASPだと思います。
アフィリエイトASPの違いは、主に取り扱っている広告の種類の数です。これらは業界の中でも広告の数がトップクラスなので、登録して後悔することはないと思います。
その他のアフィリエイトASPについては、別記事にまとめました。
アドセンス【非ダブルレクタングル】
ダブルレクタングルだと、「いかにも広告」な感じになってしまいます。
そこで、ちょっと変わったアドセンス設置を試してみましょう。この記事によると収益が2倍になったとか。
「収益をとことん追求したい！」という方は試してみるのもありかも？
参考 ダブルレクタングルは時代遅れ。収益2倍のカスタマイズ3秒だけ本気出すブログアドセンスの「スポンサードリンク」を小さく
スポンサードリンクの文字サイズを小さくする方法です。
普通に文字入力してしまうと大きくなりすぎてダサかったので、こちらのサイトを参考に小さくしてみました。
参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】
ヨメレバ・カエレバのカスタマイズも、CSSで可能です。
はてなブログでAmazonなどの商品紹介をする方は、デザイン変更を考えてみてもいいかも。
というのも、デザインによってクリック率も変わってくるようで、どのデザインが一番いいかを検証していくのもよいと思います。
参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！さらに、上のコードでボタンのズレが出てしまった場合には、次の記事も参考になります。
参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなデフォルトリンク【Amazonと楽天のマークをつける】
はてなのAmazon、楽天リンクにマークをつけます。
カエレバ・ヨメレバを使わない方は、こちらのカスタマイズをするだけで商品リンクのデザインを変えることができます。
参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredorあとがき
僕がこれまでやってきたカスタムを紹介しました。
カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。
とりあえずこの記事を参考にザッと変更して、さらに気になるところを修正していく…とすれば、記事執筆に集中できるかな？と思います。
ぜひ、チャレンジしてみてください！
