WordPressのTwenty Elevenをカスタマイズする時に、ヘッダー部分に画像を貼ることもあると思います。
私の場合は、この画像のような感じでSNSリンク用のアイコン画像を貼り付けております。
とても簡単にできそうなカスタマイズなのですが、私はかなり長い時間ハマりました。
原因さえわかってしまえば、とても簡単に行えます。
同じようにハマってしまっている人は、参考にしてみてください。
原因はCSSの#branding部分
今回はヘッダー部分に画像を貼りたいだけなのに、うまくできずに本当に苦労しました。原因はTwenty Elevenのstyle.cssの下記部分です。
#branding img { height: auto; margin-bottom: -7px; width: 100%; //←ココ!! } |
Twenty Elevenでは、headerタグはbrandingというIDが指定されており、CSSにてbrandingというIDのimgタグのwidthが100％に設定されているのです。
この状態のままヘッダー部分に画像を貼り付けると、意味不明に拡大表示されレイアウトがメチャクチャになります。Twenty Elevenのデフォルトではヘッダー部分に大きく画像を表示していますが、きっとその設定が悪さをしているんですね。
ということで、この部分を修正すれば画像表示がうまくいきます。
style.cssの編集
Twenty Elevenの子テーマを作成している場合には、下記コードを追記してください。1 2 3 | #branding img { width: auto; } |
Twenty Elevenを直接編集している場合には、下記のようにしてください。
#branding img { height: auto; margin-bottom: -7px; width: 100%; //この行を削除 } |
画像の表示位置に関しては、margin-bottomの値などを変更すれば変わってきます。
salt26的コード
私は各SNSへのリンクアイコンを貼っております。アイコンは無料でアイコン素材ページから手に入れました。CSSと合わせてコードを紹介します。
header.php
1 2 3 4 5 6 | <div class="sns"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>feed" target="_blank"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/rss.png" /></a> <a href="https://www.facebook.com/salt26jp" target="_blank"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/facebook500.png" /></a> <a href="https://twitter.com/salt26jp" target="_blank"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/twitter.png" /></a> <a href="https://plus.google.com/+Salt26Jp/posts" target="_blank"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/googleplus-revised.png" /></a> </div> |
- hgroupタグを閉じる直前に追記
- アイコン画像は子テーマディレクトリ内のimageディレクトリに配置
- すべて別タブにて表示
style.css
1 2 3 4 5 6 7 8 | .sns { position: absolute; right: 10%; bottom: 10%; } .sns img{ margin-right: 2px; } |
- ヘッダー部分の右端にアイコンを配置
- アイコン間に適当なスペースをとる
感想
ただ画像を貼りたいだけなのに、とても苦労しました。まさか、画像のwidthが100%になっているとは思ってもみませんでした。
同じようにハマっている人は多いような気がします。
いや、こんな初歩的なハマり方は私だけかな？
Twenty Elevenカスタマイズの参考になれば幸いです。
関連記事
Twenty Elevenを1カラムにして横幅を目一杯広げるWordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。
