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

PR 2017/7/30

このトピックには6件の返信、2人の参加者があり、最後にかうたっくにより9年、 1ヶ月前に更新されました。

6件の返信スレッドを表示中

投稿者

投稿
- 2017年7月30日 10:48 PM #54528
  
  やまいち
  ゲスト
  
  いつもお世話になっております。
  Simplicity楽しく使わせていただいてます。
  
  ネットサーフィンしていたところ、素敵なサイトを発見し、そこのようにしたいと思って質問させていただきました。
  
  http://plusablog.me/?p=4879
  
  こちらのサイトなのですが、多分同じくSimplicityを使ってると思うのですが、このサイトのように関連記事を列にし、マウスオーバー時要素を斜めに傾けるようにするにはどうすればcssなど弄ればよいでしょうか？
- 2017年7月31日 7:08 AM #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; /*ゆっくり*/
}
```
  最後ゆっくり動作させるコードを入れてますが好みです。
  簡単に変更できるので検索して、やまいちさん好みに仕上げてくださいねっ＾＾
- 2017年7月31日 6:05 PM #54556
  
  わいひら
  キーマスター
  
  横長のサムネイルが使用されているカードは、おそらくPHPを編集されているのではないかと思います。
  テーマ側で関連記事をサムネイル表示にして、related-entry-thumbnail-card.phpテンプレートもカスタマイズし、カード型に見えるようにCSSを書き加える必要もあるかもしれません。
- 2017年7月31日 9:19 PM #54570
  
  やまいち
  ゲスト
  
  かうたっく様
  助かりました。ありがとうございます。
  細かい設定は調べながらしていきます。
  
  わいひら様
  PHP弄らなければいけないのならそこは止めておきます。
  まったく知識がないですし、変なところ弄ってエラー起こしたら大変ですし
- 2017年8月1日 4:50 PM #54589
  
  わいひら
  キーマスター
  
  PHP編集経験がない場合は、確かに止めておくほうが賢明かもしれません。
  むやみに行うと、真っ白になって、戻せなくなる方もおられるので。
- 2017年8月1日 5:31 PM #54597
  
  かうたっく
  ゲスト
  
  ちなみに、私のコードはPHP全くさわってません。
  その前にPHPは個人的に危ういので、泣きたいところです＞＜
  
  CSSのみで1年ほどアチコチ実装してました＾＾
  記事内にもまだ残ってるページはありますが
  
  デメリットがあるなら、transformは重いと言っている人が居ました。
  
  今よりコンテンツも少なかったので、楽しんでもらえたらと、実装してましたが。。そこまで楽しんでくれた人がどれだけいるか不明なので、全ページには実装してない♡
  
  と、いったところです＾＾
- 2017年8月1日 5:42 PM #54600
  
  かうたっく
  ゲスト
  
  いや、何かの不備があったのかも知れないですね。。
  
  実際のページを見ず、自分のページでカスタマイズしたので。
  
  私は関連記事
  3列を実装してるので。
投稿者

投稿