はじめる!WordPress入門

トップページへのスタイルの適用

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
codexでも解決しない問題は公式フォーラムで問い合わせることができます。フォーラムの使い方を解説します。
講師:
08:41

字幕

このレッスンでは、トップページへの スタイルの適用について学習します。 それでは CSS を書いて デザインを適用していきましょう。 エディタに移動します。 style.css の一番下に、 新しいスタイルを記述していきます。 投稿の一件一件には post クラスのテンプレートタグによって、 post というクラスが 付けられています。 ですので post というクラスを 手掛かりにして CSS を記述していきます。 日時の部分は 左に寄せて表示します。 本文の部分は 右に表示します。 日付は薄いグレーで表示します。 時刻の部分は薄いグレーで、 フォントサイズを 少し小さくして表示します。 次に category の部分を 記述していきます。 category は 複数ある場合もあるので、 リストタグで 表示されるようになっています。 inline-block を指定すれば 通常のテキストのように、 右に並んで表示されます。 タイトルは h2 タグを使って 表示していましたので、 h2 タグにスタイルを 指定していきます。 本文部分は body を使って スタイルを指定します。 投稿の本文で一行空きをすると、 自動的に p タグが追加されます。 ですので body の中の p タグに対して 一行空きの指定を入れておきます。 本文欄に投稿された 中サイズの画像に対して、 CSS を指定します。 中サイズの画像には、イメージタグに size-medium が指定されます。 border と padding を 指定しておきます。 次に tag の部分に スタイルを適用していきます。 本文欄の tag にもサイドバーの ウィジェットと同様、 アイコンのように 表示していきたいと思います。 tag にマウスオーバーしたときの 指定もしておきます。 最後に action 部分に スタイルを適用していきます。 右寄せにしてフォントサイズを 小さくしておきます。 記述が終わったら 保存をしてアップロードをして、 サイトでの表示を確認してみましょう。 サイトに移動します。 ページをリロードします。 デザインが変更されました。 時刻の部分に正しく CSS が設定されていませんね。 エディタでもう一度確認してみましょう。 クラスの指定を間違っていたようです。 修正してアップロードができたら、 もう一度確認してみます。 正しくスタイルが適用されました。 post.php に一件分の 表示の方法を記述しただけで、 すべての投稿に自動的に適用されるので、 とても効率的に コーディングをしていくことができます。 それでは、トップページの一番下に ページナビゲーションを表示してみましょう。 ページナビゲーションは、 WP PageNavi プラグインを使って 表示します。 それではエディタに移動します。 index.php を開きます。 メッセージループの後に wp_pagenavi と入力します。 保存をしてサイトで 表示を確認してみましょう。 リロードします。 ナビゲーションが 表示されました。 この部分の html を確認してみましょう。 wp-pagenavi というクラスのついた div が自動的に作成され、 その中に span タグや a タグが 追加されています。 これを手掛かりに スタイルシートを記述していきます。 エディタに移動します。 style.css を開きます。 スタイルシートの一番下に WP PageNavi に関する スタイルシートを記述していきます。 できたら保存をして 画面での表示を確認します。 スタイルが適用されました。 トップページを作るだけで 自動的に2ページ目以降も index.php を使って 画面が表示されています。 このレッスンでは、 トップページへのスタイルの適用について 学習しました。

はじめる!WordPress入門

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

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

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

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

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