はじめる!WordPress入門

メニューへのスタイルの適用

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メニューはCSSでデザインしやすいように、さまざまなCSSクラスを出力してくれるので、出力されたHTMLを確認しながらデザインを適用していきます。
講師:
08:18

字幕

このレッスンではメニューにスタイルを 追加していく方法について学習します。 初めにメニュー部分で出力されている HTML を確認してみましょう。 ブラウザーのインスペクターを使えば 調べたい箇所を簡単に調べることが出来ます。 ソースを見ると、サイト名を 表示している h1 の次に メニュー全体を表示するのに menu-global-container という div タグが作成されていることがわかります。 この global の部分は 作成したメニューに付けた 名前が使われます。 ですので、メニュー名は基本的には アルファベットで付けておくのが良いでしょう。 この div の中には更に ul タグで menu というクラスの 要素が作られています。 ul タグの中には1つずつ list タグを使ってメニューが 表示されているのがわかります。 このように WordPress では WordPress 側が自動で表示する HTML に スタイルシートを適用したい場合には 一度出力されているソースコードを調べて 使われているタグや CSS クラス名などを調べてから スタイルシートを記述していきます。 それではエディターに移動します。 style.css を開いて 一番最後に記述を追加していきます。 ヘッダーのメニューは menu-global-container という クラス名が付けられていましたので そこに CSS を適用していきます。 float を使って右寄せにしていきます。 メニューの中の1つ1つの要素は global-container の中にある menu というクラスの 更に中にある list タグによって 表示されていましたので この部分に CSS を 適用していきます。 メニュー1つ1つのリンクは a タグで記述されていますから a タグに対して CSS を記述していきます。 リンクの通常時の表示と マウスオーバー時の表示を 記述していきます。 カテゴリーのメニューの中に表示される カテゴリーリストは 最初は非表示にしておいて マウスオーバーをしている時だけ 表示するようにしたいので、この部分に スタイルシートを適用する必要があります。 カテゴリーのリスト部分が どのような HTML になっているのか もう一度確認してみましょう。 サイトに移動します。 カテゴリーのリスト部分は この部分になります。 見ると、カテゴリーを表示している list タグの中に さらに ul タグがあり sub-menu という クラス名が付けられていることがわかります。 この sub-menu を手掛かりに スタイルシートを 適用していけばいいでしょう。 エディターに移動します。 list タグの中にある sub-menu に対して display: none を指定します。 そして リストにマウスオーバーした時には display: block にします。 sub-menu の中の a タグに対しても スタイルシートを適用していきます。 通常時のリンクと マウスオーバー時のリンクに スタイルを適用していきます。 color と background を指定します。 これでメニューに必要な スタイルシートの記述が終わりました。 保存をしてサイトでの 表示を確認してみましょう。 ページをリロードします。 メニューがデザイン通りに 表示されました。 おっと、メニュー内のテキストの 並びがおかしいですね。 もう一度スタイルシートを編集します。 sub-menu の中の list タグの持ち揃えがおかしかったので sub-menu の中の list タグに対して text-align: left と display: block を 指定します。 もう一度、表示を確認してみましょう。 正しく表示されました。 このレッスンではメニューへの スタイルの適用方法について学習しました。

はじめる!WordPress入門

ブログ作成ツールやCMSとしてもっともポピュラーなWordPressを使えば、ブログだけでなく一般的なサイトでも簡単に無料で作ることができます。このコースでは初めての方を対象にWordPressをインストールから実際のサイト構築まで丁寧に解説していきます。

7時間01分 (89 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 3,990
発売日:2014年01月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。