- ブログデザインが気になって記事を書きだせない
- 最低限のデザインをサクッと作りたい
はてなブログテーマ「Minimalism」の設定やカスタマイズに困っている方に向けて書きました。
ブログのカスタマイズ、時間がかかりますよね。ちょっとだけ修正したいだけなのに、気づけば日が暮れていた…という経験をされた方も多いのではないでしょうか？
ブログの本質は「記事を書くこと」です。
記事あっての、カスタマイズですので、本記事では「最低限の初期設定・デザインをサクッと仕上げ、早く記事を書く環境を整えよう！」というテーマで書いていきます。
記事が長くなってしまったので、目次から気になる場所をクリックしていただくと時間の節約になると思います。
※「どうしてもカスタマイズがうまくいかない」という場合には、はてなブログ自体のカスタマイズの限界という可能性もあります。
その場合は、WordPressへ移行することでサクッと解決できたりします。
WordPressへの移行方法は「はてなブログからWordPressへの移行」にまとめました。
目次
まずは「基本設定」から始めよう
テーマの設定の前に、はてなブログの初期設定を済ませましょう。
後々に修正しようとすると手間なので早めに片付けてしまうのがオススメです！
設定する場所はこちら。
まず「ダッシュボード」を開きましょう。
左側メニューの「設定」をクリックし、「基本設定」タブを選択しましょう。
ブログ名
あなたのブログの看板、「ブログ名」を決めましょう。
まだ決まっていない方は、とりあえずのものでOKです。あとから修正できますので、深く考えなくて大丈夫ですよ。
ブログアイコン（ファビコン）の設定
続いて、ファビコンを設定しましょう。
「ファビコン」とは、お気に入りに設定した時に表示される画像のことです。
目を引くものにすると、読者がブックマークの中から探しやすくなって親切。
どのような画像を使ったら良いかは、はてなブログの公式ヘルプを引用します。
「JPEG」または「PNG」で、大きさは192×192ピクセルより大きな正方形を使う
ご自分で作りたい方は、無料の「Canva」という画像加工サービスを使うのが鉄板。
素材は「ICOOOM MONO」でダウンロードしたものをCanvaで読み込めば、それなりにキレイなものが作れます。
自分で作るのが面倒な方や、時間をかけたくない方は「ココナラ」というサービスを使えばオリジナルのファビコンを低価格で作ってもらえます。
ブログの説明
ブログでどんな情報を発信するかを、短いフレーズで書きます。
意外と読者の方の目に留まる場所だったりしますので、あなたのブログをひとことで表すインパクトのあるフレーズを考えてみましょう。
aboutページ編集
「aboutページ編集」は、後回しで大丈夫です。
主にプロフィール周りの設定になり、ブログと直接的に関わるものが少ないためです。
参考までに「aboutページ編集」で設定できる項目を列挙します。
- title要素 (ページのタイトル)
- 自由記述欄
- プロフィール
- リンク
- ブログ投稿数
- ブログ日数
- 継続期間
- 読者
「一通り設定が終わって余裕ができたら設定してみる」くらいで問題ありません。
編集モード
記事の書き方として３つ用意されていますが、「見たままモード」がオススメです。
実際の仕上がりイメージを見ながら執筆できるので、読者の視点に立ちながら書くことができます。
迷ったら「見たままモード」で良いでしょう。
コメント設定
読者の方からのコメントについての設定です。
自分のブログにコメントを書ける人の範囲を決められます。
- ゲスト・・・誰でもコメント可能
- ユーザー・・・はてなユーザーだけ
- なし・・・コメントを一切受けつけない
僕は「ユーザー」を選びました。
理由は、身元のわからない人からのスパム的なコメントを避けたかったのと、「はてなユーザーなら、変な人は少ないだろう」と思ったから。
実際に何件かコメントをいただきましたが、はてなユーザーからのコメントはどれも温かいものばかりでした。ブログを続ける上でも励みになるので、特別な理由がなければONにしておくとブログが楽しくなります。
「変なコメントがたくさん届く」という事態になれば、「なし」に切り替えるので良いと思いますよ。
チェックを入れると、コメントが書き込まれても承認するまではブログに表示されません。
基本、チェックを入れておくと良いと思います。
変なコメントでいっぱいになるとコメントが荒れてきますし、コメント欄は運営者が主導権を握っておくのが一番です。
コメント表示順序は「新しい順」が一般的かと思います。
お好みで設定してみてください。
コメントがされたときに、メールでお知らせしてくれる機能です。
僕はチェックを入れています。
コメントがつくと「おぉ！コメントまでくれたのか！」とテンションが上がっています。
コメントを受け付けたくないユーザーを指定して、ブロックできます。
スパムがあれば、これでブロックできます。僕の場合は、一度も使わなかったです。
「詳細設定」でワンランク上のブログに
「詳細設定」で設定できるのは、以下の内容です。（[Pro]とあるものは、有料の「はてなブログPro」のみ設定可能なものです）
- 独自ドメイン [Pro]
- アイキャッチ画像
- HTTPS配信
- トップページの表示形式（PC版） [Pro]
設定する場所は、以下の通り。
「ダッシュボード」の左メニューの「設定」をクリックし、詳細設定を選択しましょう。
独自ドメイン [Pro]
ドメインとはブログのアドレスのことで、「https://www.karochoa.com」のようなものです。
無料版のはてなブログでは「~hatenablog.com」などのアドレスが割り当てられますが、独自ドメインを使えば自分だけのアドレスを設定できます。
独自ドメインは年額かかりますが、次のようなメリットがあります。
- はてなブログ以外に引っ越しても、アドレスが変わらない
- ドメインがあなたの資産になる
- 読者の方に覚えてもらいやすい
独自ドメインで良質な記事を書き続けると、検索エンジンからの評価が上がります。
検索エンジンからの評価が高まると検索上位に表示されやすくなり、ブログの集客力が上がることになるわけです。もしあなたが、ブログでサービスを販売したりアフィリエイトをしている場合には、集客力は稼ぐチカラに直結します。
借り物のドメインだと、せっかく貯めた信用もあなた自身のものになりません。つまりブログの資産化には独自ドメインが必須ということ。
ドメインの取得には「お名前ドットコム」などで目当てのドメインが取得できるかを検索し、誰も使っていなければ使用料を払って取得が完了するという流れです。
無事にドメインが取れたら、この「独自ドメイン」欄に取得したドメインを登録しましょう。
アイキャッチ画像
アイキャッチ画像とは、記事を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)
「先頭に戻るボタン」を設置する方法
ページの先頭に戻るボタンを設置します。
スマホで記事を読んでいて「ページの先頭に戻りたい」と思ったときにあると親切かも。
» 参考：ページトップへ戻るスムーズスクロール（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とは、「広告を出したい企業」と「広告を掲載して報酬をもらいたいブロガー」をつなぐサービス会社のことです。
広告収入をもらうまでの流れは、こちら。
- ASPに登録する
- 紹介したい商品のリンクをコピーし、記事にはりつける
- リンクがクリックされ、売れると報酬が入る
基本的には上記の流れになっており、ファーストステップとしてASPへの登録が必須になっています。
たくさんのASPがあって迷ってしまう方は、まずこちらの２社に登録しましょう。
この２つは、「ブロガーさんなら誰でも登録しているレベル」の超有名サービスです。
「A8.net」はASPの中でも最大規模で上場会社が運営しており、案件数も飛び抜けて多いです。
「Amazonアソシエイツ」はアマゾンの商品を紹介して紹介料をもらえるというもので、使い勝手がバツグンに良いASPです。
両方とも収益化が比較的カンタンなので、入門として登録しておきましょう。
Googleアドセンス「スポンサードリンク」の文字を小さくする
スポンサードリンクの文字サイズを小さくすることができます。
普通に文字入力してしまうと大きくなりすぎてダサかったので、こちらのサイトを参考に小さくしてみました。
参考 はてなブログのアドセンスを「ダブルレクタングル」で表示する方法とおすすめの広告配置まひまりヨメレバ・カエレバ【CSSのカスタマイズ】
Amazonや楽天の商品を紹介するときに便利な、「ヨメレバ・カエレバ」もカスタマイズできます。
商品リンクはデザインによってクリック率が変わるので、あなたのブログに最適なデザインを探してみるのはおすすめです。
参考 Yukihy Lifeヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！さらに、上のコードでボタンのズレが出てしまった場合には、次の記事で修正ができました。
参考 カエレバのカスタマイズ、リンクのボタンがずれた時の解決法まで解説しましたダメ人間ブログはてなブログのデフォルトリンクのカスタム
はてなブログには、デフォルトでアフィリエイトリンクをはれるようになっています。
このリンクボタン周辺をおしゃれにカスタマイズすることができ、ヨメレバやカエレバとは違ったイイ感じのリンクが作れます。
次の記事を参考にしました。
参考 はてなブログの Amazon と楽天の商品リンクにアイコンを付けたCorredorあとがき
僕がこれまでやってきたカスタムを紹介しました。
カスタマイズ作業はついつい時間を取られてしまうところなので、ある程度のところで止める勇気も必要だったりします。
とりあえずこの記事を参考にザッと変更して、さらに気になるところを修正していく…とすれば、記事執筆に集中できるはずです。
参考になれば幸いです！
