ウェブ制作イメージ前回は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クイックリファレンス日頃何かとお世話になっているサイト。このサイトのうち、「スタイルシートリファレンス(目的別)」は、したいこと別にどんなスタイルシートを使うことが出来るかが、すぐにわかる。表を作成したい時のスタイルシート、テーブルについてみてみると、テーブルの作成からボーダーの設定、セルの設定などが一覧になっていて、とてもわかりやすい。(WWW)について研究している会社のサイト。このサイトの「HTML辞典」は、スタイルシートに限らずhtmlのすべてについてリファレンス出来るようになっていて重宝だ。難点は専門的すぎて、書いていることが分かりずらい。上述の「スタイルシートリファレンス」でわからないことがあったら、必ずここで確認してみることにしている。今まで何回かに分けてhtmlの基本を書いてはみたものの、ブログに限って言えばスタイルシートを含め専門的なhtmlの知識はさほど必要ではない。ざいんや記事を飾りたてることよりも良質な記事を書くことのほうが、よっぽどSEO対策として重要だ。今後、ブログ運営上何か困ることがあったときに、htmlの知識は必ず役に立つ。ブログサービス会社に問い合わせるより、自分自身で修正が出来れば手間がかからない。例え、いちからウェブサイトを作っていないにせよ、htmlの知識は身につけておくことをお勧めする。今後はサイトをより動的に魅せる小道具の一つ、javascriptについて書く予定だ。21:47コンタクトの送信ボタンが押せず、こちらから質問することをお許し下さい。最近ブロガーの有料テンプレート、”OrangeZELO”を購入した者です。これから色々とカスタマイズしようと思っていた矢先に販売終了の告知、解らないことをまとめて製作者にメールするも返答はありませんでした。そこでネットで”OrangeZELO”のことを記事にされている方を探し、こちらに辿り着きました。お仕事などでお忙しいとは思いますがお時間があれば以下、教えていただけると幸いです。サイドスペースについてです、このエリアの角を丸くしたいと思い、”border-radius”で指定したのですが全く適用されませんでした。whitesmoke;">本文</div>の様な簡易なコードをレイアウトコンソールの「HTML/JavaScript」で設置すると普通に表示されます。”テーマ(HTMLの編集)”や”テーマ(カスタマイズ→SCCの追加)”などでは上手くいかない状況です。同様にトップのエントリーカードの四隅も丸くしたいのですが上手くいきません。希望している状態の参考画像は以下より、ダウンロードして下さい。コードを追記して表示させていますの2点です、もし解決策があれば是非とも教えて頂けないでしょうか。11:48コメント有難うございます。OrangeZELOについては、この作者に直接ご連絡されるほうが良いと思います。以下URLのサイトより、お問い合わせください。Favoriteを発信していく、とあるSOHO会社運営者です。ura-no-ura.com。