はじめる!WordPress入門

ウィジェットへのスタイルの適用

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ウィジェットはCSSでデザインしやすいように、さまざまなCSSクラスを出力してくれるので、出力されたHTMLを確認しながらデザインを適用していきます。
講師:
07:59

字幕

このレッスンではウィジェットに スタイルを追加する方法について学習します。 ウィジェットの部分で表示されている HTML を確認してみましょう。 インスペクターで確認します。 side という ID の付いた div の中に ul を用意しています。 ウィジェットは1つ1つが list タグで表示されるようになっています。 list タグには それぞれ widget というクラスと 何のウィジェットであるかを表す クラスが用意されています。 更に中を開けば それぞれのウィジェットで どのような HTML が 出力されているのかがわかります。 それでは CSS を記述してウィジェット部分の デザインを完成させていきましょう。 エディターに移動します。 style.css に、ウィジェットに 関する記述を追加していきます。 まずはウィジェット全体への スタイルシートを記述します。 ウィジェットは list に widget という クラス名が付けられていました。 それぞれのウィジェットで 表示されるタイトルも h2 タグに widgettitle という クラス名で統一されています。 次にカレンダーウィジェットへの スタイルを書いていきましょう。 テーブルの幅を100%にしておきます。 キャプションを中央揃えに しておきます。 th は曜日の部分になります。 ここも中央揃えにして 文字の色を変更します。 td の部分に日付が表示されます。 ここも中央揃えにします。 prev と next という ID が 付けられセルには カレンダーの前の月 後ろの月に表示するための ナビゲーションが表示されます。 フォントサイズを指定しておきます。 next は右寄せにしておきましょう。 次に Newpost Catch プラグイン によって追加された サムネール付きの投稿リスト部分を スタイルシートで記述していきます。 Newpost Catch プラグインがつける ウィジェットのクラス名は widget_newpostcatch です。 1つ1つの投稿は list タグで表示されます。 このプラグインは ウィジェットでの表示に プラグインが用意した CSS を使って 自動でスタイルを適用していますので important 属性を使って そのスタイルの指定を 上書きしていきます。 このようにすれば プラグインが用意した CSS を 上書きしていくことができます。 次に最近のコメントの部分を スタイルシートでカスタマイズしていきます。 最近のコメントは widget_recent_comments という クラス名が付けられています。 ここも1つ1つのコメントは list タグで表示されています。 最後にタグクラウド部分の表示を カスタマイズしていきましょう。 タグクラウドの部分は widget_tag_cloud という クラス名が付けられています。 CSS を指定して タグをアイコンのような表示にしていきます。 マウスオーバー時の スタイルも指定していきます。 編集ができたら保存をして サイトでの表示を確認してみましょう。 サイトを表示します。 カレンダー 最近の投稿 最近のコメント 月別のアーカイブ タグクラウドが 表示されました。 このレッスンではウィジェットへの スタイルの適用方法について学習しました。

はじめる!WordPress入門

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

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

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

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

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