関連記事その他諸々のasideについて

あ、それから関連で。

[section id=under-entry-body]
  [aside id=related-entries]
    [h3]関連記事[/h3]
    [div class=entry cf]
      [div class=thumb][/div]
      [div class=content][/div]
    [/div]
    //繰り返し
  [/aside]
[/section]

classの指定はこんな感じで良いのではなかろうかと思います。

これまでだと、

#related-entries .related-entry .related-entry-thumb {
  なんちゃら
}

でしたが、

#related-entries .entry .thumb {
  なんちゃら
}

とか

#related-entries .thumb {
  なんちゃら
}

の方が記述が短くて済むので。

うーむ、悩みどころではあるんですが、関連記事はその名の通り、基本的にメインの記事と関連しているのでasideとは違うかなぁとは思います。
#34962では、現行のバージョンで直すならって感じだったので、asideやらsectionについてはあまり考えてなかったんですけどね(笑)

僕もざっくりとしか書けませんが、
サンプル: ざっくりレイアウト例 | codepen

こんな感じではなかろうかと。
まぁ現状と同じスタイルにするのであればですけれども。

sectionは章みたいな意味で、そこには見出しが必要とされるみたいなことをよく見ますので、記事内とかの段落とかそういう所に使うんですしょうね。

4.3.2 article要素 | w3c 和訳

ここを見ると、aside自体は大丈夫みたいですけれども、その中のarticleがアレですかね。
たまに見るのが「わからなくなったらdivを使えば良い」ってのは言い得て妙かと思います(笑)

いっそのこと、メニューの一部と考えて、

[aside]
  [nav id="related-entries"]
    [ul]
      [li class="related-entry"][/li]
      [li class="related-entry"][/li]
      [li class="related-entry"][/li]
    [/ul]
  [/nav]
[aside]

こうとか(笑)

で、まぁなんでこんなトピックを立てたかというと、

サンプル: 関連記事のスライダー化 | codepen

こんなの作ってたからなんですけどね(笑)
classの表記で、何度#related-entriesを入んとあかんねんって一人で突っ込んだりして、あまりにもアレだったので、新しいブロック作ってそこに中身を放り込んで独自にclass付けました(笑)

絶賛修正中ですが、機能としては、ホバーしたらアニメーションが止まります(笑)
.related-entryをaで囲むことで「記事を読む」が不必要になり、.related-entrのどこをクリックしても該当記事に飛べるようにしました。

画面下に関連記事がズラリと並ぶと、コメントまでが遠いかなぁと思ったりしたので。
あと、、、動くってステキやん(笑)

ちなみにサンプルですが、コロンとセミコロンを間違えて打ち込んだまま、ちょっと居眠りしてたので動かなかったかも知れませんが、今は動作するようにしました。

本日の18:00ぐらいから21:45までに見ていただいた方は、何？動かないじゃんって思われたかも知れませんので、報告しておきます。

ついでにアレですが、2個横並びのバージョンも作ってみました。

サンプル: 関連記事のスライダー化(2列ver) WordPress theme Simplicity用

動作内容は同じです。ちょっとセレクタやら、横並びになったので表示時間を長くしたり(5秒→10秒)とかはしましたが、基本的に何個横並びになろうと、横並びで1つなので動作は同じなわけです。

動くってステキやん

「画面下に関連記事がズラリと並ぶ」のが嫌なので
「サムネイル」にしたいのですが
スマホで見ると･･･

あ、基本スマホは考慮してません(笑)
ひとつできたらスマホはとても簡単に対応できますから。なんせ、小さいの1つだけぐらいしか表示しかできないわけですし。

ちょっと待ってもらったらスマホ対応版も作ります。jQueryではブラウザのサイズ(幅)の監視と、cssはメディアクエリだけでできます。

レスポンシブにする時は、$(window).resize()等で、サイズを監視しておくロジックも組み込まないといけないので面倒だからしてないだけです。
表示をレスポンシブにすることはできるんですけれども、上にどれだけ送るかは最初のリストアイテムの横幅にしているので、そこらも考えなおさないといけませんね。

希望は
サムネイルが手動で横スライドで「動くやん」で良いんです
現状だと
スマホの場合、中途半端な画像が縦並びするので･･

まだ、見直ししている所ですが、レスポンシブっぽい感じにはできました。

サンプル: 関連記事のスライダー化(2列ver レスポンシブ) WordPress theme Simplicity用 | codepen

元のを無理やり直しているので、新しく作りなおしたほうが良いかも知れませんね。

> サムネイルが手動で横スライドで「動くやん」で良いんです

これは比較的簡単にできそうなんですけれども(動かすだけなら)、タッチイベントとリンクの動作をどうするか、その兼ね合いをちょっと考える必要がありそうです。
PCの時にどうするかとか、色々とあるわけですよ(笑)

PCの時にタッチイベントは使えませんから、おのずとclickになるわけですけれども、そうすると記事に飛ぶリンクはどう処理するとかなどね。まぁちょっと色々調べてみます。

firefoxで動かなかったので色々と試行錯誤しまくりましたが、
関連記事のスライダー化 (スワイプPC&mobile兼用)Wordpress theme Simplicity用

最初に公開したものとは全くの別ものになってます(笑)
内容的にちょっと個々では説明がアレなので、後でblogにでも書きます。ちなみに、aのリンクは無効にしてあります。有効にした時に動作するようにはちょっとまだテストが必要なので、動作だけこういう感じと言うのを先に公開します。

動作ロジックは、PCスマホ兼用のswipeを自作してみる | GET HAPPYのを参考にしました。このサイトの内容では動作しなかったので、動作するように修正した感じです。
まぁ結局、予め付くつていたものと考え方としては同じような感じで、処理の分離等の参考にしたのですが、jQueryのanimateを使わずcssのtranslate3dを使うと言うのを見て、なるほどねと感心しました。
そっちのが良いと言われてますし。

ただ、実機では動作するのかしないのかはわかりませんので、多分イケるんじゃないかな？ぐらいの感じです。しかしfirefoxで動作しないのには1日頭を悩ませました。

× 予め付くつていたもの
◯ 予め作っていたもの

今しがた、スライダーをレスポンシブ対応、スワイプ(PC&モバイル兼用)、リンク有効化しました。
#35193 の 関連記事のスライダー化 (スワイプPC&mobile兼用)Wordpress theme Simplicity用 と同じアドレスです。

これで、実機で動作すればいいんですけどね。
うちは環境がないので、誰か人柱求むって感じなんですけれども。

安心してください
動いてますよ
（Android＆iphone）

スマホで見ると結構いい感じです
画像がデカイので、スマホ専用にすると良いかもしれませんね

スワイプ用の→（矢印）表示があると最高ですね

> ガタ肩さん

実機で動作検証ありがとうございます。
色々な情報サイトで書いてあったことからだいぶ変更したので、実機で動作するか不安だったんですけれども動いてよかったです。
ちなみにスワイプ用の矢印とはどういったものですか？何か参考になるサイトとかあれば教えてもらえるとありがたいです。

今回のはスライダーなんですけれどもカルーセルで無限ループになっているので、特に矢印はいらないかなぁと思ったりしていたんですが、確かに何もないと動かないので操作がわかりにくいかも知れませんね。

別件で。
今回のスワイプ対応版の内容をブログに書きました。
jQuery、javascriptに詳しい方で、こうした方がもっと滑らかに動作するとかありましたら、意見を聞かせてもらえれば助かります。結構な長文記事です。

参考: Simplicityを少し改造してみた part14 関連記事のスライダー化 スワイプPC・Mobile兼用