2022年11月 この範囲を時系列順で読む この範囲をファイルに出力する
てがろぐでのワンクッション画像として
●現在ベータ版で実装されているサムネイルは、FTPが必須で「手軽」ではない
●画像1枚目をワンクッション画像にすると、ギャラリーモードでワンクッション画像しか表示されない
という問題があります。
特定の属性（独自タグ、カテゴリやタグでクラスを指定する）を持つとき、CSSでぼかし等フィルターをかける。という方法がありますがスキンをまたがないので
なんかもう一工夫…機能用のCSSを作ってもうひとつ読み込ませるとかが現実的なのかなあと思っています。
次はギャラリー用のスキンを作るのが目標。
●現在ベータ版で実装されているサムネイルは、FTPが必須で「手軽」ではない
●画像1枚目をワンクッション画像にすると、ギャラリーモードでワンクッション画像しか表示されない
という問題があります。
特定の属性（独自タグ、カテゴリやタグでクラスを指定する）を持つとき、CSSでぼかし等フィルターをかける。という方法がありますがスキンをまたがないので
なんかもう一工夫…機能用のCSSを作ってもうひとつ読み込ませるとかが現実的なのかなあと思っています。
次はギャラリー用のスキンを作るのが目標。
by oct. ⌚2022年11月24日(木) 18:34:31〔1年以上前〕 ＜266文字＞ 編集
#skin-tako-1 のアイコンをGoogleアイコンフォントからFont Awesomeに変更してます。
safariで管理画面・新規投稿のボタン（画面右下にあるボタン）が崩れるのですが原因がわからず
別サイトで持ってるてがろぐで同じスキンを使っても表示が崩れないのでサーバーによる…？そんなことある…？
safari全部で崩れるならわかるけど別サイトでうまくいってるのでますます理由がわからないです
safariで管理画面・新規投稿のボタン（画面右下にあるボタン）が崩れるのですが原因がわからず
別サイトで持ってるてがろぐで同じスキンを使っても表示が崩れないのでサーバーによる…？そんなことある…？
safari全部で崩れるならわかるけど別サイトでうまくいってるのでますます理由がわからないです
by admin. ⌚2022年11月24日(木) 18:13:26〔1年以上前〕 ＜207文字＞ 編集
もともとWebクリエイターボックス を困ったときによく見ていたのもあって、
CSSの勉強用に読んでいたのがそこの管理人さんが書いた本（1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 / Amazonにリンクします）なんですが
そこでリセットCSSとして紹介されていたのがressなんですよね
でもressはノーマライズCSS？というやつらしくて
へ～ でもリセットじゃなくて厳密にいうと～～って書いてあったな わかんないけど…
とほほのリセットCSS入門
デモがみられるんですけどressの見た目が好みだしまあこれでいいかな…と思うのでこのままです
CSSの勉強用に読んでいたのがそこの管理人さんが書いた本（1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 / Amazonにリンクします）なんですが
そこでリセットCSSとして紹介されていたのがressなんですよね
でもressはノーマライズCSS？というやつらしくて
へ～ でもリセットじゃなくて厳密にいうと～～って書いてあったな わかんないけど…
とほほのリセットCSS入門
デモがみられるんですけどressの見た目が好みだしまあこれでいいかな…と思うのでこのままです
by oct. ⌚2022年11月23日(水) 15:08:31〔1年以上前〕 メモ ＜285文字＞ 編集
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
by admin. ⌚2022年11月22日(火) 23:10:31〔1年以上前〕 スキン ＜1645文字＞ 編集
Adobe Color とか配色の見本帳 みたいに使いたい色からカラーパレットを作れるのもいいな…