No.3285, No.3284, No.3283, No.3282, No.3281, No.3280, No.3279[7件]

🧀「てがろぐに名前変換機能を追加して欲しい」というご要望を頂いたのですけども、既存の名前変換スクリプトを利用する方法でさほど難易度は高くなさそうに感じているのですが(※私の認識が足りないだけかもしれませんが)、何か『てがろぐ側にこの機能があったら名前変換のために便利になる』というような何らかの機能はあるでしょうか?
🧀Re:3284◆ですよね……。そのご要望は当然あるだろうなとは思っていました。今のところは残念ながらその機能はないのです。てがろぐ開発の初期段階ではそもそもブログのように(CMSのように)使うことは全く想定していなかったので(1行目だけを分離する機能も構想もありませんでしたし)、投稿本文からtitle要素をどうにかする手段がないのですよね……。^^; OGPのog:titleにタイトルを引っ張ってきている方法がかなりアクロバットなのですが。それと同じ方法を使えば実装は不可能ではないと思いますので、ちょっと何か実現方法を考えてみます。気長にお待ち頂ければ幸いです。
2年以上前(日 12:32:29) 回答/返信

記事を個別表示(tegalog.cgi?postid=xx)させた際に、現在は現在は skin-cover.html の<body>〜</body>内に
<title>[[SITUATION:TITLE]] [[FREE:TITLE:MAIN]] [[FREE:TITLE:SUB]]</title>
と記述してあり、それによりブラウザのタイトル欄に「No.xx - 主タイトル 副タイトル」と表示されます
ここに「記事タイトル」となる [[COMMENT:TITLE]] を表示させられるようにできないでしょうか?
記事を個別表示させた時だけブラウザのタイトル欄に「No.xx 記事タイトル - 主タイトル 副タイトル」となるようにしたいのです。
ご返答いただければ幸いに思います。いつもありがとうございます。 2年以上前(日 07:08:03)

🧀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だけで実現できますね!
2年以上前(日 01:08:57) 回答/返信

にししさんじゃないですがCSSのdisplay:flexを使う方法もあります。標準スキンで説明すると
.contents .mainarea {
display: flex;
flex-direction: column;
width: 100%;
}
.situation {
~略~
order:1;
}
.onelogbox {
~略~
order:2;
}
.utilitylinks {
~略~
order:4;
}
.pagenavi {
~略~
order:3;
}
~略~は元々あるCSSです。display: flex;を指定した要素の子要素にorder:数字;で順序を入れ替えることができます。 2年以上前(日 00:35:22)

こんばんは、>>3275です。なるほどシンプルそうに見えて実は複雑な処理が必要なのですね。それではアドバイスいただいた機能を上手に使っていこうと思います。ご返信ありがとうございました!🙇 2年以上前(土 23:36:24)

記事の単独表示をしている時、内側用スキンに[[NAVI:PREVNEXT]]のような前後の投稿へ移動するリンクを表示する方法ってありませんでしょうか?もしくは、ユーティリティリンク枠の中に「1つ前の投稿を表示」「1つ後の投稿を表示」という項目を付け足せるようにするのはプログラムの構造上やっぱり難しいのでしょうか。
現在、外側スキンの[[TEGALOG]]のすぐ下に[[NAVI:PREVNEXT]]を記載しているのですが、他ならぬ私自身がユーティリティリンク枠の方に目が行ってしまい、その下にある前後リンクの存在に気付きにくかったのが発端です。ユーティリティリンク枠のすぐ上に前後リンクを表示するか、ユーティリティリンク枠の中に前後リンクを組み込めたら気付きやすいなと…。 2年以上前(土 22:13:03)