2023年10月 この範囲を時系列順で読む この範囲をファイルに出力する

#カスタマイズ #自由装飾
(2024/05/26追記)
Ver 4.1.1以降、リンクにオプションで任意のクラス名を付与できる記法が実装されたので、配布記事のダウンロードリンクをボタン風に装飾してみました
これ→ボタン
リンクのときこう書く→ [ボタン:CL(lbtn)]任意のURL

/* ボタン(リンク記法) */
a.uc-lbtn {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 0.3rem;
margin: 0.2rem;
padding: 0.3rem 1rem;
background-color: 背景色;
color: 文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px rgb(0 0 0 / 0.2);
}
a.uc-lbtn:hover { background-color: ホバー時の背景色; box-shadow: 0 0;}


→公式ページ:任意のclass名を指定できるオプションをラベルに加えた場合に出力されるHTML

以下は以前の記法(リンクを自由装飾で囲むやつ)
<>
めっちゃ焦った DLリンクをボタンにしようと思って自由装飾で適当にボタン作ったら表示崩れてびっくりした

リンクがボタンの装飾の外側にあると駄目なようです まずテキストリンクを作ってからそれを丸ごとボタンの装飾で包み、deco-〇〇配下のaに対して装飾すればいいっぽい
という感じでスキンのDLリンクをボタンにしてみました ちゃんとできてる?下にcss置いときます

自由装飾「button」
/* ボタン(リンクはボタンの中に貼る) */
.deco-button a {
display: inline-block;
box-sizing: border-box;
min-width: 5rem;
border-radius: 5px;
margin: 3px;
padding: 0.3rem 1rem;
background-color: 好きな背景色;
color: 好きな文字色;
text-decoration: none;
font-weight: bold;
text-align: center;
box-shadow: 2px 2px 2px 好きな影色;
}
.deco-button a:hover { background-color: 好きなホバー色; box-shadow: 0 0;}

つぶやき

トップページ整理しました まだできてないスキンのバナー作るのは先走りすぎでは…とは思ったものの先走りました 3つってバランスいいから…
画像をリンクにする方法、単独投稿記事には繋げられないのか?ってやってたんだけど、投稿番号じゃなく任意URLなら普通に貼れたので、バナーからも配布記事に飛べるようにしてあります

つぶやき

No.27

この間言ってた「絵や小説のログ保管庫的に使えるスキン」#開発 こんな感じです だいたいできてきました
検索で先頭固定記事も出ちゃうけど仕様ということで許してください

正直もうここからデザインとか配色とかなのでデザイナーさんに丸投げしたい

つぶやき

#カスタマイズ

(11/4)実装しました!

#スキンkozinギャラリーモードで鍵投稿部分に代替画像を表示させる
#スキンsirasonギャラリーモードで実装できたのでいずれkozin更新するとき実装するよ!下にcss置いとくので自力でできそうな方は先に実装しといてください
「tegalog-kozin-gallery.css」の末尾とかに付け足せば多分いけるはず

<>
/* 鍵投稿の画像部分の大きさ調整して色付ける */
.logstatus-lock .imagebox {
   width: 100%;
   height: auto;
   aspect-ratio: 1;
   object-fit: cover;
   background-color: var(--usu-mozi-iro);
   position: relative;
  }

 
/* 鍵投稿の画像部分に代替アイコンを入れる */
 .logstatus-lock .imagebox::before{
   content: '\e73c';
   font-family: "Material Icons Round";
   font-size: 60px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
  }


「(鍵付き投稿の)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定のチェックは外しといてください

つぶやき

絵や小説のログ保管庫的に使えるスキンを開発…しようとしてるけどうまいこと表示できるかな… #開発

正直つぶやき用のスキンでも、画像リンクとかカテゴリ先頭固定下げる投稿駆使すればできんこともないけども

つぶやき

スキン「sirason」配布

sirason_r_ss01.pngsirason_r_ss02.pngsirason_r_ss03.pngsirason_r_ss04.png

ダウンロード (24/06/22更新)

→デモ用サンプル記事

→ギャラリーモードデモ
※リンクがほとんど元スキン行きになってるけど本番適用すればちゃんと遷移するはず 多分

説明
  • にししふぁくとりー様で配布されているマイクロブログツール「てがろぐ」用のスキンです(Ver 4.3.0で動作確認)
  • 画像管理もできるひとりごとツールとして使うことを想定しています
  • てがろぐ公式の標準スキンを改造して作っています
  • 配布はゆるゆる適当ですが一応利用規約的なものをさらっと読んでおいてください


↓以下詳細説明
<>
使用フォント
アイコン:Google Material Symbols(Sharp)  
タイトルなどのフォント:Google Fonts さわらびゴシック

できること
  • cssファイルを少し編集するだけで全体の色カスタマイズができます
  • 特定のファイル名画像をアップするだけでヘッダーロゴ画像の差し替えができます
  • メタタグによる簡単な検索避け付
  • デフォルト機能:カテゴリ、ハッシュタグ、全年月リスト、フリースペース等
  • ギャラリーモード、NSFW画像ぼかし機能


使い方
※全体の色カスタマイズ方
「tegalog-sirason.css」「tegalog-sirason-gallery.css」ファイル12行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください

※ヘッダーロゴ画像の差し替え方
管理画面から「tega_headlogo.png」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください
元画像の大きさに関わらず、縦幅40pxくらいで表示されます。あんまり横が長いと画面幅狭いときはみ出るかも

※ユーザーアイコン設定のしかた
管理画面から画像をアップ→「自分のIDを設定」から画像URLを入れる(「images/画像の名前.拡張子」とかでいけます)(四角い画像でも勝手に丸くなります)
アイコンの大きさを変えたい場合は「設定」→「ページの表示」→「ユーザ情報の表示」
四角や角丸にしたい場合はcssの423行目あたりの「border-radius」の値をいじってみてください

※ギャラリーモードの仕様
  • ギャラリーモードでは、カテゴリとタグの後ろの記事数は非表示にしています(全体の記事数が出ちゃうため)
  • てがろぐ標準の画像拡大スクリプトLightboxなら、ギャラリーモード時に記事を飛び越えて全ての画像を拡大閲覧できます。ただしNSFW画像もそのまま閲覧できてしまうため、他のスクリプトを使って記述を工夫したり、カテゴリやタグを使ってなんかうまいことやってください
  • 「(鍵付き投稿の)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定のチェックを外しておくことを推奨します。(Lightboxの移動で全画像見えちゃうため)

>>カスタマイズ:画像1枚目のみ出す(てがろぐ標準スキンの仕様と同じにする)
>>カスタマイズ:画像をクリックで拡大ではなく単独記事に飛ぶようにする

sirason_r_ss05.png
↑日付境界バーの右端にあるアイコンはそれぞれ「この範囲を時系列順で読む」「この範囲をファイルに出力する」リンクです 「設定」→【ページの表示/全体】→「▼日付境界バーの挿入位置」から非表示の設定ができます

#スキンsirason
 
更新履歴
2024/06/22 色々改造してリニューアル
2023/11/04
  • クレジットというかここの名前とURLをソース内に追加
  • 諸々の隙間の細かい調整
  • テキストエリアの色とか文字の大きさとか

2023/10/10 配布開始

配布

(10/10)配布開始したよ! >>24

#開発
ちょっと新スキンの確認用デモ置いとくんで適当につまんでてください

→新スキンデモ

→新スキンギャラリーデモ
※リンクがほとんど元スキン行きになってるけど本番適用すればちゃんと遷移するはず 多分

つぶやき

Googleフォントをcssで@importで読み込むやつ、その前に何かの記述があると駄目らしくって、@charsetのすぐ下とかに書かなきゃいけないって知らなくてついさっき知ったんだよ…
Googleフォントをcssで@importで読み込むやつ、その前に何かの記述があると駄目らしくって、@charsetのすぐ下とかに書かなきゃいけないって知らなくてついさっき知ったんだよ…

つぶやき

2023年9月 この範囲を時系列順で読む この範囲をファイルに出力する

No.21
文字を虹色に光らせたかったので、てがろぐの自由装飾で文字を虹色に光らせるcssを置いておきます #カスタマイズ #自由装飾

参考:
→「CSSで色んなものを虹色に光らせる
→「【html/CSS】虹色の作り方【背景・文字・アニメーション】
<>
●文字を大きくする(「deka」)
.deco-deka { font-size: 1.6rem; font-weight: bold; line-height: 2rem;}

「font-weight: bold;」部分はお好みで


●文字を虹色にする(「nizi」)
   .deco-nizi {
      background: linear-gradient(to bottom, Magenta, yellow, Cyan, Magenta) 0 25% / 100% 70%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
   }



●文字を虹色にアニメーションさせる(「gaming」)
   .deco-gaming {
      background: linear-gradient(to bottom, Magenta, yellow, Cyan, Magenta) 0 / 100% 200%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      animation: deco-gaming 2s linear infinite;
   }

   @keyframes deco-gaming {
      0% { background-position: 0 0;}
      100% { background-position: 0 -200%; }
     }

つぶやき

#カスタマイズ

(10/14)cssで実装したよ! >>26

※ギャラリーモード時鍵付き投稿内画像が表示されないので代替画像を表示させる

「kozin」ギャラリースキン「skin-onelog.html」の[[COMMENT:PICTS]]の下に

<a href="[[PERMAURL:PURE]]"><img class="embeddedimage" src="images/鍵クッション画像名"></a>

と記述してクッション画像をimagesフォルダに入れておくと、ギャラリーモードでクッション画像が表示され、クリックで投稿記事に飛べるようになる…はず…!(ちゃんと検証してないのでなんかバグったらすみません)

つぶやき

FREESPACE
フリースペースエリアです。
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも