あなたは、テーマ（ワードプレスのブログテンプレート）を自分で作っていますか？
管理人は、以前にも紹介したと思いますが、賢威というテーマを購入して使っています。
ワードプレスが普及したために、有料・無料を問わず、
非常にいいテンプレートが出回っているので、
イチからテーマを作ったという人は、むしろ珍しく、
何かしらのテーマを応用して、サイトを運営している人が多いんじゃないでしょうか？
もちろん、管理人もその一人です。
今日は、そんな人に役立つ記事だと思います。
表示が思い通りにならなくてイライラ。。。
昨日まで、関連記事リンクを作るという内容についてご紹介してきました。
っで、実際に作って表示させると。。。
こんなふうに表示されます。これは、htmlでunorderのlistタグで表示させています。
リンク表示を並べる時は一般的かな。。。と思います。
まあ、これでもいいんですが、赤四角の部分がちょっと気に入らない。
文章と横のキャプチャが下ぞろえになっていますよね。
これを真ん中にしたいんです・・・。
っで、こういうデザインってCSSでコントロールされてるはずなんですが、
CSSと聞くと、管理人はドキッとします。
今まで、適当にしのいでてきて、あんまり勉強してないから。。。
っで、勉強しなくても何とかなったから。。。
そういう人って、意外と多いのでは。
まず、理解すること
CSSを触るときに、考えることは大きく分けて２つです。
- どこで？
- 何をするか？
どこで？を考える
CSSを触る前に必ず管理人が、読み直すページがこれ
スタイルシートの class と id の使い分け [ホームページ作成] All About
classとidで場所を指定するってのが基本です。
っで、classは種類で、同じページでも何度か使える。
idは、指定で同じページでは１か所のみ。
っで、２つで指定した場所の限定範囲が狭いほうが適用される。
cssは確かそんなルールでしたよね。
これは、かなり大事な情報です。
それと、もう一つ。いじりたい場所が、ページ上のどこなのか？を特定しなければいけません。
これは、非常に便利なツールがありますので後述します。
何をするか？
これはウェブに聞きましょう。
本当にありがたいことなのですが、
phpやhtml,cssの悩みはたいていの場合、解決してくれている先輩がいます。
今回の管理人の悩みで言えば。。。
「html li 高さ 中央 css」などで検索すると、
高さの異なる画像リストを上下中央に配置する – emuramemo
と画像つきのリストタグについて、中央にそろえる方法を紹介してくださっているページがあります。
ありがとうございます。
表示をさせるCSSの場所はどこだ？
っで、表示させる場所を具体的に探します。
これは、ブラウザに便利な機能があります。
管理人が使っているのは、chromeなので、chromeの機能を紹介。
いじりたいケースのページの場面を表示し、「f12」キーを押します。
すると、画面下部にこんな表示が出てきます。
下部の左の画面は「Elements」。右の画面は、「Styles」のタグを押しましょう。
っで、次に下部左画面にマウスのポイントを合わせてみてください。
っで、下部左側のhtml部分に合わせると、青くなったり、ポイントがついたりして、
この部分がどこを表しているか、視覚的にわかるようになっています。
さらに、右側ではそれに対応するCSSが表示されます。
そこで調べていくと、目的部分のimgタグには特にcssが指定されてないことがわかりました。
そこで、この部分のdivタグにid=”relate”を加えて、
#relate img {
vertical-align: middle;
}
を、該当cssファイルに加えることで。。。
無事に目的の表示を達成することができました。
