賢威

賢威6.2でヘッダー画像を横いっぱいに拡大表示させる方法

賢威7が先行公開され、最近はネット上でも賢威7を使ったサイトも多く見かけるようになりました。

賢威7には賢威6.2よりも魅力的な部分はいくつもありますが、そのなかでも代表的なのは『ヘッダー画像が横いっぱいになる』というところです。

これだけでも随分サイト全体にインパクトとダイナミックさが増します。

とはいえ、すでに賢威6.2でもサイトのデザインを整えてしまった人にとって、7.0へのアップデートには相当の覚悟がいります。

そこで今回は、賢威6.2のヘッダー画像を画面横いっぱいに拡大表示させるカスタマイズ方法をお伝えしていきます。

賢威6.2:ヘッダーが小さいともったいない!

賢威7が先行公開される前にサイト全体のカスタマイズを完了させてしまった人にとって、現行の6.2から7へアップデートするには覚悟が必要です。

というのも賢威6.2と7は基本的な構造が違うため、アップデートさせた際には全ての構造を調整し直す必要があります。

こちらも出来ないことはないのですが、時間もかかりますし骨の折れる作業です。

そこで、今回は賢威6.2で設定してあるヘッダー画像を横いっぱいに拡大表示させる方法を解説します。

ちなみに下の画像が変更前のヘッダー画像になります。
せっかくダイナミックな画像を作成していただいたのに、横に空白があったのが気になっていました。

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

そしてこちらが変更後。
横にバシッと画像が広がり、インパクトと迫力が倍増しました。

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

この方法であればとても簡単にヘッダーがワイド表示になるので、オススメですよ。

 

ヘッダー画像を横いっぱいにする方法

実際にヘッダー画像を横いっぱいに表示するには、外観>テーマの編集からdesign.css及びlayout.cssを少しいじるだけです。

それでは解説していきますね。

1,design.css

まず、『外観テーマの編集design.css』へと進み、【ヘッダー】というカテゴリの部分を見つけます。そして以下の部分を削除or非表示にします。

非表示の方法は、以下のように非表示にしたい部分を『/*』と『*/』で結びます。

(例)

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

 

※ 今回の解説では全て非表示にしてあります。

 

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

非表示にする場合は以下を参照。

 

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

ここまでで、design.cssは完了です。『ファイルを更新』を忘れずにクリックしておきましょう。

2,layout.css

次に、『外観テーマの編集layout.css』へ進みます。

私の場合はサイト全体が2カラムなので、【2カラムレイアウト】というカテゴリを探します。

そして以下のように#header、#header-inという部分を非表示にしていきます。

 

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

ここまでできたら、最後に以下のコードを挿入しましょう。

 

このように挿入できたら『ファイルを更新』をクリックします。

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

これで全て完了です!

サイトをトップページで確認してみると、以下のように画像が横いっぱいに広がっているのが分かりますね。

賢威6.2、ヘッダー画像、横いっぱい、拡大、表示

 

まとめ

今回は賢威6.2のヘッダー画像を横いっぱいに広げる方法をお伝えしました。

ヘッダーも画像の背景が白の場合だとあまり横幅は気にならないのですが、背景色がついている場合にはどうしても空白は気になってしまいますね。

といっても賢威7にアップデートするのはなあ・・という方には今回の方法は必見です!

サイトの訪問者が思わず見入るようなデザインにすることも、ブランディングの上では大事ですので、少々手間ですが気になる方はぜひやってみてくださいね。

それでは最後までご覧頂き、ありがとうございました。

画像の説明

関連記事

  1. 賢威、グローバルメニュー、作成

    Wordpress

    賢威のサイトトップページにグローバルメニューを作成する方法

    Wordpressに賢威をインストールしたら、まずはグローバルメニュー…

  2. 賢威7,Searchconsole,所有権,確認,できない,対処法

    賢威

    賢威7でSearchconsoleの所有権が確認できないときの対処法

    賢威7を使っている方で何度やってもSearchConsoleの所有権の…

  3. サイト、h1タグ、設定

    SEO

    サイトをつくるときには必ずh1タグを設定しよう|SEO強化術

    サイトを構築する段階でぜひ覚えておいて欲しいのが、サイトのh1タグを設…

  4. 賢威7、新機能、カスタマイズ、レビュー

    賢威

    賢威7の新機能やカスタマイズをレビュー!バージョンアップを簡単に解説

    先日、『Wordpressに賢威6.2をインストールする方法』を解説す…

  5. ワードプレス、テンプレート、賢威、ダウンロード、インストール

    Wordpress

    ワードプレスでおすすめテンプレート賢威のダウンロードからインストールまで解説

    Wordpressでメディアを運営する際に、 なんのテンプレートを…

  6. 賢威7,h1タグ,設定,6.2,バージョンアップ,見出しタグ,構造,変更,解説

    SEO

    賢威7にはh1タグテキスト設定がない?6.2からのバージョンアップで見出しタグの構造が変わったので解…

    賢威7.0からは見出しタグの構造が変わっていて、賢威6.2のときには設…

Twitter

  1. アーティストから学ぶ

    【セカオワ人気を考察】ブレイクの理由はメンバーの仲の良さや歌詞?個性をビジネスで…
  2. 記事作成、効率化、TinyMCE Advanced

    プラグイン

    記事作成を効率化するプラグインTinyMCE Advancedの使い方を解説
  3. トレンドアフィリエイト、ライバルチェック、方法

    トレンドアフィリエイト

    トレンドアフィリエイトにおけるライバルチェックの方法まとめ
  4. ホリエモン,多動力,レビュー,ノマド,仕事,スマホ,完結

    読書

    ホリエモンの『多動力』レビュー。ノマドの仕事はスマホで完結させよう!
  5. セールスレター,LP,Wordpress,テンプレート,Colorful,オススメ

    DRM

    セールスレターでLPつくるならWordPressテンプレート『Colorful』…
PAGE TOP