FC2プラグインにclass名やid名を付けた方が良い理由

FC2プラグインにclass名やid名を付けた方が良い理由

カスタマイズ
2016/04/15 12
vanillaice (Akira)
vanillaice (Akira)
Education HTML 初心者向け

プラグインには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 共通ルール

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

これから実際に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が無い場合の一括書き換えはほぼ無理

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

 12

There are no comments yet.
きろろ
すっごいw

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

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

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

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

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

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

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

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

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

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

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

ありがとうございます :)

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

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

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

2016/04/17 (Sun) 11:01
みいたむ
ランキングボタンの件

Akiraさん こんにちは~~。
「ランキングボタンをいちいち記事の最後に一件ごとに貼り付けないで、テンプレート内でどうにかしときたい件!」は素人ながらにめんどくさいことは一切やりたくない派なので最初に思っていて、やり方をずーーーっと調べていたらこちらを発見しました!!よかったーーー。たすかりました、ありがとうAkiraさん。
で、やってみたんですけど、場所あってますか?(しらっと)←わーー言っちゃったなかなか言い出せなかったけど。
みてほちーーのおねがい、がんばったあたい(笑)←あつかましさ増量中。。
ごめんなさい。以後、慎みます。。

HTMLはここに入れてみた。↓↓
<!--/more-->
<div class="ranking-group">
<a href="こっから先はブログランキングのあれ

スタイルシートは一番下に入れた
.ranking-group {
text-align: left;
margin-top:50px;
}
で、おうかがいしたいのは自分で入れ込んでしまったmarginの使い方これであってますか?
記事とボタンの間を離したいの。。私の解釈はこれでいいのかなあ?

2018/08/29 (Wed) 13:35
vanillaice (Akira)
Akira
To みいたむさん

こんばんは (o'ω')ノ

バッチリ合ってますよ。marginも正しく動作しています。
みいたむさんは「関連記事リスト」を非表示にしているのですね。
仮に今後表示させた場合には期待する位置に表示されないかもしれません。
その場合には以下の記事をご参照くださいね。

https://vanillaice000.blog.fc2.com/blog-entry-220.html#about-ranking-banner

2018/08/29 (Wed) 23:36
みいたむ
To Akiraさん

ありがとうございます。よかった。。

「関連記事リスト」が非表示??ですか、、、そんなことした覚えは、な、い、のですが
そもそも関連記事リスト、関連記事リスト、、うーん、それって・・・・
なんじゃらほい!笑(あクチがすべった)

参照記事ありがとうございます。ここはまだ読んでいませんでした。
Akiraさんの記事面白くて楽しいです。海外の人はテキストを無意味に改行したり
しない云々の記事は笑いました。気をつけよう〜日本独自の文化なんですねえ。。

海外ドラマネタも読んでみたいなあ。

2018/08/30 (Thu) 00:14
vanillaice (Akira)
Akira
To みいたむさん

こんにちは (●'0'●)/

関連記事リストは
https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2
「個別ページの記事下」に設定しておくと同じカテゴリの記事がリスト表示されますよ。
「リストにアイキャッチ画像を表示する」にしておくとサムネイル画像も出ます。

日本の改行って独特ですよね。というか単語間スペースが無くどこでも折り返してしまうので意図的に改行しないと読み難い言語だからでしょうね。

compromiseが出てくる歌
〝Tears, they only compromise. There's no need to visualize.〟

https://www.youtube.com/watch?v=zTqYGpqS-XE

この曲好き ( ◞´•௰•`)◞

2018/08/30 (Thu) 16:01
みいたむ
To Akiraさん

関連記事リスト理解しました笑。
これか。(同じテンプレートを使っている人さまのブログを
ちらっと拝見した)
表示、非表示の方法もわかりました
まだ試してみてないですけど笑

でわ〜〜〜。

2018/08/30 (Thu) 16:02
みいたむ
To Akiraさん

あ、、遅かったみたい。また迷惑かけてしまった、、

2018/08/30 (Thu) 16:05
vanillaice (Akira)
Akira
To みいたむさん

いえいえ。迷惑かけられたことなど一度も無いです(笑)
コメントの行き違いはよくあることです(笑)

2018/08/30 (Thu) 16:08

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ