はてなブログには標準のタイトル画像アップロード機能がありますが、サイズなど色々制限があり、自由に表現するには少し難しいところもあります。
タイトルまわりの調整
タイトル画像について過去に記事を書いています。design.syofuso.com
design.syofuso.com
タイトルのみ画像でスマートフォンでも最適化する
今回ははてなブログの標準のタイトル画像アップロード機能を使わず、CSSでタイトル文字のみ画像にする方法をご紹介します。タイトルアップロード機能では
①「タイトルテキストと説明文をテキストとして表示し、背景に画像を使う」
②「タイトル画像のみ表示する」
の②通りの方法があります。
タイトル文字に使いたいフォントがあり、説明文はテキストとして表示したいという場面もあるかと思います。そういうときタイトルのみ文字画像で表示させます。
デザインCSS
デザインCSSに以下のように記述します。タイトル用の画像はあらかじめはてなフォトライフにアップロードしておきます。タイトル用の画像は1000*200pxで作ります。(ヘッダーの高さ200pxのとき）
/* ヘッダーまわり */
#blog-title #title a {
/* タイトルテキスト文字を非表示 */
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#blog-title #blog-description {
padding-top:150px;/* 説明文テキストの位置適宜調整 */
}
#blog-title-inner {
height: 200px;/* ヘッダーの高さ */
background-size: contain;/* 場合によってcover */
background-image: url("PC用タイトル文字画像URL");
background-position: 50% 50%;
padding: 0;
background-repeat: no-repeat;
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅のサイズ */
#blog-title-inner {
background-image: url("スマホ用タイトル背景画像URL"); /* スマホ用タイトル背景画像url */
background-size: contain;
background-repeat: no-repeat;
}
#blog-title #blog-description {
padding-top:100px;
}
}
この方法ははてなブログの標準タイトル機能を使ったときの共通CSSで書かれてるものと同じ方法です。画像置換ではtext-indent:-9999px;と書くのが有名な方法ですが、はてなブログではopacity:0にすることでテキストを非表示にしています。こちらのほうが無理やり感がなくて良いのかもしれません。見えてないのは同じなのでSEO的には評価はわかりませんが。
スマートフォンでピッタリのタイトル画像にする
またメディアクエリーで背景画像を切り替えスマートフォンにも対応しています。
標準のアップロード機能を使うとスマートフォンでの背景画像切り替えが上手く行かないので、スマートフォンではタイトル画像を切り替えるときは上のCSSで#blog-descriptionもopacity:0にするとタイトル画像を使いつつ、スマートフォンピッタリの画像に切り替えることができます。
ただ、スマートフォンの背景画像をメディアクエリで切り替えるのはタイトル画像2つ用意したり面倒なので、id:hogehoge223さんの記事のようにされるのが良いと思います。
www.gamehuntblog.com
果たして重要があるのかわかりませんが、以上タイトルテキストのみ画像に置換する方法でした。
