【WordPress】テーマ「Hatch」のロゴ画像を横幅いっぱいに大きくする

テーマ「Hatch」のロゴ画像を横幅いっぱいに大きくする方法についての覚え書きです。

Screen Shot 2015-07-20 at 09.57.06

comemoarrow

2015-07-20 at 10.02

通常、WordPress のテーマにはヘッダー画像を追加できる機能があり、たとえば、WordPress.com のテーマ「Hatch」の場合、以下のような位置にヘッダー画像を追加できるようになっています。

Screen Shot 2015-07-20 at 09.55.24

一方、ロゴ画像の追加機能を使って、ブログの左上に画像を設置することもできます。

Screen Shot 2015-07-20 at 09.57.06

本来、ロゴ画像というのは、左上にちっちゃく表示させて、ブログのシンボルイメージとして表示させる目的で設置されますが、以下の CSS を追加すると、

#masthead hgroup {
 width: 100%;
}

#masthead .logo {
 width: 100%;
}

以下のような感じでヘッダー画像のように使うこともできます。

2015-07-20 at 10.02

なお、ロゴ画像の元画像のサイズは大きいままなので、画像の劣化もありません。

2015-07-20 at 10.03

ブログのタイトル等を削除したいときには「カスタマイズ → サイトタイトル・キャッチフレーズ」のところの「ヘッダーテキストを表示する」のチェックを外せば OK です。

2015-07-20 at 10.46

・・・と、ここからちょっと話がややこしくなります。というのはレンタルサーバ等にインストールして使うタイプの WordPress (以下、「インストール型の WordPress」と呼びます。)でテーマ「Hatch」を使用する場合、使用することが可能なテーマが3つあるからです。

まずは以下のリンクより WordPress.com 版のテーマ「Hatch」の zip ファイルをダウンロードし、インストール型の WordPress へアップロードする方法。この場合、ロゴ画像を大きくする方法は WordPress.com のときと同様になります。

Hatch Theme — WordPress Themes for Blogs at WordPress.com

次にテーマの検索機能よりテーマ「Hatch」をインストール・有効化する方法。

2015-07-20 at 10.23

このテーマの場合、「外観 → Theme Settings」からロゴ画像の追加および CSS の追加を行います。

2015-06-24 at 13.55

追加する CSS は以下のとおり。

#branding {
 width: 100%;
}

#header img {
 width: 100%;
}

すると、以下のような感じでロゴ画像が追加されます。

2015-06-24 at 13.53

一方、以下のページよりテーマの zip ファイルをダウンロードし、インストール型の WordPress にアップロード・有効化する方法もあります。

このテーマでのロゴ画像の設定方法は前述のとおりです。

で、インストール型の WordPress でテーマ「Hatch」を使う場合、一体、どれを使えばいいか、ということですが、バージョンを見てみると AlienWP のサイトよりダウンロードできるようになっているもののバージョンの数字が最も大きいので、このタイプのテーマを使うのが無難ではないかと思いますが、実際に使い込んだわけではないので詳しいことはよくわかりません。

2015-07-20 at 11.16

WordPress.com のテーマ

2015-07-20 at 11.15

インストール型 WordPress 内のテーマ検索機能よりダウンロードできるテーマ

2015-07-20 at 11.16

AlienWP のホームページよりダウンロードできるテーマ

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。