ステップアップ!WordPress中級

ヘッダーのカスタマイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダー部分のカスタマイズを行う方法を解説します。
講師:
13:54

字幕

このレッスンでは 子テーマを使った ヘッダーのカスタマイズについて学習します 今 このサイトは TwentyTwelve テーマを 親テーマとした 子テーマでサイトを表示しています 今 このヘッダーの部分は TwentyTwelve の header.php を 使って表示されています このヘッダーを カスタマイズしてみます それではエディターを開きます 最初に子テーマの中に カスタマイズするための header.php を作成します これで新しくサイトのヘッダーには テーマの中に作った この header.php の 内容が表示されるようになります header.php を 一から書いてもいいですし TwentyTwelve の テーマ内にある― header.php をコピーして 使ってもかまいません ここではコピーをして 変更していきたいと思います 不要な部分を削除していきます このように子テーマを使うことで 例えば HTML の こういった head 当たりの 記述ですとか そういった余計な部分を 自分で書くことなく サイトのデザインに必要な部分だけを 書いていけるというのは 一つの子テーマを使う メリットだと思います h1 タグでサイト名が表示されてます 実際にブラウザで確認してみましょう ウェブのインスペクターを使うと ヘッダーの中の h1 site-titleという クラス名で指定されています このサイト名を画像で 表示してみたいと思います あらかじめ― 子テーマのフォルダー内に 画像をアップしてあります この header-logo.gif というのを読み込みます h1 の a タグの後ですね ここ ちょっとわかりにくいですけど この部分ですね ここから書いていきます 画像なので img タグを使います 子テーマの― テーマフォルダー内へのパスは bloginfo('stylesheet_directory') で取得できます 画像の URL― img src の中ですね URLに― bloginfo('stylesheet_directory') と書けば テーマフォルダーまでの パスを書いてくれます そして この php の 閉じタグの後にスラッシュから 子テーマの中の― 続けてパスを書いていく ということになります header-logo.gif そしてソースを閉じて 幅と高さを 書いていきます そして画像の alt― なんですが サイト名を出したいと思うので 最初に書いてあった bloginfo('name') というのを そのまま 使いたいと思います このようにすれば alt タグの中に bloginfo('name') が書かれます php の外は 通常の HTML ですので この php 全体を― alt の クオーテーションで くくるというような書き方になります img src の部分も一緒ですね ここまでをクオーテーションで囲っています それからサイトディスクリプション h2 タグをこの上に置いてみましょう これで保存をして サイトで確認します 新しく子テーマのフォルダーに作った header.php で表示されるはずです 新しく作った header.php で表示されました 画像で― サイト名が表示されています alt タグを確認すると ちゃんと サイト名が入っています もう少し書いていきましょう ここがちょっと 頭が揃っていないので スタイルで揃っていきます スタイルシートを開いて 追加していきます header タグの中にある h2 タグの― site-description という クラスのついた h2 タグに対して margin-left を指定します リロードすると 左に寄りました では次に このメニュー メニューのデザインを 変更していきたいと思います それではメニューの HTML のところに どのようなスタイルが 付けられているかを確認します この部分ですね nav タグに対して site-navigation という id が付けられています そして 一番メインになるのが この部分ですかね ul タグで menu-global という― ul タグに これですね main-navigation ul nav-menu main-navigation ul nav-menu というところに border ですとか 色々なスタイルが適用されています そして一つ一つのメニューは list タグで このように表示されています それから このカテゴリーの 複数の階層のところですね この部分には list タグの中に さらに ul タグと list タグがあって 表示されているようです ではこの部分に 少しずつ CSS を 適用していきたいと思います まず main-navigation に margin-top: 0 を指定します ちょっとここの空きが酷いので 0 を入れて少しここを詰めました それから navigationー メニューのところの色をですね 背景色をちょっと変えてみたいと思います navigation 部分の背景の色を グレーに変更してみました このままだと見にくいので 文字の色なども変えていきましょう この link タグのところですね ここの表示を確認します a タグですね ここですね ここで文字の色を― 指定しているので これをコピーをしてしまって はい ここに足していきます このようにすると かなり CSS を書くのも簡単になります もう一つ 取ります マウスオーバーしていない時は 少し薄い― グレーにして マウスオーバーした時に 濃い白にしたいと思います そして今この追加した current-menu-item というクラスなんですが 一度リロードします 今 この HOME というところが 濃い白になっています これはどうしてかというと この 今トップページにいるので この部分に current_menu_item あるいは current_page_item― といったクラスが付けられています この WordPress の メニュー機能を使うと自動的に 現在いるページに対して current_menu_item current_page_item という― CSS クラスを付けてくれるんですね なのでそれに合わせて スタイルを書いておくと このように 現在位置表示を行うことができます それではカスタマイズを続けていきます ここが今 左ちょっと詰まってしまって いるので ここの部分を margin を取りたいと思います list タグでそれぞれのアイテムが 表示されていますので この部分に margin を付けます それじゃもう一度リロードします はい これですっきりと綺麗な アニメーションになりました この マウスオーバーして出てくる サブメニュー この部分にも margin がかかってしまったり 文字の色が変わってしまったりして 影響が出てしまっていますので この部分を 入れ直していきたいと思います さきほどのサブメニューのところはですね list タグの中に さらに ul タグと list タグを作って 表示していましたので この部分に 適用した CSS を また 変更していくというような形になります a タグに対して CCC では見にくいので 少し濃いグレーにしておきます 同じく hover に対しては さらに濃いグレーに それから現在位置表示ですね この部分も 白では見にくいので 同じく 333 にして この中に 記述を追加していきます できたら保存して もう一度リロードします このサブメニューの表示が 適切なものになりました こテーマの中で header.php などの テンプレートデザインを 変えたい場合には そのテンプレートファイルを 子テーマの中に作成して そして HTML を書いたり あるいは ちょっとしたデザインの変更であれば スタイルシートを使って 変更していくことができます このレッスンでは ヘッダーの カスタマイズについて学習しました

ステップアップ!WordPress中級

このコースではWordPressのマルチサイトという機能を使って、通常では作るのが難しい本格的なウェブサイトの構築方法を解説します。 同機能を有効にする手順から実際にマルチサイトを使ってサイトを構築する方法、また本格的なウェブサイトを作るうえで役に立つ実践的なWordPressのカスタマイズ方法までを丁寧に説明します。

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

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

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

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