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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

CSSの変更が反映されない時の完璧な対処法、教えます!

2017.03.02

CSSを開く

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

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

Setting

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

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

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

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

Css

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

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

おしまい

これで作業終了です。

あっという間ですよね。

 

ロゴの設定方法

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

Set

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

Set1 Set3

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

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

 

ロゴが与える印象

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

ロゴの有り無しの比較

ロゴがない場合

Logono

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

ロゴがある場合

Logoyes

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

ロゴの大小の比較

小さいロゴ(標準)の場合

Logosmall

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

大きいロゴの場合

Logobig

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

 

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

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

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

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

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

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

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

Pixelmator

3,600円
(2017.03.05時点)
posted with ポチレバ

スポンサーリンク

まとめ

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

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!

ABOUTこの記事をかいた人

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム