X

HTML/CSS のどんな質問に必ず優しく答えるスレ 32

0001Name_Not_Found
垢版 |
2018/02/25(日) 17:27:17.09ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術もOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/

■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html
0287Name_Not_Found
垢版 |
2020/01/10(金) 20:12:21.76ID:UoRWV6D7
初めて書き込みさせていただきます。

添付画像のように、トピックスが10個表示されているうちの下7つをCSSで非表示にしたいのですが、うまくいきません。
わかる方がいらっしゃいましたらご教授頂けないでしょうか？
https://dotup.org/uploda/dotup.org2036569.png.html

試したコードは以下になります。
①
.loop-item-3,
.loop-item-4,
.loop-item-5,
.loop-item-6,
.loop-item-7,
.loop-item-8,
.loop-item-9
{
display: none;
}

②
.loop-item-3.user-id-1.bbp-parent-forum-51.even .post-136.topic.type-topic.status-publish.hentry
{
display: none;
}
0288Name_Not_Found
垢版 |
2020/01/11(土) 00:14:38.08ID:???
SASS なら、ループで、

このサイトに入力してみ
https://www.sassmeister.com/

@for $i from 3 through 9 {
.loop-item-#{$i} { display: none; }
}

出力
.loop-item-3 { display: none; }
.loop-item-4 { display: none; }
中略
.loop-item-9 { display: none; }
0289Name_Not_Found
垢版 |
2020/01/11(土) 00:26:57.31ID:???
>>287
ul.bbp-topic >li
をdisplay: noneにして


ul.bbp-topic >li:nth-child(1)
ul.bbp-topic >li:nth-child(2)
ul.bbp-topic >li:nth-child(3)
をdisplay: blockでどうよ
0290Name_Not_Found
垢版 |
2020/01/11(土) 01:03:15.96ID:???
>>287
(1)に!important付けてみても効かないようなら何か間違ってるんじゃ?

.bbp-body > ul:nth-child(n+4) { display: none !important; }
0291Name_Not_Found
垢版 |
2020/01/11(土) 23:30:12.97ID:+XDFqklK
>>290
こちらの!importantをつける方法でできました！
スタイルシートの優先順位があるんですね！

nth-child()やfor文で書く方法もあるんですね。
とても勉強になります！

皆さんありがとうございました！
0292Name_Not_Found
垢版 |
2020/01/11(土) 23:34:09.96ID:+XDFqklK
あと追加でお聞きしたいのですが、

「＞」←この記号を付ける付けないで表示って変わる場合がありますか？
ただ分かりやすくするために明示的に記載しているだけでしょうか？
0293Name_Not_Found
垢版 |
2020/01/12(日) 00:22:14.02ID:???
.a .b
.a > .b

空白なら、.a のすべての子孫の.b で、
> なら、.a の子(直下のみ)の.b

> は、直下の子のみに限定される

CSS の基礎を勉強してください！
0294Name_Not_Found
垢版 |
2020/01/12(日) 00:34:03.10ID:lNesSHYe
>>293
なるほど！ありがとうございます！

基礎すら勉強せずにホームページ作り初めてみたので苦戦しまくりです...
ちゃんと勉強してきます！
0295Name_Not_Found
垢版 |
2020/01/13(月) 21:50:16.07ID:???
VScodeとブラケッツってとっちが使ってる人多いのかなー？
0297Name_Not_Found
垢版 |
2020/01/22(水) 12:52:08.72ID:???
"ホームページ作り"って今はもう既に懐かしい言葉に聞こえるな
0298Name_Not_Found
垢版 |
2020/02/16(日) 06:27:36.08ID:???
サーバーのFTPマネージャーでアップロードしたファイルをスマホからエディタで編集しながらサイトを作っているのですが、急にアップロードしたファイルが文字化けしてしまったのですが、どうしたら治るでしょうか？

あと、/public_htmlの下にディレクトリを2つ分けて2つのサイトを作りたい為それぞれにパスワード設定したいのでそれぞれのディレクトリに.htaccessと
.htpasswd入れたところ、どちらもパスワードの認証画面は出るのですが、二番目のサイトの方も一番目のIDとパスワードじゃないと入れなくて困ってます。
どうしたら良いでしょうか？
0300Name_Not_Found
垢版 |
2020/02/16(日) 06:29:47.82ID:???
今見たら文字化けは直ってました！
0301Name_Not_Found
垢版 |
2020/02/16(日) 17:37:43.14ID:t1u6OT+D
今って、皆さんIE対応どこまでしてるんですか？
IE11のみ？
0302Name_Not_Found
垢版 |
2020/02/17(月) 00:16:21.87ID:Tu90zllX
ようつべでアップしないでvideoタグでMP4アップすると音は出てるけど動画が映らないんだけどなんで？
0303Name_Not_Found
垢版 |
2020/02/17(月) 22:25:46.24ID:???
>>301
いちおie9～
アクセスログ見ると、macと同じくらいいるから
0304Name_Not_Found
垢版 |
2020/02/24(月) 21:30:37.22ID:???
>>301
ie11のみ
flex使いまくり
書き方少しだけie用に気を使うけど
0305Name_Not_Found
垢版 |
2020/02/25(火) 09:16:39.44ID:???
>>301
趣味サイトはIE11のみ、仕事なら料金次第

「どんな環境でも問題なく読める」ということと、「どんな環境でも全く同じ表示になる」は
どちらも「対応している」と言えると思うけど、対応の仕方は違いますよ
0306Name_Not_Found
垢版 |
2020/02/25(火) 09:33:09.36ID:???
IEなんかポイっだよｗ
今時の素人はスマホで見れれば満足する
0307Name_Not_Found
垢版 |
2020/05/08(金) 18:58:20.78ID:???
みんな仕事依頼を初めて受けるためにポートフォリオをアップする時、サーバー代を払ってサイト作りましたか？
0308Name_Not_Found
垢版 |
2020/05/12(火) 20:21:10.82ID:???
無料のレンタルサーバーとかでも良いんでね？
0310Name_Not_Found
垢版 |
2020/05/17(日) 16:39:42.51ID:???
>>308
無料のレンタルサーバーがあるんですね;探してそれ使ってみます！ありがとうございます！
0311Name_Not_Found
垢版 |
2020/12/04(金) 01:34:05.90ID:???
日本だけIE利用率高いんだよな
リモートワークとかリモートスクールが増えたせいで
また10％近くまでシェア伸びやがった
0312Name_Not_Found
垢版 |
2020/12/29(火) 20:49:30.53ID:???
広告を２枚横並びにする場合divよりtableの方がいいと思うけど
divを使う利点ってありますか？
tableだとwidh指定しなくても広告サイズにあわせて伸び縮みしてくれるから
0313Name_Not_Found
垢版 |
2020/12/30(水) 04:07:58.48ID:???
テーブルってのはそういう用途に使うものじゃない
0314Name_Not_Found
垢版 |
2020/12/30(水) 12:54:57.29ID:???
同業者に見られたときに
　div＝まあ普通・まあ分かってるよね
　table＝こいつ分かってねえな・仕事任せられん

という評価
0315Name_Not_Found
垢版 |
2020/12/30(水) 15:07:56.34ID:???
社長・取締役・部長・課長「崩れなければおｋ」
0316Name_Not_Found
垢版 |
2020/12/30(水) 16:43:08.21ID:???
見た目は問題ないな。ヨシ！
0317Name_Not_Found
垢版 |
2020/12/30(水) 18:34:16.24ID:???
少し前はdiv厨って言われていたんだけどなｗ
0318Name_Not_Found
垢版 |
2020/12/30(水) 19:53:02.57ID:???
>>312
マークアップ的にNG

個人のサイトなら自由にすればいいけど
企業や依頼されたサイトでそれやるのは
あとあとの保守の面でもマークアップ的にもマイナス評価
0319Name_Not_Found
垢版 |
2021/01/03(日) 14:33:07.74ID:???
右カラムのラベルから選択して、
表示したい画像のサムネイルが並んでほしいものを開くという工程で
そのサムネイルが画像全体の表示にならないのでその絵が何なのかわかりません。
全体をサムネイルで見せる方法を教えて下さい

https://2021testsaite.blogspot.com/
↑テスト用サイトです。
ナマケモノの画像の方は元画像のサイズは1200?630とバカでかい画像なのに
全部表示されてます。アドバイスお願いします。
0320Name_Not_Found
垢版 |
2021/01/03(日) 15:59:17.02ID:???
>>319
そもそもサムネイル画像が正方形に加工された状態で出力されていて、CSSじゃどうにもならない
使ってるテーマを改造しないとダメなんじゃない？

Bloggerでアイキャッチ（サムネイル）のサイズを変更する
ttps://toaruhetare.net/7445
0321Name_Not_Found
垢版 |
2021/01/03(日) 16:26:06.00ID:???
>>320
ありがとうございます
全部の記事の最初に入れるんですよね？
1つめ
<img expr:src='data:post.thumbnailUrl'/>　変わらず

下の残り2つは書き方がわからずそのまま文字が出てしまいます。

resizeImage(イメージURL, 新しい画像の横幅, 画像のアスペクト比)

resizeImage(data:post.thumbnailUrl, 120, "1:1")
0322Name_Not_Found
垢版 |
2021/01/03(日) 16:27:49.95ID:???
>>321
<img expr:src='data:post.thumbnailUrl'/resizeImage(data:post.thumbnailUrl, 120, "1:1")
>でもだめです、、
0323Name_Not_Found
垢版 |
2021/01/03(日) 17:22:07.00ID:???
>>321
【Blogger】QooQリスト版 トップページ記事一覧のサムネイル画像サイズを変更する方法
ttps://www.limosuki.com/2020/01/blogger-qooq-photosize.html
0324Name_Not_Found
垢版 |
2021/01/03(日) 19:32:04.33ID:???
>>323
<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;1:1&quot;)'/>
これ書くと開いた画像の右上に四角い空白が出ます。
何も変わらないです。
1行目に入れていいんですよね？
CSSは入れたら変わりましたが
自分は小さくしたいのです。全体が見れるようにしたいのであります、、
何がおかしいのでしょうか？
0325Name_Not_Found
垢版 |
2021/01/03(日) 19:34:38.33ID:???
>>324
あ、HTMLのメインのページじゃなくメインを修正ですね、ちょっとやってみます。すみません
0327Name_Not_Found
垢版 |
2021/01/04(月) 16:46:31.29ID:???
>>326
それだと250px幅の正方形画像を出力してるだけだから、元画像のアスペクト比にしたいなら
<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 250;)'/>
とかじゃねーの？
3列にしたいならCSSで.list-itemのflex-basis:49.5%;を32.5%とかにする
あと、ついでに.list-item-imgにobject-fit: contain;指定しとくとか
0328Name_Not_Found
垢版 |
2021/01/04(月) 17:04:23.02ID:???
>>327
ありがとうございます！
まだ実行する時間ができませんが、感謝を先に、、
0329Name_Not_Found
垢版 |
2021/01/04(月) 18:33:51.90ID:???
>>327
49.5%を三等分するから32.5％

.list-item-imgにobject-fit: contain指定でサムネと同じ画像比率になりました。
ありがとうございます

https://2021testsaite.blogspot.com/
見ていただけたら幸いですが、
縦の長さを均等にしたいという欲望が出てきまして、、
どこにそのコードがあるのでしょうか。。
0330Name_Not_Found
垢版 |
2021/01/04(月) 18:41:28.43ID:???
>>329
それと
横列列が3つ埋まらないと
真ん中が空いてしまいます。
6つ入れれば大丈夫ですが、、
0331Name_Not_Found
垢版 |
2021/01/04(月) 19:23:10.15ID:???
>>327
何度もすみません。
タイトルを入れ忘れたのでずれてたみたいです。
が、どれかが2行とかだと又ずれる仕様ですね、お騒がせしてすみません。
問題は5つだと真ん中が空く問題なのです
0332Name_Not_Found
垢版 |
2021/01/04(月) 21:57:09.42ID:???
>>329
元画像のアスペクト比で画像が出力されないのな
そもそも何のテンプレ使ってんの？

>>331
最下段が左右に分配されるのを左寄せにするのは#listのjustify-contentを
justify-content: flex-start;
ただ、これだとアイテムの間隔が無くなるから、.list-itemにmargin-right: 5px;とか適当に

タイトル無しで空きを埋めたければ、同じく#listのalign-items:を
align-items: stretch;
0334Name_Not_Found
垢版 |
2021/01/04(月) 22:56:43.56ID:???
>>332
全部できました。驚きです。ありがとうございました。
あのーPCブラウザーで画面幅を狭くすると
3行構成だったのが2行になります。
これは固定することって可能でしょうか？。。
それとですが
携帯側で見るとラベルとかそういったものが表示されなくなってます
0335Name_Not_Found
垢版 |
2021/01/04(月) 23:13:14.01ID:???
>>334
ちなみに
このページなんですが
https://irasutofree.blogspot.com/
WEBで見るとトップページが何も書かれていなくて
スマホで見るとしっかりラベルも表示され機能してます。

今までコードを教えていただいたHPです
https://2021testsaite.blogspot.com/
トップ画面のホームにすでに絵が並んでます。
これが関係してますか？
0336Name_Not_Found
垢版 |
2021/01/04(月) 23:36:56.66ID:???
>>334
2列になるのはflexboxによるレスポンシブ対応になってる
3列固定は#main-contentのwidth: calc(100% - 346px);を、固定値にすれば可能だけど
画面の小さいノートPC等の端末で見る場合に横スクロールが発生する場合がある

>>335
PCでもスマホでも同じものしか表示されないけど、前者の方はそもそも記事投稿してある？
それぞれブログとしては全く別物だから、同じテンプレ使ってても記事無いなら何も表示されない
0337Name_Not_Found
垢版 |
2021/01/05(火) 00:43:26.55ID:???
>>336
ありとうございます
ページを作るわけですね？
トップのURLが変わってし舞うという理解でいいですか？
https://irasutofree.blogspot.com/p/blog-page_4.html?m=1
このサイトはスマホもちゃんと表示されますが、


コードを修正してきた今までのサイトは
https://2021testsaite.blogspot.com/p/main.html

このようにスマホでは上の方のHPのようにきれいに表示されません、、
何がおかしいのでしょうか？
0338Name_Not_Found
垢版 |
2021/01/05(火) 00:58:06.04ID:???
>>337
WEBでスマホ画面確認する場合
どこかリンククリックして見るとおかしくなります
0339Name_Not_Found
垢版 |
2021/01/05(火) 01:11:46.82ID:???
>>337
> ページを作るわけですね？

違う。「投稿」に記事はあるのか？って話。
このテンプレの場合、トップページに表示されるのは「投稿」一覧であって「ページ」一覧ではない。
「ページ」を作成してもトップページには何も表示されないし、「投稿」に何も無ければ
何も表示されない。
「ページ」と「投稿」は別物だから、それぞれの個別記事はPCでもスマホでも表示のされ方が違う。
0340Name_Not_Found
垢版 |
2021/01/05(火) 10:40:13.66ID:???
>>339
ありがとうございます
記事は投稿されています。ナマケモノの写真を投稿からUPしてみました
https://irasutofree.blogspot.com/search/label/%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88
それ以外にイラストも以前に投稿してみたものです。
しかし、オレンジ色の女の子のイラストやホームを押すと
又空白に戻ってしまいます。何か間違ってますでしょうか？

それとスマホの方はWEBの左のカラムがそのまま表示されてるだけのようですが
その投稿がうまくいった場合
教えていただきながら作った
https://2021testsaite.blogspot.com/
このサイトのスマホ版のようにリストなどのない
出来上がりになるのでしょうか？
0342Name_Not_Found
垢版 |
2021/01/05(火) 12:01:45.60ID:???
>>340
もう一度、「テーマ＞HTMLを編集」で上手く行ってる方のテーマのデータを全て上書きコピペして
それでダメなら、もはやスレ違いなのでBloggerのスレで聞いた方が早い

後半の質問はちょっと何言ってるか分からんが、単にモバイルデバイスでモバイル版を設定してるか
デスクトップ版を設定してるかの違いじゃねーの？
0343Name_Not_Found
垢版 |
2021/01/05(火) 12:23:57.93ID:???
>>342
ありがとうございます
最初のページに移植しても無理でした。でも問題ないんです。
教えていただきながら進んだサイトの方でできて、
新しいテストサイトに移植してもちゃんと表示されてるからです。

そこでです。言われたままモバイル設定をデスクトップ設定に変更したら
ちゃんとできました！！！感謝です。
0344Name_Not_Found
垢版 |
2021/01/05(火) 16:18:20.05ID:???
>>342
おかげさまで未完成ながらも理想の形になりました
何度もお付き合い頂けて本当にありがとうございました。

今後も進めていくうちに問題が山積みかもしれませんが
諦めずに勉強したいと思います。
又何かあった時
かまって頂けたら幸いです。
ありがとうございました！
0345Name_Not_Found
垢版 |
2021/01/05(火) 19:36:05.92ID:???
>>342
恥ずかしながら戻ってまいりました。
https://2021testsaite.blogspot.com/

15枚の画像をアップしてみたんですが
1Pめが9枚分のスペースがあるのに
7枚で次のページ、次のページも7枚です。
object-fit: contain;をこのように入力したのですがなにか関係ありますでしょうか？
}
.list-item-img{
display: block;
width: 100%;
object-fit: contain;
}
0346Name_Not_Found
垢版 |
2021/01/05(火) 19:45:15.04ID:???
>>345
分からないことは質問する前に先ずググろう

トップページに表示される記事数を設定する
ttps://www.howtonote.jp/blogger/ini/index3.html
0347Name_Not_Found
垢版 |
2021/01/05(火) 19:48:08.03ID:???
>>345
あと、object-fitは1:1の正方形サムネイルを出力してる今の状態では
何の意味も無いから、元画像のアスペクト比で画像を表示させないなら
無くてもいい
0348Name_Not_Found
垢版 |
2021/01/05(火) 21:29:24.79ID:???
>>347
ありがとうございます。HTMLに目が行き過ぎてました、、ｗ
一つうまく行かないのがありまして、、、
スマホ版で
このブログ内検索を一番上に持っていきたいので
https://fujilogic.blogspot.com/2020/03/searchbox-in-navibar.html
このサイトのようにやりました。
ナビゲーションバーに検索バーを加えました。
しかし
スマホの方だと上のオレンジ色のところを押さないと出てきません。
これを常に表示したいのです。押さなくても
現在の私のテストサイトです
https://2021testsaite.blogspot.com/
アドバイスお願いします、、
0349Name_Not_Found
垢版 |
2021/01/05(火) 22:22:24.67ID:???
>>348
>検索BOX可愛くないですが事務的なデザインのやつ貼ることに成功しました！
ナビゲーションバーをタブ押さずに常に開いた状態で表示したいので
やってみます、、
0350Name_Not_Found
垢版 |
2021/01/05(火) 22:40:05.39ID:???
>>348
先ず、検索ボックスの挿入場所が間違ってて参考サイト通りに出来て無いっぽいから
出来てる前提で説明するけど

#navigation-contentのdisplay: none;をdisplay: flex;にして
#navigation-button:checked ~ #navigation-contentのdisplay: flex;をdisplay: none;にすれば
デフォルト状態だとナビゲーションが表示になって=マークをタップすれば非表示になる
0351Name_Not_Found
垢版 |
2021/01/05(火) 22:42:56.91ID:???
>>349
何が何だか分からんけど、デザインはCSSでどうとでもなるので
まぁ、頑張って
0352Name_Not_Found
垢版 |
2021/01/05(火) 22:59:43.50ID:???
>>350のCSSは
ナビゲーションって書いてあるとこの
@media ( max-width : 768px ) {
って書いてある下にあるやつな
displayのnoneとflexを入れ替える感じ
0353Name_Not_Found
垢版 |
2021/01/05(火) 23:35:11.98ID:???
>>352
おそくまでありがとうございます～～！
できましたー感動です！！
まだ問題ありそうですが、検索かけて自力でやる努力をしながら
やってみます。又何かあった際は是非ともよろしくお願いいたします、、、
本当にありがとうございました！
0354Name_Not_Found
垢版 |
2021/01/08(金) 20:28:28.85ID:???
えーこんにちは。、またまたです。が
https://2021testsaite.blogspot.com/

このサイトのサングラスの女の子が縦に並ぶのも大問題なのですが
その下の一番新しい投稿に5人の男の子が写ってます。
アイキャッチの画像だけ変更して
開くと5人のイラストが5つ個別でサムネイルのように並んでます。
これはサイトからHTMLをコピーしてどんなものかと触ってみたのですが
うまく行ったと思いきや、WEBでの方で列が、ずれてしまってます。
これはどこを触ったらいいかお願いします、、
0356Name_Not_Found
垢版 |
2021/01/08(金) 21:50:50.87ID:???
>>354
直接的には.list-itemにCSS（特にflex-basis）が効いてないのが原因
list-itemに横幅の指定が無いと、タイトル文字列が自動的に折り返せない
で、何故CSSが効いていないのかというと、.list-itemの上（183行目）に余計な
「}」があるから、これを削除する
結局は余計なことしてるから不具合が出るので、おかしくなったと思ったら
いじったところを調べよう
0357Name_Not_Found
垢版 |
2021/01/08(金) 22:16:31.89ID:???
>>356
あー、あの中から
たった一つのそれを探して頂けて本当にありがとうございました！！！
うまくいきましたー！
0359Name_Not_Found
垢版 |
2021/01/08(金) 22:50:30.38ID:???
>>358
文字列？
タイトルは長ければ折り返されるだけなので、そこはお好きにどうぞ
0360Name_Not_Found
垢版 |
2021/01/08(金) 23:03:45.41ID:???
>>359
タイトル入れてなかっただけでしたーｗありがとうございます！！
0361Name_Not_Found
垢版 |
2021/01/09(土) 15:03:42.97ID:???
https://www.bambi.pro/entry/blog-eyecatch-list
アイキャッチ画像をヘッダーの下に貼り付ける内容ですが
750行あたりの記事表示部分に移植しました
このサイトのスマホ２列用を入れたのですが
WEB側もスマホ側も二行になりません
数字を変えてもうまくいきませんし、画像も小さいです。

理想を言えば
WEB側は3行　スマホ側は2行にしたいのです。
どのへんを触ればいいのでしょうか？お願いします。。
0362Name_Not_Found
垢版 |
2021/01/09(土) 15:25:43.57ID:???
>>361
貼り忘れましたサイトです
https://2021testsaite.blogspot.com/


750行あたりの記事表示部分に移動させると、
どのページ開いても常にそのアイキャッチ画像が見えるってことですよね？
本当は邪魔ですがそういうテンプレートだから
そこに表示させたらずっと表示される設定なんでしょうか？
0363Name_Not_Found
垢版 |
2021/01/09(土) 16:36:21.47ID:???
>>361-362
どこに貼り付けたのかは厳密には分からんけど、パンくずリストなんかに混ざっちゃってるから
挿入部分がおかしいんじゃないかと
挿入するなら730行前後にある<div class="container">の上辺り？
というか、単純に挿入したところで他の部分で上手く行くとも思えないけどね
よく分からないのなら、はてなブログとかBloggerとは別物のソースを安易に使わない方がいいよ
0364Name_Not_Found
垢版 |
2021/01/09(土) 17:24:46.92ID:???
>>363ありがとうございます
https://www.moca-memo.com/2020/02/blogger-qooq-header.html
このサイトのようにやって見ました
中くらいにある
Blogger「QooQ」ヘッダー下にアイキャッチ画像付きリンクを表示する方法
という項目です。
CSSを入れたので
780行あたりにが指定箇所可と思い
HTMLを入れてみましたがそこだとこうなります。
https://2021testsaite.blogspot.com/
ヘッダの下に配置されてしまいます
尚
864行目にも同じ画像HTMLを入れてみました。

場所は
タイトルのテキスト
検索して頂けたら出てくると思います。
0365Name_Not_Found
垢版 |
2021/01/09(土) 18:17:01.85ID:???
>>364
色々いじり倒してると、もはや行数言われても、どちらが何なのかが分からんのだけど
どこに挿入するのが、あなたにとっての正解なの？
どちらが正解で、正解の方で困ってる事を教えてくれないと答えようが無い
0367Name_Not_Found
垢版 |
2021/01/09(土) 18:42:21.70ID:???
>>366
だったら、CSS部分の..article-containerにflex-wrap: wrap;追加するぐらいでいいんじゃない？
現状でもスマホは2列になってると思うけど
0368Name_Not_Found
垢版 |
2021/01/09(土) 19:02:34.05ID:???
>>367
ありがとうございます
入れました！
スマホは二列ですが
WEBだと
画像6個で縦に並んでしまいます
大きさを固定して
3行で2行、3行と並んでくれるようにしたいのです、、
0369Name_Not_Found
垢版 |
2021/01/09(土) 19:22:49.75ID:???
>>368
いや、どこに入れたのか知らんけど
先ずは/*=== article window ===*/って書いてあるとこのちょっと下にある
.article-containerの直下にあるarticle-container単独で入ってる行を消して。
んで、同じ箇所の.article-containerの後の{}でくくられた中にflex-wrap: wrap;を入れて。
で、入れました！ってのは間違ってると思うので元に戻そう。
0370Name_Not_Found
垢版 |
2021/01/09(土) 19:57:44.03ID:???
>>369
すみません、検索していた文字をそのまま打ち込んでしまってましたｗ
それで、
下に並んでいるイラストの枠のように幅固定なりサイズ指定などはできますか？
.article-box{
box-sizing:border-box;
border:2px solid whitesmoke;/*画像の枠色*/
width:25%;
padding:0px;
margin:30px 15px;/*画像周りの空白*/
overflow:hidden;}
このへんだと思うのですが
width:25%;を大きくすると2行になってしまいます。
0371Name_Not_Found
垢版 |
2021/01/09(土) 20:06:53.21ID:???
答えてくれる人とメールなりでやりとりすればいいのでは？
0372Name_Not_Found
垢版 |
2021/01/09(土) 20:45:58.16ID:???
>>370
幅固定のリサイズ指定など、ってのがよく分からんけど
現状、article-boxの左右のmarginが15pxあるのでwidthとの合計が、.article-containerの幅をオーバーすると、改行される。
3列のままarticle-boxの幅を広げたければ、例えば
width: calc(100% / 3 - 2%);
margin: 30px 1%;
にするとか。
widthの部分は横幅100%を3分割して（3列だから）、marginが左右1%ずつで2%分を引くっていうのがcalcのカッコ内の計算。
margin部分の30pxは上下のmarginを指していて、1%は左右のmarginを指す。
なので、もっとarticle-boxの横幅を広げたければmarginの左右幅を、もっとpxとかで小さな値に変更して、それに合わせて
widthの2%部分を変更すればいい。
0374Name_Not_Found
垢版 |
2021/01/09(土) 20:59:05.73ID:???
ほぼ占有じゃん
過疎ってるスレとは言え度が過ぎてると思うよ
0376Name_Not_Found
垢版 |
2021/01/09(土) 21:48:52.67ID:???
>>372
ありがとうございます！！
とてもとても理想になりました！！感謝です
超わかりやすく解説ありがとうございます。
調整してみたいと思います。
0378Name_Not_Found
垢版 |
2021/01/10(日) 00:18:58.13ID:???
>>374
微妙に違うスレあったのね
次スレ候補検索で間違って移住してしまってのかも
移動しますわ
ご迷惑をお掛けしました
0379Name_Not_Found
垢版 |
2021/01/28(木) 20:50:52.64ID:???
こんにちはツイッターとの連結についての質問です
Bloggerでの
https://2021testsaite.blogspot.com/
よろしくお願いいたします。

https://www.howtonote.jp/blogger/setting/index4.html
このサイトのように全6行の1.2行めをを書き換えて
新しい投稿に画像の記事を書いてUPしても
ツイッターで表示されません。
http://www.kuribo.info/2013/06/twitter-cards-on-blogger.html
こちらの方でやっても書き出されません。
新しい投稿をすれば連結するという期待をしてるのですが
なにか根本が違うのでしょうか？


理想の形は
https://imgur.com/a/wwtQxHl
です
0381Name_Not_Found
垢版 |
2021/01/28(木) 23:17:21.49ID:???
>>379
>>380
ブログに投稿と同時にtwitterに自動投稿をしたかったのですが
Bloggerは非対応のことでした。
お騒がせいたしました！
0382Name_Not_Found
垢版 |
2021/02/16(火) 06:43:11.39ID:???
すいませんHTMLの入門書を一冊読み終えた程度の入門者なのですが

remとemと％とvhとvwがよくわかりません…
凄い簡単な例を出して教えて欲しいです
1.375remとか書いてあったらどういう計算をすればいいのでしょうか？
0385Name_Not_Found
垢版 |
2021/03/06(土) 07:09:12.69ID:???
埋め込みSVG使えばいいのに、とか言っちゃいけないんだろうな(言ってる)
0386Name_Not_Found
垢版 |
2021/03/06(土) 13:38:05.27ID:???
こういうことも出来ますよってだけで
効率とかじゃないんだよ
新着レスの表示
レスを投稿する