【質問】どうすればタイトル画像を大きくできるのでしょうか?

質問内容

はじめまして。阿部と申します。ストークでブログを作り始めたばかりでカスタマイズ方法を色々と調べていたところ、こちらのブログにたどり着きました。

タイトル画像を原寸大で表示するCSSを追加するだけですと、どんなに大きな画像を使用しても画像の外側に水色の余白が残ってしまいますが、この余白が見えなくなるまでヘッダー部分いっぱいいっぱいにタイトル画像を表示するにはどうしたらよろしいでしょうか。

おそらくヘッダー部分のpaddingかmarginといったものをいじらないといけないのかと思うのですが、CSS初心者のためどういったコードを追加すれば良いのかがわかりません。

ネットで検索しても解決策が見つからなかったため、コメントにて質問させていただきます。お手数をおかけしますが、ご教授いただけますと幸いでございます。

 

 

丸窓店主の回答

初めまして丸窓店主です。この質問内容に関しまして僕自身が行っている対応策は『ヘッダーの背景色をタイトル画面の背景色と同じにする』という原始的な方法です。

僕のタイトル画像は白なので、ヘッダー背景色も白にして溶かし込んでいるだけです。

自身がこれで解決してしまっているのでこれ以上の知識は今の所ありません。ちょっと僕の推測を入れながらやれる事はやってみます。

ちなみに当サイトのヘッダー背景を水色にすると下図のような感じになります。多分阿部さんが言っているのはこういう事だと思います。

 

CSSを加工してみる

この両端まで最大限に画像を伸ばしたいという事でしょう。【STORKを1日で本格カスタマイズ】で紹介しているCSSコードは以下の物です。

/*タイトル画像を原寸大で表示*/
.header.headercenter #logo img
{max-height: initial;
}

直訳すれば『ヘッダーのロゴイメージの高さをマックスまで表示させる』という命令ですね。ここに『幅もマックスまで表示させる』という命令を付け加えてみましょう。それが下のコードになります。

 

/*タイトル画像を原寸大で表示*/
.header.headercenter #logo img {
max-height: initial;
max-width: initial;
}

しかしこれでは何も起こりませんでした。max-height(高さを限界まで)の命令だけで原寸大表示(表示サイズの限界はある)が事足りているという事でしょう。

逆にmax-width(幅を限界まで)だけにしてみても、横の背景色の上までタイトル画像が表示されるという事はありませんでした。

 

画像を加工してみる

もう一つ実験として『タイトル画像自体の横幅を増やしてみる』という実験もやりました。

当サイトのタイトル画像のサイズは『1102×435』ですが、この横幅を上げ『2000×435』のタイトルを作成。

増やした分のスペースは分かりやすい様に赤でペイントしてアップロードしたのが下図。

増やした分の幅に合わせ高さも縮小しました。おそらくこれが『タイトル画像の横幅の限界』という事になると思います。

ご覧の通り『ヘッダー背景の水色』は残ったままとなり、画像をいくら大きくした所で意味がないという事になります。

これは僕の予想ですがおそらく『padding』『margin』でどうにかなる問題ではないと思います。

タイトル画像が表示される限界の高さ・幅という物がSTORKのもっと深いプログラム(phpかhtml)で決められているので、CSSだけでこれ以上どうにか出来る物ではないという事です。

そこに足を踏み入れるにはかなりの知識が必要になると予想され、これは『初心者の枠』を越えてしまうレベルです。

なんだかんだ僕も初心者なのでこれ以上の検証ができません。

最初にも記述したように『タイトル画像とヘッダー背景色をなるべく近い色にして溶け込ませる』のが現時点ではベストの解決方法だと思います。お力添えできずすみませんでした。

精進していつかこの問題をクリアできるように頑張りたいと思います。

 

『margin』で解決できました!

これは僕の予想ですがおそらく『padding』『margin』でどうにかなる問題ではないと思います。

さきほどこう書きましたが、トイレで踏ん張りながら考えてるうちに『いや、どうにかなるんじゃね?』と思い、色々試してみた所、ヘッダー背景の上も関係なく画像を表示する事できました!

推測で適当な事言ってごめんなさい!

 

 

方法としては『横幅の大きな画像を用意』し、コードにmarginを加え、マイナスの値を与えて画像の表示位置を左に調節する事で可能です!

/*タイトル画像を原寸大で表示*/
.header.headercenter #logo img {
max-height: initial;
max-width: initial;
margin:0px -450px;
}

とりあえず最大幅を表示する『max-width』を与えておいてからの『margin』操作で画像を左によせます『-450px』という部分が『どれだけ画像を左に寄せるか』の値なので、ここを上手い事調節すれば阿部さんの夢は叶うと思います!

やってみてください!

 

阿部さんからのお返事

 

丸窓店主様

質問させていただいた阿部です。
ご丁寧にお答えいただきどうもありがとうございます!

質問時に申し上げておりませんでしたが、私が使おうとしているタイトル画像というのは実は風景写真の真ん中にブログタイトルを書き込んだものであるため、背景色を同色にして境目を見えなくするというやり方は適用できませんでした。

ですが、本記事の最後に教えてくださったmarginをマイナスにとるやり方で、タイトル画像の左右と上部の余白を見えなくすることができました!(下部の余白部分はグローバルメニューを表示するスペースとして使いたいと思っているので見えたままでかまいません。)トイレでお踏ん張りになりながら考えてくださったことに感謝です笑

ただ、ブラウザの表示サイズを100%から90%、80%…と小さくしていくとタイトル画像が小さくなる分ヘッダーの余白部分がまた現れてしまうので、完全にヘッダーの余白を消すことはできなさそうですね。

また、スマホ版の表示画面も確認したところ、タイトル画像が画面から大きくはみ出して表示されてしまっていたので、スマホでもきちんと表示されるように色々試してみようと思います。

 

丸窓店主の回答

なるほど。

ブラウザの表示サイズやスマホも確かに調べる必要がありましたね。

目の前のパソコン画面だけで夢が叶い浮かれながらドヤ顔していた過去の自分を殴り倒したいです。

本当に申し訳ございません。

今朝、返事を読まさせて頂き『これはもうやるしかない』と思い奮闘していたのですが、もう本当にどう頑張ってもできません。

『coverというcssコードを絡めれば阿部さんの理想に一番近い形になる』という所までは様々な実験の末どうにか分かりました。

他の画像で試してみたら実際にブラウザの拡大縮小なども関係なく画像が必ず画面の端から端まで広がってくれたのです。

 

『よし。コードさえ分かればこっちのもんや』

 

そんなお祭り騒ぎも束の間。

困った事に、この『cover』がどうしても『.header.headercenter #logo img』へ・・・

要するにタイトル画像へ反応してくれないのです。

書き方としては『background-size: cover;』で行けると思うのですが、なぜなのか本当に分かりません。

恐怖心を押さえながらも『親テーマのstyle.css』の記述箇所までいじくったのですが無理です。

もはや僕の知識でいじれるのはこれが限界です。

すみません!!

 

 

石、すげえ

4 件のコメント

  • 丸窓店主様

    質問させていただいた阿部です。
    ご丁寧にお答えいただきどうもありがとうございます!

    質問時に申し上げておりませんでしたが、
    私が使おうとしているタイトル画像というのは実は風景写真の真ん中にブログタイトルを書き込んだものであるため、背景色を同色にして境目を見えなくするというやり方は適用できませんでした。

    ですが、本記事の最後に教えてくださったmarginをマイナスにとるやり方で、タイトル画像の左右と上部の余白を見えなくすることができました!(下部の余白部分はグローバルメニューを表示するスペースとして使いたいと思っているので見えたままでかまいません。)
    トイレでお踏ん張りになりながら考えてくださったことに感謝です笑

    ただ、ブラウザの表示サイズを100%から90%、80%…と小さくしていくとタイトル画像が小さくなる分ヘッダーの余白部分がまた現れてしまうので、完全にヘッダーの余白を消すことはできなさそうですね。

    また、スマホ版の表示画面も確認したところ、
    タイトル画像が画面から大きくはみ出して表示されてしまっていたので、スマホでもきちんと表示されるように色々試してみようと思います。

    • 阿部さんすみません。今日1日頑張ってみたのですが、僕の力では無理の様です。近い将来に実行できる日を夢見て精進いたします。

      • 一緒に考えてくださりどうもありがとうございます。
        私ももし解決方法がわかりましたら改めてコメントさせていただきます。