質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

1708閲覧

wordpress-twenty seventeenでヘッダー画像をレスポンシブする方法を探しています

yasuhiro0000

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/10/08 14:19

こちら、webに関して半年未満で勉強中です。
wordpress-twenty seventeenでサイトを作ろうとして問題が起きています。
こちらの知識が足りていないため、色々とお聞きするとは思いますが、どなたかお教え頂けると嬉しいです。

Q.ヘッダー画像をレスポンシブする方法を探しています

http://jinro-studio.co.jp/test/

イメージ説明

検証はしておりますが、どうしても知識不足で上手くいきません。
何卒よろしくお願いいたします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「レスポンシブ」というのは特定の挙動を表している言葉ではないのですが、そのテーマ自体はレスポンシブテーマとして作られています。

画像の左右を切る手段として object-fit を使用していますが、対応していないブラウザ向けにも対策がされているので、この挙動をはずすことは影響範囲が広くなる可能性があります。

CSS

1.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { 2 3 height: 100%; 4 left: 0; 5 -o-object-fit: cover; 6 object-fit: cover; 7 top: 0; 8 -ms-transform: none; 9 -moz-transform: none; 10 -webkit-transform: none; 11 transform: none; 12 width: 100%; 13 14}

【1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/object-fit

【一歩先行くCSS - object-fitとobject-position | CodeGrid】
https://app.codegrid.net/entry/css-object


別のテーマを探すことをお勧めします。

投稿2017/10/08 14:42

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasuhiro0000

2017/10/11 12:47

遅くなりましたが、ありがとうございます! 教えられたとおりに色々と試してみましたが無理だったので、助言通りに別のテーマを探そうかと思います。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問