HTML / CSS 入門

HTML / CSS入門編(8)(WordPress で CSSを使う)


パソコンを操作する女性

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ!

【第8回】では、複数の記事(ブログ全体)で同じ装飾を使いまわす方法を紹介します。

class 属性& <style> タグは、記事を飛び越えて使える

前回(第7回)、class 属性で「クラス名」を使うことで、<style> 指定を一か所で記載できることを紹介しました。

共用利用イメージ(記事内)

一か所変えると、全部に一気に反映できる気楽で便利なワクワク手法ですが、こちらは、複数の記事をまたいで指定することもできます!

■ 複数の記事をまたいでクラス名を利用するイメージ

共用利用イメージ(複数記事)

「記事1」と「記事2」をまたいで同じクラス名で指定しておくと、共通でスタイルを指定できる場所 で装飾を指定することができます。

スタイル(装飾)を1か所変えるだけで、ブログ全体(すべての記事の)同じクラス名の装飾をすべて同時に変更することができて便利です。

■ 複数の記事をまたいでクラス名を利用する方法

Step.1 記事の中で特定の文章にクラス名を付けて書く

各記事の中で、特定の装飾をしたい文章を、任意のクラス名を付けて記載します。

こんにちは、

<span class="name1">■ここが span の範囲です■</span>

こんにちは、

Step.2 共通の場所に装飾を指定する

共通の場所で装飾を指定します。共有の場所は、WordPress の 「追加CSS」です。

追加CSS画面

WordPress の管理画面から、[外観] → [カスタマイズ] → [追加CSS] をクリックします。

追加する装飾(クラス名+装飾の内容)を記述します。

ここに書いた内容は、ブログの中の記事すべてに反映します。

完成です!

共通で利用する応用例

■ 例)下線蛍光マーカーを記事中で利用する

記事内で文章をクラス名で指定することで、あらかじめ [追加CSS] で装飾を定義した装飾を使いまわすことができます。

下線蛍光マーカーを使ってみます。

ポイント

「下線蛍光マーカー」 を利用する方法です。

Step.1 共通の場所に装飾を指定する

WordPress の管理画面から、[外観] → [カスタマイズ] → [追加CSS] をクリックして、次のサンプルを記載し保存します。

.UnderMarkerPink {

    font-weight:bold;

    background: linear-gradient(transparent 70%, #ffd7f7 30%);

}

  • クラス名は 「UnderMarkerPink」にしました。(そのままです)
  • <style> タグの記載は不要です

Step.2 記事内で下線蛍光マーカー(ピンク)を利用したい場所にクラス名を指定する

「カスタムHTMLブロック」を用いて、記事内の下線蛍光マーカー(ピンク)を使いたい文章を <span> タグで括ります。

こんにちは、

<span class="UnderMarkerPink">■ここが span の範囲です■</span>

こんにちは、

Step.3 完成です

完成です。

ブログ内のどこの記事でも、span class="UnderMarkerPink" で括った文章では、下線蛍光マーカー(ピンク)引いて表示します。

ポイント

こんにちは、 ■ここが span の範囲です■ こんにちは、

CSS(Cascading Style Sheets)

本記事で開設した装飾の方法は、「CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)」です。

いままで、HTML入門編と言いながら、CSSも紹介していました!

しかし、CSS と聞くと先に「難しい」と思って学習が止まる方もいらっしゃるかと思いますが、

HTML やってるつもりが、CSS も一緒に覚えちゃいましたね(^^)/!

今回(第8回)から、タイトルを、「HTML / CSS入門編」にさせて戴きます!

今後ともよろしくお願いします!

まとめ

記事の中の文章の装飾は、クラス名を使うことで、WordPress の「追加CSS」で共通で指定することができます。

  • 共通で指定すると、一か所の指定ですべての記事に反映します

「蛍光色のピンクだったけど、ショッキングピンクに変えたい場合」などに、すべての記事を一つづつ開いて変える必要はなく、(追加CSSの)一か所修正するだけで全体に反映させることが可能です。

「ショッキングピンク」に変えることは無いと思いますけどね!

「WordPress で HTML / CSS を使う」一覧はこちらをクリック!










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




Presented By Irojiro Haraguro .Com