昨日、公開した「コピペで使えるcss3の基礎から小技厳選７個」ですが、どの様に自分のブログに追加すればいいのか解らない、というメールを頂きましたので、一番簡単に、ブログに新しいスタイルを適用させる方法をご紹介します。
自分のブログのスタイルシートを見る
まず、ワードプレスのダッシュボードにログインして、外観から「テーマ編集」をクリックします。
すると、下記の図のようにスタイルシート（CSS）の画面が表示されます。
一番下までスクロールして
この下に、追加するスタイルをコピペすれば良いだけです。
コピペが出来れば「ファイルを更新」をクリックします。
以上で、新しいスタイルシートが出来たわけですが、それだけではブログの記事にそのスタイルが適用されません。
次に、そのスタイルを適用したい記事を開きます。
現在書いている記事ですが、ここに追加したスタイルを適用したいと思います。
pの後に半角でスペースを空けて =”sample sample1″と入力します。
↓ スタイル適用後 ↓
角丸枠線が、表示されていますね。
注：テーマによっては、投稿画像「img」にボーダー（例 border: 1px solid #ccc;）が付与されている物もあります。その場合には、画像の要素「img」に直接スタイルを追加します。
例：<img src=”http://○○○” 中略 class=”sample1 後略” />
例では<p> 〜 </p>というhtml要素にスタイルを適用しましたが、
<div class=”sample sample1″> 〜 </div>で囲んで適用することも出来ます。
セレクタ名を変更する
「コピペで使えるcss3の基礎から小技厳選７個」で書いたセレクタ名ですが、ここではサンプル名として「.sample」としています。このままでも構わないのですが、独自のセレクタ名に変更することをお薦めします。
この .sample と指定してる部分、つまり何に { } 内のCSS命令を適用するか選択（セレクト）する部分をセレクタと呼びます。
セレクタ名に使える文字
セレクタ名に使える文字は、半角英数字と
記号は「-」（ハイフン）、「_」（アンダースコア）です。
「 . 」の次の最初の1文字目が半角英字であれば、2文字目以降は英字・数字どちらでもOKです。
ご自分の解りやすい名前を付けていいのですが、その際今使っているテーマのCSSで既に定義されているかどうかを確認してください。
ダッシュボード＞外観＞テーマ編集＞からスタイルシートの画面を開き、「 Ctrl + F 」macでは「 command + F 」で検索できます。
＊ここで使われていないセレクタ名を使用してください。
