【賢威8】トップのロゴ画像(ヘッダー画像)に最適なサイズは?

賢威8の「追加CSSはどこで編集すればよいか分からない」、「追加CSSは下書きページでは使えない」とお思いの方はいらっしゃいませんでしょうか。

賢威8の追加CSSの使い方には、二つの方法があります。公開ページと下書きページでは追加CSSの使い方は異なります。

ここでは、それぞれの使い方の違いを、図解を交えて紹介します。

※ 画像をクリックすると拡大します。

公開しているページを追加CSSでカスタマイズする場合の使い方

まずは、トップページやブログ全体にかかわるデザイン変更や、既に公開している投稿ページや固定ページのデザインを変更する場合の追加CSSの使い方を紹介します。

追加CSSの編集
WordPressにログイン後のメニューで、①「外観」→②「カスタマイズ」を選択します。

カスタマイズ画面メニュー
カスタマイズ画面メニューの③「追加CSS」をクリックします。

「追加CSS」のエディタ
上図のような「追加CSS」のエディタが表示されます。

CSSコードを記入
追加CSSコード記入欄に④CSSコードを記入します。
CSSコードを記入すると同時に画面右側のブログサンプルページに⑤CSSコードの命令が反映されます。
CSSコードが想定通りであれば、追加CSSコード記入欄の上にある⑥「公開」ボタンをクリックすれば、作業は完了です。

上図のCSSコード内に記述された「/* */」記号に囲まれた文字列はコメントです。
英字で書かれた文字列がCSSのコード(命令文)になります。コード(命令文)だけだと後で見返した際に何のコード(命令文)か分からなくなることもありますので、「/* */」記号を使ってコメントを添えておくことをお勧めします。

下書き中のページデザインを追加CSSでカスタマイズする場合の使い方

ここでは、下書き中の投稿ページや固定ページを追加CSSでデザインをカスタマイズする方法を紹介します。

追加CSSの使い方
デザインをカスタマイズしたい投稿ページや固定ページのプレビュー画面を開きます。
① プレビュー画面上メニューバーの「カスタマイズ」をクリックします。

目次名(タイトル名)を変更する
上図のような「追加CSS」のエディタが表示されます。

目次名(タイトル名)を変更する
追加CSSコード記入欄に②CSSコードを記入します。
CSSコードを記入すると同時に画面右側のブログサンプルページに③CSSコードの命令が反映されます。
CSSコードが想定通りであれば、追加CSSコード記入欄の上にある④「公開」ボタンをクリックすれば、作業は完了です。

まとめ

公開ページと下書きページのデザインカスタマイズで、追加CSSのエディターページへの入り方の違いを紹介しました。
今回、二つの方法を紹介しましたが、基本手には「下書き中のページデザインを追加CSS・・・」の方法だけを覚えていれば、全て対応できます。

これで追加CSSの使い方が理解できたと思いますので、賢威8のデザインをどんどんカスタマイズして、個性豊かなオリジナルのブログを作ってみてはいかがでしょうか。