ＢＢＣ Themes

昨日、公開した「コピペで使えるcss3の基礎から小技厳選７個」ですが、どの様に自分のブログに追加すればいいのか解らない、というメールを頂きましたので、一番簡単に、ブログに新しいスタイルを適用させる方法をご紹介します。

自分のブログのスタイルシートを見る

まず、ワードプレスのダッシュボードにログインして、外観から「テーマ編集」をクリックします。
theme1

すると、下記の図のようにスタイルシート（CSS）の画面が表示されます。

一番下までスクロールして
スタイルシートの編集1

この下に、追加するスタイルをコピペすれば良いだけです。
スタイルシートの追加
コピペが出来れば「ファイルを更新」をクリックします。

以上で、新しいスタイルシートが出来たわけですが、それだけではブログの記事にそのスタイルが適用されません。
次に、そのスタイルを適用したい記事を開きます。
スタイルシート適用

現在書いている記事ですが、ここに追加したスタイルを適用したいと思います。
スタイルシート適用前

pの後に半角でスペースを空けて =”sample sample1″と入力します。
↓ スタイル適用後 ↓
スタイルシート適用後
角丸枠線が、表示されていますね。

注：テーマによっては、投稿画像「img」にボーダー（例　border: 1px solid #ccc;）が付与されている物もあります。その場合には、画像の要素「img」に直接スタイルを追加します。
例：<img src=”http://○○○” 中略 class=”sample1 後略” />

例では<p> 〜 </p>というhtml要素にスタイルを適用しましたが、
<div class=”sample sample1″> 〜 </div>で囲んで適用することも出来ます。

セレクタ名を変更する

「コピペで使えるcss3の基礎から小技厳選７個」で書いたセレクタ名ですが、ここではサンプル名として「.sample」としています。このままでも構わないのですが、独自のセレクタ名に変更することをお薦めします。
CSS記述サンプル
この .sample と指定してる部分、つまり何に { } 内のCSS命令を適用するか選択（セレクト）する部分をセレクタと呼びます。

セレクタ名に使える文字

セレクタ名に使える文字は、半角英数字と
記号は「-」（ハイフン）、「_」（アンダースコア）です。
「 . 」の次の最初の1文字目が半角英字であれば、2文字目以降は英字・数字どちらでもOKです。

ご自分の解りやすい名前を付けていいのですが、その際今使っているテーマのCSSで既に定義されているかどうかを確認してください。
ダッシュボード＞外観＞テーマ編集＞からスタイルシートの画面を開き、「 Ctrl + F 」macでは「 command + F 」で検索できます。

＊ここで使われていないセレクタ名を使用してください。

このページをご覧になっている方なら、CSS（カスケーディング・スタイルシート）という言葉は知っていると思います。
知らない方の為に簡単に説明すると、CSSはフォント・色（カラー）・形（すき間）・背景画像等、レイアウトを指定する言語です。

＊ちなみに、htmlは文書構造を指定する言語です。

ワードプレスでは、記事を作成する際に「h2, h3, strong, img, a href（リンク） etc.」等を使われると思いますが、その部分がhtmlにあたります。
cssはそのhtml部分をどの様なレイアウト（形・大きさや位置等）でブログ上に表示させるかを担当しています。

また、最近はCSS3という言葉もお聞きになったことがあると思います。聞いたことはあっても

それがいったい何なのか？

これまでのCSSとどう違うのか？

は、よくわからないという方が多いかも知れません。

CSS3の機能とブラウザの対応

CSSは、HTMLコンテンツ内の情報の見え方（CSSの名前の通り”スタイル”ですね）を様々に調整することを可能にしてきました。フォント、色、背景画像、境界線などは、既存のCSSスタイルで簡単に設定できます。CSS3の機能も、これまでのWebの機能から大きく逸脱するものではなく、ブラウザーの機能を強化・拡大して、HTMLコンテンツに対するよりリッチな機能とリッチな表現をサポートすることが目的です。

各ブラウザに対応させる、ベンダープレフィックス

CSS3で採用される予定の機能が、各ブラウザで先行実装されていますが、それらの機能を動作させるには、現状ではプロパティの先頭に
「-webkit-」や「-moz-」などのベンダープレフィックスを付ける必要があります。

HTML5やCSS3の機能のなかでも最新のものは特に、ブラウザのサポート状況を参考にしながら使うべきだと思います。「Can I use…」をフルに活用して、ユーザにとってより一層フレンドリーなブログを作って下さい。

css の記述は下図のようにしますが、名称だけ覚えておいて下さい。 CSS記述サンプル

角丸を表現する：border-radius

今まで画像を使って角丸を表現していた部分を「border-radius」を使用する事で簡単に角丸を表現できるプロパティです。要素の角を丸くすることにより、Web サイトに洗練された印象を加えることができます。

角丸：border-radius

.sample で、基本となるボーダー（枠）を作成しています。
.sample1 が角丸指定です。

.sample {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    }

.sample1 {
    -webkit-border-radius: 10px;   /* Safari, Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
    border-radius: 10px;   /* CSS3草案 */
    }

.sample {

border: 1px solid #ccc;

padding: 10px;

text-align: center;

}

.sample1 {

-webkit-border-radius: 10px; /* Safari, Chrome用 */

-moz-border-radius: 10px; /* Firefox用 */

border-radius: 10px; /* CSS3草案 */

}

角丸の半径は左上から時計回りで、サイズ指定できます。
例：border-radius: 10px(左上) 20px(右上) 5px(右下) 30px(左下);
１つのみ指定すると、全てに適用されます。

border-radiusで円を描く事も出来ます。

.circle {
    background-color: #33cccc;
    height: 150px;
    width: 150px;
    -webkit-border-radius: 75px;
    -moz-border-radius:75px;
    border-radius:75px;
    }

.circle {

background-color: #33cccc;

height: 150px;

width: 150px;

-webkit-border-radius: 75px;

-moz-border-radius:75px;

border-radius:75px;

}

border-radius: で幅と高さを画像の半分で指定してやれば良いだけです。写真の加工などにいいですね。

円を描くテスト

ボックスに影をつける：box-shadow

勿論上記のborder-radiusと組み合わせることも出来ます。

ボックスに影をつける：box-shadow

.sample2 {
    padding: 10px;
    text-align: center;
    -webkit-box-shadow:rgba(113, 135, 164, 0.6) 0px 0px 6px 3px;
    -moz-box-shadow:rgba(113, 135, 164, 0.6) 0px 0px 6px 3px;
    box-shadow:rgba(113, 135, 164, 0.6) 0px 0px 6px 3px;
    }

.sample2 {

padding: 10px;

text-align: center;

-webkit-box-shadow:rgba(113, 135, 164, 0.6) 0px 0px 6px 3px;

-moz-box-shadow:rgba(113, 135, 164, 0.6) 0px 0px 6px 3px;

box-shadow:rgba(113, 135, 164, 0.6) 0px 0px 6px 3px;

}

box-shadow: (カラー, 水平方向, 垂直方向, ぼかし距離, 広がり距離)

影になるカラーはrgbaで指定「16進数形式をRGB, RGBAに変換」すると、色に透過を加えることが出来ます。（サンプルは透過率：0.6=60%）

水平方向の影：正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
垂直方向の影：正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
ぼかし距離：負の値を指定することはできません。値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
広がり距離：正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。

線形グラデーションを指定する：linear-gradient

linear-gradient（線形グラデーション）は、background-imageプロパティや list-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされています。

線形グラデーションを指定する：linear-gradient

.sample で、基本となるボーダー（枠）を作成しています。
.sample3 が線形グラデーション指定です。

.sample {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    }

.sample3 {
    background: -webkit-linear-gradient(top, #ccc, #fff);
    background: -moz-linear-gradient(top, #ccc, #fff);
    background: linear-gradient(top, #ccc, #fff);
    }

.sample {

border: 1px solid #ccc;

padding: 10px;

text-align: center;

}

.sample3 {

background: -webkit-linear-gradient(top, #ccc, #fff);

background: -moz-linear-gradient(top, #ccc, #fff);

background: linear-gradient(top, #ccc, #fff);

}

グラデーションラインとそれに沿って配置される複数の色を指定します。
linear-gradient(開始位置(top, bottom, left, right), 開始色, 途中色, 終了色);
サンプルでは、開始色と終了色だけ指定しています。

円形グラデーションを指定する：radial-gradient

radial-gradient（円形グラデーション）も、background-imageプロパティや list-style-imageプロパティなど、画像を扱うことのできるどのプロパティにも指定できる値とされています。

radial-gradient

.circle3 で、border-radiusで作成した角丸の円を利用します。
.sample4 が円形グラデーション指定です。

.circle3 {
    border: 1px solid #ccc;
    padding: 10px;
    height: 300px;
    width: 300px;
    -webkit-border-radius: 150px;
    -moz-border-radius:150px;
    border-radius:150px;
    text-align: center;
    }

.sample4 {
    background: -webkit-radial-gradient(#ffff66, #ff3333);
    background: -moz-radial-gradient(#ffff66, #ff3333);
    background: radial-gradient(#ffff66, #ff3333);
    }

.circle3 {

border: 1px solid #ccc;

padding: 10px;

height: 300px;

width: 300px;

-webkit-border-radius: 150px;

-moz-border-radius:150px;

border-radius:150px;

text-align: center;

}

.sample4 {

background: -webkit-radial-gradient(#ffff66, #ff3333);

background: -moz-radial-gradient(#ffff66, #ff3333);

background: radial-gradient(#ffff66, #ff3333);

}

radial-gradient(開始色, 終了色); の順に指定します。
開始色は、中心になります。

要素の透明度を指定する：opacity

要素全体を透過させる場合は opacity というプロパティを使います。

まず通常の画像です。

通常の画像

60%の透明度を指定した画像です。

要素の透明度を指定する

使い方は簡単で、セレクタに対して opacity で透明度を指定するだけです。

.sample5 {
    opacity: 0.6;
    }

.sample5 {

opacity: 0.6;

}

リンク時のマウスオーバー「a:hover」などで利用して下さい。

テキストに影（シャドー）を付ける：text-shadow

.sample6 がテキストに影を付ける指定です。
.sample6 span はサンプルで使用した<span>〜</span>で囲んだテキストの指定です。

.sample6 {
    text-shadow: 3px 3px 5px #ccc;
    }

.sample6 span {
    font-size: 20px;
    font-weight: bold;
    color: #ff0000;
    }

.sample6 {

text-shadow: 3px 3px 5px #ccc;

}

.sample6 span {

font-size: 20px;

font-weight: bold;

color: #ff0000;

}

画像を拡大表示する：transition transform

transitionとtransformを組み合わせて、画像に面白い効果を付けることが出来ます。下の画像にマウスを合わせてみて下さい。

ドキッとしましたか？アイデア次第で楽しく使えると思います。

.sample7 {
    width: 400px;
    height: auto;
    max-width: 100%;
    overflow: hidden;
    }

.sample7 img {
    -webkit-transition: -webkit-transform 0.5s linear;
    -moz-transition: -moz-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
    }

.sample7 img:hover {
    -webkit-transform: scale(1.7);
    -moz-transform: scale(1.7);
    -o-transform: scale(1.7);
    -ms-transform: scale(1.7);
    transform: scale(1.7);
    }

.sample7 {

width: 400px;

height: auto;

max-width: 100%;

overflow: hidden;

}

.sample7 img {

-webkit-transition: -webkit-transform 0.5s linear;

-moz-transition: -moz-transform 0.5s linear;

-o-transition: -o-transform 0.5s linear;

-ms-transition: -ms-transform 0.5s linear;

transition: transform 0.5s linear;

}

.sample7 img:hover {

-webkit-transform: scale(1.7);

-moz-transform: scale(1.7);

-o-transform: scale(1.7);

-ms-transform: scale(1.7);

transform: scale(1.7);

}

.sample7 は、画像の指定です。
レスポンシブwebデザインでは max-width: 100%; は必須になります。
.sample7 img は拡大表示させたい画像にクラスを付けます。
例：<div class=”sample7″><img src=”https://bbc-theme.jp/wp-content/uploads/2014/08/girl.jpg” alt=”画像の拡大表示” width=”400″ height=”300″ class=”alignnone size-full wp-image-1961″ /></div>

.sample7 img の「transform 0.5s」はアニメーションのスピード、
.sample7 img:hover の「scale(1.7)」は拡大倍率になります。

これ以外にもCSS3は沢山ありますので、機会があればまたご紹介したいと思います。

9/1　追記：どの様に自分のブログに追加すれば良いのか解らない、というメールを頂きましたので、「ブログにスタイルシートを追加する一番簡単な方法」を公開しました。

スタイルシート | ＢＢＣ Themes

スタイルシート

ブログにスタイルシートを追加する一番簡単な方法

自分のブログのスタイルシートを見る

セレクタ名を変更する

セレクタ名に使える文字

コピペで使えるcss3の基礎から小技厳選７個

CSS3の機能とブラウザの対応

角丸を表現する：border-radius

ボックスに影をつける：box-shadow

線形グラデーションを指定する：linear-gradient

円形グラデーションを指定する：radial-gradient

要素の透明度を指定する：opacity

テキストに影（シャドー）を付ける：text-shadow

画像を拡大表示する：transition transform

feedly で購読

WordPress-BBCテーマ

WordPress記事

著者プロフィール

広告