SunMonTueWedThuFriSat
Apr
2
1
3
5
0
3
4
May
5
2
1
1
3
1
2
1
1
0
1
1
1
2
2
0
2
4
2
0
0
3
0
1
2
2
8
3
Jun
2
8
2
1
0
4
2
3
0
3
3
0
1
2
6
3
4
1
6
2
2
4
2
0
4
2
1
1
2
3
6
2
6
0
0
Jul
6
1
1
0
0
1
2
1
2
1
2
1
1
2
1
0
0
0
1
0
0
2
0
0
1
5
2
3
Aug
6
4
0
1
1
1
2
6
3
0
1
0
0
3
3
8
1
1
3
1
1
0
2
1
1
3
0
2
3
3
2
0
4
1
2
Sep
0
1
3
3
1
0
3
0
1
1
0
3
1
0
3
6
14
1
0
0
0
8
2
3
1
0
0
2
Oct
6
1
0
0
1
0
3
0
0
1
0
2
0
1
0
0
0
3
5
0
0
0
0
0
0
2
1
0
Nov
0
1
0
1
0
5
0
1
4
1
0
0
0
0
2
0
1
2
2
0
0
0
0
0
0
2
1
1
1
0
5
3
7
0
2
Dec
4
2
0
2
1
0
0
1
2
1
0
0
0
0
0
0
1
0
3
2
4
1
7
4
1
3
11
2
Jan
3
2
2
9
2
1
11
3
3
3
5
6
3
3
13
6
2
1
1
3
8
4
4
5
1
3
1
5
Feb
5
4
2
2
2
3
0
0
5
2
2
0
0
0
1
0
1
0
2
1
3
0
4
4
3
3
0
3
Mar
4
0
5
1
0
1
1
0
0
1
3
1
1
2
1
1
1
4
0
1
2
1
1
1
0
1
2
0
3
1
3
4
0
2
3
Apr
1
1
0
1
0
4
5
7
3
2
1
2
1
1
2
0
0
1
0
2
2
2
1
3
1
2
0
9
May
4
7
🧀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だけで実現できますね!