ブログにも役立つ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について書く予定だ。
スポンサーリンク

コメント

  1. コンタクトの送信ボタンが押せず、こちらから質問することをお許し下さい。

    最近ブロガーの有料テンプレート、”OrangeZELO”を購入した者です。これから色々とカスタマイズしようと思っていた矢先に販売終了の告知、解らないことをまとめて製作者にメールするも返答はありませんでした。

    そこでネットで”OrangeZELO”のことを記事にされている方を探し、こちらに辿り着きました。お仕事などでお忙しいとは思いますがお時間があれば以下、教えていただけると幸いです。

    まずはサイドスペースについてです、このエリアの角を丸くしたいと思い、”border-radius”で指定したのですが全く適用されませんでした。因みに

    <div style="padding: 20px 20px 20px 20px;border-radius: 20px;border-color: #dcdcdc; background-color: whitesmoke;">
    本文
    </div>

    の様な簡易なコードをレイアウトコンソールの「HTML/JavaScript」で設置すると普通に表示されます。”テーマ(HTMLの編集)”や”テーマ(カスタマイズ→SCCの追加)”などでは上手くいかない状況です。

    同様にトップのエントリーカードの四隅も丸くしたいのですが上手くいきません。希望している状態の参考画像は以下より、ダウンロードして下さい。

    http://xfs.jp/iIRNq4

    上記を含めて

    ① 四隅が丸くならない
    ② エントリーカードのタグも丸くならない(※)

    ※ エントリーページは丸くなりました
    ※ コードを追記して表示させています

    の2点です、もし解決策があれば是非とも教えて頂けないでしょうか。宜しくお願い致します。

    返信削除
    返信
    1. コメント有難うございます。
      OrangeZELOについては、この作者に直接ご連絡されるほうが良いと思います。
      以下URLのサイトより、お問い合わせください。
      https://blogger-nav.blogspot.com/

      削除

コメントを投稿