skin-tako-1
白黒シンプル系 #skin-tako-1
試しに見てみる
＜スキンについて＞
●クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合
●「Media」タブで、このスキンがギャラリーモードに指定されている場合に表示される内容を設定しています。
┗ てがろぐ公式：複数のギャラリー用スキンを併用する方法（・本番使用中のスキンをそのままで、別のギャラリー用スキンを試す方法）
●ヘッダー部分の画像は絶対/相対リンクで指定した画像をを表示します。（＝[[USERICON]]ではなく）
●クイック投稿フォームをCSSで加工し、投稿ボタン以外のエリアを非表示にしています。
細かい設定が必要な投稿は新規投稿フォームで、きままな内容はクイック投稿フォームでつぶやくなどの使い分けができます。
┗詳細
未分類カテゴリを設定しておくと逐一カテゴリ分けしなおさなくて便利です。
●アイコンは「Google Material Icons 」を使用しています。
→ Font Awesome に変更しました。
＜参考にしたサイト＞
簡単なタブ切り替え機能の実装
白黒シンプル系 #skin-tako-1
試しに見てみる
＜スキンについて＞
●クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合
●「Media」タブで、このスキンがギャラリーモードに指定されている場合に表示される内容を設定しています。
┗ てがろぐ公式：複数のギャラリー用スキンを併用する方法（・本番使用中のスキンをそのままで、別のギャラリー用スキンを試す方法）
●ヘッダー部分の画像は絶対/相対リンクで指定した画像をを表示します。（＝[[USERICON]]ではなく）
●クイック投稿フォームをCSSで加工し、投稿ボタン以外のエリアを非表示にしています。
細かい設定が必要な投稿は新規投稿フォームで、きままな内容はクイック投稿フォームでつぶやくなどの使い分けができます。
┗詳細
未分類カテゴリを設定しておくと逐一カテゴリ分けしなおさなくて便利です。
●アイコンは
→ Font Awesome に変更しました。
＜参考にしたサイト＞
簡単なタブ切り替え機能の実装
skin-tako-2
偽横タブ型/白黒・赤アクセントカラーのシンプルスキンです。#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でページ内リンクをなめらかにスクロールする
偽横タブ型/白黒・赤アクセントカラーのシンプルスキンです。#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でページ内リンクをなめらかにスクロールする
skin-tako-3
縦書き / 作品展示向け #skin-tako-3
試しに見てみる
一覧表示
記事（長文） サンプル画像
ＰＣ表示
モバイル表示
畳む
記事（短文） サンプル画像
ＰＣ表示
モバイル表示
畳む
＜スキンについて＞
●日記・ブログ向きではなく、小説作品展示向きスキンです。
フォントはGoogleFontsから「ひな明朝」を使用しています。
テーマは「投稿ページをスクショに撮ってTwitterに投稿できる」ということで、1画面で完結する構成にしています。
文章作品のスクリーンショットをサンプルとして、続きの文章を自サイトにリンクする、という使い方ができるかと思います。
私は短歌を詠みたくて作成しました。
カテゴリやタグのリストを表示させてても面白いと思います。
ヘッダーのURLはてがろぐホームのURLタグを使っていますが、直打ちで自サイトのURLを入れるのもいいかなと思います。
●全体表示と投稿単独ページのCSS切り替えについて
記事一覧だとシンプルなリスト表示ですが、投稿単独ページでは縦書きで表示されます。
短文の場合は画面の中心あたりに内容が表示されます。
長文の場合は横にスクロールできます。
┗てがろぐ公式：▼一覧表示時と単独表示時とで適用デザインを分ける方法
上記の説明通りに、Ⓐ「記事一覧」とⒷ「記事単独」でHTMLとCSSを作っています。
●縦書き表示
縦書きに表示する用のボックスを作り、writing-mode: vertical-rl;で縦書きにしています。
┗参考リンク：MDN：writing-mode
このボックスの縦横のサイズを決めて見た目を調整します。overflow-y: hidden;で縦（ｙ軸方向）のスクロールバーが非表示になります。
横（ｘ軸方向）のスクロールバーは長文（枠からはみ出る）とき表示、短文（はみ出ないとき）は非表示です。
overflow-xはoverflow-yがhiddenの場合初期値がautoになるので指定してないです。これでうまくいってると思うのでこのままですが、正しくはどうすればいいのかわかりません。。。
鍵付きの投稿は入力欄と送信ボタンが横書きに固定みたいなので、説明欄も.passkeyguide{writing-mode: horizontal-tb;}で適当に縦書きを解除しています。
鍵付きの投稿
●スキン独自の装飾について
３点実装しています。おおよその機能についてはこちらを確認してください。
┗てがろぐ公式：▼class名を自由に指定できる装飾記法
①dai 文字を大きく・太くします。また、行間の幅を広げて題名っぽい感じにできます。
.deco-dai{font-size: 3em; font-weight: bold; line-height: 5em;}
②yoko 縦中横の設定です。半角文字（!?とか123）を縦向きにする装飾です。スキン３での表示でしか適用されません。
.deco-yoko{text-combine-upright: all;}
半角文字も含めて縦書きにするならあんまり使わないかもしれませんが個人的に「通常、半角の文は横向き」「特定の文字だけ縦に並べる（縦中横にする）」という使い方が好きなのでこのようになりました。
┗参考：日本らしさを表現！CSSで文字の縦書きに挑戦！
③owari 指定した文字列の前に適当に空白を入れます。空白と言いつつ、白背景に白文字を入力して見えなくしているだけなのでもっといい方法があるのかもしれないけどわかりません。
.deco-owari:before{content: "ここに適当に文字を入れる"; color: white;}
＜使用フォント＞
GoogleFonts - Hina Mincho
縦書き / 作品展示向け #skin-tako-3
試しに見てみる
一覧表示
記事（長文） サンプル画像
ＰＣ表示
モバイル表示
畳む
記事（短文） サンプル画像
ＰＣ表示
モバイル表示
畳む
＜スキンについて＞
●日記・ブログ向きではなく、小説作品展示向きスキンです。
フォントはGoogleFontsから「ひな明朝」を使用しています。
テーマは「投稿ページをスクショに撮ってTwitterに投稿できる」ということで、1画面で完結する構成にしています。
文章作品のスクリーンショットをサンプルとして、続きの文章を自サイトにリンクする、という使い方ができるかと思います。
私は短歌を詠みたくて作成しました。
カテゴリやタグのリストを表示させてても面白いと思います。
ヘッダーのURLはてがろぐホームのURLタグを使っていますが、直打ちで自サイトのURLを入れるのもいいかなと思います。
●全体表示と投稿単独ページのCSS切り替えについて
記事一覧だとシンプルなリスト表示ですが、投稿単独ページでは縦書きで表示されます。
短文の場合は画面の中心あたりに内容が表示されます。
長文の場合は横にスクロールできます。
┗てがろぐ公式：▼一覧表示時と単独表示時とで適用デザインを分ける方法
上記の説明通りに、Ⓐ「記事一覧」とⒷ「記事単独」でHTMLとCSSを作っています。
●縦書き表示
縦書きに表示する用のボックスを作り、writing-mode: vertical-rl;で縦書きにしています。
┗参考リンク：MDN：writing-mode
このボックスの縦横のサイズを決めて見た目を調整します。overflow-y: hidden;で縦（ｙ軸方向）のスクロールバーが非表示になります。
横（ｘ軸方向）のスクロールバーは長文（枠からはみ出る）とき表示、短文（はみ出ないとき）は非表示です。
overflow-xはoverflow-yがhiddenの場合初期値がautoになるので指定してないです。これでうまくいってると思うのでこのままですが、正しくはどうすればいいのかわかりません。。。
鍵付きの投稿は入力欄と送信ボタンが横書きに固定みたいなので、説明欄も.passkeyguide{writing-mode: horizontal-tb;}で適当に縦書きを解除しています。
鍵付きの投稿
●スキン独自の装飾について
３点実装しています。おおよその機能についてはこちらを確認してください。
┗てがろぐ公式：▼class名を自由に指定できる装飾記法
①dai 文字を大きく・太くします。また、行間の幅を広げて題名っぽい感じにできます。
.deco-dai{font-size: 3em; font-weight: bold; line-height: 5em;}
②yoko 縦中横の設定です。半角文字（!?とか123）を縦向きにする装飾です。スキン３での表示でしか適用されません。
.deco-yoko{text-combine-upright: all;}
半角文字も含めて縦書きにするならあんまり使わないかもしれませんが個人的に「通常、半角の文は横向き」「特定の文字だけ縦に並べる（縦中横にする）」という使い方が好きなのでこのようになりました。
┗参考：日本らしさを表現！CSSで文字の縦書きに挑戦！
③owari 指定した文字列の前に適当に空白を入れます。空白と言いつつ、白背景に白文字を入力して見えなくしているだけなのでもっといい方法があるのかもしれないけどわかりません。
.deco-owari:before{content: "ここに適当に文字を入れる"; color: white;}
＜使用フォント＞
GoogleFonts - Hina Mincho
skin-tako-4
携帯サイトリアルタイム日記風 #skin-tako-4
試しに見てみる
＜スキンについて＞
●クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合
●アイコンは「Font Awesome 」を使用しています。
●ヘッダー・日付部分のフォントに「Google Fonts 」を使用しています。
英語の場合「Bungee」日本語の場合「デラゴシック」で表示されます。
●てがろぐver3.9.0で動作確認しています。
●文字装飾について
┗標準機能にはおおむね対応しているかと思います。強調、極小文字を入力しても、おおむねノート罫線のデザインの範囲に収まります。（強調文字はめっちゃでっかいです）
ものすごい装飾してものすごい長文を入力するとずれることがありますが、そもそもそういう使い方を想定していないので不具合として扱っていません。（200文字程度の短文投稿を想定しています）
罫線のデザイン調整のため、画像を200px×200pxに設定しています。画像の下に文章を入力しても罫線に収まります。
配布zip
こちら からどうぞ。
てがろぐおよび素材の利用規約を遵守する限り、どなたでもご自由にご利用ください。使用報告も不要です。
カラーやフォントサイズをはじめとする改変についてもご自由にどうぞ。
再配布、自作発言はご遠慮ください。
参考サイト
┗CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech
携帯サイトリアルタイム日記風 #skin-tako-4
試しに見てみる
＜スキンについて＞
●クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合
●アイコンは「Font Awesome 」を使用しています。
●ヘッダー・日付部分のフォントに「Google Fonts 」を使用しています。
英語の場合「Bungee」日本語の場合「デラゴシック」で表示されます。
●てがろぐver3.9.0で動作確認しています。
●文字装飾について
┗標準機能にはおおむね対応しているかと思います。強調、極小文字を入力しても、おおむねノート罫線のデザインの範囲に収まります。（強調文字はめっちゃでっかいです）
ものすごい装飾してものすごい長文を入力するとずれることがありますが、そもそもそういう使い方を想定していないので不具合として扱っていません。（200文字程度の短文投稿を想定しています）
罫線のデザイン調整のため、画像を200px×200pxに設定しています。画像の下に文章を入力しても罫線に収まります。
配布zip
こちら からどうぞ。
てがろぐおよび素材の利用規約を遵守する限り、どなたでもご自由にご利用ください。使用報告も不要です。
カラーやフォントサイズをはじめとする改変についてもご自由にどうぞ。
再配布、自作発言はご遠慮ください。
参考サイト
┗CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech
gallery-tako-1
ギャラリー用スキン #gallery-tako-1
試しに見てみる
＜スキンについて＞
●ギャラリー用のスキンで、通常投稿の表示には向きません。
ギャラリーモードの機能上、投稿内に画像（[PICTで始まる記法を使って掲載した画像）を持っている投稿のみ表示されます。イラストなどの展示に向いています。
┗ てがろぐ公式：ギャラリー用スキンの作り方・使い方
●画像を1～4列のグリッド風に展示できます。実際はFlexBoxで指定しています。
●鍵付き投稿、NSFWフラグ（てがろぐ3.9以降の機能）の投稿は代替画像が表示されます。
サムネイル表示部分のskin-onelog.htmlの記述
<div class="thumbnail">
[[ONEPICT:1]]
<!-- 鍵つき投稿の場合、画像が出力されないので代替画像＋コメントを表示 -->
<div class="key-need">
<a href="[[PERMAURL]]">
<img src="[[PATH:SKINDIR]]Keyneed.png" alt="鍵投稿用の代替画像">
<div class="caution">
<p>クリックして鍵を入力</p>
</div>
</a>
</div>
<!-- NSFWフラグの画像を非表示にし、代替画像＋コメントを表示 -->
<div class="one-cushion">
<a href="[[PERMAURL]]">
<img src="[[PATH:SKINDIR]]cushion.png" alt="NSFWの代替画像">
<div class="caution">
<p>クリックして表示</p>
</div>
</a>
</div>
</div>
該当部分のCSSの記述
/* 鍵付き投稿、NSFW画像の代替画像を通常非表示にする */
/*NSFW画像を非表示にする */
.key-need, .nsfw img, .one-cushion {
display: none;
}
/* 必要な部分で表示する */
.key-need:first-child, .thumbnail .nsfw~.one-cushion {
display: block;
}
/* 鍵付き投稿。NSFW用の注意書き */
.caution {
background-color: var(--bg-sub);
position: absolute;
top: 40%;
width: 100%;
padding: 10px 5px;
text-align: center;
font-weight: bold;
opacity: 0.8;
}
鍵付き投稿は画像の出力自体されないので、「代替画像用のdiv要素が最初に来る」という指定で表示の切り替えをしています。
NSFWフラグ画像は、「同じ親要素(thumbnail)内にnsfwクラスがあると表示される」という指定で表示の切り替えをしています。
NSFWフラグ画像についてはフィルターをかけるのが一番楽だしデザイン的にもいいのかな…と思いますが個人的な好みで差し替え画像をどうしても使いたかったので…。
●他はそんなに難しいことのないスキンだと思います。「画像を表示する」ということに特化しているので、それ以外のデザインや装飾はできる限り省略しています。
画像のキャプション（3.9以降の機能）は、ギャラリーモードで投稿本文と重複する場合があるので非表示にしています。
┗ てがろぐ公式：画像管理画面で画像1つ1つにキャプションやフラグを登録する方法
┗ てがろぐ公式：画像の表示方法に応じた実際の出力HTMLと装飾例
●アイコンはFont Awesome を使用しています。
ギャラリー用スキン #gallery-tako-1
試しに見てみる
＜スキンについて＞
●ギャラリー用のスキンで、通常投稿の表示には向きません。
ギャラリーモードの機能上、投稿内に画像（[PICTで始まる記法を使って掲載した画像）を持っている投稿のみ表示されます。イラストなどの展示に向いています。
┗ てがろぐ公式：ギャラリー用スキンの作り方・使い方
●画像を1～4列のグリッド風に展示できます。実際はFlexBoxで指定しています。
●鍵付き投稿、NSFWフラグ（てがろぐ3.9以降の機能）の投稿は代替画像が表示されます。
サムネイル表示部分のskin-onelog.htmlの記述
<div class="thumbnail">
[[ONEPICT:1]]
<!-- 鍵つき投稿の場合、画像が出力されないので代替画像＋コメントを表示 -->
<div class="key-need">
<a href="[[PERMAURL]]">
<img src="[[PATH:SKINDIR]]Keyneed.png" alt="鍵投稿用の代替画像">
<div class="caution">
<p>クリックして鍵を入力</p>
</div>
</a>
</div>
<!-- NSFWフラグの画像を非表示にし、代替画像＋コメントを表示 -->
<div class="one-cushion">
<a href="[[PERMAURL]]">
<img src="[[PATH:SKINDIR]]cushion.png" alt="NSFWの代替画像">
<div class="caution">
<p>クリックして表示</p>
</div>
</a>
</div>
</div>
該当部分のCSSの記述
/* 鍵付き投稿、NSFW画像の代替画像を通常非表示にする */
/*NSFW画像を非表示にする */
.key-need, .nsfw img, .one-cushion {
display: none;
}
/* 必要な部分で表示する */
.key-need:first-child, .thumbnail .nsfw~.one-cushion {
display: block;
}
/* 鍵付き投稿。NSFW用の注意書き */
.caution {
background-color: var(--bg-sub);
position: absolute;
top: 40%;
width: 100%;
padding: 10px 5px;
text-align: center;
font-weight: bold;
opacity: 0.8;
}
鍵付き投稿は画像の出力自体されないので、「代替画像用のdiv要素が最初に来る」という指定で表示の切り替えをしています。
NSFWフラグ画像は、「同じ親要素(thumbnail)内にnsfwクラスがあると表示される」という指定で表示の切り替えをしています。
NSFWフラグ画像についてはフィルターをかけるのが一番楽だしデザイン的にもいいのかな…と思いますが個人的な好みで差し替え画像をどうしても使いたかったので…。
●他はそんなに難しいことのないスキンだと思います。「画像を表示する」ということに特化しているので、それ以外のデザインや装飾はできる限り省略しています。
画像のキャプション（3.9以降の機能）は、ギャラリーモードで投稿本文と重複する場合があるので非表示にしています。
┗ てがろぐ公式：画像管理画面で画像1つ1つにキャプションやフラグを登録する方法
┗ てがろぐ公式：画像の表示方法に応じた実際の出力HTMLと装飾例
●アイコンはFont Awesome を使用しています。