はてなブログ開始からカスタマイズまでの流れを公開してみる【ブログ開設1日目】

はてなブログ開始からカスタマイズの流れ

どうも、コトノハです。ブログを始めようと思い、名前を知っていた【はてなブログ】をはじめました。

しかしここから先がまさに果てしなき道でした。いままで見てきたおしゃれなサイトは一朝一夕では無理だったのです。

そんなわけで、はじめのブログをどのような流れで、それっぽく形にしていったのか、備忘録がわりに書いておきたいと思います。

はてなブログを始めようかと考えている人に、初めはこんなことをやると参考になればさいわいです。

注意
現在このブログははてなブログから移転し、WordPressで運営しています。詳しくは下の記事をご覧ください。
はてなブログからWordPress「SANGO」に引っ越しました
はてなブログからWordPress「SANGO」に引っ越した理由と2つの感想

1. はてなブログを開こう!

とりあえずはじめたらなんとかなるだろうと、「はてなブログ 開設」と検索しました。

ちなみにここに至るまでもどのブログサービスがいいのか?(はてなブログ、アメーバブログ、ライブドアブログなど)いろいろと検討しています。

その結果気軽に交流できること、ほかのサービスも充実していること(はてなアンテナ、はてなブックマークなど)からめでたく【はてなブログ】で開設することになりました。

実際にはてなブログを始めてみて、本当に気軽に交流ができる環境が整っていることを実感しました。はてなブログを始めたら気軽にいろんなブログを読者登録することができ、はてなブックマークやtwitterなどでのシェアを通して交流することができます。

まずはアカウント登録ページへ進みます。

ブログを作成 – はてなブログ

ここで一つ注意です。はてなIDは登録後に変更はできません。

考えすぎて後々変更のために退会するようなことはないように気をつけましょう笑

私は単純にハンドルネームにしました。

2. 記事を書こう!

登録が終了すると、すかさず記事を書くよう勧めてきます。

口車にのって自己紹介を書いてみました。それが本ブログ最初の投稿であるこちらです。

空国コトノハって?【自己紹介とこのブログについて】

3. 次、なにしたらいいのかわかんない・・・

さて初めてブログを更新し、達成感もひとしおですが次なる問題が降りかかります。

「次、なにしたらいいのかわかんない・・・」

こんなときはGoogle先生の出番だと素直に「はてなブログ 初心者」とググっていきます。そして出てきたありがたいサイトがこちらでした。

参考

はてなブログ初心者が参考にすべき7つのサイト僕は猫だった

こちらのブログに載っているサイトを読めば、基本的なことはわかりました。

4. タイトルと基本的な操作を覚えよう!

上のサイトから下のサイトにとび、タイトル(QUEST MILE)を設定し、基本的な操作を覚えます。一端のブロガーっぽい雰囲気を味わいます笑

参考

はてなブログを始めるときに、まずやるべき9つのこと(はてなブログの使い方・初期設定)ニッチブログ

5. おしゃれなデザインにしなければならない(義務感)!

タイトルも決め、本当に最低限、ブログとしてやっていけるようになってきたところで「このブログをおしゃれにしていかなければならない!」という謎の義務感がむくむくとわいてきます。

しかし私は文系大学でHTMLだか、CSSだか意味不明の状態です。理解するまでどれくらいの月日が流れるのか…。

そうだ、きっとおしゃれな人がテンプレートを公開しているはずだと迷わずパクっていくことを決意します。

いろいろ探した結果こちらのサイトから使用させていただきました。

参考

はてなブログの超便利なデザインテーマ「Brooklyn」を作りましたNO TITLE

6. カスタマイズ、奥深すぎる…!

上のサイトに従ってどんどん本ブログをカスタマイズしていきます。

その過程で分るブログの奥深さ…。普段からなにげなく見ていたおしゃれなブログがどれほどの手間でつくられているのか恐ろしくなってきました。

ブログでよくみるtwitterのシェアボタンや、タイトルのフォントをカスタマイズして、悦に浸ります。

読みやすく、統一感あるスマホデザインのためのカスタマイズ!

はてなブログは初めの設定では、書いているときに改行するとなんだかふつうより広く空いてしまいます。上の記事を読めば修正する方法がわかります。

載っているコードをコピペしているだけですが、そんなこと関係ありません。自分的にはこれでも十分たいしたことやっている気分です笑

しかしその過程で、あまりものカスタマイズの種類に絶望します。もちろんやらないといけないというわけではないですが、紹介されてると一応やってみたくなる習性なのです。

参考

必見!はてなブログのカスタマイズを一気に紹介するNO TITLE

7. 解析…ツール?

もう十分だろと一息つきたいところですが、

はてなブログを始めるときに、まずやるべき9つのこと(はてなブログの使い方・初期設定) – ニッチブログ

ここのサイトで「解析ツール」という謎言語を発見します。

調べてみるにGoogle Analytics、Google Search Consoleなどがあり、アクセス解析やSEO対策(検索されやすくする?)のためにはじめに設定したほうがよいとのことです。

ここまできたら今やるのも後でやるのもおなじだと覚悟をきめて設定していきます。

実践修行!初心者の為のGoogle(ユニバーサル) Analyticsの使い方講座 はてなブログにGoogle Search Console(ウェブマスターツール)を設定する方法 – MUTANT

なお順番はGoogle Analyticsからのようです。

そしてこれが完了したら、2つを連携していきます。(今できることはもういまやってしまおうという精神)また他にもできそうなことはやってしまいます。

Search Console(ウェブマスターツール)とGoogle Analyticsを連携するメリットと具体的な手順の図解入り解説 超簡単に自分のアクセスを除外する方法 | 初心者の為のGoogle Analyticsの使い方講座

8. あれ、もうアクセスきてる…?

せっかく設定したのだから、使ってみなきゃ損だとGoogle Analyticsからアクセス解析をしてみました。当然はじめたばかりで、0だとばかり思っていたのですが、そこに書かれている数字は「2」でした。

うわっ、もうアクセスされてると喜んだのもつかの間、恐ろしいことに気づきます。

「そういやさっき、スマホからどう見えるのか気になってスマホでブログ見たな…。」

そうです。先ほどの

超簡単に自分のアクセスを除外する方法 | 初心者の為のGoogle Analyticsの使い方講座

で設定したのは、あくまで自分のパソコンのGoogleブラウザからのアクセスのみなのでした。

vdeep.net

こちらのサイトでそれっぽいことが書いてくださっていたので、やってみようと思ったのですが、、、あまりもの難しさに断念しました。

いつかまたできるかもしれない日のためにリンクを貼っておくことにします。

9. まだできることは…?そうだ、faviconつくろう!

一通りツール系の設定ができたと信じて、ここらではじめのサイトに載っていたfaviconをつくることに。

faviconとはパソコンでサイトを開いたときに出てくるGoogleの【G】やtwitterの【鳥】のようなマークのことらしいです。私は初めて知りました。

スマホだとウェブクリップアイコンといって、よくみるスマホアプリのデザインとなるとのこと。

ブログ作成するだけでもなかなか知らなかったことを知ることができますね。

綺麗なfavicon(ファビコン)作成の基本的なコツ・アイデアまとめ | 株式会社LIG www.logogarden.com

上のサイトのコツを参考に、下の無料ロゴ作成サイトを使ってfaviconをつくってみました。さまざまなジャンルのロゴがあり、favicon作成には最適だと思います。こんな感じとなりました。

f:id:kotonoha_sorakuni:20170611110057j:plain

Googleでタブを開くとこんな感じです。これはfavicon必須ですね笑

f:id:kotonoha_sorakuni:20170611110105p:plain

10. Twitterやってみようかな?

さらにいい機会だと思って、これまでやってなかったtwitterもはじめてみました。

これでtwitterでもブログの宣伝などができるようになります。

参考

はてなブログへのTwitter導入方法やメリット、注意点など ポジ熊の人生記

よろしければフォローお願いします!

内容は以下の通り、ブログの更新や、映画、web小説の紹介などやっていこうかなと思っています。

アカウント名はtwitterの15文字制限でsoraku「ni」が入りませんでした笑

MEMO
はてなブロガーはtwitterでの交流がむちゃくちゃ盛んです。はてなスターやシェアを通して気になる人がいれば、twitterを通してリプライをおくってみると思わぬ交流の輪が広がったりします。使ったことがない人も、ブログと合わせて活用することでブログがもっと楽しくなりますよ。ただ10記事くらいまでは記事を書く方に集中したほうがよいかもしれません。

11. RSSは知ってるぞ!

さすがにRSSは知っていたので、これまたボタンを設置します。

ついでに下のサイトを参考にさせていただいてシェアボタンやフォローボタンを設置します。

参考

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズYukihy Life

【追記】 シェアボタンについて、なぜかぐるぐるしてしまう状態が続いていましたがテンプレートを使わせていただいたサイトの別記事を参考にさせていただいて直すことができました!

(グルグルする不具合治しました)Facebookの仕様変更があったので、シェア数カウントのコードを修正して下さい – NO TITLE

 

12. そろそろ一段落だろ…?

そろそろ一段落だろと思い、はじめの

はてなブログ初心者が参考にすべき7つのサイト – 僕は猫だった はてなブログを始めるときに、まずやるべき9つのこと(はてなブログの使い方・初期設定) – ニッチブログ

2つのサイトを確認してみます。

まだまだやれることは多そうです…。

・サイドバーのカスタマイズ ・グローバルナビの追加 ・見出しのカスタマイズ

など、きりがないので最低限形を整えるために必要だと思うことをやっていきました。自分だけのブログとしていくにはまだまだやれることは多そうです。

13. ブログのトップページを一覧表示にしたい!

そろそろ切りをつけようと思ったところで、最後に気になったのはトップページ。

よくみる一覧表示ではなく、一つ一つの記事をすべて表示する仕組みだったので調べて一覧表示で出るようにしました。

【追記】

注意
現在ははてなブログの公式設定で一覧表示が可能です。

おわりに

そんなこんなで自分としては最低限納得できるブログの形ができあがりました。

いやー、無料ではじめられるからと言って正直なめていたところはあります。やろうと思えばいくらでもカスタマイズして、自分だけのブログを作っていけるところにもブログの楽しみがあるのだと実感できました。

上記の流れはあくまで自分が調べた結果、辿った流れなのでこれがベストではなくもっと良い方法などあると思います。

あくまで備忘録としての意識が強いので、参考程度になればと思います。

そして形が整ったからにはいよいよ執筆を開始できます。あとは書いていくだけ!

いろいろな情報を惜しまずにサイトに載せてくださっている先達のみなさんありがとうございました。この記事もすこしでも誰かの役に立つことを願ってます。

私がはてなブログproに移行したきっかけと、やったこと8つ
時流にそった記事を書いたら新着エントリーにのって読者が倍増したよ
ブログ運営1ヶ月目のふりかえり