【ほぼ無料】はてなブログProで個人サイトっぽい見た目のブログを作る

はてなブログで個人サイトっぽいものを作りました。有料部分はしょうもない雑談なので読まなくても大丈夫です。投げ銭したい人だけ買ってください。

必要なもの

1. はてなブログProのアカウント

2. サイト内のコンテンツ

3. 時間

あると便利なもの

1. ブログを運営した経験

2. HTMLとCSSの知識

はてなブログProとは何か

はてなブログProってハードル高い

はてなブロックProはブログサービス、はてなブログの有料サービスである。
自由度が高く個人的にはおすすめ、なんだけど、ひとつ問題がある。
はてなブログProは一括払いするか月々払いするかで値段が全く違い、最安値の月600円にするには2年分を一括払いにしなければならない。
この時点でブログ初心者には非常にハードルが高いと思う。
なのでこの記事は「もともとはてなブログProにお金を払っている人」でないと有用に扱えないかもしれない。

はてなブログのおすすめポイント

• SNSのURLを貼るだけで埋め込みができる。

• Amazonアソシエイトや楽天アフィリエイトとの連携が楽。

• 感覚的に編集する「見たまま」とHTMLを細かく設定する「HTML」を切り替えられる。

• CSSがわからなくてもある程度のカスタムが可能。

• CSSが分かる人は細かいところまでカスタムできる。

• ユーザーが多いのでわからないことがあっても何かしら記録に残っている。

• 日本語サービスなのでハウツー記事のほとんどが日本語。

• 文字が読みやすいブログテーマが多く、長文を書きたい人向け。

• 10年以上の歴史のあるサービスなので突然サービス終了することはなさそう。（多分）

はてなブログのデメリット

• 検索除けはできるが基本隠れるのには向かない。（特定のグループだけ見せることは可能）

• アダルト禁止（特に出会い系を思わせる文面はダメっぽい）

• Androidアプリがめちゃくちゃ使いにくい。

• 複数ブログが作れるがIDは変えられないので名義わけができない。

はてなブログはちゃんと商売っ気があるのがいいよね

noteはあまりにも商売っ気がなさすぎるので、無料でもそれほど困らない。困らないが、商売っ気がないのにも問題がある。それはサービス終了の不安である。
その点はてなブログProは無料版にはないサービスが定期的に追加されるし、大量に記事を書いているブロガーはおおむねProにしている感じはする。
もくりのように「無料ユーザーでも使いやすいサービス」がサービス終了したのを見ると、やはりほどほどに商売っ気が必要だなと感じる。
はてなという会社自体はインターネット黎明期から存在するしなあ。

やり方

いちいちやり方をここに書いていくのが大変なので、はてなブログのヘルプのリンクを貼るね！

はてなブログを新規作成する

新規作成しよう。ブログのURLはあとから変えられないので、適当に決めるのはやめよう（決めて後悔したことのある人の感想）
まあ同じ見た目のブログをもう一つ作ればいいのだが、面倒だから。

はてなブログテーマ「soboku」をインストールする

はてなブログのテーマは個々のテーマのページに飛んで、そこにあるボタンから適応させるブログを選ぶシステム。
今回はsobokuを使いました。
シンプル系のデザインならなんとかなりそうである。

レスポンシブデザインの設定

スマートフォンのレスポンシブデザインをオンにしておかないと、スマートフォン版のデザインが固定のものになってしまうので、ここで変えておこう。

広告の削除

広告を非表示にします。これははてなブログPro機能。
私ははてなブログProしか使わないから気にならないけど、無料版だとかなり広告が多いらしい。

トップページを作る

「記事を書く」で普通に記事編集画面を開いてトップページに表示する記事を書く。
私はトップページに「全て」を書きたいので何でも書くが、情報量少なくしたい人はすればよい。
もともとHTMLでサイトを作っていた場合、HTML編集欄にHTMLを流し込むんで少しいじるだけでなんとかなったりする。
「はてな記法」というMarkdownの変種もあるのだが、Markdownを知らないと編集しづらいのでここでは紹介しない。
ただし画像はそのまま貼れないのでアップロードする必要がある
はてなブログに画像をアップロードするときは「はてなフォトライフ」というサービスに一旦アップロードされてそこからブログに画像を引っ張ってくるようだ。

一見手間だが、一度アップロードした画像は上げなおさなくても何度でも引っ張ってこれるというメリットもある。
はてなフォトライフの方に一気に画像をアップロードして、ブログに貼り付けるということもできる。
ただしはてなフォトライフは古いサービスでありレスポンシブにすら対応してない。これどうなるんだろうな。
一気にブログっぽくなるけど今回は目次機能を使ってみました。

さっき書いた記事をトップページに固定する

さっき書いた記事をトップページに固定しよう。
このとき１ページ当たりの記事の表示数を「１」にしておくと下に記事が表示されなくなり、より個人サイトの外見に寄る。
ただし、これはページ推移をしても適応されるため、過去記事を見ようとするとまとめてではなく１件しか表示されなくなる。
活動まとめページとしてはいいけどブログとして運用するときは変かもしれない。

固定ページを作る

これははてなブログPro用機能。無料でも個々の記事をリンクさせれば似たような構造になるが、ブログ記事なのでURL末尾がうにゃうにゃした感じになる。
固定記事として作っておくとURLの末尾を「about」や「profile」にしておける。
あとは個々の記事の設定にシェアボタンや広告を入れていても固定ページだけ表示されないようにするなど、デザイン的な例外も作れる。
編集画面自体は普通の記事と変わりなしなので好きにいじろう。
「普通の記事をトップに固定する」と「固定ページ」が別の機能なのがちょっとややこしい。

サイドバーのモジュールをリンク以外消す

サイドバーのモジュールをリンク以外削除する。
検索機能は、たくさん投稿するならあったほうが楽なんだけど、それは運用に応じて復活させてください。

リンクの編集

サイドバーにリンクを設定する。
リンクのタイトルを「CONTENTS」と個人サイトっぽくしておいた

その他の設定

スパムが多いので、コメントを募りたい理由がなければコメントはオフにしておくのがおすすめ。
はてなブックマークのコメントもメンタルが弱い人は前もって非表示にしておくとよい（ヤバい人が湧くことがあるため）。というかはてなブックマークは創作の情報発信にはあんまりプラスにならないし。
検索除け設定したところでTwitterみたいなオープンSNSにURL貼るとあまり意味がないっぽいが、これははてなブログに限らないのでしょうがない。本当に隠れたい人はオープンなSNSをやるんじゃない。
たまに新着記事見てるとめっちゃ二次創作な記事が流れてくる。見えてるで！（寛容なジャンルならいいと思うけど）

できた！完！
私もわかんねえから詳しい人もっとちゃんとした記事書いて！！

頒布物はこちら↓