金利の変動

賢威6.1カスタマイズヘッダー画像を変更・設置する方法

賢威6.1のカスタマイズで、質問をいただきましたので、ご紹介しますね。

 

賢威のデザインは、種類もあるんですが
シンプルなのでカスタマイズしたい方には、いいと思います。
特にヘッダー画像は、ブログの看板となるので、しっかり作成していきましょう。

 

 

 

 

このブログは、賢威のプリティーを使ったいるんですが、
今回は、コーポレート版での質問をいただきました。

 

コーポレート版は、見た目はこんな感じです。

テストブログトップ

 

コーポレート版は、とってもシンプル。
アフィリエイト・ビジネス用に人気があります。

 

ご質問では、このヘッダーにあるブログタイトルや、
ブログの説明などの後ろに画像を入れたいのと、
トップ画像「愛され続けて・・・・」と、入っている画像ね。

 

 

この画像を削除して、すぐに記事本文を表示させたいという質問です。

 

 

ヘッダー部分は、ヘッダー画像の中に、ブログのロゴやブログの説明など加えた画像を入れて
ヘッダー画像にしてしまう。
それを設置するのが一番簡単な方法です。

 

私も一番よく使う方法です。

 

ただ、よくわからんのはphpファイルのどの部分にコードを書いていいのか?
っていうところだと思います。

 

ちょっと解説していきますね。

 

ヘッダー画像を変更する方法

以前このブログでも紹介したと思うんですが、
ヘッダー画像を変更する方法です。

 

多分この部分は、賢威のどのデザインでも同じだと思いますので、
覚えておきましょうね。

 

まず、ヘッダー画像を作成します。

 

ヘッダーの大きさは、賢威の場合テンプレート作成メーカーの部分で
設定できますので、その大きさと同じ大きさの画像を作成します。
※だいたい980×250くらいがいい感じ♪

 

ヘッダー画像が作成したら、「メディア」からアップロード
保存先のURLをコピーして、メモに貼っておいてくださいね。

 

 

テーマの編集から、header.phpファイルをクリックしてください。
※右のメニューから選んでクリックすると、左にコードが表示されますね。

 

header.phpファイルは、ヘッダー部分のコードが記述されています。
まずは、バックアップを取ります。

バックアップを取るのは、万が一失敗した場合すぐに戻せるようにです。

コードの中にカーソルを合わせて(どこでもいいので)
control+A で、全選択してcontrol+C でコピーします。
メモでもいいので貼って、ローカル(デスクトップ)に保存します。

 

※このような操作の場合は、ショートカットキーを使いましょう!!

 

ファイルの中から、コメントアウトで<!–▼ヘッダー–> という記述を探してください。

<div id=”header”> という記述からが、
ヘッダーの設定となります。

<div id=”header-title”>の記述の次に

<p class=”header-logo”>~ という記述があります。
ここが画像をアップロードするところです。

 

<p class=”header-logo”><a href=”<?php bloginfo(‘url’); ?>”><img src=”ここにアップロードした画像のURLを入力” width=”画像の幅” height=”画像の高さ” alt=”代替テキスト” ></a></p>

 

 

※コピーして記述を修正して、貼ってもいいですよ^^

 

コードの追加・修正が終わったら、ファイルを更新して一度ブログを確認しましょう。

 

ヘッダー画像が表示されても、ブログのタイトルが多分表示されてしまうと思います。
そこで、CSSファイルの変更をします。

 

テーマの編集に戻って、右のメニューからdesign.cssファイルをクリックしてください。

 

このファイルは、デザインの設定が記述されているファイルです。

 

design.cssファイルの中から、

/*——————————————————–
ヘッダー
——————————————————–*/

というコメントアウトを探してください。

その下に・・・

/*●ヘッダーテキスト・右上の文章*/

という記述があります。こんな感じです。

CSS記述の追加

上の図のように、下記コードを追加します。

display:none;

これで、ファイルを更新します。

 

display:none;は、表示させないという設定ができます。

 

これで、ヘッダー部分のテキスト(ブログタイトル・ブログの説明)が
表示されません。

 

#header h1 には、ブログタイトルを見出しとして表示させる設定になっているので、
この部分は、表示させてもいいかもです。
ちなみに、私は表示させないようにしています。

 

これでヘッダー画像の変更と設置は完了です。

 

 

メイン画像の削除方法

コーポレート版のメイン画像の削除方法は簡単です。

 

賢威6.1から、賢威自体の設定が可能となったので、本当に楽チンになりました。

 

ダッシュボードに、「賢威設定」というメニューが出来たので、
そこからの設定になります。

 

賢威の設定から、「トップページ」をクリックすると、
トップページの設定に関する記述があります。

トップページの設定

 

初期設定では、「メイン画像のキャッチコピー」と「メイン画像」の中には、
記述がされていると思いますが、ここを全部削除してください。

※メイン画像を変更・設置するときは、ここで設定をします。

 

これで、変更を保存してOK!!

 

簡単ね。

 

では、完成したイメージを見てみましょう。

コーポレートテスト2

 

ヘッダ画像が変更されて、メイン画像が表示されなくなりました。
なのでグローバルメニューの下は、すぐ記事です。(最新記事情報は残してあります。)

 

 

こんな感じですかね。

 

 

最初は、phpファイルをいじるのってちょっと怖い感じがしますが、
バックアップを取っておけば、失敗しても大丈夫。

 

何回でもやり直せますよ!!

 

 

ぜひチャレンジして、自分のブログを自分らしく作ってくださいね。

 

ヘッダー画像を作成するならば、このツールがおすすめ。
最近の私の画像とバナーは、このツールで作成しています。
賢威チームが作ったツール!ちえぞうのサポート付。
プロみたいなバナーが作れる!バナープラス

 

 
 

 

コメントを残す

サブコンテンツ

このページの先頭へ