WordPressでWebサイトを作る際、選択したテーマのデザインを自分で好きなように変更したいですよね。

テーマ自体にある程度カスタマイズ機能がついていて、色やメニュー表示、ヘッダーやフッターのレイアウトを変更することができたりします。

画像や文字のサイズやフォント、ボタンのデザインなどはCSSを追加しないと変更できませんが、これもWordPressの管理画面上から設定することができます。

今回はWordPressのテーマデザインを変更するために、WordPressの管理画面からテーマをカスタマイズCSSを設定する方法を解説していきます。

テーマのカスタマイズ

WordPressはテーマを選択することができ、これでWebサイトのベースが構築されます。

テーマを選択した後はサイトのタイトルロゴ画像メニュー表示ウィジェット表示などを設定することができます。

1.サイトのタイトルとロゴ画像の設定

まずはサイトのタイトル、ロゴ画像の設定方法です。

ダッシュボードのメニュー、[外観]-[ヘッダー]から設定することができます。

表示されるページは[外観]-[カスタマイズ]-[サイト基本情報]と同じです。

このページのロゴを変更ボタンをクリックしてロゴに使う画像を選択できます。

その下にあるサイトのタイトルキャッチフレーズという項目でサイトのタイトルと説明を設定できます。

ロゴ画像を使わずテキストベースで表示したい場合、サイトのタイトルとキャッチフレーズを表示するというチェックボックスのチェックを入れると設定したサイトのタイトルと説明を表示できます。

ロゴ画像だけ表示したいときはチェックを外します。

2.メニュー表示の設定

どういう名前でメニューを表示するか表示順表示位置の設定ができます。

サイドメニューの[外観]-[メニュー]から設定ができます。

このページにはメニューの編集位置の管理というふたつのタブがあります。

メニューの編集ではメニューの名前と、そのメニューで表示するページ内容を設定できます。

あらかじめ作ったカテゴリ、固定ページ、投稿したページに直接リンクさせることもできます。

位置の管理ではメニューを表示する位置を設定することができます。

ページ上部やフッターの表示/非表示を変更できます。

3.ウィジェットの設定

オススメの記事一覧や、アーカイブ、バナーなど、ぺージの右側などに表示される項目をウィジェットと呼びます。

ウィジェットの表示内容の設定は[外観]-[ウィジェット]からできます。

よく使うのはテキストアーカイブカテゴリー検索あたりかと思います。

テキストでは自分の好きな内容を設定することができます、htmlタグを使ったり、画像を埋め込んだりもできます。

検索ウィジェットを配置すると、よく見かける検索バーを設置できます。

4.CSSの設定

最後にCSSの設定です。

WordPressの管理画面からCSSを設定できる箇所は2箇所あります。

ひとつはテーマのカスタマイズからCSSを追加する方法、もうひとつはテーマの編集から元々用意されているCSSを直接編集する方法です。

テーマで使用されているCSSを直接編集すると思わぬところでデザイン崩れが発生したりするので、基本的にはひとつめの方法で設定すればいいと思います。

CSSの追加は、[外観]-[カスタマイズ]-[追加CSS]からできます。

このページの左側に、自由にCSSを入力できるテキストエリアがあります。

ここにCSSを入力すれば、Webサイトに反映されます

右側にプレビューが表示されるので、確認しながら変更していきます。

まとめ

以上がWordPressでテーマを選択した後、デザインを変更する方法でした。

ロゴ、メニュー、ウィジェットを選択した後はCSSとの格闘になるかと思います。

追加CSSに設定するサンプルは以下のページを参考にしてみてください。

デザインを反映したいクラス、IDを変更すればそのまま使うことができます。

ボタンや画像の角を丸くする方法~CSSの小技~

マウスカーソルをあてた時に色を薄くする方法~CSSの小技~

テキストをマーカーで線をひいたように見せる方法~CSSの小技~

アイコンフォントを使ってメニューの前にアイコンを表示する方法~CSSの小技~

SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です