- ブログデザインが気になって記事を書けない
- 最低限のデザインをサクッと作りたい
「Minimalism」を入れたばかりの方に向けて、最低限のカスタマイズをまとめました。
はてなブログのカスタマイズ作業はとても時間がかかるので、ちょっと修正したいだけだったのに、気づけば日が暮れていた…という経験をされた方も多いのではないでしょうか？
ですが、ブログの本質は記事を書くことです。
いくらカスタマイズしても記事がなければ意味がないので、最初はとにかく記事を書くことに集中すべき。
本記事の内容を実践していただければ、最初の環境構築としては十分だと思います。
なお、はてなブログのカスタマイズはかなり大変（上級者向け）なので、月1,000円前後負担できるならWordPressに移行するのもアリです。
まずは「基本設定」から始めよう
テーマの設定の前に、はてなブログの初期設定を済ませましょう。
後々に修正しようとすると手間なので早めに片付けてしまうのがオススメです！
編集する場所
「ダッシュボード」→「設定」→「基本設定」
ブログ名
看板となる「ブログ名」です。
後から修正できるので、決まってない方はとりあえずのものでもOK。
ブログアイコン（ファビコン）の設定
ファビコンとは、お気に入りに設定した時に表示される画像のことです。
ブログのリピーターの方が目にする場所なので、設定しておくと読者がブックマークからあなたのブログを探しやすくなります。
作り方は、アイコン素材を「ICOOOM MONO」でダウンロードして「Canva」で画像加工をするのが良いです。
画像ファイルの種類やサイズは、公式サイトの情報を引用します。
対応しているファイル形式はJPEG、PNGで、192×192ピクセル四方より大きな正方形の画像がよいでしょう。
出典：プロフィールの設定とaboutページ
プロに頼みたい方は「ココナラ」で発注する方法もあります。
ブログの説明
ブログで情報を発信する内容をコンパクトに書きます。
意外と読者の方の目に留まる場所だったりするので、ぜひ設定しておくことをおすすめします。
aboutページ編集
「aboutページ編集」は後回しで大丈夫です。
主にプロフィールまわりの設定になので、ブログと直接的に関わるものが少ないためです。
参考までに「aboutページ編集」で設定できる項目を列挙します。
- title要素 (ページのタイトル)
- 自由記述欄
- プロフィール
- リンク
- ブログ投稿数
- ブログ日数
- 継続期間
- 読者
記事がある程度たまってきてから設定するのでも遅くありません。
編集モード
おすすめは「見たままモード」です。
記事公開後の仕上がりイメージを見ながら執筆できるので、読者の視点に立ちながら書くことができます。
迷ったら「見たままモード」を選んでおけば間違いありません。
コメント設定
読者の方からのコメントについての設定です。
ぼくが設定している内容を踏まえて、お伝えさせていただきます。
コメント許可
どんな人が自分のブログにコメントを書けるかを設定します。
- ゲスト ：誰でもコメント可能
- ユーザー：はてなユーザーだけ
- なし ：コメントを一切受けつけない
僕は「ユーザー」を選びました。
理由は、スパムコメントを避けたかったのと「はてなユーザーなら、変な人は少ないだろう」と思ったからです。
実際に何件かコメントをいただきましたが、はてなユーザーからのコメントはどれも温かいものばかりでした。ブログを続ける上でも励みになるので、特別な理由がなければONにしておくとブログが楽しくなります。
「どうしても変なコメントばかり届く」という場合のみ、「なし」に切り替えれば良いと思いますよ。
コメント承認
チェックを入れると、コメントが書き込まれても承認するまではブログに表示されません。
基本、チェックを入れておくと良いと思います。
変なコメントでいっぱいになるとコメントが荒れてきますし、コメント欄は運営者が主導権を握っておくのが一番です。
コメント表示順序
コメント表示順序は「新しい順」が一般的かと思います。
お好みで設定してみてください。
コメント通知メール
コメントがされたときに、メールでお知らせしてくれる機能です。
僕はチェックを入れています。
コメントがつくと「おぉ！コメントまでくれたのか！」とテンションが上がっています。
コメント拒否ユーザー
コメントを受け付けたくないユーザーを指定して、ブロックできます。
スパムがあれば、これでブロックできます。僕の場合は、一度も使わなかったです。
「詳細設定」でワンランク上のブログに
「詳細設定」で設定できるのは、以下の内容です。
- 独自ドメイン【Pro】
- アイキャッチ画像
- HTTPS配信
- トップページの表示形式（PC版）【Pro】
※【Pro】は、有料の「はてなブログPro」のみ設定可能
設定する場所は、以下の通り。
「ダッシュボード」の左メニューの「設定」をクリックし、詳細設定を選択しましょう。
独自ドメイン [Pro]
「はてなブログPro」だけの機能ですが、独自ドメインが設定できます。
ドメインとはブログのアドレスのことで、本ブログでいうところの「karochoa.com」にあたるものです。
無料版のはてなブログでは「~hatenablog.com」などのアドレスが割り当てられますが、このドメインはあなたのものではなく株式会社はてなの所有です。一方で、ご自身でドメインを取得すれば、あなただけのアドレスを設定できるというわけです。
独自ドメインは年額かかりますが、次のようなメリットがあります。
- はてなブログ以外に引っ越しても、アドレスが変わらない
- ドメインがあなたの資産になる
- 読者の方に覚えてもらいやすい
独自ドメインで良質な記事を書き続けると、検索エンジンからの評価が上がります。
検索エンジンからの評価が高まると検索上位に表示されやすくなり、ブログの集客力が上がることになるわけです。もしあなたが、ブログでサービスを販売したりアフィリエイトをしている場合には、集客力は稼ぐチカラに直結します。
借り物のドメインだと、せっかく貯めた信用もあなた自身のものになりません。つまりブログの資産化には独自ドメインが必須ということ。
はてなブログProで独自ドメインを設定するには、「お名前ドットコム」などで目当てのドメインを取得し、これをはてなブログに設定する流れとなります。
とはいえ、独自ドメインを取得する方のほとんどは収益化を考えている方がほとんどだと思います。その場合は、WordPressへ移行する方がコスパは良いかなと思います。
アイキャッチ画像
アイキャッチ画像とは、記事をSNSなどでシェアした時に表示される画像のことです。
アイキャッチ画像は記事ごとに設定できますが、設定を忘れたときに「仮に表示されるアイキャッチ画像」をここで決めておくことができます。「デフォルトのアイキャッチ」ということですね。
- 素材となる画像は「O-DAN (オーダン）」などを使い、
- 画像編集は無料の「Canva」を使う
安く済ませたいなら、上記の流れが鉄板だと思います。
HTTPS配信
「HTTPS配信」は、基本的に「有効」にしましょう。
HTTPSを有効にするだけで、よりセキュリティの高い環境が調います。
検索エンジンのGoogleもHTTPSを推奨しており、迷いなく「有効」にするのをおすすめします。
トップページの表示形式（PC版）[Pro]
ブログのトップページの表示方法を設定します。
はてなブログProだと「一覧形式」が選べるようになります。これにすると、ブログのトップページに記事一覧が表示されるようになります。
読者の方があなたのトップページを訪れたときに各記事にアクセスしやすくなるので、Proの方は「一覧形式」の方が親切だと思います。
タイトル画像
デザイン＞カスタマイズ＞ヘッダ＞タイトル画像＞ファイルの選択
グループの設定
グループ＞はてなグループを見る＞カテゴリを選ぶ＞グループに参加
ブログの概要・キーワード設定
設定＞検索エンジン最適化
ブログの概要は、空欄にします。
ブログのキーワードは”,” で区切って2〜5個入力しておくのがいいと言われています。
{ }デザインCSS【ブログを見やすくカスタマイズ】
いよいよ、ブログのデザインをカスタマイズしていきます。
そのためには、あなたが変更したいデザインを「コードとして」はてなブログに打ち込んでいく必要があります。
「コードなんて難しそう！プログラムなんて書いたことないし…」と思ってしまいますが、ご安心ください。
先人たちがまとめてくれたコードがあるので、それをコピペすればちゃんとブログデザインは変更できます。
やってみると意外と簡単なので、一つずつゆっくりと作業していきましょう。
コードをはりつける場所
まず、ダッシュボードの「デザイン」をクリックします。
上の方にある「スパナマーク」を選択すると出てくる「{ }デザインCSS」にはりつけましょう。
ここにどんどんコードを足していく感じです。
「ブログ全体の文字サイズ」を変更する
まずは、ブログ全体の文字サイズを「17px」程度にしてみましょう。
はてなブログのテーマは、かなり文字サイズが小さい場合が多いです。ミニマリズムも例外ではありません。
17pxにする理由は、Google推奨といわれているためです。
そして多くのブログやウェブメディアでは17px前後に設定されていることが多いので、それに倣っておくのが無難かと思います。
次のコードを貼り付けると、ブログ全体の文字サイズを一気に変えられます。
/*フォントサイズ*/
.entry-content
p {font-size: 17px;}行の高さを変更する
行の高さも、文章の読みやすさを左右します。
イジり出すと沼にはまっていきますので、デフォルトで問題なければそのままでOKです。
文章が読みにくい場合には、下のコードを参考にカスタムしてみてください。
/*行の高さ*/
.entry-content{line-height:2.0em;}見出しを変更する
↑ こんな感じのを、見出しといいます。
テーマ「minimalism」では、見出しのデザインも超ミニマル。
味気ないと感じる方は、見出しデザインを変更してみましょう。
参考になるサイトを、３つほど挙げます。
全部見るとかなりの数の見出しデザインになるので、１つはあなた好みのものが見つかるはず。
もし、色を変えたい場合はサンプルコードの「色番号」を変更しましょう。
色番号とは「#」で始まる記号で、「Color-Sample.com」などのサイトで検索すると目当ての色の「色番号」を知ることができます。
これらを「テキストCSS」に貼り付ければOKなのですが、二点ほど注意点があります。
見出しには種類がある
見出しは、文章のまとまりごとに【h3（大見出し）→h4（中見出し）→h5（小見出し）】のように分かれます。
この見出しの大きさごとにデザインを変えていくのが好ましく、それぞれに装飾を割り付けていきましょう。
例えば、h3には「装飾なしで文字サイズを大きくする」、h4は「文字サイズを少しだけ大きくして左にラインをいれる」などといった感じです。
サンプルコードに「h3」などと書かれていると思いますが、ここはあなたの設定したい見出しの大きさに合わせて変更してください。
はてなブログの見出しはちょっと独特
見出しは「h2」から始まるのが常識ですが、はてなブログでは「h3」から始まります。「h2」がないんです。
なぜ業界常識に合わせなかったのか、とても不思議です。
予備知識なしで見ると違和感しかありませんが、「そんなものか」とあまり気にせずに設定を済ませましょう。
シェアボタンの設置方法
SNSシェアボタンはおしゃれなYukihiさんのものがオススメです。
なお、「コピペコード①」を貼り付けないと正常に動かないので注意が必要です。
» はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2)
「先頭に戻るボタン」を設置する方法
ページの先頭に戻るボタンを設置します。
スマホで記事を読んでいて「ページの先頭に戻りたい」と思ったときにあると親切かも。
マーカーを引く方法
よくみる蛍光ペンで塗ったような効果も、CSSで実装できます。
引用ボックスのカスタマイズ
「引用ボックス」のデザイン変更は、以下のサイトが参考になりました。
その他のカスタマイズ
「{ }デザイン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」ではなく、「サイドバー」にコードを入れていきます。
少し説明が長くなるので、別記事に譲りました。
【ブログを収益化】アフィリエイトの設定
ブログで収入を得たい方は、ASPに登録しましょう。
ASPとは、「広告を出したい企業」と「広告を掲載して報酬をもらいたいブロガー」をつなぐサービス会社のことです。
広告収入をもらうまでの流れは、こちら。
- ASPに登録する
- 紹介したい商品のリンクをコピーし、記事にはりつける
- リンクがクリックされ、売れると報酬が入る
基本的には上記の流れになっており、ファーストステップとしてASPへの登録が必須になっています。
たくさんのASPがあって迷ってしまう方は、まずこちらの２社に登録しましょう。
まずはこちらに登録
この２つは、「ブロガーさんなら誰でも登録しているレベル」の超有名サービスです。
「A8.net」はASPの中でも最大規模で上場会社が運営しており、案件数も飛び抜けて多いです。
「Amazonアソシエイツ」はアマゾンの商品を紹介して紹介料をもらえるというもので、使い勝手がバツグンに良いASPです。
両方とも収益化が比較的カンタンなので、入門として登録しておきましょう。
Googleアドセンス「スポンサードリンク」の文字を小さくする
スポンサードリンクの文字サイズを小さくすることができます。
普通に文字入力してしまうと大きくなりすぎてダサかったので、こちらのサイトを参考に小さくしてみました。
ヨメレバ・カエレバ【CSSのカスタマイズ】
Amazonや楽天の商品を紹介するときに便利な、「ヨメレバ・カエレバ」もカスタマイズできます。
商品リンクはデザインによってクリック率が変わるので、あなたのブログに最適なデザインを探してみるのはおすすめです。
はてなブログのデフォルトリンクのカスタム
はてなブログには、デフォルトでアフィリエイトリンクをはれるようになっています。
このリンクボタン周辺をおしゃれにカスタマイズすることができ、ヨメレバやカエレバとは違ったイイ感じのリンクが作れます。
次の記事を参考にしました。
あとがき
僕がこれまでやってきたカスタムを紹介しました。
本記事の内容を一通りこなせば、カスタマイズとしてはある程度形になると思います。
とはいえ、はてなブログのカスタマイズは手間がかかるので、少しお金を出してでもすぐにキレイなデザインにしたい方はWordPressに移行してしまう方法もあります。
面倒なのは最初の設定だけなので、興味がある方は試してみても良いと思います。
ぼくがおすすめしているエックスサーバーを使えば無料お試し期間もあるので、WordPressが合わなければはてなに戻って来ればOKです。