読者です 読者をやめる 読者になる 読者になる

なにか新しいこと日記

都内で働く30代キャリアウーマンが新しいことにトライしてみた日々の記録。

最低限これだけ! はてなブログカスタマイズの7つのステップ

ブログカスタマイズにはまって寝不足のジョヴァンナです。こんにちは!

HTMLやCSSの知識もないし、基本的にめんどくさがりやなので最低限のことしかやってないけど、初級編のカスタマイズは一通りやってみたので、まとめておきます。

このエントリーではザックリと7つのステップを紹介しました。

《有料版》って書いたもの以外は無料版でもできるはず。

具体的なやり方は私が参考にしたサイトを文末に紹介させていただきました。

私程度の浅〜い知識でカスタマイズを語るのはおこがましいんですが、意外と《基本中の基本》が書いてあるページって見つからないもんで。「これからやってみようかな」って人は、良かったら参考にしてください。「もうカスタマイズわかってるよ!」って人は必要ないと思います。そんなエントリーです。

 

それではどうぞ!

 

[目次]

 

1. デザイン設定を共通にするかどうか、考える。

f:id:giovannna:20170322013846j:image

PC、スマホでデザインテーマを共通にするか別々にするかを考えます。ちなみに共通=レスポンシブデザインと言います。

デザインの選択は後からやり直すこともできるので、まずザックリ、共通か別々かを考えましょう。

私は別々を採用しました。PC版はシンプルなBlooklyn(ブルックリン)にしています。

 

2. ブログのカラーや雰囲気を考える。

2-1.全ユーザー向け

デザインテーマはブログの内容とか書いてる人のキャラクターに合わせて選ぶのが自然です。ファッション感覚でいいと思う。ポップな感じとかスタイリッシュとか、シンプルとか。

 

使う色は好きな色でもいいし、特になければ内容に応じて暖色にするか寒色にするか中間色、モノトーンなど色の系統をまず考えましょう。

個人的には日記っぽい内容なら暖色、情報提供型ならクールな配色やモノトーンがおすすめです。

 

PC版のデザインを選んで、背景色やスマホ版のアクセントカラーをまずはカスタマイズ。→このへんは無料でできるところです。

 

2-2.《有料版》ユーザー向け

「配色パターン」で検索すると、3〜4色のおしゃれな色の組み合わせが見つかります。Webカラーコードが書いてあったらラッキー! コピペしていろんな所に使えます。

 

デザインに凝りたい人は、ヘッダーをつくるときによく考えてトータルコーディネートすべきです。

私はヘッダーをカラフルにしたので、他のパーツは色味を抑えてグレー系とブルーを中心に配色しました。(欲を言えば、ヘッダーに使う色も細かく指定すべきだった。)

 

3. ヘッダー、アイコンをどうするか。

ヘッダーはとりあえず手持ちの画像でもいいと思うんだ。

アイコンはイラストにしてる人をよく見かけます。アイコンだけなら「ココナラ」や似顔絵アプリを使えば500円で調達できちゃったりするので気軽ですね。

 

似顔絵作ろう!

似顔絵作ろう!

  • ANTENNA CO., LTD.
  • 写真/ビデオ
  • 無料

 

私は好きなクリエイターがいて、その方にお願いしました。

(ココナラでの発注ややり取りの手順に関してはこちらのエントリーをご覧ください!)

 

4. スマホ版のレイアウトを考える。《有料版のみ》

PC版のサイドバーには基本的なものがそろってます。私はPCはとりあえずデフォルトの設定でOKってことにしました。

レスポンシブなら、PC版の設定が引き継がれるので手間要らず…。

私はめんどくさがりのくせにスマホ版を別にしちゃったから、カスタマイズするのが大変でした。 

 

4-1.レイアウトの検討手順

まずヘッダー、フッターにある要らない要素を消します。

  ↓

その他、必要なパーツを考えます。

  ↓

ヘッダー、フッター、記事の上下の「位置関係」を理解して、パーツの並び順を考えます。

(記事の上下に置いたものはトップページでは見えません。)

 

4-2.私が考えたスマホ版のレイアウト

  1. ヘッダー
  2. 記事上にシェアボタン
  3. 本文
  4. 記事下にもシェアボタン
  5. 記事下に関連記事
  6. プロフィール
  7. フォローボタン
  8. 検索窓
  9. カテゴリー一覧
  10. おすすめ記事

 

これが理想です!

 

5. プロフィール表示の4つのパターン

5-1. PCのプロフィール

デフォルトは設定→デザイン→サイドバーから編集できます。

私はみっきー様のエントリーを参考に、新しく設定しました。

(写真はタブレット版の表示です。)

f:id:giovannna:20170321233543j:image

 

5-2. スマホプロフィール

デフォルトは「ブログの説明」に入れた文章が、タイトルの下と、フッターにあるユーザーネームの下に表示されます。(タイトル下の説明は、私は要らないので消しました。)

f:id:giovannna:20170321233056j:image

 

5-3. aboutページ

フッターにあるユーザーネームをクリックすると遷移するページをaboutページと呼びます。はてな記法かMarkdown記法によって編集可能です。

 

 私のaboutページコンテンツ
  1. プロフィール
  2. ブログの概要
  3. おすすめ記事のリンク
  4. 連絡先
  5. 免責事項
  6. 広告について

 

5-4. その他のプロフィール表示方法

  • aboutページとは別に「プロフィール」を単体の記事として書く。上記をヘッダー、フッター、PCのプロフィール、aboutページなど任意の場所にリンクさせる。
  • またはaboutページを編集して、ヘッダー、フッター、PCのプロフィールなどからリンクさせる。
  • aboutページのURL: ホームページアドレス/about/

 

6. 各種ボタンを表示する

6-1.シェアボタン

個別エントリーのリンクをシェアするためのボタンです。デフォルト設定があるので、必要に応じて表示しましょう。

 

6-2.フォローボタン《他社製は有料のみ》

ブログ講読者になるためのボタンです。デフォルトははてなユーザー向けの「読者になる」ボタンのみ。検索で来る人向けに、他社製のフォローボタンもあった方が親切だと思います。

  • はてなユーザー向け
  • Feedly
  • RSS

この3つかな。

Twitterのフォローボタンも表示している人が多いですね。

 

6-3.Zenbak

便利そうだけど表示が遅くなりそうで、私は使ってません。

 

7. その他

  • 関連記事のプラグインを導入する。《有料版》のみ。
  • スマホ版にカテゴリ一覧を表示する。
  • アクセス解析(Googleアナリティクス)を入れる。

などなど…

 

あとは中級編かな!?

 

参考サイト

 

 

 

 

 

  • 関連記事には、他に『あわせて読みたいG』などの選択肢があります。
  • Googleアドセンスの機能を使ってズラーっと並べてるのもよく見かけるけど、アドセンスやってない人は使えませんね。

 

 

カスタマイズして、わかったこと

これだけやるのも大変で、1日1つずつ地道に設定して1か月かかりました。

今やっと最低限の機能を備えられたなーってところ。4のスマホ版レイアウトに関してはまだまだです。今後もちょこちょこ記事を装飾したり、PC版のデザインを少しずつ変えていきます。

 

苦労はしたけど、ブロガーの皆様のおかげで、基本的なブログのレイアウトや見やすいページにするための工夫について、初級の知識をゲットしました。

4月からは、ワードプレスでのホームページ制作を始めます。 

はてなのカスタマイズをやらなかったら、たぶんワードプレスを使ってみようなんて思いもしなかったはず。スマホ版のレイアウト云々なんて考えもしなかったでしょう。

ブログっておもしろいよね!

 

自分なりのノウハウが蓄積されたら、またまとめてみます!