何らかの配布場

返信 2024/4/2(Tue) 22:34 edit_note

返信 2024/3/14(Thu) 20:57 edit_note

＞02/14 21:24の方へ
続きを読む
メッセージありがとうございます　全年月リストや検索を実行するとすぐ時系列順に並ぶ…という動作はまだ実装されていないっぽいので、恐らくJavaScriptの分野のようです(私もそこまでは書けませんでした…)
代替案でよければ、全年月リストと検索欄にオプションを付けて、記事の並びを最新順か時系列順で選べるようにできます。以下、kozinでオプションを表示する手順です

・全年月リストに時系列順オプションを加える
実は最初からオプションが付いているのを非表示にしているだけなので、「tegalog-kozin.css」532行目あたりの
.datelimitboxoptions,.datelimitlist .datelimitsublist .year { display: none; }
を削除すればオプション欄が出てきます
以下は見た目を若干整えるcssです　よければ「tegalog-kozin.css」の末尾にでも追加しておいてください
.datelimitboxoptions { display: block; margin-top: 0.3rem;}/* 段落を変えて上に隙間を空ける */
.datelimitboxoptions label { display: inline-block;}/* 各ラジオボタンをインラインブロックにする */

↓こうなる

　
・検索欄に時系列順オプションを付ける
単語検索の他に複合検索という機能があります
「skin-cover.html」の54行目あたり、[[SEARCHBOX]]部分を[[SEARCHBOX:COMPLEX]]に書き換えてみてください　たくさんオプションが出てくると思います
これを検索欄と時系列オプションのみの表示にしたければ、[[SEARCHBOX:COMPLEX:O]]と書けばOKです
以下は右揃えにして見た目を整えるcssです　お好みで「tegalog-kozin.css」の末尾とかに追加してください
.complexsearch .queryinput {
   padding: 0.3rem 1rem;/* 検索フォームの余白 */
   border-radius: 20px;/* 角を丸くする */
   border: 1px solid var(--usu-mozi-iro);/* 線を付ける */
}
.searchoptions {
   width: fit-content;
   margin-left: auto;/* オプション欄を右寄せ */
   list-style: none;/* 黒点を非表示 */
}
※1行検索欄とは少し作りが違うので、全く同じ見た目にはなりませんがご了承ください
↓こんな感じになるはず


複合検索欄は公式ページにカスタマイズ方法が載っているので、お好みで書き換えてみてください
→検索条件プルダウンメニューの取捨選択や掲載順序の指定
→検索オプション項目名のカスタマイズ方法
　
あと他には、「今表示されている記事群を時系列順にするリンク」[[REVERSE:URL]]を追加する方法もあります
「skin-cover.html」のサブ領域内とかに
<a href="[[REVERSE:URL]]">[[REVERSE:NAME]]で表示する</a>
みたいに追加すると、時系列順⇔最新順と切り替えるリンクが貼れます

「order=reverse」を追加できるのはurl(アドレス)ですね　例えばこのサイトだと今年1月の記事群を表示するアドレスは
https://mk-okiba.wew.jp/tegalog_haihu/?date=2024%2F01
になりますが、この最後に&order=reverseを追加して
https://mk-okiba.wew.jp/tegalog_haihu/?date=2024%2F01&order=reverse
にすると時系列順で表示されます
ただこれは、時系列順に表示させたい区分の数だけリンクを全部作らなければいけないので大変かと思います　部分使いとかにはいいかも

このどれかでご希望の動作を実装できそうでしょうか？また何かありましたらご連絡ください
畳む

返信 2024/2/15(Thu) 20:22 edit_note

返信 2024/1/16(Tue) 19:21 edit_note

＞12/29 1:48の方へ
続きを読む
メッセージありがとうございます
「1カラムのままtenranのような形のメニュー形式」の部分がちょっとよくわからなかったのですが、
「ヘッダー画像の下を【メイン領域】【縦並びカテゴリリストメニュー】の横並びにする」みたいな感じですか？(これはもう2カラム)

①「skin-cover.html」に追加
46行目あたり
<!-- ヘッダー画像を抜いたメイン領域　クイックポストからフリースペースまで -->
のすぐ上に
<div class="wrap">
<div class="catmenu">[[CATEGORY:TREE]]</div>
を追加、
次に71行目あたりの</main>のすぐ上に</div>を追加してください

②「tegalog-hokan.css」に追加
末尾に
.wrap {
   width: 100%;
   display: flex; /* 中のアイテムを横並びにする */
}
.mainarea { overflow: hidden;} /* はみ出させない */
.catmenu {
   order: 1; /* カテゴリを右側に */
   flex-shrink: 0; /* 画面幅狭くても縮めない */
   width: 200px;
   height: fit-content; /* ↓3行 カテゴリを固定する */
   position: sticky;
   top: 3rem;
}
.catmenu ul { /* カテゴリの見た目を整える */
   list-style: none;
   margin: 0;
   padding: 1rem;
}
.headmenu .catpullbox { display: none;} /* プルダウンのカテゴリを消しておく */

@media screen and (max-width:800px) { /* 画面幅800px以下のとき */
   .catmenu { display: none;} /* 横のカテゴリを消す */
   .headmenu .catpullbox { display: block;} /* プルダウンのカテゴリを復活させる */
}
と追加してください

③mainareaの幅を調整
2カラムにすると全体幅が狭めになるので、「tegalog-hokan.css」の193行目あたり
width: min(100%,900px);
で900pxになってるとこを1000pxくらいに変えてみてください(全体の最大幅が変更できます)


こんな感じでいかがでしょう(画面幅狭いと見づらいので、横800px以下のときは元の1カラムに戻しています)
突貫で作ったので表示が若干怪しいところがあるのですが、ご希望に近くなりましたか？「これじゃない…」とか「もうちょっとこうしたい！」とか、不具合等あったらまたご連絡ください
畳む

返信 2023/12/29(Fri) 13:22 edit_note

返信 2023/11/27(Mon) 20:58 edit_note

返信 2023/11/26(Sun) 15:24 edit_note

返信 2023/10/30(Mon) 19:38 edit_note

返信 2023/10/29(Sun) 15:13 edit_note

返信 2023/10/28(Sat) 19:20 edit_note