STEP2 WEBサイトの構築 - ロゴ画像の表示

簡単ホームページパックで構築されたホームページは、初期状態ではヘッダー部分に会社ロゴなどの画像が表示されておらず、ホームページの名称が表示されています。
この名称部分を画像に変更する手順をご案内します。

画像ファイルのアップロード

WordPress管理画面で[固定ページ]メニューの[新規追加]を選択

WordPress管理画面にアクセスし、[メディア]メニューの[新規追加]を選択します。

[ファイルを選択]をクリックし、画像ファイルを選択

[メディアのアップロード]画面に表示されている[ファイルを選択]をクリックし、画像ファイルを選択します。

画像ファイルを選択するとアップロードが行われ、アップロードされた画像の一覧が表示されますので、[編集]リンクをクリックします。

[ファイルのURL]欄に表示されているURLを確認

画像の詳細が表示されます。

[ファイルのURL]欄に表示されているURLを確認します。
このURLは後の手順で利用しますので、選択、コピーなどを行っておきます。

URLの確認が完了したら、[更新]ボタンをクリックします。

スタイルシートの修正

WordPress管理画面で[外観]メニューの[テーマ編集]を選択

WordPress管理画面にアクセスし、[外観]メニューの[テーマ編集]を選択します。

[スタイルシート(style.css)]を選択

画面右側の一覧から、[スタイルシート(style.css)]を選択します。

スタイルシートの最下部に以下の記述を追加

スタイルシートの最下部に以下の記述を追加します。

※ [画像アップロード先のURL]は、画像ファイルのアップロード時にご確認いただいたものをご入力ください。

記述内容:

#header-name a {
text-indent: -9999px;
display: block;
width: 220px; /* ロゴ画像の横幅 */
height: 50px; /* ロゴ画像の縦幅 */
background:url('画像アップロード先のURL');
}
[ファイルを更新]ボタンをクリック

[ファイルを更新]ボタンをクリックします。

完了メッセージ

完了メッセージが表示されたら、ロゴ画像の設定は完了です。

ホームーページにアクセスし、ヘッダー部分にロゴ画像が正しく表示されているかご確認ください。

pagetop