[`yahoo` not found]
Pocket

今回は「賢威7」のヘッダーロゴ画像の設定方法を説明します。

ヘッダーロゴ画像とはサイトの画面の一番上にある、
サイトのタイトル、キャチコピー、ロゴ、背景などが入った画像、
ならびに、その画像を貼り付ける箇所のことです。

サイトに来た人が最初に目にする部分で、
そのサイトの第一印象を決める大変重要な部分です。

いわばサイトの顔のような部分で、閲覧者がサイトを見るか判断します。
閲覧者の興味を惹き付けるようなヘッダーロゴ画像でないと、
サイトを見てもらえないと言われています。
ぜひ、使い方を覚えて、良いサイトを作ってください。

初期設定のメイン画像を削除する方法


賢威の初期設定では画面は以下のような状態になっています。
メイン画像は不要ですので削除します。



ダッシュボードの「賢威の設定」⇒「トップページへ」移動します。


「メイン画像」の設定画面で、
赤枠の中のURLを削除します。



最後に画面一番下にある、「変更を保存」ボタンを
クリックします。

これでメインの画像は消えました。



ヘッダーロゴ画像変更方法


次にヘッダー画像をオリジナルの物に変更します。

ダッシュボードのメニューから「賢威の設定」⇒「賢威の設定」
と行きます。


賢威の設定画面が出てきますので、「ロゴ画像」の「画像を設定する」を
クリックします。



「ファイルを選択」ボタンを押して、
ヘッダーに表示させたい画像をワードプレス上にアップロードします。


画像のサイズをフルサイズに設定します。
さらに画像の配置を設定します。
基本的には中央配置にします。



「投稿に挿入」ボタンをクリック。
賢威の設定画面上は以下のように表示されています。



画面左下の「変更を保存」をクリック。



これで、ヘッダーロゴ画像が設定されました。



ヘッダーロゴ画像が左配置になってしまった時の対処法


ヘッダー画像を中央配置にしたのにどうしても左寄せ配置になってしまうことがあります。
そこで対処方法を解説します。

以下の画像は、ヘッダーロゴ画像そのものが大きく横長の為に、
一見目立たないと思いますが、よく見ると左寄せ配置になっています。

このような不具合はブラウザを大きく引き延ばして初めて気が付くことがあります。



この場合は賢威のソースを書き換える必要があります。
ワードプレスのダッシュボードから、
「外観」⇒「テーマの編集」⇒「header.php」のページを開いて、
ソースコードを書き換えます。

「Ctrl」キー+「F」キーを押し、画面上に検索窓が表示されたら、
「h1 class」と入力します。



画面の中央部分、画像だと灰色に着色した部分のタグを書き換えます。



<h1 class=”site-title”><a href=”<?php bloginfo(‘url’); ?>”><?php echo (the_keni(‘site_logo’) != “”) ? “<img src=\””.the_keni(‘site_logo’).”\” alt=\””.esc_html(get_bloginfo(‘name’)).”\” />”: esc_html(get_bloginfo(‘name’)); ?></a></h1>

このタグの前後に<div align=”center”>と、</div>を追加します。

<div align=”center”>
<h1 class=”site-title”><a href=”<?php bloginfo(‘url’); ?>”><?php echo (the_keni(‘site_logo’) != “”) ? “<img src=\””.the_keni(‘site_logo’).”\” alt=\””.esc_html(get_bloginfo(‘name’)).”\” />”: esc_html(get_bloginfo(‘name’)); ?></a></h1>
</div>

赤い文字の部分が追加したタグです。

画面左下の「ファイルを更新」をクリック。
反映させます。

これでトップページのヘッダーロゴ画像は中央配置になります。
しかし、これだと、トップページ以外のページを表示させたときに、
ヘッダーロゴ画像が左寄せのままです。

全てのページでヘッダーロゴ画像を中央配置にするために、
「header.php」のタグをさらに書き換えます。

先ほど書き換えたコードの少し下に、

<p class=”site-title”><a href=”<?php bloginfo(‘url’); ?>”><?php echo (the_keni(‘site_logo’) != “”) ? “<img src=\””.the_keni(‘site_logo’).”\” alt=\””.esc_html(get_bloginfo(‘name’)).”\” />”: esc_html(get_bloginfo(‘name’)); ?></a></p>
<?php } ?>

があります。
画像の灰色の部分のタグです。



このコードの前後にも先ほどと同じように
<div align=”center”>と、</div>のタグを追加します。

<div align=”center”>
<p class=”site-title”><a href=”<?php bloginfo(‘url’); ?>”><?php echo (the_keni(‘site_logo’) != “”) ? “<img src=\””.the_keni(‘site_logo’).”\” alt=\””.esc_html(get_bloginfo(‘name’)).”\” />”: esc_html(get_bloginfo(‘name’)); ?></a></p>
<?php } ?>
</div>

赤い文字の部分が追加したタグです。

書き換えたタグを画面全体で見ると以下のようになります。
赤枠の部分が書き換えたタグです。



画面左下にある「ファイルを更新」をクリック。
これですべてのページで、ヘッダーロゴ画像が中央配置で表示されます。

賢威7を使ったヘッダーロゴ画像の設定はこれで完了です。

ヘッダーロゴ画像は、余力のある方はご自身で制作されても良いかもしれません。
作れない場合は外注で作ってもらう方法もあります。

ココナラでリクエストをすると、1000円程度で制作してもらえます。
ココナラ

因みに私は、フリー素材でフレームを切り貼りし、
サイトのタイトルやキャッチコピーの文字の部分は、
ココナラで作ってもらったものを組み合わせています。

いろいろ試行錯誤を重ねてみると良いものが出来るかもしれません。
ぜひ、この解説を参考にあなたのサイトの第一印象アップを図って下さい。


[`yahoo` not found]
Pocket