cssを指定して表示を変更するやり方

あなたは、テーマ(ワードプレスのブログテンプレート)を自分で作っていますか?
管理人は、以前にも紹介したと思いますが、賢威というテーマを購入して使っています。
ワードプレスが普及したために、有料・無料を問わず、
非常にいいテンプレートが出回っているので、
イチからテーマを作ったという人は、むしろ珍しく、
何かしらのテーマを応用して、サイトを運営している人が多いんじゃないでしょうか?

もちろん、管理人もその一人です。
今日は、そんな人に役立つ記事だと思います。

表示が思い通りにならなくてイライラ。。。

昨日まで、関連記事リンクを作るという内容についてご紹介してきました。
っで、実際に作って表示させると。。。

cssoptimize001

こんなふうに表示されます。これは、htmlでunorderのlistタグで表示させています。
リンク表示を並べる時は一般的かな。。。と思います。

まあ、これでもいいんですが、赤四角の部分がちょっと気に入らない。
文章と横のキャプチャが下ぞろえになっていますよね。
これを真ん中にしたいんです・・・。

っで、こういうデザインってCSSでコントロールされてるはずなんですが、
CSSと聞くと、管理人はドキッとします。

今まで、適当にしのいでてきて、あんまり勉強してないから。。。
っで、勉強しなくても何とかなったから。。。
そういう人って、意外と多いのでは。

まず、理解すること

CSSを触るときに、考えることは大きく分けて2つです。

  1. どこで?
  2. 何をするか?

どこで?を考える

CSSを触る前に必ず管理人が、読み直すページがこれ

スタイルシートの class と id の使い分け [ホームページ作成] All About

classとidで場所を指定するってのが基本です。
っで、classは種類で、同じページでも何度か使える。
idは、指定で同じページでは1か所のみ。

っで、2つで指定した場所の限定範囲が狭いほうが適用される。
cssは確かそんなルールでしたよね。

これは、かなり大事な情報です。
それと、もう一つ。いじりたい場所が、ページ上のどこなのか?を特定しなければいけません。
これは、非常に便利なツールがありますので後述します。

何をするか?

これはウェブに聞きましょう。
本当にありがたいことなのですが、

phpやhtml,cssの悩みはたいていの場合、解決してくれている先輩がいます

今回の管理人の悩みで言えば。。。
「html li 高さ 中央 css」などで検索すると、

高さの異なる画像リストを上下中央に配置する – emuramemo

と画像つきのリストタグについて、中央にそろえる方法を紹介してくださっているページがあります。
ありがとうございます。

表示をさせるCSSの場所はどこだ?

っで、表示させる場所を具体的に探します。
これは、ブラウザに便利な機能があります。
管理人が使っているのは、chromeなので、chromeの機能を紹介。

cssoptimize002

いじりたいケースのページの場面を表示し、「f12」キーを押します。

cssoptimize003

すると、画面下部にこんな表示が出てきます。
下部の左の画面は「Elements」。右の画面は、「Styles」のタグを押しましょう。

っで、次に下部左画面にマウスのポイントを合わせてみてください。

cssoptimize004

っで、下部左側のhtml部分に合わせると、青くなったり、ポイントがついたりして、
この部分がどこを表しているか、視覚的にわかるようになっています。
さらに、右側ではそれに対応するCSSが表示されます。

そこで調べていくと、目的部分のimgタグには特にcssが指定されてないことがわかりました。
そこで、この部分のdivタグにid=”relate”を加えて、

#relate img {
    vertical-align: middle;
}

を、該当cssファイルに加えることで。。。

cssoptimize007

無事に目的の表示を達成することができました。

google広告

コメントを残す

*

このページの先頭へ