【Learning Animal】マナブろぐ

人生100年時代の学びとは。

ブログ作成したときの9つの段取り。ブログ名からカスタマイズまで。



初めてブログをやりはじめたわけですが、初めてなりに考えたことがあります。

「そもそもどんなブログにしよう。」
「タイトルどうしよう。」
「見た目を少し変えたい。」
「スマホ版も変えたい」

そんな考えのもと試行錯誤して現状に至っています。

その四苦八苦(カスタマイズした箇所)を備忘録として残しておきたくなったのでまとめました!  
 
ちなみに、私はCSSやHTMLに詳しくないので、Google先生、および多くの方の記事を参考にしました。

感謝の意を表すとともに、どのカスタマイズがどの記事に書かれていたのを整理しています!

今回の記事は、ブログの初心者の方に参考になればなぁと思います。

ブログをどうしていくか

あくまで、運営者である 龍 のその時の興味があるもの、考えたことを不定期であげる。

それがまず決めたことです。

メディアにして収益を上げることを目標とするのか、はたまた頭の整理と備忘録的に使うのかは大きく方針が違うのかなと。

私は文章力がないのと、最近発信ができていなかったので、トレーニングを目的としています。

あと発信するために情報収集をすることになるので、インプットも兼ねています。

ブログに書いていくネタをどうするか

ブログをワンテーマで専用ブログとしていくのか、ネタを色々UPしていくスタイルがいいのか。

特化型ブログか雑記ブログにするのか。

これは永遠の課題のような気もしますが、イケダハヤトさんの書籍「武器としての書く技術 (中経出版)」を読んで、複数ネタを取り扱うことにしました。

自分自身の経験としては、英語をガツッとやったので、英語ネタを多めに書けそうだけど、たくさんは書けないかも&他にも興味あるし、という単純な理由でもあります。

社会・経済・投資・会計・財務・IT・旅行・ゲーム・漫画・映画・などなどにも広げたい。

ただ、この辺は変えていくかもしれません。

ブログ名を決める

「なんか役に立つちょっとした知識を見た人が得られればなぁ」という気持ちと「自分も楽しく、堅苦しくならないように」という意味を込めたブログ名を付け、運営しています。

ブログ名を考える上で、下記記事を読みました。

ブログ名のつけ方はこの5タイプ!悩めるブログ初心者達へ - 梅吉日記

が、結局どの分類なんだろう。笑

途中で変えると検索結果に影響すると書いてありますが、飽きたら変えちゃうかもしれません。

ハンドルネームについて

匿名ブロガーなので、龍をハンドルネームにしています。

縁起のいい、上昇志向を体現する神話・伝説の生き物を付けました。

目指せ出世コース。笑

ここは人によって本名派もいるかもしれませんね。

人は見栄えが8割と言うし…デザインカスタマイズはマスト。

はてなブログの登録とデザインカスタマイズは作業としてはワンセットですよね。

もっと公式のデザインがたくさんあれば楽チンなのに…と思いつつ、しこしこカスタマイズをしてきたので、やったことをまとめます。

検索すると死ぬほどカスタマイズのやり方がUPされているので、非常に助かりますね。

便利な世の中です。

先人たちの記事に感謝を忘れないために、備忘録的にメモ。

アイコン・ヘッダーロゴの制作

ブログへの愛着をあげるために、アイコンやロゴ選びを結構序盤にやりました。笑

で、作ったのはヘッダー画像にもあるコレ。 f:id:rex3104:20150810194205p:plain

龍のイラストは下記から拝借させていただいています。ありがとうございます!ありがとうございます!

▼イラストキャッチャー
http://www.illustcatcher.com/detail_sean/event/detail3.html

そして、ブログ名に使っているフォント。可愛い感じでお気に入りです。

▼桜鯰フォント
http://lightbox.on.coocan.jp/help/freefont-20150304-33.html

ちなみに結果的に自分で作っちゃいましたが、スマホ用のヘッダー画像は最初、下記サイトでイメージ練ってました。

▼フリーフォントを使ったロゴ作成
フリーフォント で簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成

こういうシステム組んで作るサイトもやってみたいが、プログラムから覚えるの無理。

作った人すごい。

配色を決める

アイコンに合わせて、メインをオレンジ、差し色緑で構成しています。 配色のイメージ作りは、下記配色アイデアのサイトを参考にしました。

今、改めて見たら、「おいしそう・健康的」な部類だったのか。

食品・健康ネタもあげなきゃ。笑

▼カテゴリー別配色アイデア www.webcreatorbox.com

いよいよ、デザインカスタマイズ(PC版)

ページデザインカスタマイズ(その①)

・ブログ全体の幅を広げた
・自動で目次を表示するようにした
・グローバルメニューをつけた
・各記事のタイトル下に画像を入れた

上記4つは下記ブログをままパクリ。本当にありがとうございます!

▼はてなブログでカスタマイズした8つのデザイン!全てのブログ初心者に捧ぐCSSとHTMLの備忘録 wepli-dot2.hatenablog.com

ページデザインカスタマイズ(その②)

ページ下に関連記事を表示。

これもこんなに楽チンに導入できていいのか!!ってくらいコピペ。

これ自分で作ってる人すごいよな〜私ももっと本当は勉強しなきゃだなぁ。。

▼はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 http://bulldra.hatenablog.com/entry/read-together-gbulldra.hatenablog.com

広がりを求めてソーシャルボタン変更

ソーシャルボタンは色々いじってみて、なんかよくわかんないけど、他ので不具合出たので、下記に落ち着いています。

▼SNSボタンをカスタマイズ!はてなブログにオリジナル画像のSNSボタンを設置する方法 www.kototoka.com

FEEDLYボタンの設置

RSSも対応してた方がよい!とのネットの教えに則り、こちらもコピペ。

▼はてなブログにfeedlyのボタンを設置する www.task-notes.com

最近Google検索にも影響あるモバイル。モバイル版デザイン変更

こちらはそもそも「はてなブログpro」でないとできないです。

下記でみたカッコイイスマホページと同じようにしたい!という単純な理由だけで、proにしました。笑

▼はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 tsukuruiroiro.hatenablog.com

スマホで閲覧は結構重要だと個人的に思っているので、コピペだけでここまでカスタマイズできるのは助かるーーーー!

まとめ

とりあえず制作までの過程です。

むしろここからが本番。

記事内容・運用がもちろんメインですよね。

読んでもらう人を増やすことが醍醐味でもあるので、また切りのいいアクセス数になったら記事書きますね。