settings

何らかの配布場

nanraka-no-haihu-ba

てがろぐ用のスキンを配布する場所

No.68

＞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くらいに変えてみてください(全体の最大幅が変更できます)

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

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

« No.67 / No.69 »

初期表示に戻る

FREESPACE
フリースペースエリアです。
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも
expand_less