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

このトピックには16件の返信が含まれ、2人の参加者がいます。2 年前 かうたっく さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #53662 返信

    ゆかこ

    このブログ(ttp://mamekichimameko.blog.jp/archives/71237797.html)の関連記事のように、
    関連記事を画像にタイトルを重ねたものにしたいのですが、
    そのやり方と、プラスアルファで上のように2×4の並びではなく2×3にするにはどうすればいいのでしょうか?
    テンプレートは最新バージョンのsimplicity2のデフォルト設定のままいじっていないので、どう変更&追記すればいいかだけ教えてください。

    ttp://mamekichimameko.blog.jp/archives/71237797.html

  • #53665 返信

    かうたっく

    こんにちはぁ

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

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

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

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

  • #53671 返信
    わいひら
    わいひら
    キーマスター

    良記事ありがとうございます!

  • #53675 返信

    ゆかこ

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

  • #53678 返信

    かうたっく

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

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

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

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

  • #53679 返信

    かうたっく

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

  • #53683 返信

    かうたっく

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

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

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

  • #53699 返信

    ゆかこ

    ありがとうございます!!
    タイトル文字部分の角がまるくなってしまってサムネイル画像の部分とややずれてしまうのはなんとかなりませんか?><;

  • #53700 返信

    かうたっく

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

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

  • #53702 返信

    ゆかこ

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

  • #53705 返信

    かうたっく

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

    角が丸くなるのは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などは、こちらからは確認できないですが…

  • #53707 返信

    かうたっく

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

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

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

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

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

  • #53708 返信

    かうたっく

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

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

  • #53711 返信

    ゆかこ

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

  • #53712 返信

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

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

    一番最後の@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の○○など

  • #53719 返信

    ゆかこ

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

  • #53720 返信

    かうたっく

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

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

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

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

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

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

返信先: 関連記事のカスタマイズについて
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)