【保存版】はてなブログを簡単カスタマイズ！ CSS知識ゼロでもデザイン変更が自由自在に！

CSSの知識が一切ない人でも、自分のはてなブログを好きなデザインに変更するためのカスタマイズ方法、及びブログ作成の流れを記述します。自分が実際に行ってみた忘備録も兼ねて。

はてなブログの先輩方が本当にすごい。
僕の能力なんかでは自力ではつけることができないと思っていた機能やデザイン変更など、すべて思い通りにできました。それも割と簡単に。これをしたいと思い浮かべ、検索すれば割とノウハウでてきます。

問題は、どういう部分を改善すれば、イケてるブログっぽく！なるのか分からない。改善すべき項目・作業の洗い出しに僕は大変時間がかかってしまいました。自分の初期設定のブログと、色んなオシャレで分かりやすいブログはどこのデザインが違うのか….色々と見比べました。Webサイトに詳しくない方はサイトにどういった部分の概念があるかも分からないと思うので案外ここが大変です。

そこで当記事では、はてなブログ開設後、スマートなデザインに変更し、実際に運営できるようになるまでの一連のプロセスに特化して説明します。各項目における詳細作業に関しては、もっとも分かりやすく参考になるブログを紹介しています。

さらに記事内にコピペだけでそのまま使用できるコードを貼ってくださっているブログのみを紹介しているので、CSS知識など本当にゼロの人でも作れる一連の流れで紹介します。

顔も見たことないいろんな方々に感謝しました。
本当にありがとうございます。
僕の体験も今後新しくはてなブログをカスタマイズしようという方の役に立てれば嬉しい。

基本設定

まずはデザインのカスタマイズの前に、はてなブログのアカウント開設のことについて軽く述べます。Webに苦手意識がある人は案外こういう部分から引っ掛かるときもあると思います。

はてなブログProにするメリットとは？

まず、はてなブログといってもアカウントの種類があります。
通常のはてなブログ(無料)に対して、有料のはてなブログPro（月払い1,008円、1年契約で月703円、2年契約で月600円～）が存在します。

「いやいや、そんな気合入れてないし無料でやるわ！」って最初は思ってましたが、結論から言うと、ブログで多少の小銭稼ぎをしたいと思っている人はProに入っていて良いと思います。僕も１年契約でProに登録しています。
本当に自分の日記がてらにやっている人は不要だと思います。

Proならでの機能はたくさんあるのですが、僕が重要だと思ったメリットはこの3つ。

○広告非表示
　　１番重要なのはこれ。まず自分で広告を設置するとクリックされるたびに自分にお金が入ります、だからアクセス数を増やしたい。これがブログの大原則。でも無料版だとはてなブログの広告が入ってしまうのです。つまり自分の広告も設置可能ですが、本来自分一人でもらえていた広告代をはてなブログと折半することになります。

○独自ドメインの設定
　　ドメインってなに？っていう人も多いと思います。かなり簡単に言えばURLです。僕のURLはこれ (http://www.traveltechz.com)なので、僕のドメインはtraveltechz.comです。無料版だと絶対にURLにhatenablog.comとか入るのですが、独自ドメイン、つまり自分で好きなものを選べます。独自ドメインは自身で先にドメイン取得サイトで取得してください。大体年間1000円くらいかかります。好きなものといってもすでに他人に使用されているURLは使えません。僕も本当はtraveltach.comにしたかったのですが、取られていたのでtraveltach(z).comに妥協しました。全然良い決め方じゃないです、参考にしないでください。独自ドメインにする必要は特にないけど僕は気持ち的な問題でしたかった。

○ヘッターとフッターの非表示
　ブログの上部(ヘッター)と下部(フッター)にはてなブログTOPサイトへ飛ばすリンクなどごちゃごちゃしたものが表示されます。ユーザーが自分の記事を見ているとき気が散っちゃいます。なのでこれは非表示にします。これができるのもProだけ。

○スマホ画面をカスタマイズできる
　スマホのデザイン編集に関しては後述のスマホ段落で述べますが、これはでかい。スマホ専用のデザイン編集ができるのはProのみ。今やほとんどのジャンルでスマホから見る人が圧倒的多数なので、スマホデザインに凝れるということは重要です。SEOも多少強くなるとかならないとか…

他には写真アップロード容量増加(100倍になる笑)・キーワード自動リンクオフなどもあります。自動リンクとは自分のブログ内の特定の単語にかってにリンクがついてはてなブログの辞書みたいなとこに飛ばされる機能で、その機能をオフにできます。

はてなブログProの詳細メリットは下記の記事が分かりやすいです。ほとんどの機能不要ですが上記４つのために入る価値はあると思っています。どちらも書いている内容はほぼ同じです、とりあえずProにする価値はあると思うよって話です。

アカウント開設・基本情報設定

自分のはてなIDとPWを決めてアカウントを開設します。アカウント開設の手順はこのブログが本当に分かりやすい。これ以上分かりやすく手順を書くのは無理だと思う。

アカウントを取得して、自分の管理画面に入ります。そこで基本設定と詳細設定の画面がありますので、その2つの設定までを上の記事に沿って進められたら十分です。
ブログのタイトルやアイコンを入力していくだけなので操作は簡単です。ブログタイトルなどの内容は頑張ってきめてください。

デザインのテーマを取得

今の状態だと自身のブログ、びっくりするくらいダサいと思います。笑
他の人たちのブログと住んでいる世界が違う…と絶望に打ちひしがれていました。
ですが、まず一番デザインが大きく変わる部分がここです。

はてなブログにはデザインのテーマというものがあります。色んなすごい人たちが試行錯誤を重ねて作ってくださったコードをそのまま使用できます。テーマの中からどれか一つをインストールすれば、ブログの基本的なデザインが全て、そのテーマ内容に更新されます。

これだけでブログとして十分成り立ちますが、次からのカスタマイズで追加したい機能や、一部好みに変えたいデザイン編集などを行っていき、自分だけのブログが完成していきます。すでにブログっぽくはなっていると思います。

テーマはとってもたくさんありますが、人気のテーマはある程度決まっていますのでメジャーなテーマの特徴を軽く紹介しています。
メジャーなものの方がなにかあったときに調べても該当する記事や情報が多いので無難だと思います。

一般的に使用されるものは本当に大きく分けると２種類のみになります。
まず長い間公式ストア人気ランキング1位をおさえている「Innocent」です。圧倒的にシンプルで自由自在にカスタマイズしやすいということが人気の秘訣です。カスタマイズ性でいうと「Blank」というシンプルなテーマが人気だったのですが、実はこの改良版が「Innocent」です。作成者は同じです。「Blank」はそれでも現在4位です。今から使うなら「Innocent」の方が良いと思います。

もう一つが公開されて間もない「Naked」。カスタマイズしやすいシンプルさも合わせ持ち、ヘッター画像を変更するだけでブログのイメージが大きく変わりやすいデザインなので、少しの編集だけでも簡単に他の人と違う雰囲気のブログを作れます。
2016/5に初公開され2016/8段階ですでに人気テーマランキング5位ですが、おそらく順位あがっていくと思います。このブログもこのテーマ使用しています。めちゃ満足です。

この3種類でおそらく使用者の50％以上を占めているのではないでしょうか。
あとは「DUDE」もたまに見ます。大人っぽい洗練されたデザイン感があります。
公式ストアの人気ランキングです。この中から選んでください。

実際にデザインのカスタマイズを始める前に知っておくこと

ようやく来ました！(笑)ここからがカスタマイズのお話しです。
TOP画面、ヘッター部分、記事内、サイドバーの4つに分けて説明していきます。各部分にどういう機能を入れ、どういうデザインにしているのか、実際例を出しながら進めていきます。

全てに共通することですが、カスタマイズに必要なHTML・CSSコードを各参考ブログからコピーして貼り付ける先は次の部分となります。
HTMLは、ヘッターを変更するならヘッターに貼り付け、と見たままです。
記事内だけ記事上と記事下に分かれますので、どちらに入れるべきかは都度解説します。

CSSコードはどの部分の変更であっても一番したのCSS枠に貼り付けます。
HTMLはサイトのパーツを作るもの。CSSはそれらのパーツをおしゃれにデザインするもの。例えばHTML枠にSNSフォローボタン導入のHTMLコードを記述します。機能としてはここで導入完了していますが、このままだったら見た目超ださくて分かりにくいです。そこでCSSで色指定したり右寄せしたりしてSNSフォローボタンのデザインを彩るという感じです。

スマホもPCと異なる独自のデザインに変更するならここです。スマホはHTMLとCSSで画面が分かれておらず同じところに貼り付けていくのでシンプルです。PC同様にヘッターや記事下などの枠は分かれています。

全て基本的にコピペで済むのですが、そこから自分で色だけ好みのものに変えたいという場合は多いと思います。そのときはこのサイトの中から好みの色を選び6桁のコードを好みの色の6桁に変更してください。
http://www.colordic.org/
どこを変更すればよいかは基本的に書いてくれています。

サイドバー

実際にカスタマイズ始めていきます。
まずサイドバーの項目として僕が載せているものは、
プロフィール・任意の注目記事をブログカード形式複数個・カテゴリー・SNSフォローボタンタイトルのみのおすすめ記事複数個・最新記事・月別アーカイブです。

サイドバーのカスタマイズはもっともシンプルです。
上記の1つ1つをモジュールと呼び、
どのテーマでも最初から6つほどのモジュールが設置されています。

プロフィール・注目記事・カテゴリー・最新記事・月別アーカイブ・参加グループがデフォルトで表示されていました。

この中で注目記事と参加グループは不要なので[削除]をします。これで削除完了。
注目記事は必要なのですが記事の表示方法を変えたかったのでデフォルトで表示されていたものは消しました。
フォローボタンなど追加で必要なものはそれぞれモジュールを追加で足していきます。順番はカーソルで項目をつかんで上下に移動させ、とても簡単に変更できます。
では一つずつ追加方法をみていきましょう。

サイドバーにプロフィールを設置・編集する方法

これは元からある項目なので編集をクリックして、プロフィール文を入力し、はてなIDを表示するかどうかなど選択してください。

サイドバーに任意の記事をブログカード形式で入れる方法

ブログカードって記事内で、自分や他社のはてなブログを紹介したときに表示されるあの形式です。こんなん。

これをそのままおすすめ記事としてサイドバーに設置する方法です。
やり方はモジュールを追加してHTMLを選び、ここにコードを貼り付けます。なんか難しそうで抵抗がありますが、実は簡単。ブログを書く画面で、設定したい自分の記事へのリンクを貼ります。そしてHTMLに画面を切り替えるとHTMLコードがあるのでそのままコピペするだけ。

このやり方だと自分の好きな記事をサイドバーにおいておけます。またこの項目のタイトルも任意で選べるので「注目記事」「おすすめ記事」「これは見ないと帰れません」なんでも好きなタイトルにしてください。僕は攻めずに注「目記事」で。
詳しくはこの記事が分かりやすい。

サイドバーで任意の記事をタイトル文章のみ紹介する方法

見る限りこのデザインで入れている人あんまりいないです。僕はとても気にいっています。感謝。NewやPickUpという可愛いアイコンも使用して良いとのことです。こういう画像の表示方法ですが、まずは記事を書く画面でこれらのアイコンを投稿します。HTMLコードでみて見ると4行くらいのコードになっていて[img src=]以降がこの写真のナンバーになります。このナンバーをコピペして使えばサイドバーにもこの写真を引き出すことができます。
これまたモジュール追加でHTMLを選び、次のブログ内のコードを貼り付けてください。入れたい記事のURLをここで変えるだけで紹介したい記事を簡単に変えられるし、何個でも紹介できます。

サイドバーにSNSのフォローボタンを設置する方法

またまたモジュール追加でHTML。そしてコピペするHTMLコードはこの記事に載せてくださっています。自分のSNSのアカウント名などに内容を変更するだけ。
しかもデザインもいくつか用意されているので自分の好きなデザインがあれば、そのCSSコードをコピーして、CSS枠に貼り付けるだけ。じゃあもうフォローボタン完成。簡単すぎて自分で一発で出来たとき神業かと思いましたが、そこは冷静になってください。僕は2.3回コピぺを繰り返しただけ。神はこのブログの作者「ゆきひー」さん。この方の記事は他の部分でも紹介させていただいています、調べると何回もこの方の記事に遭遇した、多分ほんまに神。

サイドバーにTwitterウィジェット（タイムライン）を設置する方法

僕はしょーもなさすぎるツイートしかしないのでこれは設置していないのですが、わりと需要高いので紹介しておきます。自分のツイッターの最新のつぶやきがブログ内で表示されるやつです。ブログの読者にツイッターをフォローしてほしいなら大きな役目を果たすと思います。

操作は超簡単。自分のツイッターからコードを発行して、またまたHTMLにそのままコピペするだけ。
詳しくはこちらの記事が分かりやすいです。

記事内

　大体の人が記事ページから入ってきて、一番滞在時間が長いのももちろん記事ページなので記事デザインは一番重要です。とは言っても記事ページにも先ほど設定したサイドバーも表示されるし、上部には後ほど設定するヘッターも表示されるので、総合的に重要ですが、記事ページの編集はカスタマイズのメインです。

記事末尾におくもの。記事を読み終わって、このサイトから出ていくか、または別の面白そうな記事を見てみるか、記事末尾のコンテンツが大きく行動を左右します。
まず僕が記事末尾に設置しているもの
シェアボタン・合わせて読みたい記事・任意のおすすめ記事のブログカード形式。
わりと一般的です。

記事末尾にシェアボタンを設置する方法

シェア数も表示できる仕様です。これは難しいのではと思っていたのですが、またまた神記事がありました。超分かりやすい。前半部分は前回分の不具合みたいな話書いてありますが、新しくやる人は無視して大丈夫です。

注意点としてはシェア数などを測る仕組みを導入するために基本情報部分に入れなければいけないコードもあります。一行を指定部分にコピペするだけです。記事内に詳しく書いています。

カウント数を取得するためにjQueryを記事末尾のHTML枠に入れるのですが、jQueryの意味とかは考えないでください。普通にコピペで大丈夫です。記事上部に貼ってもよいのですが、末尾に貼った方がSEO上有利と言われています。見た目上は一切変わりませんが、Googleが記事を読み込みにくるときに記事に上部に長いコードがあったら少し嫌がられる可能性ありという噂。影響力は誰もが分からないが基本的に下で大丈夫なものは下に入れておきましょう。

jQueryを貼り付けたら次にHTMLコードをその下に貼り付けます。このHTMLコードは記事上にも貼り付けてみましょう。そうすると記事上・記事下両方にシェアボタンが表示されます。不要な方はコードを削除してください。僕は上下両方入れています。このシェアボタンはユーザーも見慣れ過ぎているので特に目障りにもなりません。
サイドバーと同じく最後に記事内のCSSコードをCSS枠に貼り付けてください。完成です。

記事末尾に任意のおすすめ記事を設置する方法

これは超シンプル。サイドバーにブログカード形式で任意のおすすめ記事を入れる方法を前述しました。まったく同じやり方、記事作成画面で自分の記事のリンクを生成し、そのコードをコピーして、記事下のHTML枠に貼り付けるだけです。
10個設置したかったら10個連続でコピペしたら良いし2個でよいなら2個分コピペしたらよい。スマホをそれより下に何もなかったらどうせ終わっちゃうのでここで個数増やしても特にマイナスはないと思います。

合わせて読みたい記事(関連記事)を設置する２つの方法

これは今までよりは少しだけ工程複雑です。メジャーな方法は2つあります。

「合わせて読みたいG」一度聞くと耳に残りますね。こちらの方が利用している人多そうです。このブログの方が考案された方法。

僕は合わせて読みたい記事(関連記事)は2行にしてスリムに出したかったので、こちらのMilliardという外部サービスを利用する方法をとっています。完全無料です、しかもはてなブログ用の工程が用意されており非常に簡単。リスト形式orパネル形式どちらが良いかなどポチポチ選ぶだけ。

Milliard関連ページプラグインについて | シスウ株式会社

ここで生成されたコードを記事下のHTML枠の記事下に貼り付けます。
デフォルトは一行なのですが、こちらのCSSを参考にさせていただき二行にしました。Milliardの詳細の使用方法もこの記事に書いています。神です。

表示される記事は同カテゴリのものから選んでいき、関連性が高いとシステムで判断された記事になります。
フォローボタン・合わせて読みたい・任意の注目記事の順番ですが、単純にコードの置く順番で表示されます。僕はこの順番で表示しています。

見出しのデザイン変更

いや～小見出しは記事内でしょっちゅう出てくるので非常に重要ですね。デザインイメージ大きく変え得ると思います。

やり方はとっても簡単。小見出しはデザインを変更するだけなので触るのはCSSのみです。自分が作りたい小見出しを構成するCSSコードをCSS枠に貼り付けるだけです。やり方の詳細はこの記事で。
※CSSは貼りつける順番考慮しなくて良いです。

はてなブログは基本的には大見出しがH3、中見出しがH4、小見出しがH5となっておりますので各CSSコードのH○を変更して利用していってください。
デザインとCSSを紹介してくださっている良記事、この中から好みのものがあれば使用してください。個人的に一番気に入るものが多いのは4つ目のブログで紹介されているもの。

僕の場合は

大見出しはこれです

中見出しはこれだよ

小見出しはあんまり使う想定していないです

目次の置き方

目次と次の枠線はブログデザインのカスタマイズとは少し異なります。
いろんな記事見てると、これどうやってつけてるんだろう～と疑問が生じたので合わせて紹介。

目次の作り方はたくさんありますが、本当にシンプルな方法があります。
目次を導入したい記事のHTML編集画面の冒頭に
[:contents]
を入れてください。

記事内の大見出し・中見出し・小見出しで自動的に目次が作られます。しかも大見出しと中見出しで違いが分かるように、中見出しの方にはインデントまで入っているので分かりやい。

目次デフォルトでも分かりやすいですが、さらに独自におしゃれにカスタマイズしたい方はこちらの記事が分かりやすいです。

自動で目次がつくカスタマイズもありますが、カスタマイズではなく各記事にこの方法で入れていく方が良いと僕は思っています。

文字を好きなデザインの枠線などで囲む方法。

こんな感じで任意の文字を四角形点線で囲む。四角形でなくてもあらゆるデザインができます。

これもカスタマイズではなく、各記事内で直接HTMLを貼り付けていきます。
コードはこちらを参照ください。

ヘッター

ここまででだいぶブログっぽくなっているはずです。あとは一番大きなイメージを与えるヘッターですね。

ヘッター画像を好きな画像に変更する方法

これは超シンプル。コードも何も不要。普通に画像をアップロードするだけ。
ブログ説明の文章はそのまま残して写真だけ加えるか、文章なども画像に組みこんでしまい、ブログ説明の文章も消すかもアップロード画面で選べます。
詳しい手順はこちらのブログが分かりやすい。

グローバルナビを設置する方法。

僕はグローバルナビ入れていないです。ちゃんと記事数が増えたら入れようかなと思っています。
他のものよりはやや工程複雑ですが、頑張ってみてください。

TOPページデザイン

ようやくPC版デザインの最後です、(ここで9000文字超。。)

トップスクロールを設置する方法

これはTOPページだけに該当することではなく全ページに表示されるものになります。TOPや記事ページで下にスクロールすると、右下に出てくるボタンでそれを押すとページトップまで自動でも戻ります。TOPに戻りたくなった時にスクロールする手間が省けるのです。細かい部分だがUIには大きく関わるし、あってマイナスもないと思うので入れている人多いです。

スマホ基本構造

スマホのデザインはまず大きく2つに分かれます。

- レスポンシブ対応

- スマホ独自デザイン

簡単に言うとレスポンシブ対応とはパソコン版のデザインをスマホの横幅に合わせて表示することです。特に問題はないです。人気のテーマは大体レスポンシブ対応機能も含んでいます。
スマホのデザイン編集のコード入力部分については、PC用の[カスタマイズの前に知っておくこと]でも述べましたが、HTMLもCSSも全て同じところにコードを入れていきます。PC同様にヘッターや記事下など枠が分かれています。

コードを入れる枠の上に次の2つの選択肢があります。
Ⅰ.PCと同じHTMLを表示する
Ⅱ.スマートフォン用にHTMLを表示する
- レスポンシブ対応を選ぶ人はⅠ.にチェックを入れてください。
カスタマイズはここで終了です。この先のスマホデザインの記述は関係ありません。

スマホはパソコンとは独立させて独自のデザイン設定にしたいという人はⅡ.にチェックをつけてください。
PC版同様の方法でSP版のデザインもカスタマイズしていきます。所要間としてはPC版の半分もかからないと思います。同じコード使うものも多いので。

まずスマホにどんな機能を入れているか。

[スクショ]
記事末尾は[シェアボタン・フォローボタン・カテゴリ・合わせて読みたい・任意のおすすめ記事]を追加しました。
ヘッターにもカテゴリ一覧。
あとはスマホ専用の小見出しに変えたり。
PC版の方で使用したコードをそのままスマホ枠に貼り付けるだけのも多いので内容簡単です。

基本的な枠組みをつくる共通コード

スマホ版は素っ気ないままの状態ですが、まずスマホデザインを構成するコードを入れましょう。これを入れると一気におしゃれになり見た目としてはこれだけで十分です。
長いですがこの記事内のコードをそのまま「ヘッターのタイトル下」に貼りつけてみましょう。感謝です。だいぶイメージ変わります。TOPページの日付のデザインなどの変更方法も載っていますので色変更行いたかったら参考にしてみましょう。

はてな特有の不要な表示を削除してスマートなデザインに

PC版ではヘッターフッターの不要なものを基本情報設定で消しましたがスマホではまだ残っています。この記事内で紹介されているコードを上述コードの下に入れるとはてなブログならではの不要なものが全て消えます。消えて困るものはないので大丈夫です。スッキリします。

ヘッター画像を更新する

ここはシンプル。PC同様に画像をアップロードします。
スマホでもヘッタ画像はブログの顔となるので重要です。

カテゴリ一覧を表示

僕はスマホ版もPC版同様にグローバルナビはいれておらずに、スマホ版にはカテゴリ一覧を設置しています。
自分のブログに登録しているカテゴリが自動でリスト化されるので非常に便利です。
このブログを参考にさせていただいております。
紹介されているコードを記事上と記事下に入れると両方に表示されます。一方の位置で良い場合はどちらかだけに入れてください。

スマホ記事内

小見出し

PCでCSS枠に貼りつけたコードとまったく同じです。同じデザインで良いならそのまま記事下に貼り付ければ良いです。
前述で紹介した記事にある小見出しデザインでスマホ用に良いものがあれば、そのコードをスマホ枠にコピペしてください。PC版と同様に大見出しはH3、中見出しはH4など、そこだけしっかり対応させててください。

フッターに任意のオススメ記事を入れる

PC版のサイドバーにブログカード形式で任意の記事を持ってきましたね。方法はまったく同じです。記事作成画面でリンクを生成してスマホの記事下枠に貼り付けます。シェアボタンより下に置きたければ置く順番を変えれば良いです。

シェアボタン

これもまったくPC版と同様です。気をつけないといけないのが、シェア数をカウントするためのjOueryコードも再度、スマホの記事下に貼り付けてください。同様に記事上・記事下にHTMLを貼り付けて、記事下のHTMLの下にそのままCSSコードも貼り付けてください。念のため上述したブログもう一度紹介しておきます。

フォローボタン

これもびっくりするほど同じでPCのサイドバーに入れたHTMLコードをスマホの記事下枠に貼り付け。デザイン同じで良いならCSSもそのままコピペ。
スマホ用に変えたかったら前述のブログ内にあるお気に入りのデザインのCSSコードをスマホの記事下枠にコピペ。

合わせて読みたい

これはPC版に貼り付けたコードをそのままとはいきません。HTMLコード(Milliardで生成したコード)はPC版で使用したコードをそのままスマホの記事下枠に貼り付けでOKです。デザインに関してPC版は2行対応しておりますのでスマホ版は異なるCSSとなります。
そこでスマホ版デザインに一番しっくりくるカスタマイズはこの記事で紹介してくだっているCSSだと思います。

記事下のMilliard関連記事プラグインを、見栄えよくカスタマイズ

これらの工程を済ませれば、一般的な人に見られても、「ユーザビリティも問題なく、お～ちゃんと作っているブログだね～」にはなるでしょう。笑
詳しい人が見れば粗もたくさんあると思いますが…

ここからのブログ運営とWeb戦略が重要

これでブログデザインのカスタマイズは完了したので、記事をゴリゴリ書いて実際に運用に入っていけます。

分析に必要なGoogleアナリティクスについての導入・利用方法、
　アドセンス申請・導入方法及び運営について、
　アフィリエイト種類・登録方法及び運営についても
　どういう記事を書いていけば良いのか

についても記事にしていきたいと思っています。

何気に上級Web解析士の資格も保持しているし本職的にも、むしろここからが専門。