Banguardサイトスマートフォン用の表示で見るBanguardサイト「ビジネスマンを応援するブログ」をテーマに、ビジネスに役立つ記事を書いています。この広告は、90日以上更新していないブログに表示しています。Tipsブログのデザインを少し変更してみました。それほど大きな変更ではないのですが、変えたのは以下の4点です。1.ブログのデザインテーマを変更した2.記事の幅を広げた3.「続きを読む」を加えた4.ブログの見出しに画像を加えたはてなブログは、ある程度自分で自由にカスタマイズすることが可能です。Webデザインの知識がない私ですが、なんとか今回の4つは自分でできました。はてなブログのカスタマイズをしようとする際に、参考にしていただたら嬉しいです。今回カスタマイズしたのは、主にブログ全体に関わる部分が2箇所、トップ画面で1箇所、記事画面で1箇所、計4箇所です。ブログのデザインテーマの変更と記事の幅の変更は、ずっとやりたかったカスタマイズです。ブログ全体に関わる変更点と、トップ画面での変更点また、「ブログの見出しに画像を加える」ことも、地味ですがとても変更したかった部分になります。ブログの見出しに画像を加えることで、文字だけより、段落ごとにメリハリが出ると思います。変更したかったのですがやり方が分からず...ようやく実現できました。記事画面の変更点それぞれ、どのようにカスタマイズしたかをまとめました。ブログのデザインテーマを変更するはてなブログでは、ブログのデザインテーマをいつでも自由に変更できます。方法はとても簡単です。はてなブログのダッシュボードから、デザインを選択。好きなブログテーマを選択したら変更を保存するをクリックして完了です。変更する前に、プレビューで確認してみましょう。ブログテーマを選択すれば、自動でプレビューが表示されます。はてなブログユーザーの皆さんがご自身で作成されたブログテーマがテーマストアに公開されています。数はそんなに多くはないですが、公式テーマとは違ったテーマにしたい方は必見です。ブログのデザインテーマ変更は「デザイン」から個人的には、なるべくシンプルなブログデザインにしたかったので、公式テーマ「Report」を選択しました。背景を白地にして、真っ白なデザインにしています。はてなブログをはじめたばかりの時は、ブログテーマはいつでも変更ができるので、まずは気に入ったテーマを選択してみるのが良いと思います。その後、自分でカスタマイズをしていったり別のテーマに変更してみたり、自由にいじってみてください。記事の幅を広げるはてなブログは、デフォルトだとどの公式テーマを選択しても「記事の幅」が狭く感じます。これは個人の好みの問題なのでしょうが、私はもう少し記事の幅を広げたいと常々おもっていました。はてなブログの公式ブログである「はてなブログ開発ブログ」も、ブログのデザインを刷新したタイミングで記事の幅を大きく広げています。・はてなブログ開発ブログ記事の幅を広げるには、CSSで記事幅を指定すればOKです。デザインCSSで追加することができます。記事の幅を広げるためのCSSは、こんな感じで書きました。}containerでブログ全体の幅を、mainで記事の幅を指定しています。記事の幅はもう少し広くても良いかなと思っているのですが、毎回掲載しているタイトル直下の画像の横幅がすべて600pxのため、600px以上の幅に拡げることは断念しました。「続きを読む」を加える方法はてなブログはトップページにすべての記事が表示されるため、ひとつの記事がある程度の長さになるとだいぶ縦長のブログになってしまいます。そのため「続きを読む」を設置したいとずっと考えていました。ところがはてなブログでは、「続きを読む」を設定することができません。完全に諦めていただのですが、今回の一連のカスタマイズにおいていろいろとはてなブログに関する記事を読みあさっていると、「続きを読む」を設定する方法を記事にされているブログを見つけました。・はてなブログで「続きを読む」記法|カワイイはつくれるブログ内でご紹介されているコードを、ブログのサイドバーに埋め込むことで「続きを読む」を設定することができます。HTMLで表示されるHTML記述欄です。サイドバーにHTMLを設置する比較的長めの記事を書かれる方にはおすすめなカスタマイズです。逆に、記事がそんに長くない場合は特に必要はないでしょう。今回、いちばん大きい見出しに青いブックマークの画像を追加させました。デフォルトでは字の大きさと下線が大見出しのデザインでしたが、もう少し目立たせたいと常々思っていました。見出しを明確にすることで、ブログの記事自体の段落組がわかりやすくなり、読みやすい記事になると思っています。今回見出しに画像を表示させるにあたり、以下のステップで作業を行いました。順番に、詳しく見て行きたいと思います。1|表示させたい画像を用意する画像はMacのKeynoteで作りました。四角と三角の組み合わせだけの簡単イメージです。一応、両端に編んだ糸を表現してみました。実際は小さすぎて見えませんが...(私はWebデザインのど素人ですのでIllustratorなどのデザインソフトは持っていません)画像を作成したら、見出しに表示させるための適当な大きさに調整します。私は横幅24px、縦幅34pxで作成しました。画像の保存については、Keynoteで作成した画像をスクリーンキャプチャして保存しています。2|画像を「はてなフォトライフ」にアップするはてなブログで画像を表示させたい場合、はてなフォトライフにアップするのがおすすめです。方法は簡単で、記事投稿画面から写真を投稿すればOKです。記事投稿画面で写真をアップはてなフォトライフにアップしている画像は、はてなブログでいつでも読み込むことができます。はてなフォトライフは、私のように自分でサーバーを持っていない人にはとてもありがたいサービスです。はてなブログの画像とはてなフォトライフの関係については、以前書いた以下の記事も参考にしてみてください。・RSSアイコンが表示されないので、画像のアップロード先を「はてなフォトライフ」にしたら解決しました3|大見出しの時に背景として2でアップした画像を読み込むよう、CSSを記述ここまで準備できれば、あとははてなフォトライフにアップされている画像を大見出しを記載する時だけ読みこませれば完了です。はてなブログの大見出しはh3タグで記載されています。したがって、h3タグを指定するように以下のコードをCSSに記載しました。30px;}これで、h3タグ(大見出し)の記載がある場合については、見出し用の画像が背景として表示されるようになります。padding-leftで、文字の書き出し位置を指定のピクセル数分、右にずらすことができます。文字の書き出しが通常通り左端からはじまると、画像と文字が重なってしまいます。これを避けるため、文字の書き出し位置をずらしています。ちなみに、見出しへの画像表示を含め今回ご紹介したカスタマイズ内容はすべてPCサイト用です。スマートフォン用のサイトには反映されませんので、ご注意ください。ブログデザインをカスタマイズする目的ブログデザインをカスタマイズして思ったことは、「もっとこうしたい」という改善点がまだまだあるな、ということです。知識不足のため一気に変えることはできないですが、少しずつカスタマイズしていこうと考えています。ブログデザインのカスタマイズは、自分だけのオリジナルブログにしていく楽しみもあります。目的は読者の方に読みやすいブログにすることです。世間には、たくさん読みやすいブログがあります。これからも、そういった方々のブログを勉強させてもらい、私のブログも改善できたらと思っています。今回の記事がはてなブログを使っている方に少しでも参考にしていただけたら嬉しいです。検索プロフィール東京都在住、サービスマッチングの会社で主に営業戦略の企画をしています。大事だと思ったことや興味あることを、忘れないように残すためはじめたブログです。このブログが、少しでも皆さんのお役に立てる時があればうれしいです。人気の記事はてなブログをはじめよう!banguard9383さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。