関連記事を2列にし、マウスオーバーした時に要素を傾けたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 関連記事を2列にし、マウスオーバーした時に要素を傾けたい

  • このトピックには6件の返信、2人の参加者があり、最後にかうたっくにより9年、 1ヶ月前に更新されました。
6件の返信スレッドを表示中
  • 投稿者
    投稿
    • #54528
      やまいち
      ゲスト

      いつもお世話になっております。
      Simplicity楽しく使わせていただいてます。

      ネットサーフィンしていたところ、素敵なサイトを発見し、そこのようにしたいと思って質問させていただきました。

      http://plusablog.me/?p=4879

      こちらのサイトなのですが、多分同じくSimplicityを使ってると思うのですが、このサイトのように関連記事を列にし、マウスオーバー時要素を斜めに傾けるようにするにはどうすればcssなど弄ればよいでしょうか?

    • #54533
      かうたっく
      ゲスト

      私も同じカスタマイズをしてました^^

      上記サイトとコードを同じにするのもなんなので…、、私の使っているコードをどうぞ

      .related-entry-thumbnail:hover {
      	-moz-transform: rotate(5deg);
      	-webkit-transform: rotate(5deg);
      	-o-transform: rotate(5deg);
      	-ms-transform: rotate(5deg);
      	transform: rotate(5deg);
      	transition: 1s; /*ゆっくり*/
      }

      最後ゆっくり動作させるコードを入れてますが好みです。
      簡単に変更できるので検索して、やまいちさん好みに仕上げてくださいねっ^^

    • #54556
      アバター画像わいひら
      キーマスター

      横長のサムネイルが使用されているカードは、おそらくPHPを編集されているのではないかと思います。
      テーマ側で関連記事をサムネイル表示にして、related-entry-thumbnail-card.phpテンプレートもカスタマイズし、カード型に見えるようにCSSを書き加える必要もあるかもしれません。

    • #54570
      やまいち
      ゲスト

      かうたっく様
      助かりました。ありがとうございます。
      細かい設定は調べながらしていきます。

      わいひら様
      PHP弄らなければいけないのならそこは止めておきます。
      まったく知識がないですし、変なところ弄ってエラー起こしたら大変ですし

    • #54589
      アバター画像わいひら
      キーマスター

      PHP編集経験がない場合は、確かに止めておくほうが賢明かもしれません。
      むやみに行うと、真っ白になって、戻せなくなる方もおられるので。

    • #54597
      かうたっく
      ゲスト

      ちなみに、私のコードはPHP全くさわってません。
      その前にPHPは個人的に危ういので、泣きたいところです><

      CSSのみで1年ほどアチコチ実装してました^^
      記事内にもまだ残ってるページはありますが

      デメリットがあるなら、transformは重いと言っている人が居ました。

      今よりコンテンツも少なかったので、楽しんでもらえたらと、実装してましたが。。そこまで楽しんでくれた人がどれだけいるか不明なので、全ページには実装してない♡

      と、いったところです^^

    • #54600
      かうたっく
      ゲスト

      いや、何かの不備があったのかも知れないですね。。

      実際のページを見ず、自分のページでカスタマイズしたので。

      私は関連記事
      3列を実装してるので。

6件の返信スレッドを表示中
  • フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)