19．WordPressでウェブサイトのトップページをつくる(HTMLとCSS②)

「18．WordPressでウェブサイトのトップページをつくる(HTMLとCSS①)」の続きです。

全幅見出しの幅を変更する

【デベロッパーツール】でHTMLタグを確認します。
“widget_ltg_adv_full_wide_title_outer”classとなっています。

この上下の余白(padding)を調整します。

CSS部

テキストウィジェットとアイコンウィジェットの間隔を調整

【デベロッパーツール】でHTMLタグを確認します。

“text-3″というidがついています。idはそれ固有のため、ピンポイントでCSSを指定できます。(classは複数の項目につけられるため、まとめてCSSを指定することができます)

下部marginを調整します。

CSS部

SNSアイコンをフッターの間隔を調整する

【デベロッパーツール】で確認します。
前回CSSを追加した”siteContent”classの下部paddingを調整すればよさそうです。

CSS部　※paddingを0に変更しました。

フッターメニュー下の空白の削除とcopyright下の文字の削除

“container sectionBox”と”container sectionBox copySection text-center”にCSSを追加します。

以下のようにCSSを追加します。

CSS部

一番下のPowered by WordPress～を非表示にします。
この部分はclassもidも与えられていないので、少し考え方を変えて、”container sectionBox copySection text-center”class内の2番目の<p>タグを非表示にします。

できました(copyrightの色も変更しました)。

CSS部

すべて完了したら、テキストエディタの上にある【公開】をクリックすれば、サイトに反映されます。

ついにトップページの完成です。
追加CSSは公開前に変化を確認できるのはいいですね。バックアップしないでも安心感があります。
ただ、やはりデザインの調整をしようと思うと、HTMLとCSSの知識はある程度必要になります。

次回は、実際に記事を投稿するために、記事中のフォントサイズが変更できるようにするためのプラグインを導入します。