Genki Wi-Fi

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

*

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

      2015/08/10

 - ブログ, WordPress    - ,

LINEで送る
Pocket

こんにちは。兼業イラストレーターの高田ゲンキ( 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


  関連記事

no image
【月間アクセスランキング】 2015年8月にアクセスが多かった記事 トップ5

先月(2015年8月)は、久しぶりに仕事が落ち着いていたこともあって、ほぼ毎日ブログを更新することができました。「毎日更新するぞ!」と頑張ったワケではなく、7月 …

Genki Wi-Fiの「feedly」読者数が100人を超えました!

いつもGenki Wi-Fiにアクセスありがとうございます。高田ゲンキ( genki119)です。 昨日の記事では当ブログのFacebookページが100人を超 …

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

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

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

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

ベルリンを題材にしたブログの最高峰、 中村真人さんの『ベルリン中央駅』がリニューアル!

『素顔のベルリン』『ベルリンガイドブック』の著者、中村真人さんのブログ、『ベルリン中央駅』が、2015年8月1日で10周年を迎え、ドメインも新たにリニューアルし …

facebookページを作りました!

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

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

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

Genki Wi-FiのFacebookページの「いいね!」が 100人を超えました!

いつもGenki Wi-Fiにアクセスありがとうございます。高田ゲンキ( genki119)です。 突然ですが、当ブログのfacebookページが存在してるのを …

“genki-wifi.net”、スタート。

新しいドメインを取りました。今後はこちらで更新していきますので、ブックマーク等もこちらに変更をお願いします。 主な理由としては、使用しているエックスサーバーとサ …

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

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

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

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

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