ブログカスタマイズにはまって寝不足のジョヴァンナです。こんにちは！
HTMLやCSSの知識もないし、基本的にめんどくさがりやなので最低限のことしかやってないけど、初級編のカスタマイズは一通りやってみたので、まとめておきます。
このエントリーではザックリと7つのステップを紹介しました。
《有料版》って書いたもの以外は無料版でもできるはず。
具体的なやり方は私が参考にしたサイトを文末に紹介させていただきました。
私程度の浅〜い知識でカスタマイズを語るのはおこがましいんですが、意外と《基本中の基本》が書いてあるページって見つからないもんで。「これからやってみようかな」って人は、良かったら参考にしてください。「もうカスタマイズわかってるよ！」って人は必要ないと思います。そんなエントリーです。
それではどうぞ！
[目次]
- 1. デザイン設定を共通にするかどうか、考える。
- 2. ブログのカラーや雰囲気を考える。
- 3. ヘッダー、アイコンをどうするか。
- 4. スマホ版のレイアウトを考える。《有料版のみ》
- 5. プロフィール表示の4つのパターン
- 6. 各種ボタンを表示する
- 7. その他
- 参考サイト
- カスタマイズして、わかったこと
1. デザイン設定を共通にするかどうか、考える。
PC、スマホでデザインテーマを共通にするか別々にするかを考えます。ちなみに共通＝レスポンシブデザインと言います。
デザインの選択は後からやり直すこともできるので、まずザックリ、共通か別々かを考えましょう。
私は別々を採用しました。PC版はシンプルなBlooklyn（ブルックリン）にしています。
2. ブログのカラーや雰囲気を考える。
2-1.全ユーザー向け
デザインテーマはブログの内容とか書いてる人のキャラクターに合わせて選ぶのが自然です。ファッション感覚でいいと思う。ポップな感じとかスタイリッシュとか、シンプルとか。
使う色は好きな色でもいいし、特になければ内容に応じて暖色にするか寒色にするか中間色、モノトーンなど色の系統をまず考えましょう。
個人的には日記っぽい内容なら暖色、情報提供型ならクールな配色やモノトーンがおすすめです。
PC版のデザインを選んで、背景色やスマホ版のアクセントカラーをまずはカスタマイズ。→このへんは無料でできるところです。
2-2.《有料版》ユーザー向け
「配色パターン｣で検索すると、3〜4色のおしゃれな色の組み合わせが見つかります。Webカラーコードが書いてあったらラッキー！ コピペしていろんな所に使えます。
デザインに凝りたい人は、ヘッダーをつくるときによく考えてトータルコーディネートすべきです。
私はヘッダーをカラフルにしたので、他のパーツは色味を抑えてグレー系とブルーを中心に配色しました。(欲を言えば、ヘッダーに使う色も細かく指定すべきだった。)
3. ヘッダー、アイコンをどうするか。
ヘッダーはとりあえず手持ちの画像でもいいと思うんだ。
アイコンはイラストにしてる人をよく見かけます。アイコンだけなら「ココナラ」や似顔絵アプリを使えば500円で調達できちゃったりするので気軽ですね。
私は好きなクリエイターがいて、その方にお願いしました。
（ココナラでの発注ややり取りの手順に関してはこちらのエントリーをご覧ください！）
4. スマホ版のレイアウトを考える。《有料版のみ》
PC版のサイドバーには基本的なものがそろってます。私はPCはとりあえずデフォルトの設定でOKってことにしました。
レスポンシブなら、PC版の設定が引き継がれるので手間要らず…。
私はめんどくさがりのくせにスマホ版を別にしちゃったから、カスタマイズするのが大変でした。
4-1.レイアウトの検討手順
まずヘッダー、フッターにある要らない要素を消します。
↓
その他、必要なパーツを考えます。
↓
ヘッダー、フッター、記事の上下の「位置関係」を理解して、パーツの並び順を考えます。
(記事の上下に置いたものはトップページでは見えません。)
4-2.私が考えたスマホ版のレイアウト
- ヘッダー
- 記事上にシェアボタン
- 本文
- 記事下にもシェアボタン
- 記事下に関連記事
- プロフィール
- フォローボタン
- 検索窓
- カテゴリー一覧
- おすすめ記事
これが理想です！
5. プロフィール表示の4つのパターン
5-1. PCのプロフィール
デフォルトは設定→デザイン→サイドバーから編集できます。
私はみっきー様のエントリーを参考に、新しく設定しました。
(写真はタブレット版の表示です。)
5-2. スマホプロフィール
デフォルトは「ブログの説明｣に入れた文章が、タイトルの下と、フッターにあるユーザーネームの下に表示されます。（タイトル下の説明は、私は要らないので消しました。）
5-3. aboutページ
フッターにあるユーザーネームをクリックすると遷移するページをaboutページと呼びます。はてな記法かMarkdown記法によって編集可能です。
私のaboutページコンテンツ
- プロフィール
- ブログの概要
- おすすめ記事のリンク
- 連絡先
- 免責事項
- 広告について
5-4. その他のプロフィール表示方法
- aboutページとは別に「プロフィール」を単体の記事として書く。上記をヘッダー、フッター、PCのプロフィール、aboutページなど任意の場所にリンクさせる。
- またはaboutページを編集して、ヘッダー、フッター、PCのプロフィールなどからリンクさせる。
- aboutページのURL: ホームページアドレス/about/
6. 各種ボタンを表示する
6-1.シェアボタン
個別エントリーのリンクをシェアするためのボタンです。デフォルト設定があるので、必要に応じて表示しましょう。
6-2.フォローボタン《他社製は有料のみ》
ブログ講読者になるためのボタンです。デフォルトははてなユーザー向けの「読者になる」ボタンのみ。検索で来る人向けに、他社製のフォローボタンもあった方が親切だと思います。
- はてなユーザー向け
- Feedly
- RSS
この3つかな。
Twitterのフォローボタンも表示している人が多いですね。
6-3.Zenbak
便利そうだけど表示が遅くなりそうで、私は使ってません。
7. その他
- 関連記事のプラグインを導入する。《有料版》のみ。
- スマホ版にカテゴリ一覧を表示する。
- アクセス解析(Googleアナリティクス)を入れる。
などなど…
あとは中級編かな！？
参考サイト
- ヘッダー、アイコンの画像サイズはポジ熊様の記事を参考にしました。
- ブログプロフィールやヘッダ画像はプロに依頼すべし！ - ポジ熊の人生記
- PC版のプロフィール編集はみっきー様記事を参考に。
- はてなブログカスタマイズ！プロフィールを目立たせてアピール！ - One step at a time
- aboutページははてな記法で。
- はてな記法一覧 - はてなダイアリーのヘルプ
- シェアボタン、フォローボタンはゆきひー様提供コードを使用しました。
- はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life
- コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
- 関連記事プラグインはMilliardを導入しました。
- Milliard関連ページをはてなブログで設定する方法 | シスウ株式会社
- はてなブログの関連記事プラグイン「Milliard」で、サムネイルに画像変更が反映されない時の対処法 - よなかのはなし←この記事を読んで「サムネイルに画像変更が反映されない時の対処法」ってのが、他社様にお手間とらせることでもありめんどくさかったので、アイキャッチの画像は事前にきちんと選んで設定するようになりました。廣瀬夜中様の情報提供に感謝！
- 関連記事には、他に『あわせて読みたいG』などの選択肢があります。
- Googleアドセンスの機能を使ってズラーっと並べてるのもよく見かけるけど、アドセンスやってない人は使えませんね。
- カテゴリー一覧はShun様提供のもの、HTMLだけ貼りました。
- コピペ一発！はてなブログのスマホページでカテゴリ一覧を自動生成するカスタマイズ - いつ俺〜いつから俺ができないと錯覚していた？〜
カスタマイズして、わかったこと
これだけやるのも大変で、1日1つずつ地道に設定して1か月かかりました。
今やっと最低限の機能を備えられたなーってところ。4のスマホ版レイアウトに関してはまだまだです。今後もちょこちょこ記事を装飾したり、PC版のデザインを少しずつ変えていきます。
苦労はしたけど、ブロガーの皆様のおかげで、基本的なブログのレイアウトや見やすいページにするための工夫について、初級の知識をゲットしました。
4月からは、ワードプレスでのホームページ制作を始めます。
はてなのカスタマイズをやらなかったら、たぶんワードプレスを使ってみようなんて思いもしなかったはず。スマホ版のレイアウト云々なんて考えもしなかったでしょう。
ブログっておもしろいよね！
自分なりのノウハウが蓄積されたら、またまとめてみます！
