ステップアップ!WordPress中級

サイトのフレームのカスタマイズ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイト全体のレイアウトやデザインを変更する方法を解説します。
講師:
13:11

字幕

このレッスンでは 子テーマを使って サイトのフレーム部分を カスタマイズしていく方法を学習します 今サイトには Twenty Twelve テーマを親に持つ 子テーマを設定しています サイトのデザインは Twenty Twelve のスタイルシート CSS を 読み込んで表示しています このサイトのフレームとなる部分 コンテンツを表示している領域や 右ナビゲーション メインコンテンツを表示するカラム これらの部分をカスタマイズしてみましょう WordPress のテーマを カスタマイズしていく上で 一番重要なのは どの様な HTML の構造が 出力されているのかを 確認することです テンプレートファイルを見る という方法もありますが 最近のブラウザでは ウェブインスペクターと呼ばれる ページ上の要素を どの様な HTML で出力しているかを 把握するための ツールが提供されていますので これを使うと一目瞭然です 例えば サイト名は h1 にサイトタイトルというクラスが 付けられて出力されているのが分かります さらに h1 の中には a タグが入っています サイト全体の構造は body タグの中に page という id の div タグがあり ここで基本的なレイアウトを 行っているようです ヘッダーを表示する header タグ 二段カラムの部分には idがメインというディブが 付けられています そしてその中に primary という id の列と secondary という id の 列が表示されています フッター部分には footer タグが出力されて いるのが分かります その中に site-info というクラスがあります この様にフェブインスペクターを使えば 簡単にカスタマイズしたい要素について 詳しく知ることができます ウェブインスペクターは Safari や FireFox Google Chrome などで 利用することができます でそれはテンプレートファイルでも 実際にどの様に見えるかを 確認してみましょう エディターに移動します Twenty Twelve の index.php を開きます 最初に get_header で header.php を読み込んでいるので header.php も開きます header.php には HTML の head タグ等が出力されていますが body タグのすぐ下に先ほど見た page というidが見つかりました そしてその中に header タグが あるのが分かります 先ほどみた h1 タグもここにあります その中に a タグがあり template タグを使って トップページの URL へのリンクを 表示してるのが分かります サイト名はこの bloginfo name で 表示しているのが分かります php と HTML が混在しているので 通常の HTML よりもやや 見難い印象を受けますが 丁寧に見ていけば通常の HTM Lと 然程変わらないことに気づくと思います 一番最後には header を閉じた後に ディブの id main が存在しています ここまでが header.php ですので 全ての php に id main が 存在することが分かります そして index.php の中には primary と primary までの 終了タグが書いてあります このプライマリーの中が メインのコンテンツの 表示エリアになります この中は各テンプレートによって 異なるものが記述されていると思われます 次に get_sidebar で sidebar.php を読み込んでいますので sidebar.php を開いてみます sidebar.php では 先程見た secondary という id の div タグが見つかりました サイドバーでは secondary の div タグを表示してその中に dynamic sidebar を読み込んでいるだけです そして最後に get footer で footer.php を読み込んでみます footer.php を開いてみます footer.php では ヘッダーで記述されていた main という id のついたdivディブが閉じられ その下に footer タグが書かれています そして一番最後に ページという id のついたdiv タグを閉じて サイト全体が終了しています index.php 以外の他の テンプレートも見てみましょう それでは single.php を開いてみます single.php も 今見たサイトの 基本的なフレーム構造は同じはずです get_header があり primary という id があります primary という id の終了タグがあり geto_saidebar get_footer という風になっています 今見てきた様に既存のテーマを 子テーマを使って カスタマイズしていく場合には まずテンプレートの構造を そのサイトのレイアウト構造が どの様になっているのかを 把握しておくと その後のカスタマイズが 容易になります 沢山のテンプレートファイルも存在していて やや複雑な構造の様に 見えなくもないのですが 実際に今見た様に 一つ一つ確認していくと 基本的には非常にシンプルな 構造であることが分かります それではサイトのフレームに CSS を適用して 少し見た目を 変えていってみたいと思います まず body タグに背景を指定して 全体の印象を変えてみます 次にサイドバーとメインコンテンツ部分の 左右を入れ替えてみましょう サイドバーを左に表示するように してみたいと思います このサイドバー部分の スタイルシートを確認してみます id secondary を選択すると ここですね widget area という class に float right が 付けられていて width が 指定されているのが分かります 同じように primary の方を見てみると site-content という class に float left そして width が 指定されているのが分かります ですのでこの部分を入れ替えるには この site-content と widget-area という class を CSS を上書きすればいいことが分かります メイン部分を float right にして width も変更してみます 次に widget area に対して float left を指定します width も変更します サイドバーには背景色を 付けてみたいと思います はいこんな感じですね 保存してサイトで確認をしてみましょう はい 右にあったサイドバーが 左に移動しました そしてメインコンテンツ部分が 右に移動しています この様に 左右のレイアウトというのは テンプレートページの HTML を 書き換えることなく CSS だけで入れ替えることができます 非常に簡単に左右を 入れ替えることができます 背景を白にしたので この部分のパディングと このボックスシャドウが不要になりましたので これも取ってみます これらの要素は この div id page に付けられています これですね それからマージンも取って 上の空きを取ってみましょう ボックスシャドウを取ります この様に インスペクターを使えば あるスタイルシートのオンオフも プレビューすることができますので 変更した時にどの様な表示になるのかを プレビューすることもできます ここでは body site に スタイルが適用されているようですので このスタイルをワークしていきます エディターに新しく body site という class を 対して介しての CSS を適用します マージンをなくして ボックスシャドウを取ります パディングも 0 にします はいできました これで確認してみます はい 影やパディングがなくなって 非常にすっきりとした デザインブログのサイトになりました 非常に今行った編集は 簡単な変更ではありますが こういった形でですね 子テーマを使って親テーマの デザインを少し変える程度であれば テンプレートを編集する必要もなく スタイルシートだけで レイアウトやデザインを 変更していくことができます このレッスンでは 子テーマを使ったサイトのレイアウトの カスタマイズについて学習しました

ステップアップ!WordPress中級

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

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

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

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

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