No.31, No.29, No.28, No.27, No.26, No.25, No.24［7件］

Top
Gallery

- Category -

HOME

#カスタマイズ #自由装飾

(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;}

つぶやき 2023.Oct.22(Sun) 17:30

トップページ整理しました　まだできてないスキンのバナー作るのは先走りすぎでは…とは思ったものの先走りました　3つってバランスいいから…

画像をリンクにする方法、単独投稿記事には繋げられないのか？ってやってたんだけど、投稿番号じゃなく任意URLなら普通に貼れたので、バナーからも配布記事に飛べるようにしてあります

つぶやき 2023.Oct.19(Thu) 21:01

更新情報

>>てがろぐ用スキン「kozin」
つぶやき用のシンプルスキン(ギャラリーモード付き)
>>お揃いデザインのhtmlテンプレート配布
>>お揃いデザインの画像一覧モード用スキン配布

>>てがろぐ用スキン「sirason」
つぶやき用のシンプルスキン(ギャラリーモード付き)/メニューバー上部固定

>>てがろぐ用スキン「hokan」
絵や小説のログを整理・保管できるスキン(ちょっとした個人サイトっぽくできる)

>>てがろぐ用スキン「tenran」
絵や小説のログを整理・保管できるスキン(「hokan」の2カラムver.)

>>てがろぐ用スキン「tenran03」
つぶやき(ブログ)用のシンプルスキン(ギャラリーモード付き)/2カラム

>>てがろぐ用スキン「aien」
つぶやき用のシンプルスキン(ギャラリーモード付き)/メニューバー下部固定

>>テンプレート＋スキン「ippen」
個人サイト作成用のHTMLテンプレート＋てがろぐスキン
>>更新履歴埋め込みスキン「kousin02」バラ配布
>>作品展示用スキン「ippen02・03」バラ配布
>>メモスキン「ippen04」バラ配布

>>てがろぐ用スキン「meikan」
キャラクターまとめ用のスキン/2カラム/スマホでドロワーメニュー

　
実験的スキン置き場
※普段よりさらに無保障・無サポートのスキン未満物置き場　使えそうだったらどうぞ

>> 超シンプル画像展示スキン「zikken01」

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

>>画像一覧モード用スキン習作「zikken04」

アバウト 2023.Oct.19(Thu) 19:38

No.27

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

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

つぶやき 2023.Oct.17(Tue) 21:16

#カスタマイズ

(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]] 記法等で表示する」設定のチェックは外しといてください

つぶやき 2023.Oct.14(Sat) 16:44

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

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

つぶやき 2023.Oct.13(Fri) 19:30

スキン「sirason」配布

ダウンロード (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
　
更新履歴
2024/06/22　色々改造してリニューアル
2023/11/04

クレジットというかここの名前とURLをソース内に追加
諸々の隙間の細かい調整
テキストエリアの色とか文字の大きさとか

2023/10/10　配布開始

配布 2023.Oct.10(Tue) 20:57

初期表示に戻る

-Tags-

FREESPACE

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

何らかの配布場