- このトピックには26件の返信、2人の参加者があり、最後に
により10年、 5ヶ月前に更新されました。
-
投稿
-
-
お世話になります。
いつも丁寧に回答していただき、ありがとうございます。
少しずつ自分でも手をいれています。バナーの設定はカスタマイズでできました！
すごく簡単で助かりました。
ありがとうございます。バナーに加え、グローバルナビとその下の「Simplicityの特徴」の記事の一番外枠との間に画像を配置したいです。
画像を入れる横幅で迷っています。1.画像を入れる方法を教えていただきたいです。
2.画像の横幅
∟記事の一番外枠と同じ
∟グローバルナビの長さと同じご教示下さいますよう、よろしくお願いいたします。
-
サンプル: ナビの下に画像を入れる | codepen
こんな感じでしょうか。
一応、レスポンシブには対応してます。ついでに画面幅が変わった時に画像サイズの変化をアニメーションするようにもしておきました。サンプルでは、「グローバルナビの長さと同じ」ですが、「記事の一番外枠と同じ」にもできます。
phpでやる場合は、before-main.phpと言うのがあるので、そこに
<div#insertWrapper> <div.insert></div> </div>こんな構造でhtmlを書けばcssはそのまま使えます。ただし、挿入した画像サイズは、jQueryの$(window).on(“load resize”, function(){…})でやってますので、htmlとcssのみでする場合、それ用のメディアクエリを作ってmax-widthを#insertWrapperに設定して下さい。
メディアクエリのブレイクポイントは、Simplicityのcss/narrow.cssあたりにあると思うので、それらに合わせて書く感じでしょうか。
jQueryの場合、#header-inのサイズを取得して、#insertWrapperのmax-widthに当ててますので、勝手に追従します。
-
before-main.phpでhtmlを書く場合は、
<div.insert></div>にstyle属性で背景画像を追加して下さい。
<div class="insert" style="background-image: url(画像のパス)"></div>
こんな感じです。 -
あ、別にstyle属性でなくても、cssにbackground-imageで追加しても良いです。
-
お世話になります。
ご教示ありがとうございます。申し訳ないです。
私の知識が足らず、理解できない点があります。補足いただけますでしょうか？
1.before-main.phpに以下一文を追加しました。
<div class=”insert” style=”background-image: url(http://www.test-stc.xyz/wp-content/uploads/2016/04/xxx.png)”></div>画像が表示されないのですが、解釈が間違っていますでしょうか？
今回は「記事の一番外枠と同じ」を想定し、740×300で画像を作成し、URLの場所に追加しました。
2.見本に見せていただきました「ナビの下に画像を入れる | codepen」も確認いたしました。
画像とグローバルナビの間に少し余白を持たせたいです。
どのようにしたらいいでしょうか？3.教えていただきました下記が理解できません…
>>こんな構造でhtmlを書けばcssはそのまま使えます。
ただし、挿入した画像サイズは、jQueryの$(window).on(“load resize”, function(){…})でやってますので、htmlとcssのみでする場合、
それ用のメディアクエリを作ってmax-widthを#insertWrapperに設定して下さい。
メディアクエリのブレイクポイントは、Simplicityのcss/narrow.cssあたりにあると思うので、それらに合わせて書く感じでしょうか。
jQueryの場合、#header-inのサイズを取得して、#insertWrapperのmax-widthに当ててますので、勝手に追従します。ここが全くわからないのが1の原因ではないかと思うのですが…
今回は「記事の一番外枠と同じ」の場合で教えていただけますか？再度ご教示いただけますよう、よろしくお願いいたします。
-
レスを書きましたが何かしら問題があって表示されないみたいです。
わいひらさんの承認が必要なのかも知れません。しばしお待ちください。
-
#39868
これは、レスをポストしたんだけど、表示されなかったということでしょうか？
投稿ログをみてみたんですけど、特に、非表示になっているようなレスは見当たらなくって。 -
> わいひらさん
二回投稿して(履歴で戻って再投稿)、2回目は既に投稿されていて重複みたいなメッセージだったんですけれども、投稿できてなかったんですかね？
まぁもう一度書きます(笑)
まず1について。
その1文だけだと足りません。<div id="#insertWrapper"> <div class="insert" style="background-image: url(http://www.test-stc.xyz/wp-content/uploads/2016/04/xxx.png)"></div> </div>このように、挿入されたブロックを囲むブロックが必要です。
2について。
#insertWrapper { width: 100%; position: relative; overflow: hidden; margin: 0 auto; }cssのこの部分のmarginで0を仮に10pxとすると、上下に10pxのスペースができます。#mainにも上マージンがあるようなので、margin: 10px auto 0;などとすると上だけに10px、左右はauto、下は0pxのマージンができます。
-
3について。
画面幅でやる場合は、jQueryは必要ありません。#headerは常に100%なので。もし記事幅に合わせたいと言う場合は、jQueryを修正する必要があります。
PHPで表示するブロックを挿入している場合、jQueryでも同様のことをしているので、そこを無くす必要があります。(function($){ $(window).on("load resize", function(){ var w = $("#header-in").outerWidth(); $("#insertWrapper").css("max-width", w); }); })(jQuery);PHPで表示するブロックを挿入している場合で記事幅に合わせる時は、この部分だけあればよいです。
子テーマのbefore-main.phpにブロック挿入を書いておかないと、親テーマのアップデートで消えてしまうので注意して下さい。
また、画面幅でやる場合にサンプルのcssだとPCの時ちょっと画像が大きいかも知れません。
#insertWrapper .insert { background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 0; padding: 0 0 30%; -webkit-transition: .3s ease; transition: .3s ease; }画像の縦幅は、この部分のpadding: 0 0 30%が作っています。ここを15%なり20%なり良い感じに修正して調整して下さい。この時に、縦幅が狭まれば、画像の上下が切り取られることになるので(見た目だけですが)、位置を調整したい場合は、background-position: center center;を任意の数値で調整します。
例えば、background-position: 50% 80%;など。50%は横、80%は縦の位置です。それぞれ100%が右で、下になります。併せて、メディアクエリでタブレットサイズ、スマホサイズの時にどうするかですが、
@media screen and (max-width: 48em) { #insertWrapper .insert { padding: 0 0 40%; } }この部分の、48emは768px相当です。最大画面幅が768pxの端末では、padding: 0 0 40%とすると言う意味ですが、pcの場合、15%とか20%にして調整してくださいと書いてあったのになぜ48emの時に広げるかは、横幅が狭まれば、それにあわせて縦幅も狭まるからです。
これらの時(メディアクエリで)の位置調整は、例えば
@media screen and (max-width: 48em) { #insertWrapper .insert { padding: 0 0 40%; background-position: 50% 80%; } }このように書きます。PC表示の時は、#insertWrapper .insertが適用され、48emまでの端末は、上記メディアクエリの中の#insertWrapper .insertが適用されます。メディアクエリは変更される部分だけを追記すればよいです。
@media screen and (max-width: 30em) { #insertWrapper .insert { padding: 0 0 56.25%; } }こちらは、30emまでの画面幅の端末の場合です。30emは、30*16で480px相当です。padding: 0 0 56.25%;は16:9のサイズで表示するという意味合いです。これらpaddingで使用している数値は、
縦 ÷ 横 × 100 = これ
と言う計算で出せます。つまり、横が100%の時、縦を何%にするかという計算です。16:9 = 横が100% : 縦56.25%と言うことですが、表示する画像が横長のもので、縦が短い場合、縦を56.25%にして、横を切り取ります(見た目上)、逆の場合は上下を切り取ります。
なので中身は、常に100% : 設定したサイズ で表示されます。拡大されたり、縮小されたりということもあるので、比較的高解像度のものを最適化した画像を利用されるのが良いかと思います。 -
ちなみにサンプルでは、scssで書いてあるので、css欄のview compiledボタンよりcssに変換したものを子テーマstyle.cssにコピペします。
またjQueryで、もう少し高速に位置を表示設定することもできます。今回は記事幅でやられるということなので、jQueryは必要ありませんが、もしかすると他に必要とされる方がおられるかもしれないので書いておきます。
サンプル: サンプルのjQueryのアップデート | codepen
こんな感じで、 DOM解析時にmax-widthを設定することでより早い段階で(オンロード時よりも速く)処理が開始されます。で、更に
$(window).on("load resize")のタイミングでも同様の関数を実行することで、max-widthが書き換わります。setTimeoutで200ミリ秒で処理をするのを付け加えました。resizeイベントはリサイズがされている間中ずっと処理をしますので、リサイズがされた時だけ処理をするという意味合いです。スマホなどはこれがないと正しく動かないかも知れません。処理落ちみたいな感じなんですかね。
-
お世話になります。
Hidekichi様、ご教示ありがとうございます！
1.
Simplicity2 child: before-main.php
教えていただきました記述を、予め入っていた文言の下に追加しました。<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>
<div id=”#insertWrapper”>
<div class=”insert” style=”background-image: url(http://www.test-stc.xyz/wp-content/uploads/2016/04/xxx.png)”></div>
</div>この時点でグローバルナビの下に画像が表示されていませんでした。
<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>上記が不要だったのかと思い削除してみましたが、変わりはありませんでした。
2.
Simplicity2 child: スタイルシート (style.css)
こちらにご教示いただきました記述を追記しました。
1が表示されない為、効果が確認できずです…考えているのですが、原因がわからずです…
画像URLに間違いはありません。原因を教えていただけますか？
未熟者でお恥ずかしい限りです。よろしくお願いします！
-
すみません、記入が間違ってました
<div id="#insertWrapper"> <div class="insert" style="background-image: url(http://www.test-stc.xyz/wp-content/uploads/2016/04/xxx.png)"></div> </div>の
<div id="#insertWrapper">は<div id="insertWrapper">です。#がいりません。 -
Hidekichi様
お世話になります。
お返事ありがとうございました！#を削除したのですが…残念ながら表示されません。
before-main.phpには下記記述のみしか入れておりません。
<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。
?>
<div id=”insertWrapper”>
<div class=”insert” style=”background-image: url(http://www.test-stc.xyz/wp-content/uploads/2016/04/xxx.png)”></div>
</div>スマホでも表示されておりません…
本当に申し訳ありません。
再度ご教示お願いいたします… -
おそらくcssが適用されてないんじゃなかろうかと思います。
> ちなみにサンプルでは、scssで書いてあるので、
> css欄のview compiledボタンよりcssに変換したものを
> 子テーマstyle.cssにコピペします。と書きましたが、ここらは問題ないですか？
#insertWrapperは、.insertを入れるためのブロックです。
.insertのpaddingが高さを作ってます。高さと幅がないと、背景画像は表示されません。
-
Hidekichi様
お世話になります。
スタイルシート (style.css)にview compiledボタンを押してcssをコピペして貼りました。
以下の様になっています。/* グローバルナビの下に画像を入れる */
#insertWrapper {
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;.insert {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding: 0 0 30%;
transition: .3s ease;@media screen and (max-width: 48em) {
padding: 0 0 40%;
}
@media screen and (max-width: 30em) {
padding: 0 0 56.25%;
}
}}
/*不要*/
#header-in,
#navi-in,
#body-in {
width: 100%;
max-width: 1070px;@media screen and (max-width: 48em) {
max-width: 100%;
}
}/* グローバルナビの下の画像に余白を入れる */
#insertWrapper {
width: 100%;
position: relative;
overflow: hidden;
margin: 0 auto;
}教えていただきましたものにコメントを付けています。
何か間違っていますでしょうか？
よろしくお願いいたします… -
/*不要*/ #header-in, #navi-in, #body-in { width: 100%; max-width: 1070px; @media screen and (max-width: 48em) { max-width: 100%; } } /* グローバルナビの下の画像に余白を入れる */ #insertWrapper { width: 100%; position: relative; overflow: hidden; margin: 0 auto; }↑ここまでいりません。
↓view compiledボタンを押すと下のようなcssが表示されるはずですが、(#39982で)レスもらった内容はscssですのでそのままではブラウザが読めません。scssはcssの凄いやつで、ブラウザが理解できるのはcssです。なので以下をコピペしてもらったら良いかと思います。
#insertWrapper { width: 100%; position: relative; overflow: hidden; margin: 0 auto; } #insertWrapper .insert { background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 0; padding: 0 0 30%; -webkit-transition: .3s ease; transition: .3s ease; } @media screen and (max-width: 48em) { #insertWrapper .insert { padding: 0 0 40%; } } @media screen and (max-width: 30em) { #insertWrapper .insert { padding: 0 0 56.25%; } } -
Hidekichi様
お世話になります。
お返事ありがとうございます！#40019で教えていただいた記述を貼りなおしましたが、表示されなくて…
#39982と見比べて以下を削除すると表示されました！#insertWrapper .insert { ←ここの
#insertWrapper ←この部分を削除
他の方もお使いになられるかもしれませんので、こちらに残します。
何度もお付き合い下さり、本当に感謝しております。
ありがとうございました！！！！！ -
> #insertWrapper .insert { ←ここの
> #insertWrapper ←この部分を削除それは間違ってます。
#insertWrapper .insert
この記述には意味があります。#insertWrapperの子要素の.insertに対してスタイルを指定します。
.insertで書いていけたということは.insertは間違ってないんでしょうけれども、#insertWrapperに間違いがあるため.insertが見つからないということです。<div id="insertWrapper"> <div class="insert"></div> </div>こういった記述になってますか？
何かしらタイプミスはしていませんか？
僕が書いたもので、<div id="#insertWrapper">の#が不要だった以外に記入間違いはないはずです。再度before-main.phpのhtmlを確認してidのスペルチェックをしてみて下さい。
今のままだと、#insertWrapperのcssが効いていないように思います。別にhtml側でなくても良いんです。htmlに合わせてcssを書きなおしてもokです。ただしcss側は何回か#insertWrapperを使ってますがhtmlの方は1回しか無いのでhtml側を直すほうが速いというだけです。 -
Hidekichi様
お世話になります。
改めてご連絡ありがとうございます！記述を見直しましたが、それらしき箇所が見当たりません。
#insertWrapperを削除した理由としまして、
#39982で私が貼りました記述と、
.insert { ←この部分
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding: 0 0 30%;
transition: .3s ease;#40019で教えていただきました、
#insertWrapper .insert { ←この部分
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding: 0 0 30%;
-webkit-transition: .3s ease;
transition: .3s ease;「←この部分」というところの記述が違っていたからです。
#40019では表示されず、#39982では表示されました。
before-main.phpには#を削除した下記を記載しています。
<div id=”insertWrapper”>
<div class=”insert” style=”background-image: url(http://www.test-stc.xyz/wp-content/uploads/2016/04/xxx.png)”></div>
</div>基本的にコピペで貼り付けていますので、タイプミスはないと思われます。
上記で何か間違いがあるでしょうか？
なぜ希望の通りに表示されているのかがわかりません。
申し訳ありません。よろしくお願いいたします。
-
簡単なサンプルを作りました。記述の違いはこういうことです。
同じclassが適用されていますが、idの中にあるclassと、class単体で外にあるものとでは色が違うでしょう？
サンプルで言う、.color_redは赤色の情報を持っています。しかし#testの中の.color_redは青色を持っているのです。何度も「表示されない」と言われてましたが、なぜ表示されないのかは、htmlとcssのセレクタ指定が異なっているからです。jQueryだけで行う場合で、表示されなかったとしたら僕がどこかで記入ミスをしていますが、phpにタグを書いて表示されない、かつ.insertだけなら表示されるということは、#insertWrapperの記述に間違いがあるとしか考えられません。
しかし、codepenのサンプルを見てもらってわかるように、挿入するhtmlタグとcssが一致していれば動作するわけです。
ならば、htmlタグの方で、id=”insertWrapper”のinsertWrapperの綴りに間違いがあるか、cssの方で#insertWrapperのスペルに間違いがあるかですが、cssはコピペしてくださいとなったので、cssにあわせるなら、before-main.phpのid=”insertWrapper”に間違いがあるとしか想定できません。もしこれらが修正する前の情報で、例えば現在更新した時、
#insertWrapper .insert { //略 }として動作するなら、キャッシュ等の影響で修正される前の情報が残っていたことも考えられます。
しかし、最終的に上記のcssの書き方でないと本来はいけません。まず上記(#insertWrapper .insert {…略…})で表示されていれば#insertWrapperは動作していることになります。が.insertのみでしか表示されないのであれば、自ずと、
#insertWrapper { width: 100%; position: relative; overflow: hidden; margin: 0 auto; }これが無効になってます。
改めて聞きますが、今の表示で問題はないですか？
before-mainに書いたものは、#body-inの中に表示されるので幅は100%表示でも、記事幅にしかなりません。これははじめて言ったかも知れません。なんか大丈夫な雰囲気だったので深くは言いませんでしたけれども。また#body-inは常にセンターに来るのでmargin: 0 auto;は不要です。
しかし、overflow: hidden;がとても重要な役割をしています。画面幅にするにしても記事幅にするにしても#insertWrapperは実は表示を正しく行うにおいて重要な役割をしているのです。なので、
#insertWrapper .insert { //略 }で表示されないという場合は、修正点を探して修正しないといけません。
画像を#body-inの#main前に表示するだけなら#insertWrapperは不要なんです。また.insertのいくつかの内容も不要です。
当初の予定では画面幅に画像を表示したいということだったので、それでjQueryを書きましたが、before-main.phpに書いたもので問題がないなら、もっと簡単に書けます。
もし当初の質問通り、画面幅表示が希望なら、jQueryを子テーマjavascript.jsに追記して下さい。cssは今のままで大丈夫なはずです。またその際はbefore-main.phpの記述は必要ありません。
表示したい画像は、
var insImg = "http://wp-simplicity.com/wp-content/uploads/2016/04/scrap-1258483_960_720.jpg";
この部分のアドレスを変更します。 -
cssは問題ないと言いながら、.insertのtransition: .3s ease;を#insertWrapperに入れ替えました。
こっちのがアニメーションしてるっぽいので。サンプルのcss欄view compiledボタンより変換されたcssを確認してみて下さい。
-
Hidekichi様
お世話になります。
長々と、本当に申し訳ありません…現在は希望の画像が表示できるようになっております。
ただ、スマホで見た際に、画像の左右が切れてしまいました。
レスポンシブルになっていない感じです。こちらも合わせてご教示いただけると助かります。
よろしくお願いいたします。
-
codepenのアドレスは、
http://codepen.io/Hidekichi/pen/jqpwzW の
/pen/ 部分を /full/ とすれば、ソースのないフル画面でのリザルトが表示されます。つまり、
http://codepen.io/Hidekichi/full/jqpwzW
こういうことです。それから、もしやはり、記事幅にしたいという場合は、jQueryの最初にある
function setWidth(){ var w = $("#header").outerWidth(); $("#insertWrapper").css("max-width", w); }この部分の、$(“#header”)を$(“#header-in”)に変えれば記事幅になります。
-
> スマホで見た際に、画像の左右が切れてしまいました。
これはbefore-main.phpの方の話ですか？
それともjQuery版の方で？ -
chromeあたりのブラウザで、f12キーよりデベロッパーツールを開いて、何かしらエラーとかが出てないかの確認もしておいて下さい。
phpの方を使っていて、cssが問題なら、プラグインかスキンあたりしかcssは使ってないはずですけれども。
-
Hidekichi様
お世話になります。
お返事ありがとうございます！表示されているからといって、正しいとは限らないのですね…
ちょっと腰をすえて、1つずつ確認してみます。ご丁寧な対応、感謝しております。
ありがとうございます！！ -
画像の端切れがどうなったかわかりませんが、まぁ騙されたと思ってJQueryの方を試してみて下さい。
それが正しい動作です。準備として元に戻せるようにbefore-mainで挿入したタグの前後に、
<?php /* <div id=....なんちゃら ... ...</div> */ ?>このようなphpタグとコメントを入れて、コメントアウトします。戻す時は、これらを取ればよいです。
次いで、cssの追記してあるものを上記同様、
/* #insertWrapper { ....略 */このようにして、コメントアウトします。
子テーマjavascript.jsに、
(function($) { function setWidth() { //記事幅にするなら$("#header-in")に変更 var w = $("#header").outerWidth(); $("#insertWrapper").css("max-width", w); } $(function() { //phpでブロックを入れてる場合のみ不要 //画像は以下のアドレス変更 var insImg = "http://wp-simplicity.com/wp-content/uploads/2016/04/scrap-1258483_960_720.jpg"; $("#body").before("<div id='insertWrapper'>"); $("#insertWrapper").append("<div class='insert'>"); $("#insertWrapper") .find(".insert") .css({ "background-image": "url(" + insImg + ")" }); //(不要ここまで) setWidth(); }); var timer = false; $(window).on("load resize", function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { setWidth(); console.log("resize"); }, 100); }); })(jQuery);を追記します。
最後に、子テーマstyle.cssに以下を追記します。
#insertWrapper { width: 100%; position: relative; overflow: hidden; margin: 10px auto 0; -webkit-transition: .3s ease; transition: .3s ease; } #insertWrapper .insert { background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 0; padding: 0 0 30%; } @media screen and (max-width: 48em) { #insertWrapper .insert { padding: 0 0 40%; } } @media screen and (max-width: 30em) { #insertWrapper .insert { padding: 0 0 56.25%; } }画像両端が切れるのはbackground-size: cover;ならあり得ません。これは自動でサイズを調整するプロパティなので。
-
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。