ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】

ブログタイトルを画像に変える際の基本や【絶対やってはいけないこと】

カスタマイズ HTML, CSS, JavaScript
2017/09/01
9
vanillaice (Akira)
vanillaice (Akira)
EducationInstructionCSS初心者向け

ブログタイトルを画像に変更する というのは比較的ポピュラーなカスタマイズかと思います。その際に やってはいけないこと がいくつかあるんですね。やってはいけないというか、「やるとマズいことになる」と言った方が正しいか。

  • 背景画像とロゴは 切り分けるべき
  • 掲載に利用するのは CSSプロパティのbackground-image ではなく htmlタグのimg

今回はこの2つに的を絞って説明しようと思います。もちろん条件は レスポンシブデザイン であること。

背景画像とロゴは別の画像として用意するべし

こういうことをしてしまう方がいらっしゃるんです ↓
背景 + ロゴの一枚画

背景とロゴ(ブログタイトル)を組み合わせてロゴの位置も確定し、背景つきの一枚画 として作ってしまう。
あとはこれをヘッダーのところに入れて完成、という考え方だと思いますが、この考え方はレスポンシブデザインでは通用しません これをしたいなら固定幅テンプレートを選ばないと (´・ω・`)
実際には固定幅を選んだとしてもよろしくないですよ。単純に「見た目だけ考えれば良い」ということならそれでも良いんだけども。

レスポンシブデザインでこれをやりたいならば、最低でも
背景用 背景用画像 ロゴ部分 ロゴ画像 こうして別々にしておかないと (´・ω・`)

レスポンシブの背景画表示範囲は流動的 - background掲載の場合

まずレスポンシブでヘッダーに画像を入れる際の基本はこちらの記事で ↓

ヘッダー背景画像カスタマイズ時の考え方

ヘッダー背景画像カスタマイズ時の考え方

物の考え方についてです。a way of thinking, a point of view です。 ヘッダーの背景に画像を入れたいなぁ もしくは 既に設置されている背景を変更したいなぁ と考えた時、どんな画像をどのような形で収めるか。 この思考作業のフローチャートというんでしょうか。URLを入れ替えただけでしっくり来ることもあれば、そうでない場合もある わけなので、壁にぶち当たった時に「どう考えれば良いのか」というのを導く記事 (´...

仮に準備した一枚画を background として掲載するとします。これは何故かというと、思考の流れとして

デフォルトでヘッダー部位に背景が入っている

その背景をロゴつきに丸ごと差し替える

こういう感じかしら。まず、レスポンシブでの背景画像表示、その 表示される範囲というのが非常に流動的である というのを知っておかないといけませんね。そちらについてはブログカードのリンク先ページ内容を熟読して頂くとして。そもそもヘッダー背景というのは通常 background あるいは background-image としてCSS指定されています。これがもうダメ。何故ダメかは次章で説明します。

じゃあ実際に差し替えてみましょうか。
パソコン 1238px パソコンでの背景とロゴの見え方 えっと。ブログタイトルはどこですか (´・ω・`)

タブレット 768px タブレットでの背景とロゴの見え方 タブレットサイズだとかろうじて見えますね。すっごい上の方に。

スマホ 375px(iPhone6相当) スマホでの背景とロゴの見え方 切れとるしー。ブログタイトルの左側が見切れとるしー。

上記サンプルは画像位置合わせを center center の水平・垂直中央合わせにしています。ブログタイトルの見切れを防ぐために left top に変更すると以下のようになります。

位置合わせ left top
パソコン 1238px パソコンでの見え方 タブレット 768px タブレットでの見え方 スマホ 375px(iPhone6相当) スマホでの見え方

ブログタイトルは見きれませんが、右のオブジェクトがおざなり。オブジェクトのために right center に変更… なんてことをやると結果はもうおわかりだと思いますので載せませんが、今度はブログタイトルが確実に見切れます。

こんな感じで、レスポンシブデザインでの背景表示範囲というのはコントロールがとても難しいんですね。ですから固定幅の一枚画でなんとかしようと思うのであれば、テンプレートを固定幅に変更して頂く、と。それが最適解になるかと思います。

ただこれね、ヘッダーのbackgroundとしてブログタイトルを入れてしまったら、リンクは一体どうするんですか? ヘッダー全体に当ててしまいますか?ヘッダーの上にナビゲーションがある場合はどうするんですか?

ブログタイトルは背景画像として設置するべきではない

というわけで次の章。

ブログタイトル画像(ロゴ)はbackgroundではなくimgで掲載すべし

これはもう基本中の基本です。

background(または background-image)の特徴

  • 印刷に出てこない
  • マウスドラッグによるコピーができない
  • Google botは画像の内容(オブジェクトが何か, どんなテキストが描かれているか)を読み取れない

backgroundという CSSプロパティ でマークアップされている画像というのは、印刷をする際には無視されます。つまり出てこない。印刷することはまず無いでしょうかこれは別に問題ないとして。コピーについても特に問題ないですかね。本件に大きく関連しているわけではないので。

問題は botに情報を伝えられない とう点です。ロボットに、画像の中にあるテキストを読み取ってくれ、というのは無理筋です。ですからブログタイトルを画像に置き換える場合には

imgタグを用いて、alt属性を確実に記す

のがベストです。というかそれ以外の選択は無い。もしあなたが単純に「ヘッダーにもともとあった 背景画像 をロゴ付き一枚画に置き換えた」のならば、すぐに辞めましょう。検索ロボットが、ページ内のどこにあなたのブログタイトルがあるのか判断することができません。もっと言えば記載があるのか無いのかすら判断ができませんので、backgroundで掲載してしまうというのは避けなければいけません。

上記サンプルを background から img に置き換えてみます。画像の縱橫全て見きれなく表示させると以下のようになります。

パソコン 1238px パソコンでの見え方 縮尺で掲載していますのでわかりにくいですが、縦幅がすっごい大きいです。
画面サイズが大きくなればそれに比例して画像も大きくなりますので、大型画面のパソコンだとヘッダーが巨大になります。

タブレット 768px タブレットでの見え方 タブレットでもやはりヘッダーが大きいですね。

スマホ 375px(iPhone6相当) スマホでの見え方 逆に小さい。パソコンと比べるとヘッダーがスマホではとても小さくなります。パソコンだとほぼほぼ全画面ヘッダーなのに、スマホだと小ぢんまり。そして最大の難点は ブログタイトルまで小さくなってしまう ことです。画像が縮尺されるのですから、当然テキストも小さくなります。テキストは小さくしたくないんじゃないですか?フツーは。

だから一枚画で作成してはいけない んですね。

背景は background で、ロゴは img で掲載

これが一番なんです。背景は元画像の拡・縮尺にしてしまうとヘッダー自体のサイズがそれに左右されてトンデモなことになります。ロゴは元画像の拡・縮尺によってテキストサイズが変化してしまう。これら不都合を解消しようと思えば
背景 --- background
ロゴ --- img
という選択が最も適しています。そうすれば、背景画像はオブジェクト(サンプルでは白いテーブル)のことだけを考えて表示位置を合わせれば良し。ロゴは縮尺がかかった時のサイズ調整を単独で行えば良し。別々にすればなんとでもなる。

ロゴのマークアップ

背景とロゴを切り分ける必要性についてはご理解頂けたとして。ホントにね、ロゴに大きな背景つけたらアカン。マジで(笑)

背景に使用したい画像はヘッダーの画像とURL差し替えで行ってください。これは簡単ですよね。で、ロゴに関してはCSSだけでなんとかするのは不可能ですので、htmlの追加が必須です。

例)

<header>
  <h1>
    <a href="ブログアドレス">
      ブログタイトル
    </a>
  </h1>
</header>

まぁ、大抵こんな感じだと思うのですけれども。
こう変える ↓

<header>
  <h1>
    <a href="ブログアドレス">
      <img src="ロゴ画像アドレス" alt="ブログ名">
    </a>
  </h1>
</header>

赤字の alt属性 ですが、ここに入れるのは ブログタイトル です。
私ならば、ブログ名が「The other way round」ですから
alt="The other way round"
ですね。
ここに「ブログロゴ」「ロゴ画像」「ブログタイトル」
とかは入れない。ブログ名を記してください。

今度はCSSです。
idやclass名を用いた方がホントは良いのですが、今回はやめておきます。

h1 img {
  width: 100%;
  max-width: 最大数値px;
}

緑部分が重要です。基本は100%表示です。スマホでは100%にしておかないと、横320px程度しかありませんので横はめいっぱい使う、と。そのままですとパソコンでも画面サイズの100%まで拡大されてしまいますので、それを防ぐために横幅の最大値を設定してください。max-width: 500px; ならば、ロゴ画像は横幅500px以上になることはありません。

ロゴ画像は解像度を保つために大きめに作ってください。最大値を500pxに設定するのであれば、実寸は1000px。倍のサイズで作っておきましょう。でないと高解像度ディスプレイで閲覧した際に画像が不鮮明(ぼやける)になってしまいます。

ロゴの上下位置についてはheader側の 上下padding で操作すると良いと思います。そしてくれぐれも alt属性 を忘れない。

パソコン 1238px パソコンでの見え方 スマホ 375px(iPhone6相当) スマホでの見え方

まとめ

背景画像というのは「装飾」でしかありませんが、ブログタイトルは装飾ではありません。ですから適切なマークアップがあります。それを無視して見た目だけでやってしまわないことです。

背景画像とロゴは別々で作成しましょう。ロゴに背景つけたらアカンで!という記事でございました。

Related post

Comments  9

2022/08/20 (Sat) 20:32

こんばんわ

いつも有難うございます。
こちらの記事を読ませて頂いて、
ヘッダータイトルの部分だけを画像に変更にトライしようと試みております。
仰る通り、画像は配置出来ますが、元々あるタイトルが残ってしまいます。
すみませんが既存のタイトルを消す方法を教えて下さい。
disply:none; では無効でしょうか?試しましたが消えませんでした。
テンプレートは、「wash_ashore」をお借りしています。
お忙しいところ申し訳ありません。
宜しくお願いします。

通りすがりの人
2022/08/23 (Tue) 09:03

To 朧さん

こんにちは。

朧さんがご使用中のテンプレートの場合ですと、下記のように変更していただければよいと思います。
<%blog_name>の部分がブログタイトルを表示させているので、そちらを削除してください。


現在

<a class="blog-title-anchor" href="<%url>"><%blog_name></a>

変更

<a class="blog-title-anchor" href="<%url>"><img src="ロゴ画像アドレス" alt="ブログ名"></a>

2022/08/24 (Wed) 02:11

To 通りすがりの人さん

こんばんわ
お忙しいのに返信ありがとうございます。
さっそく試してみましたら変えることは出来ましたが、高さ調節が出来なくて変更はかないませんでした。
既存の高さが--height-header: 100px;/* ナビの高さ, 変更非推奨とあり、 height: varと設定されているので、
私には変更は無理でした。varで指定されている内容も見つけられず情けない限りです。
最悪、既存範囲内の高さで画像を作り直すしかないようです。
素人ながら少しづつ勉強をしていきます。
ありがとうございました。又宜しくお願いします。

通りすがりの人
2022/08/24 (Wed) 17:57

To 朧さん

朧さんがご使用中のテンプレートの場合、var(--height-header) と設定している箇所が17ヶ所あります。

その場合、:root内の --height-header の数字を変更すると、その17ヶ所すべてが同時に変更されるとお考え下さい。

:root {
--height-header: 100px; ←ここの数字

1ヶ所の変更で予期していなかった数ヶ所も強制的に変更してしまうため、変更非推奨と注意喚起して下さっているのだと思います。

もしそれを防ぎたいのであれば、下記のように個別で設定し直します。

#blog-title {
display: flex;
align-items: center;
height: var(--height-header);



#blog-title {
display: flex;
align-items: center;
height: 100px; ←好きな数字に変更

わたしの説明で伝わっているのか不安ですが、よろしければ参照ください。
朧さんの疑問と見当違いな解答でしたら申し訳ございません。

2022/08/26 (Fri) 06:13

何度も失礼します

回答をありがとうございます。

教示頂きました、
height: var(--height-header); を、height: 100px; ←(好きな数字に変更)にしても変更はされませんでした。
やはりヘッダーの高さは、
:root {
--height-header: 100px; で指定されるのだと思います。

見当違いな解答だなんてとんでもありません。教えて下さって本当にありがとうございます。
私の説明不足で申し訳ありません。

私は、ヘッダーの高さだけを変更したいのではなく、タイトルを表記する高さ(範囲)をも変更したいのです。
このテンプレートのヘッダーは、ヘッダー右側にheader-bannerや、navi-checkboxなどが配置されております。
それらはそのまま残して、本当はタイトルのフォントだけを変更をしたかったのですが、
フォントを入れ込んでも反映しないので、タイトルの部分を画像に変更しようと画策しております。
とても素敵なテンプレートなので、大切に使用させて頂きたいので慎重に(素人なので)対処したいです。

この記事で教えて下さっている、
<header>
<h1>
<a href="ブログアドレス">
<img src="ロゴ画像アドレス" alt="ブログ名">
</a>
</h1>
</header>
このCSSでヘッダーに画像はちゃんと入ります。
ただ、入れた画像の上に既存のタイトルも表示されてしまいます。
残ってしまうタイトルの部分を消したいので、
タイトルを指定しているCSSを教えて頂きたく質問をさせて頂いています。
それと同時に、タイトルの範囲を広くしたいのでタイトルを指定している高さの変更をしたいのです。

お忙しいところ、何度もご面倒をおかけし申し訳ありません。
どうぞ宜しくお願いします。

通りすがりの人
2022/08/26 (Fri) 10:57

To 朧さん

まずはじめに、

>やはりヘッダーの高さは、
>:root {
>--height-header: 100px; で指定されるのだと思います。

という点ですが、認識に誤りがあるようです。

:root で指定しているのはあくまで --height-heade の数値であり、ここではヘッダーについては関係ありません。

わたしの方で試してみたところ問題なく変更されたのですが、どの部分の height: var(--height-header); を変更して変化がなかったのでしょうか?

100px以外の数値でお試しになりましたか?

もし単純に高さを変更なさりたいのであれば、ccsの下記の部分を変更してください。

ヘッダーの高さを変える場合↓

#header-banner {
position: relative;
max-width: var(--width-whole);
height: var(--height-header);←ここを変更

タイトルの高さを変える場合↓

#blog-title {
display: flex;
align-items: center;
height: var(--height-header);←ここを変更


タイトルのフォントを変更したいというのが本来の目的のようですのでご参考までに↓

#blog-title {
font-family: フォント名;←ここに追加

#blog-title のところにフォント名を指定していただければ、タイトルだけ変更されますよ。


わたしも全くの素人ですべて独学です。
それでも試行錯誤することに楽しさを感じておりますので、朧さんにも楽しいと感じていただけましたら幸いです。

2022/08/27 (Sat) 15:23

To 通りすがりの人さん

詳しく教えて下さりありがとうございました。
私も素人ながらなんとか試行錯誤して楽しんでおります。
お借りしているテンプレートの指定タグが分からず質問させて頂きました。
お世話をおかけいたしました。

vanillaice (Akira)
vanillaice (Akira)
2022/08/31 (Wed) 16:38

To 通りすがりの人さん

不在中のヘルプをありがとうございます。助かります。
今後ともご協力よろしくお願いします :)

vanillaice (Akira)
vanillaice (Akira)
2022/08/31 (Wed) 16:56

To 朧さん

お返事遅くなり申し訳ないです。

まず今回の「画像に変更したい」という理由が「CSSによるフォント変更ができないから」と判断した上で説明をしますね。フォントを変更したいだけならば画像を作成する必要は無いので、以下の内容をしっかりお読みいただいて対処してください。

----
【フォント変更が反映されない原因】
以前もお伝えしたとおり、スタイルシート内に不正な全角スペースが記載されているため です。
なので全角スペースを除去すればちゃんとカスタマイズが反映されますし、逆の言い方をすれば除去しなければ絶対に反映されない、ということです。

スタイルシート内の除去(delete, 削除)すべき全角スペースは2箇所。スクリーンショットを見ながら作業してください。文字列を見つけるにはそれぞれ Ctrl + F キーでブラウザの文字列検索機能を使ってください。
スクリーンショットの黄色い部位が全角スペースなので、この右側にカーソルを入れてdeleteキーで削除。

.blog-title-anchor {
↑ で検索
https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc__1.png

#navigation {
↑ で検索
https://blog-imgs-154.fc2.com/v/a/n/vanillaice000/sc__2.png

これはきちんと修正しておかないと、今後どんなカスタマイズを行っても上手くいきませんので、必ず修正を行ってくださいね。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)