何らかの配布場

#スキンippen #カスタマイズ

(04/26追記)↓の内容を反映して更新しました
　
バラ配布用のやつ作ってたんですけど、メニュー部分をメインコンテンツ内に入れちゃったせいでカスタマイズしづらいな…多分画面横幅いっぱいになってた方がいいと思う

<main><!-- メニューとメインコンテンツを囲む -->
を</nav>の下に持ってくる(<nav>～</nav>を<main>～</main>から外す感じ)

「ippen-style.css」の109行目あたり.mainmenu ul {～}の
padding: 0.5rem 0;　を　padding: 0.5rem 1.3rem;　にする
margin: 0;　も追加しといたほうがいいかもしんない

あとはborder-bottom: 1px solid var(--usu-mozi-iro);とかで下に線を付けてみたりbackground-colorを好きな色にしたりbox-shadow: 0 1px 5px rgba(0,0,0,0.2);とかで影を付けるなり

取り急ぎ　更新時に直しておきます
　
(04/23追記)
もう一つ修正　59行目あたり.bodyarea {～}の
grid-template-rows: auto 1fr auto;　を　grid-template-rows: auto auto 1fr auto;　に直しといてください

#スキンippen #カスタマイズ

→てがろぐ Ver 4.2.4 beta版

カテゴリごとの単独記事遷移記述が来たのでちょっと取り急ぎippenのカスタム方法を殴り書きしておきます　あとでちゃんと検証します(※不具合あるかもなのでやる場合はバックアップとってからやってね)

①tegalog-ippen.css439行目
/* 単独ページではページナビを非表示 */
body.onelog .pagelinks { display: none;}
を消す

②skin-onelog.html
7行目と11行目の
[[PERMAURL]]を[[PERMAURL:KEEPCOND]]に書き換え
これで、カテゴリ、ハッシュタグなどを限定表示した一覧から単独記事に飛んだときに、下の隣接投稿へのナビがそのカテゴリとかタグごとへのリンクになってるはず

ごめん今気づいたけど単独記事のナビは次前リンクが感覚的に逆になるんだな
skin-cover.html49行目あたり<!-- ページナビ -->の
<p class="pagelinks">[[NAVI:PREV]][[NAVI:PAGELIST]][[NAVI:NEXT]]</p>
を
[[IF(-onelog):<p class="pagelinks">[[NAVI:PREV]][[NAVI:PAGELIST]][[NAVI:NEXT]]</p>:IF]]
[[IF(onelog):<p class="pagelinks">[[NAVI:NEXT]][[NAVI:PAGELIST]][[NAVI:PREV]]</p>:IF]]
に書き換えでどうだろう　これで一覧(最新投稿順)は「←前/次→」に、単独記事は「←次/前→」になって並びは一致するはず
あと「設定」→【ナビゲーションリンクの表示】で矢印の向きとかは調整してください

そういえばtenranのメニューはスクロール固定なんですが、メニュー長くなったりして下の方見えないよ！てなった場合、
cssファイル198行目あたりにある
.menuarea {～}
の中の
position: sticky;
top: 0;
の2行を消せば動くようになります(なんか不具合出たらごめん)
#スキンtenran #カスタマイズ

そろそろkozinとsirasonを更新というかリニューアルしたい

sirasonはタグエリアへのリンクをスムーススクロールとかにしたほうがいいかな？というのと、カレンダーとか新着画像リストも載せてみたいというのと　これはCSSの別パーツとしてカスタマイズに置くか

kozinはカテゴリの表示もタグと同じにしちゃって、使う人が削除なり移動なりしやすいようにしたらいいかと思う　あと細々した記述の整理
あとギャラリーモードの情報部分ももっとすっきりさせたい
　
ちなみにスムーススクロール自体はCSSに
html { scroll-behavior: smooth;}
の1行足すだけで実装できるらしいです　便利な世の中だよ
#スキンsirason #カスタマイズ

#スキンkozin #カスタマイズ
解説リクエストいただいたので、kozinカテゴリ欄のカスタマイズを置いておきます　カテゴリ欄をタグリストと同じ感じの横並び表示にするよ
続きを読む
・カテゴリ一覧を横並びにして「・」を消す(タグ表示と同じにする)には
まず「skin-cover.html」の76行目あたり
<div class="categorylistarea">[[CATEGORY:TREE]]</div> <!-- カテゴリー -->
を、今ハッシュタグがあるサブ領域(div class="subarea-ue"のとこ)まで持ってきます　そして「tegalog-kozin.css」の末尾に以下のcssを追加してください

/* カテゴリーリスト区画 */
.cattree {
   margin: 1.5rem 0;
   padding: 15px;
   background-color: var(--hobo-siro);
   border-radius: 5px;
   list-style: none;
   position: relative;
}
.cattree li { display: inline-block; margin-right: 0.5rem; }

/* フォルダアイコンを重ねる */
.cattree::before{
   content:"\e2c7";
   font-family: "Material Icons Round";
   font-size: 25px;
   color: var(--koi-iro);
   position: absolute;
   top: -10px;
   left: 10px;
}

「display: inline-block;」で横並び、「list-style: none;」で黒点を消しています(本当は「display: inline-block;」で横並びにすると勝手に黒点も消える仕様なのですが一応指定しています)　後の記述は余白とか見た目の調整です
枠の左上に重なってるフォルダのアイコンがいらなければ「/* フォルダアイコンを重ねる */」から下の記述を消しておいてください

↓こんな感じになったでしょうか


ハッシュタグリストを移動したかったら、55行目あたりの
<div class="hashtaglistarea">[[HASHTAG:LIST]]</div> <!-- ハッシュタグ -->
を好きなところに移動させておいてください　今まであったカテゴリリストと同じ縦並び表記にしたかったら、「tegalog-kozin.css」の506～526行目あたりの
/* ▼ハッシュタグリスト区画 */
.hashtaglist {
   margin: 10px 0;
   padding: 15px;
   background-color: var(--hobo-siro);
   border-radius: 5px;
   position: relative;
}
/* タグアイコンを重ねる */
.hashtaglist::before{
   content:"\f05b";
   font-family: "Material Icons Round";
   font-size: 25px;
   color: var(--koi-iro);
   position: absolute;
   top: -10px;
   left: 10px;
}
.hashtaglist li { display: inline-block; margin-right: 5px; }
の記述をまるっと消してください
畳む

#スキンkozin #カスタマイズ
解説リクエストいただいたので、kozinギャラリーモードのカスタマイズを置いておきます　カテゴリやタグの記述を消したり画像枚数を画像に重ねたりするよ
続きを読む
・kozinギャラリーモードでカテゴリ・タグの情報を消すには、「skin-onelog.html」の
18・19行目あたり
<span class="galcateg">[[CATEGORYLINKS:GALLERY]]</span>
<span class="galtags">[[COMMENT:TAGS:GALLERY]]</span>
を消すといいです

日付は元投稿へのリンクになっているのですが、特に必要なければ、20行目あたり
<span class="galpostdate"><a href="[[PERMAURL:PURE]]" class="datelink">»[[DATE:Y/G/N]]</a></span>
も一緒に消しちゃってください

全部消すなら、16～21行目あたりの
<!-- カテゴリ、タグ、投稿日時等 -->
<p class="galloginfo">～</p>ごと消しちゃってもいいかもです

・画像枚数を画像に重ねるには、まず「skin-onelog.html」の8行目あたりの<br>を消して、「tegalog-kozin-gallery.css」の末尾に以下のcssを追加してください

/* 画像枚数を画像に重ねる */
.gallogbox { position: relative;}
.pictcount {
   position: absolute;
   z-index: 1;
   display: block;
   padding: 3px 5px;
   top: 0px;
   left: 0px;
   background-color: var(--koi-iro);
   color: var(--hobo-siro);
}

※各記述の簡単な解説
padding: 3px 5px;→文字と背景の間の余白です　上下3px、左右5pxの余白を設定しています
top: 0px;とleft: 0px;→画像枚数の表示を、画像の上から0px、左から0pxのところ(左上ぴったり)に配置しています　「bottom:(数値);(下から)」「right:(数値);(右から)」の記述方法もありますので、お好きな場所に配置してみてください
background-color: var(--koi-iro);→画像枚数の背景色です　「var()」で指定しているのは「tegalog-kozin-gallery.css」16行目～あたりの「カスタム用色変更欄」に書いてある名前です　これを指定するとそこと同じ色になります　もちろん、色名や「#FFFFFF」とかのカラーコードなどで指定しても構いません　「rgb(0,0,0,0.6)」って指定すると半透明黒とかになります
color: var(--hobo-siro);→画像枚数の文字色です　これも背景色と同じ指定が可能です
(※おまけ　border-radius: 5px;を追加すると角丸になるよ)

よくわからなかったらこの辺のサイトさんが参考になると思います
→CSSでの色の指定方法について
→画像の上におしゃれに文字やボタンをのせる方法（CSS）
→CSS 画像の上に文字や画像を重ねる 左上/右上/左下/右下/中央

↓こんな感じになるはず(日付リンクは消さなかったver.)

畳む

#カスタマイズ #自由装飾
めっちゃ焦った　DLリンクをボタンにしようと思って自由装飾で適当にボタン作ったら表示崩れてびっくりした

リンクがボタンの装飾の外側にあると駄目なようです　まずテキストリンクを作ってからそれを丸ごとボタンの装飾で包み、deco-〇〇配下のaに対して装飾すればいいっぽい
という感じでスキンのDLリンクをボタンにしてみました　ちゃんとできてる？下にcss置いときます
続きを読む
自由装飾「button」
/* ボタン(リンクはボタンの中に貼る) */
.deco-button a {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 5px;
margin: 3px;
padding: 0.3rem 1rem;
background-color: 好きな背景色;
color: 好きな文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px 好きな影色;
}
.deco-button a:hover { background-color: 好きなホバー色; box-shadow: 0 0;}
畳む

#カスタマイズ

(11/4)実装しました！

※#スキンkozinギャラリーモードで鍵投稿部分に代替画像を表示させる
#スキンsirasonギャラリーモードで実装できたのでいずれkozin更新するとき実装するよ！下にcss置いとくので自力でできそうな方は先に実装しといてください
「tegalog-kozin-gallery.css」の末尾とかに付け足せば多分いけるはず
続きを読む
/* 鍵投稿の画像部分の大きさ調整して色付ける */
.logstatus-lock .imagebox {
   width: 100%;
   height: auto;
   aspect-ratio: 1;
   object-fit: cover;
   background-color: var(--usu-mozi-iro);
   position: relative;
  }
 
/* 鍵投稿の画像部分に代替アイコンを入れる */
 .logstatus-lock .imagebox::before{
   content: '\e73c';
   font-family: "Material Icons Round";
   font-size: 60px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
  }

「(鍵付き投稿の)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定のチェックは外しといてください
畳む

文字を虹色に光らせたかったので、てがろぐの自由装飾で文字を虹色に光らせるcssを置いておきます #カスタマイズ #自由装飾

参考：
→「CSSで色んなものを虹色に光らせる」
→「【html/CSS】虹色の作り方【背景・文字・アニメーション】」
続きを読む
●文字を大きくする(「deka」)
.deco-deka { font-size: 1.6rem; font-weight: bold; line-height: 2rem;}

「font-weight: bold;」部分はお好みで


●文字を虹色にする(「nizi」)
   .deco-nizi {
      background: linear-gradient(to bottom, Magenta, yellow, Cyan, Magenta) 0 25% / 100% 70%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
   }


●文字を虹色にアニメーションさせる(「gaming」)
   .deco-gaming {
      background: linear-gradient(to bottom, Magenta, yellow, Cyan, Magenta) 0 / 100% 200%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      animation: deco-gaming 2s linear infinite;
   }

   @keyframes deco-gaming {
      0% { background-position: 0 0;}
      100% { background-position: 0 -200%; }
     }
畳む

#カスタマイズ

(10/14)cssで実装したよ！　>>26

※ギャラリーモード時鍵付き投稿内画像が表示されないので代替画像を表示させる

「kozin」ギャラリースキン「skin-onelog.html」の[[COMMENT:PICTS]]の下に

<a href="[[PERMAURL:PURE]]"><img class="embeddedimage" src="images/鍵クッション画像名"></a>

と記述してクッション画像をimagesフォルダに入れておくと、ギャラリーモードでクッション画像が表示され、クリックで投稿記事に飛べるようになる…はず…！(ちゃんと検証してないのでなんかバグったらすみません)