2022年11月13日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/13/(Sun) 21:17:18
これはにししファクトリー 様で配布されているCGI「てがろぐ」のスキンを見るデモサイトです。
バージョンはページ内の記載を参照してください。（基本フッターに記載しております）
デフォルトスキンは公式配布のスキンです。

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

【動作確認】
ＰＣ：windows11/vivaldi
スマートフォン：iOS/safari
共通内容
Icon of admin
かんりにん @admin
2022/11/13/(Sun) 21:20:52
投稿を見るには鍵を入力：
表示サンプル
Icon of admin
かんりにん @admin
2022/11/13/(Sun) 21:21:27
文字装飾関連の #サンプル です。

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

これは引用のデモです。

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

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

試しに見てみる

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

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

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

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

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


＜参考にしたサイト＞
簡単なタブ切り替え機能の実装
スキン
Icon of admin
かんりにん @admin
2022/11/13/(Sun) 22:32:45
動画埋め込みの #サンプル です。
表示サンプル

2022年11月14日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/14/(Mon) 00:03:52
各スキンはカテゴリ「スキン」からご覧ください。
「試しに見てみる」のリンクからサンプルをご覧いただけます。

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

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

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


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

2022年11月15日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/15/(Tue) 00:03:18
画像投稿の#サンプル #画像
202211142253084-admin.png
表示サンプル
Icon of admin
かんりにん @admin
2022/11/15/(Tue) 00:58:56
複数画像投稿のサンプル#サンプル #画像
202211142253083-admin.png202211142253084-admin.png202211142253082-admin.png
表示サンプル
Icon of admin
かんりにん @admin
2022/11/15/(Tue) 01:02:31
下げる投稿の画像表示#サンプル #画像
202211142253082-admin.png202211142253081-admin.png
表示サンプル
Icon of admin
かんりにん @admin
2022/11/15/(Tue) 01:08:58
おくとでの投稿テスト
Icon of admin
かんりにん @admin
2022/11/15/(Tue) 19:05:44
#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」だけだと投稿ボタンまで非表示になるし、文字数カウンタは非表示にはできないのであきらめてました。兄弟結合子、勉強します！
メモ

2022年11月16日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/16/(Wed) 08:22:33
ページ移動をなめらかにする方法
CSSで
html { scroll-behavior: smooth;}
を記述

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

2022年11月17日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/17/(Thu) 12:39:55
ツイート埋め込みのサンプルです。#サンプル
表示サンプル

2022年11月18日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/18/(Fri) 19:53:49
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でページ内リンクをなめらかにスクロールする
スキン
Icon of admin
かんりにん @admin
2022/11/18/(Fri) 20:49:14
class="[[SITUATION:CLASS]]"を使えば、カテゴリーだけではなくハッシュタグや単独投稿ページなどで特定のCSSを読み込むことができると思います。
というか今回その練習で作りました。さすがにいろいろ荒いので、落ち着いたら手入れするか似たパターンの新規スキンを作成するかもしれません。

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

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

2022年11月22日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/22/(Tue) 08:31:26
Spotify埋め込みのサンプルです。


#サンプル
表示サンプル
Icon of admin
かんりにん @admin
2022/11/22/(Tue) 22:30:40
ダミー文章

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

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

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

ダミー終
#サンプル
表示サンプル
Icon of admin
かんりにん @admin
2022/11/22/(Tue) 22:46:41
秋の田のかりほの庵の苫を荒みわがころも手は露に濡れつつ
表示サンプル
Icon of admin
かんりにん @admin
2022/11/22/(Tue) 23:10:31
skin-tako-3
縦書き / 作品展示向け #skin-tako-3

試しに見てみる
一覧表示
記事（長文） サンプル画像
ＰＣ表示
202211230030571-admin.png
モバイル表示
20221123003057-admin.png

畳む
記事（短文） サンプル画像
ＰＣ表示
202211230030572-admin.png
モバイル表示
202211230030573-admin.png

畳む

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

2022年11月24日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/24/(Thu) 18:13:26
#skin-tako-1 のアイコンをGoogleアイコンフォントからFont Awesomeに変更してます。

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

2022年11月29日 この範囲を新しい順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する

Icon of admin
かんりにん @admin
2022/11/29/(Tue) 22:22:59
てがろぐは新規投稿・編集画面もカスタマイズできるということで、やってみました。


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

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

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