Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

はてなブログのタイトルテキストのみ画像に置換し、スマートフォンでも最適化する方法

f:id:syofuso:20170610170042j:plain
はてなブログには標準のタイトル画像アップロード機能がありますが、サイズなど色々制限があり、自由に表現するには少し難しいところもあります。

タイトルまわりの調整

タイトル画像について過去に記事を書いています。
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

果たして重要があるのかわかりませんが、以上タイトルテキストのみ画像に置換する方法でした。

カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

はてなブログテーマ制作

有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事