てがろぐ - Fumy Otegaru Memo Logger -

お手軽一言掲示板(この辺の文章は「管理画面」の「設定」内にある「フリースペース」タブから編集できます。)

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「標準スキン」です。他に、 昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る

or 管理画面へ

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 の略のつもりです。

▼簡単な解説
やっていることは簡単で、
  • 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だけで実現できますね!

by nishishi. 回答/返信 <2156文字> 編集

DASHBOARD

■複合検索:

  • 投稿者名:
  • 投稿年月:
  • #タグ:
  • カテゴリ:
  • 出力順序:

■新着画像リスト:

全297個 (総容量 35.03MB)

■日付検索:

■カレンダー:

2022年11月
12345
6789101112
13141516171819
20212223242526
27282930

■最近の投稿:

■フリースペース:

ここは、CGIの設定画面から自由に文章を入力して掲載できるスペースです。スキンを編集しなくてもCGI上から手軽に内容を変更できます(HTML使用可)。
動作サンプルです。◆他のスキン:標準スキン, 昔のツイッターっぽいスキン(ピンク版), 付箋型スキン, シンプル日記スキン, ジャーナル(日誌)スキン, ブログタイプスキン, チャットタイプスキン, 黒板スキンてがろぐCGIの配布ページに戻る

編集

▼現在の表示条件での投稿総数:

1件

▼最後に投稿または編集した日時:

2024年3月28日(木) 23:42:00〔4時間前〕

RSSフィード

動作サンプルです。 ご自由にお試し下さい。パスワードguest管理画面もお試し頂けます。
■いま見ているスキンは「標準スキン」です。他に、 昔のツイッターっぽいスキン(ブルー)昔のツイッターっぽいスキン(ピンク)付箋型スキンシンプル日記スキンジャーナル(日誌)スキンブログタイプスキン(タイトル付きブログっぽくできるスキン)、 黒板スキンチャットタイプスキンがあります。
てがろぐCGIの配布・解説ページに戻る