【配布】skin-matuba

【概要】

• MITライセンスで配布
• 一覧で付箋型、単独でブログっぽい表示
• 確認バージョン：てがろぐ Ver 4.1.4（β版）

Ver 4.1.4以降で動作するタグを使っているため、対応バージョンへアップデートしてください。

試しに見てみる

【ダウンロード方法】
配布（GitHubリンク）

Codeのボタンからメニューを開き、Download ZIPから保存、展開してご利用ください。

【ライセンス】
MIT

【スキンについて】
付箋みたいな感じで一覧表示するスキンです。

固定投稿は、一覧にしたときにピンで刺したようなアイコンがつきます。

鍵付きの投稿 は背景に鍵のアイコンがつきます。

閲覧者より使用しているユーザーに使いやすいデザインを目指しています。
たくさんメモを取るのも、詳しい記事を書くのもどちらでも、たくさん記事が並んでいると嬉しいスキンです。

右下のクイック投稿フォームを開くと、絵文字と画像の管理画面が開けます。

デモスキンで色々お試しください。

記事のIDでリンクをした場合、リンクの直後に改行して、任意の文字数分、引用として表示されます。

その他、同梱のREADMEをご覧ください。

【配布】skin-hujitubo

【概要】

• MITライセンスで配布
• シンプルタブ型スキン
• 確認バージョン：てがろぐ Ver 4.1.3（β版）

試しに見てみる


【ダウンロード方法】
配布（GitHubリンク）

Codeのボタンからメニューを開き、Download ZIPから保存、展開してご利用ください。


【ライセンス】
MIT


【スキンについて】
過去に展示していたskin-tako-1 を
現在のバージョンに対応の上、配布スキンとして公開いたしました。
見た目は同じようなスキンですが、機能はかなり変更しています。

投稿の状態によって、こんな感じのラベルがついたりします。



ダークモード切り替えボタン、投稿のTwitter(X)へのURL共有ボタンに加え、カスタム絵文字リストをスキン側で表示・コードを挿入したり、記事をIDでリンクした場合、引用として表示するなどの独自機能があります。

絵文字コピペの機能と、記事引用の機能は、過去にスクリプトとして公開していたものをスキンに組み込んだものになります。

こういう感じで絵文字リストをクイック投稿フォームの下に入れられます。

絵文字をクリック（タップ）すると、投稿フォームに絵文字コードがコピペされます。

記事のIDでリンクをした場合、リンクの直後に改行して、任意の文字数分、引用として表示されます。

こういう感じになるので、どっちかというともう少し簡単なリンクだったり、自己言及リプライの代わりくらいのイメージです。

詳しくはスキンに同梱しているREADMEをご覧ください。

【配布】skin-tako-6

【概要】

• new.css（CSSフレームワーク）を利用したシンプルなスキン
• クラスはてがろぐCGIが出力するもののみで構成
• カスタムに便利
• 確認バージョン：てがろぐ Ver 4.1.1.

試しに見てみる

配布.zip

【ライセンス】
当スキンについてはCC0で配布します。コピペ自由。というか改造を前提に作っています。
一応スキン製作者の表示をしていますが、消して問題ありません。
これはこのスキンについてのライセンスであり、てがろぐの使用条件  はにししふぁくとりー様に従ってください。

【説明】
このスキンはカスタマイズするのを前提に作成しています。
new.cssである程度のスタイルを適用していますが、お好きなフレームワークに差し替えたり、ご自身でスタイルを当てたりしやすいようにしています。

skin-cover.htmlも、skin-onelog.htmlもスキンの作成に必要な…というか私がよく使う構成で、スキン側で指定するクラスを排除して作成しています。

同梱されているcolor-theme.cssについて
new.cssで使用されているカラー設定を変更するためのCSSファイルです。不要な場合は使用しない、削除して問題ありません。
new.cssでどのようなスタイルがあてられるのかについては、公式サイト をご覧ください。
（GitHubからcss見るのが一番楽かも…）

同梱されているcustom.cssについて
以前公開していた、「HTMLサイト用の自作・配布テンプレートを適用する場合、追加で設定したほうがいいCSSの設定まとめ」の発展形のようなものです。
てがろぐスキンを改造するときにやったほうがいい設定を書いています。
（埋め込み動画の横幅を合わせる、NSFW画像のぼかしのはみだし対策など）

カレンダーや新着投稿などのクラスは、使わない人もいるかな…ということで記述していません。
（目的をもって「ここを装飾したい！」というときには、公式マニュアルが一番わかりやすいというのもあります）

カスタム絵文字の横幅など、CGI側で設定可能なクラスも同様に、記述をしていません。

「てがろぐスキンを作るなら絶対にやっておかないとダメそう」なクラスや、
「ここの装飾はやる人が絶対多そう」なクラスをピックアップしています。

また、.decorationEなどの、てがろぐ独自装飾の設定をクラスのみ記述しています。
お好きな装飾を加えてください。今あるものは網羅していると思います。抜けてたら教えてください。。。

「/*好みで変更してください*/」の部分は、見た目を整えるためにある程度の装飾をしています。
だいたいnew.cssの設定の流用なので、別のCSSを当てるときは、その通りに変更してください。

てがろぐの公式配布のスキンは、「それだけで使える」というスキンですので、CSSを見てもスキン側で指定してあるクラスと、CGI側で出力するクラスの差がわかりづらいですが、このスキンはスキン側で指定するクラスは一切ありません。

自作スキンのたたき台にどうぞ。

--------------------
追記2023.10.08
すみません、iPhoneで投稿フォームに移動するとズームされてしまう不具合があったので修正しています。
custom.cssに下記を追加してください。
textarea.tegalogpost {
    font-size: 16px;
}
--------------------


このスキン（特にcustom.css）はてがろぐの更新がある場合、適宜アップデートする予定です。
（初版：2023.10.07）

【展示】skin-tako-5

【概要】

• 展示のみ
• 状況によって表示が変わるスキン
• モノクロ・シンプル
• 確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる
トップページ
各種サンプル
一覧（その１）
一覧（その２）

以前は配布していましたが、一度配布zipを取り下げています。現在お使いの方はそのまま使っていただけます。

【スキンについて】
大きく分けて、汎用スキン・トップページ・疑似フレーム・目次（小説作品の展示を想定）の４種類を、class="[[SITUATION:CLASS]]"で切り分けて表示を変更しています。

メニューについては、4つの方法を想定しています。
スキン（skin-cover.html）に直接記述する
フリースペースを[[FREESPACE]]で挿入する
メニュー用の記事を作成し、[ONEPOST:●●]]で記事を挿入する
メニュー用のファイルを作成し、[[INCLUDE:ファイル名]]で挿入する

【展示】skin-tako-4

【概要】

• 展示のみ
• 携帯サイトのリアルタイム日記スキン風
• 確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる

以前は配布していましたが、一度配布zipを取り下げています。現在お使いの方はそのまま使っていただけます。

現在スキンを使用されている方は、ver3.9.0から追加されたカスタム絵文字について意図しない動作をする場合がありますので、下記をご確認ください。
また、NSFW画像への対応についても、下記に記載のCSSを追加してください。
バージョンアップに伴う追加CSS画像に対して、imgタグでスタイルを適用していたので、カスタム絵文字に対して意図しない装飾が適用されることがあります。
記事内の画像クラスへの適用に変更しましたので、ＣＳＳファイル内の31行目～imgで指定されている部分を削除して、下記の記述に差し替えてください。
/* 画像に関する設定*/
img {
   height: 100%;
   max-width: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}


/* 投稿本文の画像 */
/* 画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
   display: inline-table;
   margin: 5px 0;
   padding: 0;
   border-collapse: collapse;
   vertical-align: top
}

/* キャプション */
.embeddedpictbox figcaption {
   display: table-caption;
   background-color: var(--background-sub);
   caption-side: bottom;
   text-align: center;
   font-size: .8em;
}

/* 画像ボックスに含まれる画像 */
.embeddedpictbox img {
   vertical-align: middle;
}

/* 画像リンク */
.imagelink {
   display: inline-block;
   vertical-align: inherit;
   line-height: 1;
}

/* 画像そのもの */
.embeddedimage {
   max-width: 100%;
   max-height: 240px;
   width: auto;
   height: auto;
   margin: 5px;
}

また、NSFWフラグの画像についても、記述のアップデートを行っております。461行目からの記述を、下記の記述に差し替えてください。
/* NSFWフラグ付き画像 */
.imagelink.nsfw {
   display: inline-block;
   overflow: hidden;
}

/*NSFWフラグ付き画像のフィルター（モノクロ化＋ぼかし）*/
img.nsfw {
   -webkit-filter: grayscale(1) blur(20px);
   filter: grayscale(1) blur(20px);
}


Ver 3.9.0以降に追加されたリスト機能に対応する場合は、下記を追加してください。
L:リストの指定(Line)
.decorationL {
   list-style: inside disc;
}

.decorationL li ul {
   list-style: inside circle;
   margin-left: 1rem;
}



Ver 4.0.4以降実装のカスタム絵文字について、今回装飾を加えております。
カスタム絵文字をホバーしたときふわっと大きくしたいときは、下記を追加してください。
.cemoji img {
   transition: transform .2s ease;
}

.cemoji img:hover {
   transform: scale(1.2);
}
畳む

【スキンについて】
クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合

アイコンは「Font Awesome 」を使用しています。

ヘッダー・日付部分のフォントに「Google Fonts 」を使用しています。
　英語の場合「Bungee」日本語の場合「デラゴシック」で表示されます。

文字装飾について
┗標準機能にはおおむね対応しているかと思います。強調、極小文字を入力しても、おおむねノート罫線のデザインの範囲に収まります。（強調文字はめっちゃでっかいです）
　ものすごい装飾してものすごい長文を入力するとずれることがありますが、そもそもそういう使い方を想定していないので不具合として扱っていません。（200文字程度の短文投稿を想定しています）
　罫線のデザイン調整のため、画像を200px×200pxに設定しています。画像の下に文章を入力しても罫線に収まります。

参考サイト
┗CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech

【展示】skin-tako-3

【概要】

• 展示のみ
• 縦書き
• 作品展示向けスキン
• 一覧ページはタイトルのみ表示
• 確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる
一覧表示

記事（長文）
記事（短文）

【スキンについて】
日記・ブログ向きではなく、小説作品展示向きスキンです。
　フォントは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

【概要】

• 展示のみ
• 偽横タブ型
• 白黒・赤アクセントカラーのシンプルスキン
• 確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる

【スキンについて】
左サイドバーは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-1

【概要】

• 展示のみ
• シンプルタブ型スキン
• 確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる


【スキンについて】
クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合

「Media」タブで、このスキンがギャラリーモードに指定されている場合に表示される内容を設定しています。
┗ てがろぐ公式：複数のギャラリー用スキンを併用する方法（・本番使用中のスキンをそのままで、別のギャラリー用スキンを試す方法）

ヘッダー部分の画像は絶対/相対リンクで指定した画像をを表示します。（＝[[USERICON]]ではなく）

クイック投稿フォームをCSSで加工し、投稿ボタン以外のエリアを非表示にしています。

細かい設定が必要な投稿は新規投稿フォームで、きままな内容はクイック投稿フォームでつぶやくなどの使い分けができます。
Ver 4.0.1β以降、submitボタンの修正が加えられています。
.line-control .submitcover ~ * { display:none; }の記述を加えれば、添付画像のようなすっきりした投稿フォームになります。

以前は.line-control input ~ * { display:none; }という記述でした。
詳しくは▼編集画面カスタマイズのための参考情報 （公式マニュアル）をご確認ください。

]

アイコンはFont Awesome を使用しています。


【参考にしたサイト】
簡単なタブ切り替え機能の実装