プラグインにはclass名かid名をつけておきましょう のススメ ( ﾟДﾟ)ﾉ
くらす？あいでぃー？なにそれ (▪⌔▪)
という方へ向けてもご説明。
クラスやアイディーが必要な理由
装飾対象の特定を容易にするため です。装飾というと「ボーダーをつける」「背景に色をつける」などと思いがちですが、「テキストの位置指定を左寄せ以外に変更する」「文字のサイズを変更する」なども装飾です。
class属性とid属性
class="xxx" がクラス属性、id="xxx" がアイディー属性です。挟まれている属性値 xxx の属性名が class ならばxxxはクラス名です。属性名が id ならばxxxはアイディー名です。
クラスとアイディーを簡単にいうと グループ特定や個人特定のためにつける名前 です。
webページを学校に例えるとページ管理人は校長先生。たくさんの権限を持っています。クラスとは、1年1組 あるいは 2年2組... といった読んで字のごとく クラス割り振り。アイディーとは、「山田花子」「田中五郎」といった 個人名 と例えれば良いと思います。
校長が「1年1組の生徒は手を挙げてください」と言えば、1年1組に属する全ての生徒が手を挙げることになります = 複数
では「山田花子さん 前に出てください」と言ったならば、どこのクラスかはわかりませんが 山田花子という名前の生徒だけが前に出ます = 単数
classは「所属グループ名」idは「個人名」と置き換えても良いですね。
・同じclass名を持つ要素が複数存在しても良い
・同じid名を持つ要素が複数存在してはいけない
なんで同一id名が同ページにあってはいけないかというと、例えば校長が「田中五郎君こちらへ来てください」と言ったとき「先生 田中五郎は3人居ますが どの田中五郎ですか？」ってことになっちゃう。まあ 現実の世界では同姓同名はいくらでも居るわけですが。webの世界のアイデンティティというのは複数あっては都合が悪いわけです。
OK
<div class="tanaka"><div> <div class="tanaka"><div> <div class="tanaka"><div>
NG
<div id="tanaka"><div> <div id="tanaka"><div> <div id="tanaka"><div>
webページの見た目というのは簡単に説明すると、いくつもの四角形の集まりです。たくさんの四角形のどれを命令(CSS装飾)の対象にするのか特定しないと始まりません。そしてさらに四角形の中にあるいろんな細々した物の中の どれにその命令を下すのか。CSSというのはレンダリング(描画)の際に マッチング という作業が行われます。マッチングというのはソースコードに記載されている命令とその対象とを結びつける作業です。それがつまり 要素の特定 ということですね。
同じ装飾をいくつもの対象に与えるのならば class名を。たったひとつの要素だけに与えるのならば id名を、それぞれ使い分けながらコードを書いていくわけです。
初心者は無理にidを使わずに classを利用すると良いと思います。クラスに生徒が一人しか居なくても構いません。必ずしも複数なければいけないわけではありません。
ですからclassを使った方が柔軟な対応ができます。
FC2プラグインの仕様
対象の特定ができないとCSS装飾ができませんよ、というのが先ほどの内容ですが、FC2のプラグインとして登録されている内容はそれがとっても難しいんです。
テンプレート製作者がテンプレート利用者の所有しているプラグインを事前に把握することは不可能です。FC2はユーザーの選択肢がとっても多いですよね。つまり皆が皆同じプラグインを利用しているわけではありません。
どうやって表示を行っているかというと FC2独自変数 というのを用いています。「プラグインを出力してくださーい」といった内容をhtmlに記載しておくと FC2の独自プロトコルで登録プラグインを自動で抽出・表示してくれます。
従ってプラグインは カテゴリ毎にまとめて出力されます。
たまにこういったリクエストがあるんですけども ↓
「プラグインカテゴリ1の3番目のものだけこうしたい」
「プラグインカテゴリ2のいくつかだけ別の装飾にしたい」
これテンプレ製作者では無理です。だってわからないから。
その3番目がサイト内検索なのか アフィリエイト広告に関するものなのか、はたまた外部の音楽ブログパーツであるのか
それは私たちではわからない。
といった事情で
「プラグインカテゴリ1に属するものは装飾Aを適用」
「プラグインカテゴリ2に属するものは装飾Bを適用」
「プラグインカテゴリ3に属するものは装飾Cを適用」
あるいは
「プラグイン全部装飾Aで揃える」
こういった指定になってきます。
テンプレ製作者ではプラグイン群の特定プラグインを把握することはできませんが、ページ管理人ならば特定できます よね。どうやるかって 先ほどの class名・id名を使えば良いんです YO
class/ id の名前はweb共通で決まったものがあるわけでなく個人が任意で付けられます(ルールはあります 後述)
それこそある程度好き勝手に付けられるわけだからテンプレ製作者側での把握は無理ですよね。というわけで個人カスタマイズの領域になります。
ここ大事。classやidがついていないプラグインを特定するのは無理！ CSSには「一番最初のものだけ」とか「三番目のものだけ」と言った指定もできるにはできますが、プラグインの順序変えちゃったら全部狂ってしまいます。ですからこのやり方は下の下の手。上策なのは class/ idでの確実なマッチングを行うことです。
class/ idの名前の付け方ルール
ある程度自由な文字列が可能ですが、ルールというものは存在します。
class/ id 共通ルール
- 文字列最初の一文字が数字はNG (文字列途中の数字はOK)
- スペース(半角・全角共に)を含めるのはNG
- 文字列中にハイフン(-), アンダースコア(_) 以外の記号を用いるのはNG
- 日本語などの全角はNG(これはビミョーですが 基本ルールとしては✕)
- 既に使われている文字列を重複させたら自分が泣く事になる
これから実際にclassやidを振ろうと思われます方は上記ルールに則ったものをつけましょう。
1 の最初の一文字縛り
NG
123aiueo
OK
aiueo123
aiu123eo
2 のスペースに関して
id名は唯一無二のアイデンティティですから複数の要素に同一もいけませんし、一つの要素に複数つけてはいけません。class名の方は複数要素への名付け及び 一つの要素に複数の名付けをすることもできます。記述ルールは 半角スペースを挟んでいるものは別のクラス名 = 複数クラス
<div class="tanaka yamada"></div>
上記は tanaka というclass名と yamada というclass名の2種のclass名を持っている、という解釈になります。ですからひとつのclass名のつもりで 田中五郎(tanaka gorou)
<div class="tanaka gorou"></div>
と こう書いてしまうと、tanaka と gorou という2つのclass名だということになってしまいます。従ってスペースの利用は絶対的NG。
3 の記号縛り
web上で記号を使用すること自体注意が必要なのですが、class/ id名ではハイフン・アンダースコア以外の記号は使わない と思っていた方が良いと思います。実際は使える記号ってあるんですけどね。ちょっと小慣れてくると使いたくなったりするんです。webデザイナーさんなんかはわざと顔文字入れたりする方も。ですがここは素人 無理はしない(笑)
ハイフンとアンダースコアは意味がちゃんと存在します。
ハイフン --- 単語の「区切り(区分)」
アンダースコア --- 単語の「連結」
i-am-very-happy
これは i, am, very, happy という4単語を繋いでいますが それぞれ別の単語です。
i_am_very_happy
これは4単語を連結して一つの単語形成としています。
各種アカウントやメールアドレスなどはアンダースコアの利用をおすすめします。連結して一語なのですから予測が付け辛いですよね。ハイフンのメアドの方が迷惑メール受信率は高いと思います。
ちなみに上記の i-am-very-happy と i_am_very_happy
共にclass/ id名として採用することが可能です。
他にもキャメルケースという方法があります。
iAmVerryHappy
単語の最初の文字を大文字にして単語の区切りをわかりやすくしています。このパターンもOKです(推奨ではないらしいが)
4 は裏ワザ的に使えまして、私も実際使っています。
ここではスルー ^^;
5 重複名称 これ大変重要です。
名付けのポイント
意味が通り覚えやすく かつ 既に使用されているものとバッティングしない名称をつけること
重複については同じ名前のものに同じ装飾が適用されるわけなので 名前が同じだったら同じになっちゃいます。全然関係ない部分に指定してある命令の影響を受けてしまうということです。これとっても注意が必要ですね。
意味が通る名前 については、例えば重複を恐れて
wtwolwrew9y12342rfew
みたいにデタラメな文字列を付けてしまうとメンテナンスできなくなります。自分で覚えられるの？ (´・ω・｀) ってやつです。
名前がわからないと探しようがありませんので、自分で覚えやすく 仮に忘れてもなんとなく見当の付けられる名称が良いですね。
重複しやすい名称をざっと挙げておきます。
container
primary
wrapper
header
footer
navigation
main
extra
section
entry
post
column
primary-column
primary_column
secondary
secondary-column
secondary_column
tertiary
tertiary-column
tertiary_column
sidebar
side-bar
side_bar
このあたり危険ですので避けましょう。
まとめ
事前にclass/ id名をつけておくことで本来は特定しにくいプラグイン登録内の要素も特定することが可能になります。プラグインだけでなく ブログ村などのランキングボタン関連 など。毎回貼り付けを行っている方は 数種のボタンをひとまとめのグループにしてあると思います。
<div> <a href="#">ランキング1</a> <a href="#">ランキング2</a> <a href="#">ランキング3</a> </div>こんな感じかしら (´・ω・｀)
これを
<div class="ranking-group">
<a href="#">ランキング1</a>
<a href="#">ランキング2</a>
<a href="#">ランキング3</a>
</div>
こうしておくと良いですね。仮にこれまで左寄せにしていたランキングボタンをセンタリングしたいと思った時にはスタイルシートに
.ranking-group {
text-align: center;
}
と書き足すだけで過去の掲載分も全て書き換えることができます。逆の言い方をすれば、classやidが無い場合の一括書き換えはほぼ無理
早めにやっておいた方が良いですよ。記事はどんどん増えていきます。過去記事は諦める
な憂き目に遭わないためにも今！すぐ！ほれ！
みたいな (((ง'ω')و
There are no comments yet.