ブログを運営している人ならインターネットサーフィンをしていると、「あっ、このデザインかっこいいな」とか「こんな風に自分のブログをカスタマイズしたい」と思うことがあるかと思います。今回は自分のブログをどのようにカスタマイズしていったらいいのか考えてみたいと思います。
まずは不格好でもいいからブログをはじめてしまう
「読めればいいや」ぐらいのデザインに無頓着な人はいいのですが、FC2・はてな・Livedoorのようなブログサービスが用意してくれている初期デザインが気に入らなかったり、訪れてくれた人にデザインでも楽しんでもらおうと思ってしまうと、ブログをはじめる前にデザインのカスタマイズで疲れてしまったりします。
ブログ運営の初心者用の情報をネットで調べてみると、デザインにも統一感をもっていたほうが訪問者の満足度も高くなるなどと説明されていることがあります。かっこいいアニメーションで展開されるグローバルナビゲーションやオシャレな見出しやSNSフォローボタンは見てるだけで楽しいですし、自分のブログにも愛着がわくことでしょう。
ただ、ブログの立ち上げからデザインのカスタマイズを一気にやってしまおうと考えると、ネットを参考にしたデザインカスタマイズが思ったように動作しなかったりして、ブログをはじめる前に燃え尽きてしまいがちです。「よーし、デザインカスタマイズしちゃうぞー」といってバシャバシャと HTML や CSS を書き散らすことができるのは、デザインを専門にしているプロぐらいなものです。
なので、最初は出来合いのテンプレートを使ったり、WordPress で運営しているならシンプルなテーマでとりあえずブログをはじめてしまうことをおすすめします。そして記事が増えてきて時間に余裕がでてきたら、あせらずに一か所ずつカスタマイズしていけばいいんじゃないでしょうか。まずはスタートしてしまうのが吉ですよ。
ブログカスタマイズに使うツール
他人様のブログを見ていると「このデザインを自分のブログにも使いたい！」と思うことがあるはずです。その場合、Web ページ全体を保存してテキストエディタで調べてもいいのですが、必要な情報と不必要な情報を選別するだけで実に大変な手間がかかってしまいます。
そこで、もっと簡単にパクるリスペクトするためにブラウザの Google Chrome を使ってみましょう。目的のページを開き、右クリックで「検証」を選択します。
すると画面の右側に検証用のツールが開かれるので、ここでどのようにカスタマイズしているのかを確認していくことになります。
試しに、当ブログのサイドバーウィジェットの「最近の投稿」がどのようにカスタマイズされているかを調べてみます。まずは検証ツールの左上にあるボタンを押してください。クリックするとボタンが青色に変化します。
その状態で目的の位置まで移動します。
クリックすると、検証ツールで目的の HTML のエレメントが選択されるので、前後を確認して HTML ソースがどのようになっているのかを見ることができます。下部には適用されている CSS もあわせて表示されます。
CSS の検証結果を見てみると、たまにこのように表示されていることがあります。
CSS は同じプロパティに異なる値が指定されてスタイルが競合した場合、より後から読み込まれたスタイルが優先されるというルールがあります。例えば、スタイルシートに次のように記述されていたと考えてください。
1 2 3 4 5 6 7 | .test { margin: 10px; } .test { margin: 30px; } |
スタイルシートが長くなったときにうっかり重複して指定してしまったり、他からダウンロードしてきたスタイルシートをカスタマイズするときなどにこのようになったりします。この場合、最初のマージン 10px はキャンセルされ、後に指定した 30px が適用されることになります。CSS 検証結果の打ち消し線はこれを表したものです。
なお、CSS 検証画面では適用されているスタイルのチェックを外すことで、表示がどのように変化するのかを確認することができます。最悪、表示が崩れてしまったときにはページを再読み込みすればよいので、いろいろと試してみてください。CSS の学習にも役に立つはずです。
ネット上のサンプルを試してみたい
ネット上にはスタイルシートのサンプル例がたくさん転がっていますが、なかにはカスタマイズ結果が画像で表示していない情報があったりして確認してみたいときがあると思います。まさか本番の環境で試すわけにもいかないので、ローカル環境に XAMPP をインストールするなどして動作確認をしなければならないはずです。でも、毎回 XAMPP を立ち上げるのは面倒くさいですよね。
そこで、超簡単な HTML ページを作成して動作確認する方法をおすすめします。以下のソースコードを拡張子 .html で保存します。文字コードは一応 UTF-8 を指定しています。PHP が絡んでいないので、BOM はあり・なしのどちらでも大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>デモ</title> <style type="text/css"> <!-- html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; } body { line-height:1; } /* ここにスタイルを指定する */ --> </style> </head> <body> <!-- ここにコンテンツ --> </body> </html> |
BODY タグの間に目的の HTML ソースをコピーし、適用したいスタイルを STYLE タグの間に記述します。デスクトップにでも保存してダブルクリックすれば、標準のブラウザで開くことができるので確認を行ってください。STYLE タグの冒頭にいろいろと記述されていますが、これはブラウザ間の差異をキャンセルするリセット CSS になっています。
まとめ
ブログのデザインカスタマイズは一朝一夕で完成するほど簡単ではなく、常にブラッシュアップし続ける必要があります。どうせなら楽しんでやりたいものですが、カスタマイズまでにあまりに手間がかかるとおっくうになってなおざりになりがちです。このエントリーをきっかけに、みなさんのブログライフが少しでも快適になれば幸いです。
Comment