ブログにも役立つHTMLの話 その4~ブログでのスタイルシート具体例

スポンサーリンク
前回はhtmlで重要なスタイルシートの基本を紹介した。今回は前回のおさらいも含めて、その実践編とでもいうか、ブログで具体的にどうスタイルシートを活用していくかを紹介する。


イメージ

ブログサービス別 スタイルシートはどこに書く?

普段記事を書いているとき、文字を強調したり色を変えたりすることがあるだろう。その時、各ブログサービスとも記事編集画面の上にいろいろな記号ボタンが並んでいて、それを押せば強調できたり、色を変えたりすることが出来る。
これが実際のスタイルシートで、試しに編集画面をhtml画面に変えると選択した文字に<>で囲まれたいろいろな記号が書かれている。これが前回紹介した、インラインスタイルで書かれたスタイルシートだ。
インラインスタイルの場合は、その時限りの装飾の時に用いることが多い。しかし、見出し(hタグ)などの装飾設定はどの記事にも共通することなので、いちいちインラインで書くことは面倒だし、容量が無駄に増える。
このようにどのページにも共通したスタイルシートを書きたい時は、前回紹介したように外部ファイルに書く。

静的ウェブサイトならスタイルシート用にファイルを作成し、そこに書いてhtmlと同じところにアップロードする。では、ブログの場合どうやって外部ファイルに書くのか?それをブログサービス別に紹介してみる。

■Bloggerの場合

メニューから「テーマ」→「カスタマイズ」と進み、「上級者向け」→「CSSを追加」へと進む。ここに自分が設定しておきたいスタイルシートを書いたのち、右上の「ブログに適用」をクリックすればOKだ。

しかし自分自身の経験から言わせてもらうと、なぜだかこの方法ではときどき設定できていないことがある。
そこで別の方法を。メニューから「テーマ」までは上記と同じだが、そこで「HTMLの編集」を選ぶ。するとBloggerの全情報のhtmlファイルが表示されるので、一度テキストエディタのファイルに全コピー&ペーストしておく。この方法はバックアップとしても利用できるので、Blogger利用者はテキストエディタを用意しておこう。
ペーストしたhtmlソースから「</b:skin>」と検索する。検索したこのタグの上に追加したいCSSを書き入れる。
その後全htmlをコピーして、先ほど行った「テーマ」→「HTMLの編集」と進み、そこにコピーしたものを全てペーストして保存。
これで好きなようにCSSでカスタマイズできる。

■Wordpressの場合

Wordpressはもう少しシンプルだ。ダッシュボードから「外観」→「テーマの編集」と進み、右側に表示された一覧から「スタイルシート(style.css)」を選ぶ。ここに追加したいCSSを書き込み保存。

注意すべき点として、時々Wordpressはテーマのアップデートがある。テーマ自体がアップデートされると、せっかく設定したCSSが全て消えてしまい、新しいテーマとしてのスタイルシートに変わってしまう。それを避けるためには、必要なファイルを「子テーマ」として保存しておき、その中のスタイルシートに自分が追加したCSSを書き入れておくのが良い。

「子テーマ」作成については、多くの人がウェブ上で紹介しているので今回は割愛する。

■はてなブログの場合

現在自分ははてなブログは使用していないが、以前少し使ったことがある。はてなブログはWordpressとBloggerの良いところ取りの、とてもシンプルな管理画面だ。なのでCSS編集もだいぶ楽だった記憶がある。
管理画面から「デザイン」→「カスタマイズ」→「{ }デザインCSS」と進み、そこでCSSを追加する。

その他のブログサービスは使用したことがないが、いずれも管理画面でデザイン関連の項目を探すと、CSS追加、編集が出来るはずだ。なのでhtmlの知識がなくてもCSSはどんどん書いていくことが出来る。

便利なCSSリファレンス

自分のブログでこんなことをしたい、あのブログのようなスタイルにしたいと思ったら、スタイルシートである程度デザインすることが出来ることが分かった。

ではスタイルシートでどこまで、またどんなことが出来るのか?それをわかりやすくまとめたサイトを紹介する。

HTMLクイックリファレンス

日頃何かとお世話になっているサイト。このサイトのうち、「スタイルシートリファレンス(目的別)」は、したいこと別にどんなスタイルシートを使うことが出来るかが、すぐにわかる。
例えば表を作成したい時のスタイルシート、テーブルについてみてみると、テーブルの作成からボーダーの設定、セルの設定などが一覧になっていて、とてもわかりやすい。

W3G

文字通り、World Wide Web (WWW)について研究している会社のサイト。このサイトの「HTML辞典」は、スタイルシートに限らずhtmlのすべてについてリファレンス出来るようになっていて重宝だ。難点は専門的すぎて、書いていることが分かりずらい。しかしながら、上述の「スタイルシートリファレンス」でわからないことがあったら、必ずここで確認してみることにしている。

ブログである限り専門的なHTMLの知識は不要

今まで何回かに分けてhtmlの基本を書いてはみたものの、ブログに限って言えばスタイルシートを含め専門的なhtmlの知識はさほど必要ではない。でざいんや記事を飾りたてることよりも良質な記事を書くことのほうが、よっぽどSEO対策として重要だ。

だが今後、ブログ運営上何か困ることがあったときに、htmlの知識は必ず役に立つ。ブログサービス会社に問い合わせるより、自分自身で修正が出来れば手間がかからない。だから例え、いちからウェブサイトを作っていないにせよ、htmlの知識は身につけておくことをお勧めする。

今後はサイトをより動的に魅せる小道具の一つ、javascriptについて書く予定だ。
スポンサーリンク

ブログランキング

ブログランキング・にほんブログ村へ

0 件のコメント :

コメントを投稿

TOP