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


  関連記事

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

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

facebookページを作りました!

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

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

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

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

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

no image
2015年の振り返りと2016年の展望について

明けましておめでとうございます。高田ゲンキ( genki119)です。 暮れから一時帰国中で神奈川県にいます。年末年始とばたばたしていたらいつの間にか新年も4日 …

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

ブログの更新が1ヶ月以上止まってしまっていました。その間アクセスしていただいた方、スミマセン…、そしてありがとうございます! 以後、なるべく頑張って更新頻度を上 …

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

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

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

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

2014年を振り返ってみる

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

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

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

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

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

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