Article page

by
  • Comment:5
  • Trackback:0

sampleプラグインにはclassかid名をつけておきましょう のススメ ( ゚Д゚)ノ
くらす?あいでぃー?
なにそれ (▪⌔▪)
という方へ向けてもご説明

まず理由ですが

対象の特定を容易にするため

でございます

・クラス名とは?アイディー名とは? [詳しく見る]
・FC2プラグインの仕様 [詳しく見る]
・名前の付け方ルール [詳しく見る]


クラス名とアイディー名


簡単にいうと
「グループ特定や個人特定のためにつける名前」
のことです

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名を使えば良いんです YOemoji

class/ id の名前はweb共通で決まったものがあるわけでなく
個人が任意で付けられます
(ルールはあります 後述)
それこそある程度好き勝手に付けられるわけだから テンプレ製作者側での把握は無理ですよ〜emoji
つまり個人カスタマイズの領域になります

ここ大事
classやidがついていないプラグインを特定するのは無理!

CSSには「一番最初のものだけ」とか「三番目のものだけ」
と言った指定もできるにはできますが
プラグインの順序変えちゃったら全部狂ってしまいます
ですからこのやり方は下の下の手
上策なのは class/ idでの確実なマッチングを行うことです


class/ idの名前の付け方ルール


ある程度自由な文字列が可能ですが
ルールというものは存在します

class/ id 共通ルール
① 文字列最初の一文字が数字はNG (文字列途中の数字はOK)
② スペース(半角・全角共に)を含めるのはNG
③ 文字列中にハイフン(-), アンダースコア(_) 以外の記号を用いるのはNG
④ 日本語などの全角はNG(これはビミョーですが 基本ルールとしては✕)
⑤ 既に使われている文字列を重複させたら自分が泣く事になる


これから実際にclassやidを振ろうと思われます方は上記ルールに則ったものをつけましょう

① の最初の一文字縛り

NG
123aiueo


OK
aiueo123

aiu123eo

など


② のスペースに関して
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名だ
ということになってしまいます
従ってスペースの利用は絶対的NGemoji


③ の記号縛り

web上で記号を使用すること自体注意が必要なのですが
class/ id名ではハイフン・アンダースコア以外の記号は使わない
と思っていた方が良いと思います
実際は使える記号ってあるんですけどね
ちょっと小慣れてくると使いたくなったりするんです
webデザイナーさんなんかはわざと顔文字入れたりする方も
ですがここは素人 無理はしない(笑)

ハイフンとアンダースコアは意味がちゃんと存在します
ハイフン --- 単語の「繋ぎ」
アンダースコア --- 単語の「連結」

i-am-very-happy
これは i, am, very, happy という4単語を繋いでいますが それぞれ別の単語です

i_am_very_happy
これは4単語を連結して一つの単語形成としています

Yahoo!JAPAN ID(アカウント)なんかはアンダースコアしか使えませんよね
単語を連結しておかないとアカウント名特定の手がかりになってしまいます

ちなみに上記の i-am-very-happy と i_am_very_happy
共にclass/ id名として採用することが可能です
他にもキャメルケースという方法があります

iAmVerryHappy

単語の最初の文字を大文字にして単語の区切りをわかりやすくしています
このパターンもOKです(推奨ではないらしいが)


④ は裏ワザ的に使えまして 私も実際使っています
ここではスルー ^^;


⑤ 重複名称 これ大変重要です
名付けのポイント
意味が通り覚えやすく かつ 既に使用されているものとバッティングしない名称
これですね

重複については
同じ名前のものに同じ装飾が適用されるわけなので 名前が同じだったら同じになっちゃいます
全然関係ない部分に指定してある命令の影響を受けてしまうということです
これとっても注意が必要ですね

意味が通る名前 については
例えば重複を恐れて

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って名前の付いてる画像は除外!」
といったことができます
どうやって除外すんの (´・ω・`)
ってのはまた別の話しですので 今はそういう場合に備えての事前準備というのが本旨です

公式プラグインの一部はテンプレート製作者が事前に整形できますが
それはそのプラグインに予めclass/ id名が付いているためです

早めにやっておいた方が良いですよ
記事はどんどん増えていきます
過去記事は諦めるemoji な憂き目に遭わないためにも今!すぐ!ほれ!
みたいな(笑)
関連記事
vanillaice (Akira)
Posted byvanillaice (Akira)

Comments 5

きろろ  
すっごいw

よ~~~~く、理解できました<(_ _)>

もう、このページ、ブクマしておかないとo(_ _o)・・ * ドテッ!

なるほどなぁ……、と素人のきろろは唸るしかありません。
もう一度、プラグインのclass/ id名を確認いたします<(_ _)>

ご丁寧なレクチャー、ありがとうございます<(_ _)>

2016/04/16 (Sat) 00:32 | EDIT | REPLY |   
Akira  
To きろろさん

付けておくと割りとなんとでもなる。
付いてないともうなんともならない(笑)
なので付けておくと後々楽できます ( ゚Д゚)ノ

2016/04/16 (Sat) 11:44 | EDIT | REPLY |   
たぁみぃ  
記事と関係ない質問ですみません><

こんにちは、はじめまして。
限定配布のGraceを愛用させて頂いています。
現在Akiraさんのブログで表示されているテンプレートはGraceをカスタマイズしたものでしょうか?
それとも申請予定のものでしょうか?
というのは私の理想に近いデザインなので是非申請のリクエストをしたいです。
自分で色々やってみまして、今Akiraさんのデザインと似た感じになっていますが全然見劣りしています笑
サイドバーにこういう模様を入れたかったんです〜!
ブログ限定だともっと嬉しいです。
配布が始まるとブロ友さんと取り合い状態になるので笑
よろしければ私のカスタマイズを見てくれたら嬉しいです。
非公開ブログなので鍵コメでアドレスを入れておきます。
勝手言ってすみません、よろしくおねがいします!

2016/04/17 (Sun) 09:32 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2016/04/17 (Sun) 09:33 | EDIT | REPLY |   
Akira  
To たぁみぃさん

ありがとうございます

はい。次回申請予定です。
と、いつもならお返事するのですけれど。
これ違います ^^;
どうしようかなー というところ。
個人的に自分の記事を探しやすいので使っていこうかと (´・ω・`)

ブログ内限定配布にするか、公式へ申請するかも未定です。
(次回申請は別のものを準備中です)
いずれにしても何らかの形で出そうかなとは思っています。
まだ調整できておらず不備だらけですので気長にお待ち下さいませ。

* カスタマイズ拝見致しました。
目指すところが似ている、というか、たぶん同じ(笑)
おそらくお困りだろう、という点については調整を済ませた当該テンプレで解消されると思います。

2016/04/17 (Sun) 11:01 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い