速水シュンジのブログ一覧

この前に変えたデザイン、スタイルシートの設定をちょこっと変えてやり
「ヘッダー画像全体がリンクになる」
「マウスオーバーで白くなる」
という細工をしたところ、「どうやってるんですか？」という問い合わせが数件・・・。

まぁ最近はみんなスマホで見てるだろうからあんまり需要ないだろうし、
やる事はとても簡単なので「ググれ」の一言で済む話だけど、折角なので記事にしちゃいます。

※※※※※※※※※※※※※※※※※※※※※※※
スタイルシートの「詳細編集」を使うため
カービューのサポートは受けられません。
この方法についてみんカラ、カービューへの
問い合わせはご遠慮願います。
※※※※※※※※※※※※※※※※※※※※※※※

やり方は非常に簡単。

1. マイページのメニューにある「スタイルシート」を開く
2. 「詳細編集」タブを開く
3. 下の方にあるウィンドウに以下の記述を追加

-------------------------------------------------------------------------------
■ヘッダータイトル
text-indent:100%;
overflow:hidden;

■ヘッダータイトル色
opacity:0;
display:block;
background-color:#fff;
※マウスオーバーで白ではなく、黒くしたい場合は「#000」にしましょう。

■ヘッダータイトル色(マウスオーバー)
opacity:0.1;
※この値は好みで変えてOKです。1.0に近づけば近づくほど濃くなります。
-------------------------------------------------------------------------------

※ヘッダー画像を好きな画像に変えたい場合
・好みの画像を横930px×縦最大290pxに編集、トリミング
・簡易編集からヘッダー画像にアップロード
・ヘッダーの高さを290pxに設定（画像に合わせて設定）

※注意点としては、
・上記の設定だとブログのテキストタイトルが消えます。ヘッダー画像にデザインするとよいかも。
・どうしてもテキストタイトルを使いたい場合はtext-indentなりpaddingなり駆使しましょう。
・当然ですが、この設定をした後にデザインを変えると再度上記のスタイルを設定し直しになります。

...こんなとこでしょうか。
ちなみにtext-indentを-9999pxにするという手もありますが、SEO的にあまり好みの方法じゃないのでoverflow:hiddenを使ってます。

気になる方はお試しあれ。

…よかったらイイね！してやってくださいw