ステップアップ!WordPress中級

投稿フォーマットにスタイルを適用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
投稿フォーマットごとに適用するスタイルシートを変更する方法を解説します。
講師:
06:00

字幕

このレッスンでは 投稿フォーマットに CSS スタイルを 適用する方法について学習します TwentyTwelve のテーマでは 投稿フォーマットごとに 異なるデザインで投稿が表示されています 実際にそれぞれどのような方法で 異なるデザインを適用しているのかを 確認してみたいと思います ウェブのインスペクターを使って どのようにしてスタイルシートを 適用しているのかを確認してみましょう 例えばこのアサイドの 投稿フォーマットを指定した記事では この背景色を この div のクラス aside に適用しています 実際にどのような CSS で書いているかというと article に format-aside という クラスが付けられていて その format-aside のついた アサイドに対して 背景色を設定しています 別のフォーマットを見てみると 例えば このリンクの部分ですね これは article に付けられた format-link― というクラスをもとに ヘッダーに対して このようなスタイルが適用されています この article の中にあるクラスの この format-link というところですね 他の 投稿フォーマットが 指定されている記事を見ても ここにも format-image というのがあります このように それぞれの投稿フォーマットごとに その投稿フォーマットを表す CSS クラスが付けられています スタイルシートは この投稿フォーマットのクラスをもとに それぞれのデザインを変えているようです それではエディターで この article の部分にどのように 記述しているのかを 確認してみたいと思います TwentyTwelve では それぞれの投稿を content.php を使って表示しています どれでもいいので 一つ content.php を開きます この article というタグのところに クラスが出ていました この部分を見てみると post_class というテンプレートタグを 使っているのがわかります この post_class が それぞれの投稿に適した CSS クラスを書き出してくれます これによって投稿フォーマットごとの クラス名が出ていることがわかります それでは 実際にその CSS を 確認してみたいと思います CSS を確認するためには さきほどの この format-aside というクラスが付けられている CSS の部分を見ますと スタイル CSS の 1038 行目に この記述が書いてあることがわかります エディターで TwentyTwelve の style.css の 1038 行目を開いてみます はい ここですね 1038 行目にありました この上を見てみると ここに Aside post format というふうに 書いてあります ここから投稿フォーマットの アサイド用の スタイルを記述していますよという メモになります さらに下を見ていくと Image posts 投稿フォーマットが画像の ものに対する CSS リンクの場合の CSS 引用の場合の CSS というふうに すべての投稿フォーマットに対する CSS が定義されていることが分かります TwentyTwelve を親テーマとして 子テーマを作って サイトをデザインしていきたい場合には 今見たこの CSS の部分を 子テーマの style.css に コピー&ペーストして 書き換えていけばいいことがわかります またオリジナルでテーマを作成する場合にも 今見たように ポストクラスを使って それぞれ 投稿フォーマット用にクラスを書き出して その投稿フォーマットを手掛かりに このような形で CSS を書いていけば それぞれのフォーマットごとに 異なるデザインを適用することができます このレッスンでは 投稿フォーマットごとに CSS スタイルを変更する方法について 学習しました

ステップアップ!WordPress中級

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

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

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

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

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