skin-tako-5
状況によってデザインが変わるスキン #skin-tako-5
試しに見てみる
●トップページ
●各種サンプル
●一覧（その１）
●一覧（その２）
＜スキンについて＞
●大きく分けて、汎用スキン・トップページ・疑似フレーム・目次（小説作品の展示を想定）の４種類
●skin-cover.html
ヘッダー・・・
メインタイトル（てがろぐHOMEへのリンク）、状況に応じた見出しの表示
メニュー・・・
記事の埋め込み・またはフリースペースを使用して、サイト内のメニューリンクを出力します。
HTMLに直接記述してももちろん大丈夫ですが、サーバーにアップロードする手間が必要になるため、
てがろぐ自身で完結する場合は今回のやり方がおすすめです。
記事埋め込みの場合は、まずメニューとなる記事を作成し、HTMLに記載のタグ[[ONEPOST:●●]]の
●●部分を、該当するIDに差し替えてください。
てがろぐ記事IDでのリンク・任意URLでのリンク、各種文字装飾はそのまま反映されます。
フリースペースを利用する場合は、HTMLが使えます。フリースペースタグ[[FREESPACE]]を
使用してください。
複数のフリースペースを使用する場合は、下記の公式リンクを参考に作成してください。
フリースペースの書き方（複数のフリースペースを設ける方法）
https://www.nishishi.com/cgi/tegalog/cus...
最近の投稿・・・
新着投稿・新着画像を表示するエリアです。
新着投稿で表示したい内容については、「設定」→【新着投稿リストの表示】から設定できます。
また、新着投稿については「下げる（一覧外）」の投稿も表示されます。
最近の公式サポート掲示板で、下げる投稿を表示しなくなる機能を検討します～」という質疑があったので、この部分はいったんこのままでも大丈夫そうかな…と思っています。。。質問者さん、ありがとうございます…！！
メイン・・・
てがろぐ記事・ページナビゲーション・ウィジェット（と呼んでいる検索窓等の表示部分）
ウィジェットエリアの各種機能については、後述するフッターアイテムのエリアに置いても
ほぼ同じ装飾で表示されると思います。
クイックポスト・・・
クイックポストのエリア
フッター・・・
フッターアイテム（メニュー同様、てがろぐ記事の埋め込み・フリースペースで
内容を挿入できます。
「無断転載禁止」等の注意書きやサイト情報など、すべてのページで表示されるような
内容を想定しています。
[[VERSION]]タグはてがろぐ公式の規約で必須のため、絶対に削除しないでください。
<div class=container>は、XREAサーバーで広告が隠れることを回避するために存在しています。
広告なしのサーバーの方は特に必要ありません。
後述のグリッド表示のコンテナとして使用しているので、その部分をbodyに書き換えてください。
書き換えなくても機能しますので、面倒な方、わからない方はそのままでも大丈夫です。
lightbox用のタグは、別スプリクトを使用している場合、適宜差し替えてください。
●skin-onelog.html
forPostAll・・・
記事一覧のページで全文を表示する（通常のブログ的な表示）
forPostTitle・・・
記事一覧のページでタイトルのみ表示する（小説作品等の展示を想定）
forPostTitleの部分については、特定のカテゴリのみで表示される、という運用を想定しています。
CSSでどのカテゴリで適用するかの切り替えを行います。
●CSSは、詳細をCSS本体に記載しております。
でも全然甘いです…にししさん、毎回更新のたびにたくさんコメントを書いてくださるの、改めて感謝いたします……！
注意事項は下記です。
●前回同様、配色はまとめて変更できます。
●skin-cover.htmlのbodyに付加した[[SITUATION:CLASS]]タグで、スキンの切り替えを行っています。
汎用スキン・・・
一覧と単独表示用に、特にクラスを指定していないプレーンなスキン
トップページ用のスキン・・・
サイトのトップページで表示する、大きな画像を表示します。
記事は表示せず、新着投稿・画像リストを表示します。
何か指定がある 状況での 一覧 表示（その１）・・・
PCでは２カラムで表示するスキンです。
グリッドレイアウトで表示しており、フレーム表示っぽくなっています。
特定のカテゴリーで適用したい場合、公式サイトを確認しつつ、「body.cat-●●」の
部分を書き換えてください。
装飾のカスタマイズ方法（状況に応じて装飾を変化させる、状況表示行の装飾）
https://www.nishishi.com/cgi/tegalog/cus...
（例）カテゴリーIDが「diary」のカテゴリーに適用したい場合、「body.cat-diary」
タグへの適用はやってみたんですがうまくいきませんでした…。
何か指定がある 状況での 一覧 表示（その２）・・・
タイトルのみ表示される一覧ページです。
skin-onelog.htmlの「forPostTitle」で表示される部分がここです。
小説サイトの作品一覧ページを想定しています。
「その１」と同じように、カテゴリーIDまたはユーザーIDなどで指定してください。
変更する部分は２か所です。
(1)「デザインの切り替え」で、タイトルを表示するページと全文を表示するページを
切り替える「body.cat-●●」の部分
(2)「何か指定がある 状況での 一覧 表示（その２）」の「body.cat-●●」の部分
何か指定がある 状況での 単独 表示・・・
インフォメーションページなど、少数のページに適用することを想定しています。
この記事自体がサンプルになっています。
表示したい記事を作成し、CSSの記事ID（log-●●の部分）を書き換えてください。
（例）記事IDが１の場合、「log-1」
●基本的に、このまま使うスキンというよりは、お好きに改変してもらって、
「てがろぐでサイトを作る」のたたき台になれば…と思います。
なるべく表示は簡易的になるように、機能への対応は網羅的に…と思って作ったスキンです。
●配布zip
こちら からどうぞ。
使用報告は不要です。
改変を前提としたスキンなので、大幅な改変を行ったスキンを作成される場合は、
「Theme by takotubo-club」の表記は削除していただいても大丈夫です。
※Powered by てがろぐ Ver～～の部分は削除しないでください！※
改変したスキンの配布なども行っていただいて大丈夫…
というかてがろぐ公式機能の応用に過ぎないのでお好きにしてくださって大丈夫です。
ただし、このサイトからダウンロードしたファイルそのままのスキンを再配布するのはご遠慮ください。
ご利用は自己責任でお願いいたします。
状況によってデザインが変わるスキン #skin-tako-5
試しに見てみる
●トップページ
●各種サンプル
●一覧（その１）
●一覧（その２）
＜スキンについて＞
●大きく分けて、汎用スキン・トップページ・疑似フレーム・目次（小説作品の展示を想定）の４種類
●skin-cover.html
ヘッダー・・・
メインタイトル（てがろぐHOMEへのリンク）、状況に応じた見出しの表示
メニュー・・・
記事の埋め込み・またはフリースペースを使用して、サイト内のメニューリンクを出力します。
HTMLに直接記述してももちろん大丈夫ですが、サーバーにアップロードする手間が必要になるため、
てがろぐ自身で完結する場合は今回のやり方がおすすめです。
記事埋め込みの場合は、まずメニューとなる記事を作成し、HTMLに記載のタグ[[ONEPOST:●●]]の
●●部分を、該当するIDに差し替えてください。
てがろぐ記事IDでのリンク・任意URLでのリンク、各種文字装飾はそのまま反映されます。
フリースペースを利用する場合は、HTMLが使えます。フリースペースタグ[[FREESPACE]]を
使用してください。
複数のフリースペースを使用する場合は、下記の公式リンクを参考に作成してください。
フリースペースの書き方（複数のフリースペースを設ける方法）
https://www.nishishi.com/cgi/tegalog/cus...
最近の投稿・・・
新着投稿・新着画像を表示するエリアです。
新着投稿で表示したい内容については、「設定」→【新着投稿リストの表示】から設定できます。
また、新着投稿については「下げる（一覧外）」の投稿も表示されます。
最近の公式サポート掲示板で、下げる投稿を表示しなくなる機能を検討します～」という質疑があったので、この部分はいったんこのままでも大丈夫そうかな…と思っています。。。質問者さん、ありがとうございます…！！
メイン・・・
てがろぐ記事・ページナビゲーション・ウィジェット（と呼んでいる検索窓等の表示部分）
ウィジェットエリアの各種機能については、後述するフッターアイテムのエリアに置いても
ほぼ同じ装飾で表示されると思います。
クイックポスト・・・
クイックポストのエリア
フッター・・・
フッターアイテム（メニュー同様、てがろぐ記事の埋め込み・フリースペースで
内容を挿入できます。
「無断転載禁止」等の注意書きやサイト情報など、すべてのページで表示されるような
内容を想定しています。
[[VERSION]]タグはてがろぐ公式の規約で必須のため、絶対に削除しないでください。
<div class=container>は、XREAサーバーで広告が隠れることを回避するために存在しています。
広告なしのサーバーの方は特に必要ありません。
後述のグリッド表示のコンテナとして使用しているので、その部分をbodyに書き換えてください。
書き換えなくても機能しますので、面倒な方、わからない方はそのままでも大丈夫です。
lightbox用のタグは、別スプリクトを使用している場合、適宜差し替えてください。
●skin-onelog.html
forPostAll・・・
記事一覧のページで全文を表示する（通常のブログ的な表示）
forPostTitle・・・
記事一覧のページでタイトルのみ表示する（小説作品等の展示を想定）
forPostTitleの部分については、特定のカテゴリのみで表示される、という運用を想定しています。
CSSでどのカテゴリで適用するかの切り替えを行います。
●CSSは、詳細をCSS本体に記載しております。
でも全然甘いです…にししさん、毎回更新のたびにたくさんコメントを書いてくださるの、改めて感謝いたします……！
注意事項は下記です。
●前回同様、配色はまとめて変更できます。
●skin-cover.htmlのbodyに付加した[[SITUATION:CLASS]]タグで、スキンの切り替えを行っています。
汎用スキン・・・
一覧と単独表示用に、特にクラスを指定していないプレーンなスキン
トップページ用のスキン・・・
サイトのトップページで表示する、大きな画像を表示します。
記事は表示せず、新着投稿・画像リストを表示します。
何か指定がある 状況での 一覧 表示（その１）・・・
PCでは２カラムで表示するスキンです。
グリッドレイアウトで表示しており、フレーム表示っぽくなっています。
特定のカテゴリーで適用したい場合、公式サイトを確認しつつ、「body.cat-●●」の
部分を書き換えてください。
装飾のカスタマイズ方法（状況に応じて装飾を変化させる、状況表示行の装飾）
https://www.nishishi.com/cgi/tegalog/cus...
（例）カテゴリーIDが「diary」のカテゴリーに適用したい場合、「body.cat-diary」
タグへの適用はやってみたんですがうまくいきませんでした…。
何か指定がある 状況での 一覧 表示（その２）・・・
タイトルのみ表示される一覧ページです。
skin-onelog.htmlの「forPostTitle」で表示される部分がここです。
小説サイトの作品一覧ページを想定しています。
「その１」と同じように、カテゴリーIDまたはユーザーIDなどで指定してください。
変更する部分は２か所です。
(1)「デザインの切り替え」で、タイトルを表示するページと全文を表示するページを
切り替える「body.cat-●●」の部分
(2)「何か指定がある 状況での 一覧 表示（その２）」の「body.cat-●●」の部分
何か指定がある 状況での 単独 表示・・・
インフォメーションページなど、少数のページに適用することを想定しています。
この記事自体がサンプルになっています。
表示したい記事を作成し、CSSの記事ID（log-●●の部分）を書き換えてください。
（例）記事IDが１の場合、「log-1」
●基本的に、このまま使うスキンというよりは、お好きに改変してもらって、
「てがろぐでサイトを作る」のたたき台になれば…と思います。
なるべく表示は簡易的になるように、機能への対応は網羅的に…と思って作ったスキンです。
●配布zip
こちら からどうぞ。
使用報告は不要です。
改変を前提としたスキンなので、大幅な改変を行ったスキンを作成される場合は、
「Theme by takotubo-club」の表記は削除していただいても大丈夫です。
※Powered by てがろぐ Ver～～の部分は削除しないでください！※
改変したスキンの配布なども行っていただいて大丈夫…
というかてがろぐ公式機能の応用に過ぎないのでお好きにしてくださって大丈夫です。
ただし、このサイトからダウンロードしたファイルそのままのスキンを再配布するのはご遠慮ください。
ご利用は自己責任でお願いいたします。
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 を使用しています。
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
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-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でページ内リンクをなめらかにスクロールする