STORK（ストーク）でロゴを大きく表示するCSSの紹介

パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

今回は大人気Word Pressテーマ “STORK（ストーク）”でロゴ画像を大きく表示するための方法を紹介します。

もちろんロゴはデフォルト設定のままでも十分使うことができますが、細かいカスタマイズを加えたい時もありますよね。

どどーん！と大きなロゴ画像を使うことによってブログのインパクトを変えることができます。

簡単に変更できるのでぜひやってみてください。

ロゴを大きく表示する方法

STORK（ストーク）でロゴを大きく表示させるためにはCSSに変更を加える必要があります。

CSSなんていじったことないよー！という人はちょっとハードルが高いステップかもしれませんが、次の手順に沿ってやることで確実に変更することができるので安心してください。

CSSをいじる前にこちらの2記事にも目を通しておいて下さい。

特に子テーマは必ず用意しておきましょう。

CSSを開く

子テーマを導入している前提で話を進めますね。

まず Word Press 管理画面から[外観]→[テーマの編集]に進みます。

コードをコピペして保存する

次にこちらのコードをCSSに書き加えます。

/* ロゴを大きく */
.header.headercenter #logo img {
max-height: initial;
}

書き加えるとこんな感じですね。

入力が終わったら画面一番下の「ファイルを更新」をクリックします。

ちなみに /* ロゴを大きく */ という部分はこのまま保存してもコードに影響は出ません。
何のためのコードなのかメモ書きのように使うことができます。

おしまい

これで作業終了です。

あっという間ですよね。

ロゴの設定方法

ブログのロゴ画像を設定するには[カスタマイズ]から作業します。

その中から「サイトロゴ・アイコン」の項目に進み、好きな画像をアップロードするとヘッダーにアイコンが表示されるようになります。

案内に従うとすぐに設定ができます。

この辺はとても便利です。

ロゴが与える印象

ではロゴがない場合とある場合、さらにロゴが小さい場合と大きい場合でどれだけ見た目の印象が変わるか見てみましょう。

ロゴの有り無しの比較

ロゴがない場合

ロゴを設定しないとヘッダーにはブログタイトルが表示されます。
すっきりした印象ですが、どこか寂しい感じもあります。 

ロゴがある場合

こちらはロゴ画像を使った場合。
自分の好きな画像を使えるのでオリジナリティを出すことができます。 

ロゴの大小の比較

小さいロゴ（標準）の場合

ロゴが小さい場合、というかCSSに変更を加えずにSTORK（ストーク）でロゴを設定するとみんなこの大きさになります。

大きいロゴの場合

どうです？めちゃでかいでしょ！？
設定した画像本来の大きさで表示されるようになるため、大きい画像を使ったぶんだけロゴが大きくなります。

ロゴを自分で作成する場合

ロゴ画像は自分で作成した好きな画像を設定することができます。

ブログでも一番目立つところなのでどうせならキレイなものを作りたいですよね。

様々な職人さんが自分の技術を売るココナラなどを利用すれば安くてカッコいいロゴを作れるかもしれません。

実はこのブログのロゴ画像は全部自分で作成しました。

イチから自分でロゴ画像を作ってみよう！という人のため近いうちにロゴ作成の方法をまとめてご紹介します。

ちなみにこういう画像編集アプリが必要になります。

Pixelmator

3,600円

(2017.03.05時点)

Pixelmator Team

posted with ポチレバ

 

まとめ

今回はロゴの大きさを簡単に変更する方法のご紹介でした。

次のカスタマイズもお楽しみに！