賢威7でヘッダー画像を横幅いっぱいに広げてタイトルもかっこよくする方法

keni-header-kanryou

WordPressの人気テーマ「賢威7」。
カスタマイズ性が良いことで上級者〜素人まで幅広く使われています。
このサイトはOPENCAGE「スワロー」っていうテーマを使っていますが、僕も他のサイトで賢威7使ってます。
今回は賢威7の初期設定で、ヘッダー画像を横幅いっぱいに表示させて、なおかつタイトルも小さめの画像で表示するという方法をお伝えします。

1.賢威7のヘッダー画像を横幅いっぱいにする方法

賢威7のデフォルトでは、
タイトルが表示されていて、その下にヘッダー画像が表示されています。
いかにもデフォルト設定っていう感じでちょっと嫌ですよね。
もうちょっとかっこよくしたい場合はこの設定にしましょう。
管理画面の左サイドバーから、
賢威の設定→トップページ
と進み、
keni-settei-toppage
メイン画像の「画像を設定する」をクリックします。
keni-mein-gazou-settei

  • ファイルをパソコンからドロップする
  • 読み込み済みのファイルをURLから指定
  • メディアライブラリから選択

のいずれかの方法で画像を挿入します。
keni-main-gazou-upload
画像サイズは、

  • 幅:1200px
  • 高さ:300〜450px程度
  • で作っておきましょう。
    これで左右に余白のないシャープなヘッダー画像になります。

    2.賢威7でタイトルを画像で表示する方法

    賢威7でブログのタイトルを画像で表示するための方法です。
    管理画面の左サイドバーから、
    賢威の設定→賢威の設定
    と進み、
    wo-keni-keninosettei
    「ロゴ画像」
    の、「画像を設定する」をクリックします。
    keni-logo-gazou-settei
    上で説明した「メイン画像」の設定と同じように、

    • ファイルをパソコンからドロップする
    • 読み込み済みのファイルをURLから指定
    • メディアライブラリから選択

    のいずれかで画像を鍾乳します。
    これでブログタイトルを画像に変更できました。
    ↓完成イメージ
    keni-topoage-settei-kanryou
    このままでもいいですが、僕はタイトルの上下にある余白が大きすぎると感じたんで、余白を小さくしてみました。
    その方がよりシンプルで締まって見えます。
    タイトル上下の余白を小さくする方法は、
    外観→テーマの編集から、base.cssを選択します。
    keni7-theme-hennsyuu
    base.cssはテーマ編集画面の右サイドバー最下部にあります。
    keni-base-css-iti
    base.cssに下のコードが入っているので、

    最初の行の「.site-header-conts」を検索してください。
    上記のコードの
    「padding: 30px 0;」
    の30pxを変更すると余白の大きさが変わります。
    僕は5pxに変更しました。
     


     
    以上、今回はWordPressテーマ賢威のヘッダー画像カスタム方法でした。

     
    この記事を参考に、かっこいいトップページを作ってみてください!
    今後も色んなカスタマイズを掲載していくのでお楽しみに。
    では!


    卓越メルマガの購読メリット

    • 安定して月10万円稼ぐ記事の書き方
    • ライバルごぼう抜きで検索1位を獲る方法
    • 記事を書いて即効でアクセスを集める方法
    • ネタを無限に発掘する方法
    • 無敵のタイトル作成奥義
    • 作業時間を1/5にするツール伝授
    • 季節ネタで爆発させる具体的な方法

    ブログで稼ぐための、より具体的な方法をお届けするメルマガを開始しました。

    情報は日々新しくなりますが、ネット上に転がってるのはどうしてもワンテンポ遅い情報なんです。

    卓越メルマガでは、これらの超貴重な新鮮情報を全7回で週1ペースで配信します。

    乞うご期待!

    登録は以下からお名前・メールアドレスを入力して「卓越情報をもらう」ボタンを押すだけ。解除も簡単にできます。



    *お名前
    *メールアドレス

    コメントを残す

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