タグ「skin-tako-2」を含む投稿［1件］
DASHBOARD
■全文検索：
■複合検索：
■新着画像リスト：
全12個 （総容量 1MB）
■日付検索：
■ハッシュタグ：
- サンプル(11)
- 画像(5)
- skin-tako-1(3)
- skin-tako-5(1)
- gallery-tako-1(1)
- skin-tako-4(1)
- skin-tako-3(1)
- skin-tako-2(1)
- CSS(1)
■最近の投稿：
- たこつぼくらぶ、トップぺージ等…
2023/05/15 23:23:49 かんりにん - 独自タグ[[C…
2023/03/26 15:49:04 かんりにん - てがろぐを使ってるサイト向けの…
2023/03/25 14:52:52 かんりにん
▼現在の表示条件での投稿総数：
1件
▼最後に投稿または編集した日時：
2023年5月15日(月) 23:27:26〔1年以上前〕
▼特殊な表示モード：
偽横タブ型/白黒・赤アクセントカラーのシンプルスキンです。#skin-tako-2
試しに見てみる
＜スキンについて＞
●左サイドバーはheight100%のボックスをposition:fixedで固定しています。skin１のような、同じページ内に内容を表示するタブ型ではないです（ページが変わります）
（もうちょっといいやり方があるのかもしれません。。。）
一番上のリンクはホームに戻るリンク、その下は[[CATEGORY:TREE]]を挿入しています。
●外側スキン[[CATEGORY:TREE]]の装飾について
①まずは見た目を安定させるため、第２階層以降を非表示にします。公式説明に従って.depth2 { display:none; }を記述します。
┗てがろぐ公式：カテゴリの第1階層だけを表示させる方法
②付箋っぽくしたいので、サイドバーの右側、カテゴリーの各リンクをボーダーで適当に囲います。
③「○○のカテゴリを表示すると、○○のボタンの色が反転する」という装飾をします。
公式説明に従って<body>とかにclass="[[SITUATION:CLASS]]"を指定します。
┗てがろぐ公式：そのときの表示状況に応じてページデザインを切り替える方法
これでカテゴリ名に対応したカテゴリIDをクラス名として持つページができます。
<body>に指定しているのでページ全体の背景を変更したり、自由なカスタマイズが可能です。
（これでできる方にはできると思いますが、管理人自身が忘れないためのメモ的説明です。多分もっと簡単でちゃんとした方法があると思います…。）
今回は『カテゴリ名「共通内容」カテゴリID「cat1」というページを表示したとき』に装飾をしたいので、
.selected-cat.cat-cat1 .catlink.cat-cat1 {～～}
というような記述をします。
.selected-cat.cat-cat1はcat1を表示したときに[[SITUATION:CLASS]]に出力されているクラス、
.catlink.cat-cat1はカテゴリツリーのcat1に付与されているクラスです。
畳む
④縦書きにします。（ここは好み） writing-mode: vertical-rl;
⑤box-shadowで右に水平に5pxくらい伸ばして付箋っぽくします。そのほか、適当に好みの形に整えて終わりです。
●CSSだけでページ内移動をなめらかにする方法
html { scroll-behavior: smooth;} を記述
Javascripttとかわかる方はこれ以外の方法でもできると思います。
＜参考リンク＞
CSSでページ内リンクをなめらかにスクロールする