WordPressにヘッダー画像を微調整しながら入れたい。テーマ「Twenty Twelve」

WordPressのテーマ「Twenty Twelve」を使用しています。
普通に、「外観」-「ヘッダー」からヘッダー画像を入れると、高さ等の配置が上手く微調整出来ません、、、
高さを微調整しながらヘッダー画像を入れるにはどうしたら良いでしょうか?

image

 

ヘッダー画像の高さ微調整をしたいならCSS(スタイルシート)を修正しヘッダーを配置する

image

やはり、スタイルシートをいじるしかないですね。

ただし、「テーマの編集」からスタイルシートを修正するのではなく、「Jetpack」プラグインを導入し
「外観」-「CSS編集」からスタイルシートを修正しましょう

例えば

以下のようにヘッダー画像スタイルシートを記載します

.site-header {
    height: 230px;
    display: block;
    overflow: hidden;
    width: 1060px;
    padding-top: 0;
    background: url(http://blog.nyuumon.net/wp-content/uploads/2015/01/access-up-200.png) no-repeat left bottom;
}

 

  • ヘッダー画像をアップロードします

これは、先ほどの「外観」-「ヘッダー」からヘッダー画像だけアップロードしました。
その画像URLが

http://blog.nyuumon.net/wp-content/uploads/2015/01/access-up-200.png

になります。
この画像サイズは、横幅が1060pxで高さが200pxで作ってあります。

  • ヘッダー画像の高さと横幅の表示調整をします

なので

height: 230px;
width: 1060px;

を指定しています。
若干高さが200pxをオーバーしているのは、その上にタイトルとかの文字が表示できるスペースを確保しているからです。

  • ヘッダー画像をヘッダースペースの下寄りにします

さらに、

background: url(http://blog.nyuumon.net/wp-content/uploads/2015/01/access-up-200.png) no-repeat left bottom;

bottomを記載し、ヘッダー上部を上を文字スペースように開けています。

 

完成したのが以下のヘッダー画像の配置です

image

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください