No.3283
お腹が減ったのでチーズを食べました。🧀🧀🧀
🧀Re:3279◆内側スキンに「前後の投稿へ移動するリンク」を表示させてしまうと、例えば『1ページに30件の投稿を表示する』設定のとき、「前後の投稿へ移動するリンク」も30個表示されてしまいます。^^;(いや、「それで良い」というケースもある気もしますけども、たぶんご希望はそうではないですよね?^^;)No.3282さんがCSSで掲載順序を変更する方法をご提案下さいましたから、私は別解としてJavaScriptで解決する方法をご紹介致します。↓
▼記述するJavaScriptソース #🌱豆知識
外側スキンの末尾(※内側スキンではありません)に以下の9行を書くと(コメントを除けば7行ですし、scriptタグも除けば5行ですが)、ユーティリティリンクの冒頭に「前後の投稿へ移動するリンク」等がコピーされて表示されます。
<script>
let uElm = document.querySelector(".utilitylinks");
if( uElm ) {
// ユーティリティリンク枠が存在する場合のみ
let pnElm = document.querySelector(".pagenavi");
// ナビゲーションリンクのコピーを、ユーティリティリンクの頭に挿入する
uElm.innerHTML = pnElm.innerHTML + uElm.innerHTML;
}
</script>
※変数名 uElm は utility Element の略で、pnElm は page navi Element の略のつもりです。
▼簡単な解説
やっていることは簡単で、
この結果、ユーティリティリンクの冒頭に「前後の投稿へ移動するリンク」等がコピーされて表示されます。(元々あるナビゲーションリンクは元のまま存在し続けます。)
▼class名の注意
なお、ナビゲーションリンクを作っている要素のclass名が .pagenavi なのは、標準添付の各スキンでの例なので、お使いのスキンで記述されているclass名が異なる場合には、5行目の .pagenavi の部分はそれに合わせて書き換える必要があります。(同一ページ内に2回以上使われているclass名の場合は、最初の方の中身だけが取得されます。)
▼補足
上記のソースをそのまま使うと、「ユーティリティリンク枠の冒頭」にナビゲーションリンクが加わります。
そうではなくて、ユーティリティリンク枠よりも前にナビゲーションリンクを表示したい場合は、6~7行目を以下のように差し替えて下さい。
// ナビゲーションリンクのコピーを、ユーティリティリンクの前に挿入する
uElm.outerHTML = pnElm.outerHTML + uElm.outerHTML;
さらに、「元々存在していた方のナビゲーションリンクを消したい場合は、さらに続けて以下の1行を加えて下さい。
pnElm.outerHTML = '';
以上です。
……ここまで書いてから思ったんですが、「ナビゲーションリンクをコピーしてユーティリティリンク枠の上に加える」よりも、「ユーティリティリンク枠をコピーして、ナビゲーションリンクの下に貼り付けて、元々のユーティリティリンク枠は消す」という方が(スキンの作り方によっては)配置調整の自由度が高いかもしれないな……、とふと思いました。^^;
🧀Re:3281◆ご期待に添えなくてすみません。最近のリッチなCMSだとそういうのはできて当然だとも思うのですけども、その分たくさんのJavaScriptが動いているのだろうな……と思います(調べてはいませんが)。てがろぐは、使用面での手軽さもそうですが、動作面の軽さも重視したいと思っておりまして、かつ、開発者(=私)の手軽さもそこそこ重視しながら開発しております(^_^;)のでご理解頂ければ幸いです。需要はあるとは思いますので、何か良い実装方法が思いついたら試してみます。(╹◡╹)
🧀Re:3282,3280◆サンプルソースのご提示をどうもありがとうございます! 最初、CSSでどうにかならんかな……と思いつつも思いつかなかったのでJavaScriptでの解決方法で試してしまいましたが、たしかにページ全体に対して順序を指定し直せばCSSだけで実現できますね!
🧀Re:3279◆内側スキンに「前後の投稿へ移動するリンク」を表示させてしまうと、例えば『1ページに30件の投稿を表示する』設定のとき、「前後の投稿へ移動するリンク」も30個表示されてしまいます。^^;(いや、「それで良い」というケースもある気もしますけども、たぶんご希望はそうではないですよね?^^;)No.3282さんがCSSで掲載順序を変更する方法をご提案下さいましたから、私は別解としてJavaScriptで解決する方法をご紹介致します。↓
▼記述するJavaScriptソース #🌱豆知識
外側スキンの末尾(※内側スキンではありません)に以下の9行を書くと(コメントを除けば7行ですし、scriptタグも除けば5行ですが)、ユーティリティリンクの冒頭に「前後の投稿へ移動するリンク」等がコピーされて表示されます。
<script>
let uElm = document.querySelector(".utilitylinks");
if( uElm ) {
// ユーティリティリンク枠が存在する場合のみ
let pnElm = document.querySelector(".pagenavi");
// ナビゲーションリンクのコピーを、ユーティリティリンクの頭に挿入する
uElm.innerHTML = pnElm.innerHTML + uElm.innerHTML;
}
</script>
※変数名 uElm は utility Element の略で、pnElm は page navi Element の略のつもりです。
▼簡単な解説
やっていることは簡単で、
- 2行目は、ユーティリティリンク枠を作っている要素 <div class="utilitylinks"> を取得しています。
- 3行目は、ユーティリティリンク枠が存在するかどうかを調べています。(存在しないときは何も処理しません。)
- 5行目は、ページナビゲーション(移動リンク)部分を作っている <div class="pagenavi"> を取得しています。
- 7行目は、『ユーティリティリンク枠の中身(HTML)』を、『ページナビゲーションの中身(HTML) + ユーティリティリンク枠の中身(HTML)』に差し替えています。
この結果、ユーティリティリンクの冒頭に「前後の投稿へ移動するリンク」等がコピーされて表示されます。(元々あるナビゲーションリンクは元のまま存在し続けます。)
▼class名の注意
なお、ナビゲーションリンクを作っている要素のclass名が .pagenavi なのは、標準添付の各スキンでの例なので、お使いのスキンで記述されているclass名が異なる場合には、5行目の .pagenavi の部分はそれに合わせて書き換える必要があります。(同一ページ内に2回以上使われているclass名の場合は、最初の方の中身だけが取得されます。)
▼補足
上記のソースをそのまま使うと、「ユーティリティリンク枠の冒頭」にナビゲーションリンクが加わります。
そうではなくて、ユーティリティリンク枠よりも前にナビゲーションリンクを表示したい場合は、6~7行目を以下のように差し替えて下さい。
// ナビゲーションリンクのコピーを、ユーティリティリンクの前に挿入する
uElm.outerHTML = pnElm.outerHTML + uElm.outerHTML;
さらに、「元々存在していた方のナビゲーションリンクを消したい場合は、さらに続けて以下の1行を加えて下さい。
pnElm.outerHTML = '';
以上です。
……ここまで書いてから思ったんですが、「ナビゲーションリンクをコピーしてユーティリティリンク枠の上に加える」よりも、「ユーティリティリンク枠をコピーして、ナビゲーションリンクの下に貼り付けて、元々のユーティリティリンク枠は消す」という方が(スキンの作り方によっては)配置調整の自由度が高いかもしれないな……、とふと思いました。^^;
🧀Re:3281◆ご期待に添えなくてすみません。最近のリッチなCMSだとそういうのはできて当然だとも思うのですけども、その分たくさんのJavaScriptが動いているのだろうな……と思います(調べてはいませんが)。てがろぐは、使用面での手軽さもそうですが、動作面の軽さも重視したいと思っておりまして、かつ、開発者(=私)の手軽さもそこそこ重視しながら開発しております(^_^;)のでご理解頂ければ幸いです。需要はあるとは思いますので、何か良い実装方法が思いついたら試してみます。(╹◡╹)
🧀Re:3282,3280◆サンプルソースのご提示をどうもありがとうございます! 最初、CSSでどうにかならんかな……と思いつつも思いつかなかったのでJavaScriptでの解決方法で試してしまいましたが、たしかにページ全体に対して順序を指定し直せばCSSだけで実現できますね!
- ユーザ「にしし」の投稿だけを見る (※時系列順で見る)
- この投稿と同じカテゴリに属する投稿:
- この投稿日時に関連する投稿:
- この投稿に隣接する前後3件をまとめて見る
- この投稿を再編集または削除する