てがろぐは新規投稿・編集画面もカスタマイズできるということで、やってみました。

（ツイート埋め込み処理中...）Twitterで見る

てがろぐ公式：新規投稿/編集画面に自由なCSSやJavaScriptを加える方法

通常リセットCSSを外部から読み込んでいるのであんまり意識したことがなかったのですが、
input（ボタン）とselect部分がsafariではブラウザの表示が適用されてしまうようで…。
解決しましたがこれからは少し意識して作成していきたいです。

＜参考リンク＞
【CSS】inputタグのスタイルがiPhoneのSafariで適用されない
【CSS】Safariでinput・select要素のスタイルをリセットする方法 | ユウマのブログ

てがろぐギャラリーモードに装飾を加える参考

10press　てがろぐ「ギャラリーモード」のカスタマイズ
てがろぐ　▼いきなりは見せたくない画像にワンクッション置きたい場合の(たぶん)チョー簡単な方法

私は基本的にすでにセットがあるカラーパレットみたいな配色サイトを見るのが好きなんですけど、
Adobe Color とか配色の見本帳 みたいに使いたい色からカラーパレットを作れるのもいいな…

（デフォルトのスキンを適用しているときのみの装飾）

自由装飾codeでコード用の装飾が使える
自由装飾separatorで下線が付与

てがろぐでのワンクッション画像として
●現在ベータ版で実装されているサムネイルは、FTPが必須で「手軽」ではない
●画像1枚目をワンクッション画像にすると、ギャラリーモードでワンクッション画像しか表示されない
という問題があります。

特定の属性（独自タグ、カテゴリやタグでクラスを指定する）を持つとき、CSSでぼかし等フィルターをかける。という方法がありますがスキンをまたがないので
なんかもう一工夫…機能用のCSSを作ってもうひとつ読み込ませるとかが現実的なのかなあと思っています。

次はギャラリー用のスキンを作るのが目標。

#skin-tako-1 のアイコンをGoogleアイコンフォントからFont Awesomeに変更してます。

safariで管理画面・新規投稿のボタン（画面右下にあるボタン）が崩れるのですが原因がわからず
別サイトで持ってるてがろぐで同じスキンを使っても表示が崩れないのでサーバーによる…？そんなことある…？
safari全部で崩れるならわかるけど別サイトでうまくいってるのでますます理由がわからないです

もともとWebクリエイターボックス を困ったときによく見ていたのもあって、
CSSの勉強用に読んでいたのがそこの管理人さんが書いた本（1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 / Amazonにリンクします）なんですが
そこでリセットCSSとして紹介されていたのがressなんですよね
でもressはノーマライズCSS？というやつらしくて
へ～　でもリセットじゃなくて厳密にいうと～～って書いてあったな　わかんないけど…

とほほのリセットCSS入門
デモがみられるんですけどressの見た目が好みだしまあこれでいいかな…と思うのでこのままです

スキン1の表示が崩れてるのと
インデックスページをいい加減手入れします。

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

秋の田のかりほの庵の苫を荒みわがころも手は露に濡れつつ

ダミー文章

木曾路はすべて山の中である。
あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

木曾路はすべて山の中である。
あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

木曾路はすべて山の中である。
あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。東ざかいの桜沢から、西の十曲峠まで、木曾十一宿はこの街道に添うて、二十二里余にわたる長い谿谷の間に散在していた。道路の位置も幾たびか改まったもので、古道はいつのまにか深い山間に埋もれた。名高い桟も、蔦のかずらを頼みにしたような危い場処ではなくなって、徳川時代の末にはすでに渡ることのできる橋であった。新規に新規にとできた道はだんだん谷の下の方の位置へと降って来た。
道の狭いところには、木を伐って並べ、藤づるでからめ、それで街道の狭いのを補った。
長い間にこの木曾路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いところを歩きよくした。

ダミー終
#サンプル

Spotify埋め込みのサンプルです。


#サンプル

などといいつつやはり個人的なオススメは「課金して独自ドメインを取得する」です。
理由はテンションが上がるので。

レンタルサーバとドメイン取得を同時に行うとどちらかの初期費用(または契約中ずっと)が無料になるサービスを行っているところが多くあります。

自分だけのサイトアドレスがあること、広告なしでサイトが運営できることにテンションがあがる方は是非有料サーバー＆ドメイン取得を選択肢のひとつに入れて頂ければ幸いです。
個人サイト楽しいです。

たこつぼくらぶのサーバーはXREA。無料のレンタルサーバです。
たこつぼくらぶはすべて無料のツールで運営しています。
管理人は開発者でもなんでもない素人です。

個人サイト初心者さんの心理的ハードルを下げられたら嬉しいです。

class="[[SITUATION:CLASS]]"を使えば、カテゴリーだけではなくハッシュタグや単独投稿ページなどで特定のCSSを読み込むことができると思います。
というか今回その練習で作りました。さすがにいろいろ荒いので、落ち着いたら手入れするか似たパターンの新規スキンを作成するかもしれません。

また、カテゴリを装飾することができるので、サイトのCMS代わりにできるのではないかと思います。
例えば、カテゴリ「更新履歴」「作品」というカテゴリがあったとして、
作品を置いているカテゴリは閲覧に適した幅広のデザインを、更新履歴は日付と内容のみのすっきりしたデザインを適用できます。
（実際そういう風に使用されているユーザーさんもいらっしゃるみたいです）

てがろぐ自体は１つしか設置していなくても、複数のデザインが適用できれば、もっと自由な使い方ができるのではないかと思います。
てがろぐの楽しい使い方を提案できる場所になれればと思います。
（というか●●の希望があるのでそういうスキンをだれか作ってほしい…という願いを発信できる場所になればいいと思ってます…）

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でページ内リンクをなめらかにスクロールする

ツイート埋め込みのサンプルです。#サンプル

（ツイート埋め込み処理中...）Twitterで見る

たこつぼくらぶのサーバーXREAで取っているのは「無料で始められるてがろぐ」としての見本の意味もあります
個人サイトを既にお持ちの方よりも、個人サイト初心者、CGI初心者の方に「試しに始める」のハードルを下げ、ひとつの目印になれたらと思います

ページ移動をなめらかにする方法
CSSで
html { scroll-behavior: smooth;}
を記述

CSSでページ内リンクをなめらかにスクロールする
https://web.havincoffee.com/design/2020/...
#CSS

#skin-tako-1 について

クイック投稿フォームをすっきりさせる方法
クラス「changelink」「decoBtns」をdisplay: none;にすると、投稿フォームでの「他のIDに切り替える」と各種装飾ボタンが一括で削除できます。
以下旧記載
続きを読む文字数カウンタの設定なんですが、おそらくクラス設定されていない（idが付与されてるんですが、投稿に紐づく乱数の文字列みたいです）ので、CSSの設定ができません。
ただ、文字数カウンタ（他ID切り替えも）CGIの設定で管理できるので、不要な方は削除して使用しているかと思います。

●設定＞＞投稿欄の表示＞＞【投稿コントロール枠内の設定】
　☑入力文字数のカウンタを表示
　☑他のIDに切り替えるリンクを表示

その他、装飾～機能ボタンも設定で管理できます。
が、個人的に「ゆっくり細かい設定もしたいけど、とりあえずメモ…みたいな場面でクイック投稿フォームでは表示したくない」（気が散るので）をやりたかったのでやってみました。
装飾では実装済みですが、そのうちクイックと本投稿フォームで画像～機能ボタンの切り替えとかすっきりできていいなと思います。

畳む

（2022/11/19追記）
上記の方法だと文字数カウンタが消せなかったんですが、下記サイトで紹介されている方法のほうが文字数カウンタまで非表示にできます。
https://10prs.com/tegalog/?postid=25


.line-control input ~ * { display:none; }
この方法のほうが簡単にできそうです。

「input」だけだと投稿ボタンまで非表示になるし、文字数カウンタは非表示にはできないのであきらめてました。兄弟結合子、勉強します！

おくとでの投稿テスト

下げる投稿の画像表示#サンプル #画像

複数画像投稿のサンプル#サンプル #画像

画像投稿の#サンプル #画像

各スキンはカテゴリ「スキン」からご覧ください。
「試しに見てみる」のリンクからサンプルをご覧いただけます。

このてがろぐのデフォルトのスキンは公式配布の標準スキンです。
各スキンでのタイトル、概要文などの表示は公式スキンを参照いただくと便利だと思います。

【「試しに見てみる」について】
パラメーターを使ってリンクしているので、スキンの簡易適用などの機能と違います。
（例・skin-●●を試しに見てみる場合）
http://～～/tegalog.cgi?skin=skin-●●
上記へアクセスするとskin-●●を適用した状態になる

これは公式のカスタマイズ方法で案内されている公式の機能です。


【配布など】
スキンの配布などは行っておりません。今のところ閲覧専用サイトです。

動画埋め込みの #サンプル です。

skin-tako-1
白黒シンプル系 #skin-tako-1

試しに見てみる

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

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

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

●クイック投稿フォームをCSSで加工し、投稿ボタン以外のエリアを非表示にしています。
細かい設定が必要な投稿は新規投稿フォームで、きままな内容はクイック投稿フォームでつぶやくなどの使い分けができます。
┗詳細
　未分類カテゴリを設定しておくと逐一カテゴリ分けしなおさなくて便利です。

●アイコンは「Google Material Icons 」を使用しています。
　→　Font Awesome に変更しました。


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

長文投稿の#サンプル です。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。
この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。

文字装飾関連の #サンプル です。

強調　Bold　斜体　下線　打消し　小さい　極小さい　漢字(ルビ)

これは引用のデモです。

これは隠す機能のデモです。続きを読むこれは隠す機能で実際に隠れている部分です。畳む

リストのデモです。

• リスト1
• リスト2
• リスト3

投稿を見るには鍵を入力：

これはにししファクトリー 様で配布されているCGI「てがろぐ」のスキンを見るデモサイトです。
バージョンはページ内の記載を参照してください。（基本フッターに記載しております）
デフォルトスキンは公式配布のスキンです。

当サイトはXREA（バリュードメインの無料レンタルサーバー）で運営しております。
無料サーバーのため、広告が表示されます。

【動作確認】
ＰＣ：windows11/vivaldi
スマートフォン：iOS/safari