Genki Wi-Fi

フリーランス イラストレーター高田ゲンキの情報発信ブログ、『Genki Wi-Fi(ゲンキ・ワイファイ)』。

*

Stinger5のヘッダーの文字を隠して画像だけにする方法

      2015/08/10

 - ブログ, WordPress    - ,

LINEで送る
Pocket

sponsored link

こんにちは。兼業イラストレーターの高田ゲンキ( genki119)です。

冗談ではなく、最近本当に良い意味で復業化してきて、日々がより充実しています。依然として圧倒的にイラストでの収入がメインですが、このブログも既に収益化が実現しつつあり、それ以外にも趣味でブログカスタマイズ(cssとかphpいじり)が高じて、最近は「プロで仕事できるよ!」と言われるレベルになってしまったり(アフィリエイトのコンサルも含めたWebビジネスの展開も準備中)。

というわけで、趣味と実益を兼ねているこのブログも日々コツコツとカスタマイズをしているので、ニーズがありそうなネタをシェアしてみることにしました。特に僕と同じ“Stinger5”ユーザーのブロガーさんは多いので、同じ問題を抱えてる人に向けてシェアしたいと思います。

sponsored link

Stinger5のヘッダーのテキストを無くして、ヘッダーが画像だけにしたい

これ、以前からやりたかったけどよくわからず放っておいたカスタマイズなのですが、最近ベルリンにこられたハジメさんのアドバイスによって実現しました!

ヘッダーが画像がロゴ入りの場合、ヘッダーのテキストはデザイン的にクドい

↓これがカスタマイズ前のデフォルト状態でのヘッダーデザインです。キャプションはともかくとして、ブログタイトル「Genki Wi-Fi」という文字がふたつあってクドいったらありません。最初はあまりこだわりもなく始めたブログだったので気にしませんでしたが、あれこれカスタマイズして自分好みのデザインになってくるにつれ気になって仕方なくなってきました。

genkwifiheader_before

ただ、このブログタイトルとキャプションのテキストはスマホ表示の際にはヘッダーのメイン要素になるので、単純に削除すれば済む話ではありません。しかもキャプション部分はh1タグ扱いなので、削除してしまうとSEO対策としてもデメリットが大きいわけです。

そこで考えたのが、テキストは残したままヘッダー画像を上に移動してテキストにかぶせて隠してしまう方法。もしかすると邪道な方法かもしれませんがいいのです(キリ!)。

手順① ヘッダー画像を上に移動する

では手順を説明したいと思います。

style.cssの「/*ブログ名の下のキャプション */」という注釈を見つけて(子テーマではなくオリジナルテーマで作業する場合は127行目くらいにあるはず)、その中の「header .descr {」の一番下の行に「margin-bottom: -68px;」と追加します(-68pxというのは僕の場合の数値なので、状況に合わせて調整してください)。↓こういう感じですね。

ちょっと無理矢理な方法ですが、これでキャプション部分にヘッダー画像が引っ張り上げられるので、↓こんな感じで文字が隠れます。

sponsored link

pc_02

 

キャプション(イラストレーター高田ゲンキの情報発信ブログ「ゲンキ・ワイファイ」という文字)も消したので(正確には存在しているけど表示されない)、画像にデザインの一部として追加してみました。

② キャプション部分の行間を修正

パッと見コレでOKな気がしますが、レスポンシブでスマホ表示にすると↓こんな感じで崩れるので、さらに調整します。

スクリーンショット-2015-08-08-18.12.46

style.cssの「media Queries タブレットサイズ」という注釈を探して(オリジナルでは1025行目あたり)、

↑こちらの}がふたつ続いている部分の直前に
}header .descr{margin-bottom: 0px;
と追加します(↓こんな感じ)。

これで↓こんな具合にマージンができてレイアウトの崩れが解消しました。あとは好みでcss内の数値を調整すれば完成です!

smart_02

まとめ

以上、簡単に「Stinger5のヘッダーの文字を隠して画像だけにする方法」を紹介してみました。これをやりたくていろいろ調べてみましたが、僕が調べた限り同じ方法でやってる人がいなくて困ったのでシェアしました。

  • Stinger5使用者
  • ヘッダー画像デザイン内にタイトル名のロゴを入れてる
  • ヘッダー部分の縦幅が大きすぎるのがイヤ

…という人は、是非参考にして試してみてください!

次回はヘッダー画像をホームへのリンクにする方法を紹介したいと思います

続き、書きました!↓

sponsored link


LINEで送る
Pocket


 - ブログ, WordPress    - ,




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータがどう処理されているか知りたい方はこちらをお読みください

  関連記事

2016年を振り返ってみる

こんにちは。高田ゲンキ( genki119)です。 2016年もあと少し。ということで、今年最後の本投稿で、この一年を振り返ってみたいと思います。 sponso …

当ブログ「Genki Wi-Fi」をスタートして1年が経ちました

sponsored link 当ブログ「Genki Wi-Fi」が、5月24日で1周年を迎えました。というわけで、ブログを1年運営してみて感じたことを書いてみま …

新ブログ「Genki Wi-Fi(ゲンキ・ワイファイ)」開設の解説!

sponsored link 新しいブログ、「Genki Wi-Fi」を作りました。今までのウェブサイトやウェブサイト内の既存のブログと並行して運営していこうと …

no image
イラストレーターにとって効果的なブログを作るために必要な5つのこと

sponsored link 前回のブログに引き続き、ブログ運営をするにあたって実務的な部分で注意する点を書きたいと思います。タイトルは「イラストレーターが…」 …

ブロガーのバイブル『ブログ飯』が10月23日まで無料で読める! フリーランサー志望者必読の良書なので読むべし!

こんにちは。自称ブロガー(笑)の高田ゲンキ( genki119)です。 昨日Twitterを何気なく見てたら、スゴいニュースが! ブログ飯がブログ飯®になりまし …

facebookページを作りました!

当ブログ「Genki Wi-Fi」のfacebookページを作りました。 https://www.facebook.com/genkiwifi ブログの更新情報 …

no image
イラストレーターがブログをやるべき6つの理由

sponsored link ブログの更新が1ヶ月以上止まってしまっていました。その間アクセスしていただいた方、スミマセン…、そしてありがとうございます! 以後 …

2014年を振り返ってみる

sponsored link 2014年を振り返ってみたいと思います。かなり個人的な回想録ですが、おつきあいください。 Contents1 1〜3月2 4月3 …

Xサーバー利用者がMarsEditで「HTTP Username」アラートが出て困った場合の対処法

ひさしぶりにブログを更新するためにMarseditを開いたところ、↓こんなアラートが出て先に進めなくなりました。 This blog is protected …

Stinger5のタグクラウドを かっこよくカスタマイズする方法

最近WordPressのカスタマイズにますますハマってる高田ゲンキ( genki119)です。 今日は、“Stinger5のタグクラウドをかっこよくカスタマイズ …

Stinger5のヘッダーの文字を隠して画像だけにする方法

フリーランス イラストレーター高田ゲンキの情報発信ブログ、『Genki Wi-Fi(ゲンキ・ワイファイ)』。

Copyright© Genki Wi-Fi , 2015 All Rights Reserved.