ブログは『ヘッダーを変えるだけ』で印象が劇的に変わる。そう、Simplicity2ならね。

シェアする

  • このエントリーをはてなブックマークに追加
SNSフォローボタン

フォローする

みなさん、こんにちは。暑い日が続きますね。こんな日は、みんなで集まってハイボールでも飲みませんか?

りむです。

みなさん、ブログのヘッダーってどうしてますか?適当な画像にタイトル文字を乗せて公開してませんか?

このブログのヘッダーも、いままでは画像を載せて、その上にタイトル(デフォルトで入力されているもの)が表示されていたシンプルプラン発動って感じだったんですけど、今回変更してみました。どうですか?カッコよくないですか?

仲良くしてもらってるブロガーのらすさんにリアルタイムでアドバイスもらいました!

※7月に行われた『WordPressブロガー飲み会』の一場面。一番右側の気さくなお兄さんがらすさんです。

仲良くしてくれているブロガーさん、らすさんにアドバイスをもらって、ヘッダーを変更してみたら…メチャクチャかっこいいじゃいですかっ!!

ブログ初心者のみならず、パソコンに詳しくない人にとって、コードの記述とかデザインの変更って、ものすごくハードルが高いと思うんですね。自分が何やってるのかわからないし、どういう状態にたどり着けるのかすら見当もつかない。

イメージはあると思うんです。イメージは。「こういう感じのサイトにしたい!」っていう、ね。

でも、そこまでたどり着くためのスキルがないから何をすればいいのかわからない…。Googleで調べながら作業をしますが、自分の欲しい情報をどうやって検索すればいいのかも難しい…。

今回は、ぼくが3〜4時間かけて変更したヘッダー変更までの軌跡を紹介します!!

ちなみに、このブログのヘッダー変更のほとんどは、仲良くしてもらってるブロガーさん、らすさん(@Tips4Life_meにほぼおんぶに抱っこ状態でアドバイスいただきました。至れり尽くせりってこういうことを言うんですね!

らすさん、忙しい中本当にありがとうございました!!飲み行きましょう!!

らすさんのメディアはこちら!:Tips 4 Life 〜毎日の暮らしをより便利に〜

Simplicity2のヘッダー編集!まずは画像・ロゴの準備から!

ってことで、サクサクっとカスタマイズの手順を書いていきますね!

『タイトルロゴ画面』からホーム(トップ)にリンクさせる方法

ヘッダーからホーム画面へリンクするデフォルト設定は『タイトルテキストのクリック』となっています。これをタイトルテキストからではなくヘッダー画像からリンクするように変更します。

この作業自体はシンプルで、初心者の人でも簡単にできます。手順を載せますね。

  1. WordPress外観→ヘッダーを選択
  2. 『ロゴ画像』のところに画像を読ませる(テキストPNG推奨)
  3. 『ロゴを画像にする』にチェックを入れる

これだけです。簡単でしょ?

この作業をするだけで、デフォルトで表示されるタイトルテキストは非表示になります。ただサブタイトルは非表示にならないので、サブタイトルも非表示にしたい場合は消去です。

『タイトルロゴ画像』の作成方法

テキスト形式の『タイトルロゴ画像』を作成する方法です。

のちにタイトルロゴ画像の下に『背景画像』を設定するので、ロゴの背景は透明にする必要があります。

  • 自力でできる
  • そんな作業は常識だろ!

っていう方は読み飛ばしてください。ぼくは、この作業すら行き当たりばったりだったので…。

まず、作業を開始する前に、背景の白い画像を準備します。背景が白ければなんでもいいです。ぼくは『Googleドキュメント』を起動させて、白い画面をスクリーンショットしました。(これは大丈夫だと思いますが、Macでのスクショは『シフト+コマンド+4』で撮影できます)

では、ここから作業方法です。

  1. Googleで『バナー工房』と検索 ※バナー工房は画像編集もできるので便利です
  2. バナー工房』に画像ファイルをアップし加工するボタンをクリックする
  3. 『文字入れ』を選択し、自分好みのフォント・色・形式で文字を入れる
  4. 文字を入力したら『現在の文字の場所を確定する』をクリックする
  5. 確定させたら『ダウンロード』をクリックする

これで作成終了です。

画像の背景を透明にする

ここまででテキストロゴの作成は終了しましたが、背景は白いままです。このまま使用するとロゴの背景に好きな画像を設定できないので、背景を透明にします。

  1. Googleで『PEKO STEP』を検索する
  2. 先ほど作成した『背景白のテキストロゴ画像』をアップする
  3. 『背景白』の部分をクリックして、背景を透明にする
  4. 透明になったらダウンロードする

背景がギザギザっぽくなっていれば完成。これで背景が透明なテキストロゴの完成です。

Simplicity2のヘッダーに作成した画像・ロゴを設定しよう!

つづいて、先ほど作成した『テキストロゴ画像』とロゴの背景に設定する『背景画像』を使って、ヘッダーをかっこよくしましょう!

ヘッダー編集画面で『タイトルロゴ』の文字画像(PNG画像)を挿入

先ほど作成したタイトルロゴ(背景透明)の画像をアップします。

こんな感じです。これでロゴの設定は完了です。

ヘッダー背景画像を挿入

ヘッダー背景画像をアップします。

『ヘッダー外側背景画像』のところに背景画像をアップします。アップ後、自分のヘッダーサイズに合わせて切り抜きをすれば完了です。

これで、かっこいいヘッダーの完成!!

最後のスパイス…!!スマホ・パソコンでヘッダーでの表示を整えよう!!

最後の最後、表示を整えるやり方です。

ここまでは頑張れば自力でできると思いますが、ここから先の表示が結構やっかいなんですよね。素人にはできないレベルの作業です(笑)

この表示の不具合に関して、ぼくはここからのすべての作業をらすさんに頼りきりました。リアルタイムで対応してもらって、本当に助かりました!

なんて言ったって、リアルタイムでスマホ・パソコンの表示を確認してくれてましたからね!助かりました!!神様かと思いました。

ヘッダーからグローバルメニューまでの気になる部分を解消する!

ぼくは設定の方法がいまいちわからないままやってたので、ヘッダーとメニューの間が半端ない空白でした。

そんなときは、このコードを

@media screen and (max-width:414px){#header{background-size:auto100%;border-bottom:2px solid #ed7b8c;}#h-top{min-height:auto;}}

コピペして、スタイルシートの一番下に貼り付ければ、解消されます!!

これでかっこいいサイトデザインの完成!!デザインの変更ってメチャメチャ楽しいですね!!

らすさん、アドバイスありがとうございました!!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする