No.66, No.65, No.64, No.63, No.62, No.61, No.60［7件］

02のいきなり一覧版zikken03追加してきました　そんなに変わんないけど、お手持ちのサイトに組み込む用にはいいかも
zikken01、02もちょっとだけ更新しました　右上固定ボタンにz-indexを指定し忘れてたとかいう

つぶやき 2023.12.19 No.66

zikken03として最初から一覧表示になるやつも作ろうかな　サイトに作品ページとして組み込む用に　02のIF文ちょっと消すだけでいけそうだし…

つぶやき 2023.12.17 No.65

zikken02放流しました

クイックポスト欄をトップ以外で非表示にするの最初はIF文でやってたんだけど、"Login-Required"クラスでログイン時のみ表示機能を使っている場合、ログイン判定はクイックポストがあるかどうかでやってるらしいので、クイックポストが出力自体されないページでは管理ボタンとか編集ボタンが見えちゃうんですね

ということをアップした直後に気付いて慌ててCSSで非表示に直しました

つぶやき 2023.12.17 No.64

back

IF文使用hokanシンプルバージョン「zikken02」「zikken03」配布

IF文使用hokanシンプルバージョン
ダウンロード02

↓トップがいきなり一覧版
ダウンロード03

説明

にししふぁくとりー様で配布されているマイクロブログツール「てがろぐ」用のスキンです(Ver 4.2.0で動作確認)
Ver 4.2.0で実装されたIF文を使用し、hokanスキンと同じ表示方法にしてみたやつです
hokanと同じく絵や小説のログ保管場として使用することを想定しています　装飾はほぼしてないので外観カスタマイズはしやすいかも
03のいきなり一覧版では新着投稿欄やフリースペースがなく、トップが全記事一覧になります
てがろぐ公式の標準スキンを改造して作っています
メタタグによる簡単な検索避け付
一応利用規約

使用フォント
アイコン：Google Fonts Icons (Material Icons Rounded)

使い方
記事を先頭固定でトップに、カテゴリ付けて投稿でメニューからの一覧に出ます　hokanとだいたい同じです(簡単だけど自由装飾も付いてる)
>>hokan使い方(デモサイト)
omakeフォルダに文字用一覧別デザインCSSもあります
↓文字一覧はこういうデザイン

スキンのファイルは「skin-cover.html」「skin-onelog.html」「tegalog-zikken02(03).css」「ichiran.css」の4つで1セットです　一覧を文字メインのデザインにしたい場合は、「ichiran.css」を「ichiran-mozi.css」と入れ替え、skin-cover.html 13行目あたりの

<link type="text/css" rel="stylesheet" href="ichiran.css?ver=1.0.0">
の ichiran.css の部分を ichiran-mozi.css に書き換えてください

※難点
IF文初めて使ったのでバグあるかも(気付いたら直します)

2023/12/19　いきなり一覧版03追加
2023/12/17　配布開始

配布物実験 2023.12.17 No.63

back

こことhokanのデモサイトのてがろぐ本体をVer 4.2.0にアプデしました　スキンの表示がおかしいとかなんかあったらお知らせください

つぶやき 2023.12.14 No.62

back

hokan、サムネと一覧の並び方の挙動をちょっと変更　一つの項目が決められた幅以下になると折返し、均等幅もいい感じに調整してくれるようになりました　これでコンテンツ幅をいじっても対応できるようになったはず

つぶやき 2023.12.2 No.61

back

複数画像をサムネイルにする自由装飾

「幅いっぱいに並べられるだけ並べて画像横幅100px以下になると折り返す」という挙動にしています。
・投稿時の改行を無視
・キャプション量に差があっても上側に揃える
という改良も加えました。

/* 画像サムネイル(thumb)*/
.deco-thumb {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); /* 横幅100px以下で折り返す */
gap: 0.5rem;
align-items: start;
}
.deco-thumb {/* 画像リンクの大きさを合わせる */
.embeddedimage,.imagelink {
aspect-ratio: 1;
object-fit: cover;
width: 100%;
}}
.deco-thumb br { display: none;} /* 記事投稿時の改行を非表示 */

※画面幅いじってみると挙動がわかりやすいです

#自由装飾

役に立つかも情報 2023.12.1 No.60

back

HOME