ぱつこ(ptk)回答ポイントなし

はてなブログのレスポンシブデザインなのですが、

タイトル画像を可変させる事は不可能なのでしょうか？
もしくはスマホ用にタイトル画像のみ別のものに設定するのは不可能なのでしょうか？

現在タイトル画像をロゴ画像に設定しているのですが、
PC合わせにしている為にスマートフォンで閲覧した場合、ロゴの左右が切れてしまいます。
スマートフォン合わせにしてしまうとどうもバランスが悪くて・・・

調べても調べても出てこなくて頭がかち割れそうです、、、
どなたか教えていただきたいです。

ログインして回答する

ベストアンサー

ぽけっとしすてむ2016/04/29 21:59:42
```
@media (max-width: 480px) {
#blog-title {
	height: initial;
}
.header-image-only #blog-title #blog-title-inner {
	height: initial;
	background-size: contain;
}
  
}
```
はてなブログデザイン設定のデザインCSSにて、上記を入れて様子を見てください。
※メディアクエリを入れ忘れたので、修正しました。
スター
- 5件のコメントを見る
- a-kuma3 2016/04/29 22:53:49
  スマホのタイトル画像のセレクタって、
  #container .header-image-wapper .header-image-anchor img.header-image-src
  だったりしません？
  
  → http://www.ptkabe.net/?device=touch
  
  スター
- ぱつこ(ptk) 2016/04/30 10:07:09
  
  回答ありがとうございます！
  すみません、何処を確認していいか分からず
  一応ソースを確認したのですがその記述は無かったです、、、
  
  スター
- ぱつこ(ptk) 2016/04/30 10:13:53
  
  >ぽけっとしすてむさん
  
  CSSに記述しスマホで確認したところ上手くいってました！！！
  昨日2時間も悩みに悩んだのが嘘みたいです…
  これから微調整してみます！
  本当にありがとうごさいました！
  
  スター
- ぽけっとしすてむ 2016/04/30 10:17:49
  
  こちらの設定だけではタブレットサイズが考慮されていないので、はてなブログのテーマ作成ページのサンプルを参考にサイズの設定を行ってみて下さい。
  
  スター
- ぱつこ(ptk) 2016/04/30 10:55:22
  
  すべての数値を90%に設定してロゴ画像を見やすいものに変えた所、きちんと表示されるようになりました。
  とてもすっきりしました！ありがとうございます！
  
  スター

その他の回答

この質問へのコメント

ぽけっとしすてむ2016/04/29 21:25:23

レスポンシブモードを解除する(スマートフォン版を表示)事で、独自のヘッダ画像を設定する事ができます。
ぱつこ(ptk)2016/04/29 21:39:47

回答ありがとうございます。
それについては知っているのですが、
レスポンシブデザインのままで何とかならないかと思いまして。。

はてなブログのレスポンシブデザインなのですが、

ベストアンサー

ぽけっとしすてむ2016/04/29 21:59:42

a-kuma3 2016/04/29 22:53:49

ぱつこ(ptk) 2016/04/30 10:07:09

ぱつこ(ptk) 2016/04/30 10:13:53

ぽけっとしすてむ 2016/04/30 10:17:49

ぱつこ(ptk) 2016/04/30 10:55:22

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版