サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合

  • このトピックには11件の返信、1人の参加者があり、最後にヌルにより4年前に更新されました。
11件の返信スレッドを表示中
  • 投稿者
    投稿
    • #48238
      ヌル
      ゲスト

      2時間ほど格闘して1㎜の進歩も見られなかったため
      投稿させていただきます。(正確には1度投稿したはずが出来ていなかった。。。)

      現在以下のページのサイドバーでSimple GA Rankingというプラグインを使用して
      記事ランキングを表示させておりますが、このウィジェットにも
      サムネイルにタイトルを重ねたスタイルを適用したいと思っております。

      セレクタをあちこちに追加してみたり、Simplicityのスタイルシートから
      拡張部分のコードを持ってきて追加してみたりといろいろと試しましたが
      基礎も理解できていない素人は駄目ですねやっぱり(^^;

      お知恵を拝借させていただければと思います。

      これは独り言なのですが・・・・フォーラムへの投稿を送信した際、
      タイムアウトとなっている場合に画面を下方にスライドするとエラーメッセージ
      が表示されているのがわかりますが、そのまま気付かずにページ移動すると
      ・・・って事が数回ありました(;´・ω・)

      送信前のプレビュー画面や、エラーメッセージの上部表示などがあれば
      少しいいかなぁなんて…

    • #48244
      Hidekichi
      ゲスト

      そのランキングのhtmlがどういう構造かにもよりますが、例えば

      <li>
        <div class="thumb"><img></div>
        <div class="text">何かしらのテキスト</div>
      </li>

      このような構造なら、liが親要素になりますので、liにposition:relativeを入れます。
      .thumb、.textはposition:absoluteを入れます。

      こうすると、親要素は通常通り表示され、その中の子要素が絶対配置になります。絶対配置とは、relativeの要素の中の座標で表示できるようになるということです。

      サンプル: imgをそのまま何とか使う | jsFiddle

      で、imgタグはちょっと使いにくいので、jQueryで背景画像にすることもできます。

      サンプル: imgを背景にする | jsFiddle

      僕的にはこっちのをオススメしますが(いろいろやりやすいので)、手を入れればimgでも色々できます。
      とにかく元のhtmlがどのような構造であるかが重要です。それがわかればどのようにもできると思います。

    • #48245
      Hidekichi
      ゲスト

      返信したんですが、表示されないのでわいひらさんの救援待ちです。

    • #48246
      ヌル
      ゲスト

      Hidekichiさん

      了解致しました(⌒-⌒; )

      いつもありがとうございます!

    • #48254
      ヌル
      ゲスト

      Hidekichiさん

      ご返信ありがとうございます。

      現在出力されている構造はこういう状態です。

       <aside id="simple_ga_rankig-2" class="widget widget_simple_ga_ranking">
      <h3 class="widget_title sidebar_widget_title">週間人気記事ランキング</h3>
       <ol class="sga-ranking">
        <li class="sga-ranking-list sga-ranking-list-1">
         <div class='ranking-img'>
          <a href="URL" title="○○○"><img src="○○○" alt="○○○" title="○○○"></a>
         </div>
          <a href="○○○"class="sga-simplicity-merge" title="○○○">○○○</a>
        </li>
      //以下入れ子構造続く

      出力されるタイトルにClassが振られていなかったので、プラグイン側で
      タイトルにClassを出力する様に編集はしたのですが。

    • #48256
      Hidekichi
      ゲスト

      サンプル: jQueryの方で指定のhtmlにあわせてみた | jsFiddle

      ul を .sga-ranking
      .thumb を .ranking-img
      .text を .sga-simplicity-merge

      と読み替えれば前のサンプルのまんまイケると思います。今回のは全部適用しました。
      リンクがあるのでそこだけcssに追加してます。

      jQuery使わないバージョンの方はwidthやらを指定すればいい感じにできると思います。
      サイドバーに入っている場合widthは300px(336px)だろうと思うので計算もしやすいです。
      これが#maimの中に入っている場合はメディアクエリやらも必要になりますが。

      元々のSimplicityのcssの兼ね合いもあると思うので、必要のないプロパティは打ち消すなどの対応も別途必要かと思いますが、olで書かれているのでさほど手を入れなくてもイケるのではなかろうかと思います。

    • #48263
      Hidekichi
      ゲスト

      jQueryで中身を変更する際、画像が縮小されたりするのがチラっと見えたりするので、人手間加えると軽減できます。

    • #48264
      Hidekichi
      ゲスト

      投稿してもた。
      で、人手間とか怖いよ、なんぞそれ。

      サンプル: ひと手間加えてちらつき軽減 | jsFiddle

    • #49058
      ヌル
      ゲスト

      Hidekichiさん

      レスが大変遅くなりました。

      やっと時間が出来ましたので、頂いたサンプルコードを用いて
      早速調整を実施しました。

      いい感じにはなったのですが、

      #sidebar li {
      margin-bottom: 10px;
      }

      を調整すればサムネイル間のマージンを変更出来るのですが、
      カテゴリリストまでマージンが変わってしまいます。

      書き方が悪いのか、どこにマージンを設定しても効かないのは
      この#sidebar liの方が上書きされていると言うことでしょうか?

    • #49060
      ヌル
      ゲスト

      少し思ったのですが、Simplicityに標準で設定されている【最近の投稿】に
      適用されるスタイルをそのまま適用できればコードが増えないかな・・・と
      思ったりもしたのですがどうでしょう。

    • #49066
      Hidekichi
      ゲスト
      #sidebar .xxx li {
        margin-bottom: 10px;
      }

      のように、.xxx部分に適用したい範囲のセレクタを入れればよいだけです。.xxx部分だけにmargin-bottomが適用されます。

      サンプル: サンプルでは.sga-ranking liにmargin-bottom追加 | jsFiddle

    • #49071
      ヌル
      ゲスト

      Hidekichiさん

      ありがとうございます!!

      概ね期待通りの仕上がりになりました。

      モバイル表示の際に画像のサイズが微妙に大きくて左右にずれる挙動も、
      mobile.cssに画像サイズの調整値を入れて調整したらうまく纏まりました。

      本当にありがとうございます<(_ _)>

11件の返信スレッドを表示中
  • トピック「サムネイルにタイトルを重ねるスタイルを他のウィジェットにも適用したい場合」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)