ワクワクして働くための生産性↗向上Hacks

ワクワクは最強のライフハックなのです。

はてなブログカスタマイズ:カスタマイズの計画を立てる

f:id:ganapati55:20170525135346j:plain

どうも。

ganapatiです。

はてな3日目。今日はカスタマイズに向けた準備を進めようかと思います。

私と同じくはてなブログを始めたばかりの人の参考になればと思います。

カスタマイズ計画

個人的に以下のようなカスタマイズを計画しています。

基本的にはCSSって何?という人は難しいかもしれませんが、多少理解できる人であれば同じようなカスタマイズ計画になるかと思います。

① とりあえずテーマをあてる

テーマをあててみなければカスタマイズもへったくれもありません。 色々調べたのですがカスタマイズを前提にしたシンプルなテーマも多いようですね。

ganapatiの場合、5月25日時点ですでにZENO-TEALというテーマをあてています。 なので、これは飛ばします。

② テーマファイル(CSS)を入手する

テーマをあてて、ブラウザのデベロッパーツールを使って細々とカスタマイズのCSSを考えていっても良いのですが、そもそもテーマがどのようなデザインを持っているのか、機能を持っているのかをできれば理解してから始めたほうが良いです。 理解していないと無駄な作業が発生したりしますので。。。 そこでテーマファイルを入手します。はてなブログはCSSをベースにしたファイルのようなのでスタイルシートと呼んでも良いかもしれません。

※もちろんテーマのデモサイトでかなり詳しく説明がなされていれば必要ないかもしれません。

では、どうやって入手するかというと、

  • デモサイトや製作者のサイトで配布していればそこから
  • 前述で入手できなければデベロッパーツールを利用してコードを読み込む

のどちらかになります。

ZENO-TEALの場合、デモサイトのフッターエリアにてダウンロードリンクが表示されているのですが、実際にダウンロードしたら以前のバージョンの要だったので後者の方法で入手しました。詳しくは別途記事を書きます。

また、ZENO-TEALのようなある程度デザイン化されたテーマの場合、カスタムCSSを個別に充ててもうまく思い通りにデザインできないことがあります。そういう場合は、元のテーマファイルを編集して自分用のテーマとしてアップロードして使用したほうがうまくいきます。

③ カスタマイズしたい要素をリストアップする

次に実際にカスタマイズしたい要素はどのようなものかリストアップします。④のステップと前後するかもしれませんが、デモサイトや導入済みのブログを見て「この部品は変えたいな~」とか「これを真似したいな~」とか考えると良いでしょう。 念のため以下のようなものから考えると良いです。

まずは編集モードの操作項目から

  • 見出し(h2~h6)
  • リスト
  • 番号付きリスト
  • リンクの表示
  • 引用
  • 目次
  • 脚注
  • 太字
  • 斜体
  • 取り消し線
  • アンダーライン

次に、ブログでよく見かけるものから

  • シェアボタン
  • フォローボタン
  • パン屑リスト
  • カテゴリ表示
  • 前の投稿・次の投稿
  • ヨメレバ・カエレバ
  • 人気記事一覧
  • 関連記事一覧
  • 関連記事枠
  • ブログカード
  • タグクラウド
  • Author写真

テーマのCSSを見て、テーマ専用の部品から

例えば同じ太字でもクラス指定で複数パターンを作っているようなものもあります。

④ スタイルガイドを作成する

実際には③と同時並行する作業になるかもしれません。スタイルガイドを作成します。 ここで言うスタイルガイドとは、見本ページのようなものです。

具体的には③でリストしたものをサンプルページのような形で1ページの中に全部配置するだけです。 公開しても非公開でもどちらでも構いません。

このスタイルガイドを作るメリットはいくつかあります。

  • 自分の今のテーマとカスタムCSSでどのように表示されるのかすぐわかる
  • 忘れたころにデザインを確認できる
  • 画像として保存しておけば変化の変遷が分かる

こんなところです。

⑤ 分析できるようにする

最初からやる必要はないかもしれませんが、GoogleAnalyticsのような分析系サービスのコードを埋め込みます。 はてなブログは設定画面でできるので楽ちんです。

⑥ 広告を設置する

これも最初からやる必要はないのですが、せっかくなので広告を設置します。 代表的なのは * Google Adsense * 楽天アフィリエイト * Amazonアソシエイト このあたりなのでしょうが、他にもいろいろあるようなので検討しても良いかもしれません。 ただ、あまりごてごて広告を貼るのはどうかなと・・・個人的には思います。 PVが1万/月を超えてからでも十分だと思います。

⑦ 部品を使いやすくする

ブログのカスタマイズとは少し異なるのですが、実際にブログを投稿するようになると頻繁に使う部品のようなものが出てきます。 特にコードを入力する必要があるものはいちいち入力していると大変です。

そこでCliborのようなコピペ支援ソフトを使用して、特定の部品を登録し、呼び出して使えるようにします。

⑧ ヘッダーエリアやフッターエリア、サイドバーで表示する内容を再検討する

投稿数が20を超えてくると、カテゴリ表示を生かしたいとか、特定の投稿を注目記事として表示したいとかそういう願望が出てきます。 そうなってきたらヘッダーエリアやフッターエリア、サイドバーなどに手を入れていきます。

とまあ、こんな感じでカスタマイズの計画を立て、1~2か月かけてじっくりカスタマイズしていくと良いのかなと思います。