関連記事のカスタマイズについて

こんにちはぁ

朝に作ったのがあるんですが、とりあえずコードだけでしたらコピーしていってください。
記事として完成してないですが、コードはみれるので。

Simplicity関連記事の画像上にタイトルを重ね、スッキリ見せるCSSカスタマイズ

ダッシュボード『外観』より『カスタマイズ』を選択し、『レイアウト（投稿・固定ページ）』とクリック

サムネイル3列を選択して、表示数を6とすればできますよ。

ありがとうございます！！
スマホだと表示が１列になってしまうのですが、
スマホでは横2の縦3で6つをスッキリ表示させるようにするにはどうしたらいいのでしょうか？

スマホだと表示が１列になってしまうのですが、

そのような作り方をしているからですねぇ＾＾；

スマホでは横2の縦3で6つをスッキリ表示させるようにするにはどうしたらいいのでしょうか？

色々試せばスッキリできそうです！仕組みとそのように表示するよう、時間をかけ試しながらカスタマイズすれば可能です！！うまく言えませんが、
それなりに時間がかかるので、もう少し待ってみながら、やれるときにお互い検索してみましょうか！？＾＾

わいひらさんに
ありがとうございます＾＾

メディアクエリで3列を落ちないよう、調整するほか思い当たらないので、その方法を追記しました。
Simplicity関連記事の画像上にタイトルを重ね、スッキリ見せるCSSカスタマイズ
目次2.1.1です。

画像が見やすいか、タイトルの表示がどうか色んなページで表示させて確認しても良いかと思われます。CSSだけで表示しているので画質は汚いですけど、それはPHPファイルをいじればキレイに表示されます。

PHPファイルのどこをどう触るかは、調べて色々しなくちゃダメなので、、ココで回答が見つかるか不明です。
調べてもなければ、新たにトピックをたて対応してくれる人を待つのも良さそうですねっ＾＾

ありがとうございます！！
タイトル文字部分の角がまるくなってしまってサムネイル画像の部分とややずれてしまうのはなんとかなりませんか？＞＜；

ゆかこさん、実際様子をみて調整したいのでURLを置いてもらえますか。

※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

お手数おかけします
アドレス入って上のサイトが私のサイトです。
下のサイトの関連記事のようなイメージで私のサイトでも表示させたいです。
http://testsite.www2.jp/

タイトル文字部分の角がまるくなってしまって

角が丸くなるのはborder-radius: 0 0 10px 10px;を削除すれば可能です＾＾

.related-entry-title {
	width: 200px; /*4列の時は160pxに変更*/
	height: auto;
	position: absolute;
	bottom: 0;
	background: #000; /*タイトルの背景*/
	line-height: 1.4;
	opacity: 1; /*背景色を薄く画像を見せたいとき0.85など指定*/
	margin-bottom: 0;
}

これでPCのChromeで確認したら上記リンク先、画像のようになります。
http://netakiri.net/uploader/src/up0270.png

サムネイル画像の部分とややずれてしまう

どのブラウザ、どの環境で見たときズレますか？例えばiPhoneのブラウザはChromeなど

PC、Chromeの拡張機能のiPhoneで確認したら、下記のように見えます
http://netakiri.net/uploader/src/up0271.png

※iPhoneなどは、こちらからは確認できないですが…

ちいさい横幅のデバイスの表示のズレの件、考えられる対応したつもりですが、こちらで確認ができません。。

https://bibabosi-rizumu.com/wp-content/uploads/2017/07/mob-3-hikaku.png

上記リンク内に貼っている画像で、テスト環境と自分のブログ2つの表示画像例です。角が丸いですが＾＾；

Simplicity関連記事の画像上にタイトルを重ね、スッキリ見せるCSSカスタマイズ

目次2.1.1のコードに貼り直し、キャッシュを切ってご確認、お願いします＾＾

iPhone5s？？かなぁ？Safariで確認したら、結構ズレてたので、さっき修正完了しました。
別の環境からだとまた修正が必要かもしれませんが…？？？ChromeよりSafariの環境は神経使うけど、勉強になりましたっ＾＾

iPhone×Safari環境の3列のイメージ画像：http://netakiri.net/uploader/src/up0272.png

ありがとうございます！スマホで前に貼り付けた下のサイトのように3×2で表示させるにはどうすればいいのでしょうか？(それに伴いサムネイルもすこし大きくしたいです)
また、黒のタイトル背景を少し透明化させたいのと、
スマホ表示だと、関連記事のかたまりがやや左よりになってしまってるので、中央にしたいのですがどうしたらいいでしょうか？

• ここから、関連記事のカスタマイズ方法に変更しますねｗ

サムネイルもすこし大きくしたい

一番最後の@media screenのくだり。.related-entry-thumbnail img {以降は93pxとなってます。

それを『全て94や95px』に変更すれば、その環境では大きくなります。ほかの環境では、また違った見え方をしますが、変更してみると変わります＾＾

黒のタイトル背景を少し透明化させたい

関連記事の2つ目にある.related-entry-titleを編集するので、スマホかPCで検索して、opacity: 1; /*背景色を薄く画像を見せたいとき0.85など指定*/これが透明化です。※黒のタイトル背景色background: #000; /*タイトルの背景*/は#000。

関連記事のかたまりがやや左よりになってしまってるので、中央にしたい

.related-entry-thumbnailをの左右の外側余白を触ってください。

@media screen and (max-width: ***px) {
	.related-entry-thumbnail {
		margin-left: **px;
		margin-right: **px;
	} 
}

この時、**には任意の数字を半角で記入。
max-width: ***pxは、ゆかこさんのスマホの横幅が何pxか検索したら、でてくるので、それを指定します。※そしたら、そのデバイスから見た人のほとんどの人は、似た形で表示されます。

• CSSを更新したら、キャッシュを切れば反映されます
  カスタマイズチャレンジ頑張ってください＾＾

3×2で表示させるにはどうすればいいのでしょうか？

はじめに。
このカスタマイズは、元々あるものを強引に3列風に見せるように、2カラムになったら、3カラムに変更させるように、横幅を指定してます。

次に。
私には、どの環境でどのようなズレがあるかサッパリ見えません。想像でこれか、あれかと試行錯誤してる段階です。

• スクショがあれば『どのように見えてるのかだけ』わかります。
• わいひらさんがSimplicityで『説明画像用のアップローダーツール』を書いてるので、チェックしてみてください。

それすらわからない状態なので、お答えいただければ・・・ですが、最後まで対応しようと思ってます＾＾

どのブラウザ、どの環境で見たときズレますか？例えばiPhoneのブラウザはChromeなど

さらにiPhoneの○○など

ありがとうございます！！
デフォルトでサムネイルのタイトル文字を太字にするにはどうしたらいいのでしょうか？
また、スマホ表示の時にサムネのタイトル文字の大きさを大きくするにはどこをいじればいいのでしょうか？

https://bibabosi-rizumu.com/simplicity-kanren-image-title/

このページの関連記事に書いてる通り。
見出し：画像下の領域にタイトルを置いたスタイル

に説明書きがあります。
一時間違って、説明なしのコードを置いて公開してしまった時間があって、そこでの訪問なら説明がない状態かもですね。今後のカスタマイズに困るようなら、サイドコピペしてもらえますか？

それから、プライベートで問題発生しなければ、説明の追記もがっとりします。２時には完了させますね。

スマホ表示の時にサムネのタイトル文字の大きさを大きくする

記事内にその方法を書いてます。それは見出しをつけておきますねぇ＾＾