どこをいじったらCSSが変更できるか、という話です。
私は色々いじって、何度も見て確認して、
間違ってたら戻して…というやり方です。
雰囲気でやってしまうタイプ。
でも、ちゃんとclassやidの場所を知っておくのも大事。
CSSをカスタムする前に。classやidについて
ブログやWEBサイトを作る上で楽しいのは、
CSSをカスタムしてキレイなサイトに見せる事。
色を変えたり、形を変えたり出来ます。
今回は、WordPressのStinger5（テーマ）における、
classとidの位置について。
CSSにおけるclassとidの違いは何だろう？
ちなみに、classとidとは、
どちらもCSSを指定する時につける名前のようなものです。
HTML内にこの指定した名前を載せると、
CSSに記述したとおりのカスタムを表現してくれます。
どちらを使うべきか。
基本的にはclassを使えば良いです。
idは、テーマを作成する時とかに使用するのかも？
両者には大きな違いがあります。
class…同じページ内にて、何度も使える
id…同じページ内で一度しか使えない
ややこしいのですが、
１ページ内に、同じCSSを指すように、
HTML内に複数の箇所に指定を入れられるのがclassです。
ややこしいので、もうこのへんで。
WordPressテーマStinger5の構造を知る
まぁ何となくで良いので、理解しておくと良いです。
参考になるサイト
Stinger5カスタマイズ！最新版class,id構造早見表 -トップページ編-
まず押さえておいて欲しい事があります。
idの場合は、CSS上で、前に # がつく。
ちなみにclassの場合は、前に . がつく。
という事です。
サイトの一番上のあたり
header.php
サイト名
.sitename
サイト説明文
.descr
ヘッダーの画像
#headimg
ナビゲーション
.smanone
右側（または左側）
sidebar.php
「購読する」の欄
.rssbox
サイト内検索バー
#search
サイドバーに追加する要素
#mybox
サイドバーのタイトル部分
.menu_underh2
NEW POST＝新着記事一覧
#kanren
NEW POSTの記事ひとつ
dl
サムネイル画像
dt
タイトルと抜粋
dd
トップページの記事一覧が表示されている部分
home.php
itiran.php
トップページの要素
#content
#contentInner
#topnews
トップページの記事ひとつ
dl
サムネイル画像
dt
タイトルと抜粋
dd
ddの日付とカテゴリ部分
.blog_info
サイトの一番下のあたり
footer.php
Copyright
.copy
画面全体
#wrapper
以上のように指定されています。
phpの名前と、idやclassの名前が入り混じってややこしいですね。
phpごとに、指定するidやclassがあるんだという感じで理解して下さい。
重要なセクションなので、是非確認してカスタムしたいですね。
ご参考にどうぞ。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク