2024年11月 この範囲を時系列順で読む この範囲をファイルに出力する
「kozin」とお揃いテンプレート配布
#カスタマイズ
tenranとかaienの主タイトル部分の幅が狭いから改行位置に苦労してたけど、
「skin-cover.html」の
<h1 class="maintitle"><a href="[[HOME:URL]]" class="maintitlelink">[[FREE:TITLE:MAIN]]</a></h1><!-- メインタイトル -->
部分の[[FREE:TITLE:MAIN]]を消して、<br>や<wbr>を使って直接書き込む手段もあるな…
「skin-cover.html」の
<h1 class="maintitle"><a href="[[HOME:URL]]" class="maintitlelink">[[FREE:TITLE:MAIN]]</a></h1><!-- メインタイトル -->
部分の[[FREE:TITLE:MAIN]]を消して、<br>や<wbr>を使って直接書き込む手段もあるな…
2024年10月 この範囲を時系列順で読む この範囲をファイルに出力する
スキン「meikan」配布
ダウンロード
→デモ用サンプル記事
説明
- にししふぁくとりー様で配布されているマイクロブログツール「てがろぐ」用のスキンです(Ver 4.4.0で動作確認)。
- 創作やTRPGなどのキャラクターまとめとして使うことを想定しています(ちょっと改造すれば汎用作品展示スキンとしても使えます)。
- てがろぐ公式の標準スキンを改造して作っています。
- メタタグによる簡単な検索避け付。
- 配布はゆるゆる適当ですが一応利用規約的なものをさらっと読んでおいてください。
↓以下詳細説明
<>
使用素材等
アイコン：Remix Icon
タイトルなどのフォント：Google Fonts Chivo/BIZ UDPGothic
デモ用画像など：SILHOUETTE DESIGN
特徴
- サムネイルの大きさと比率が変更できます。
- サムネイルの切り取り部分がイラスト中央上部に設定されています。縦長が多いキャラクター立ち絵でも顔の部分がサムネに収まります。
- プロフィール項目リストに使えそうな自由装飾がついています。
- カテゴリ表示はニ階層目まで対応しています。
使い方
※全体の色カスタマイズ方法
「tegalog-meikan.css」ファイル12行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください。
※メニュー下部のホームアイコンは「設定」→「フリースペース」→「フッタ用フリースペース」の「サイトのHOMEへ戻る」リンクです。
※サムネイル比率の変更の仕方
「tegalog-meikan.css」ファイル26行目くらいからの「--thumb-width」「--thumb-aspect」の値を変更してみてください。横長で大きくしたり縦長で小さくしてみたり。ブラウザの横幅を変えたりスマホで見たりしてみて、お好みの大きさと比率を設定してください。
※自由装飾
hokanやtenranなどに付属している基本的な装飾に加えて、プロフィールリストに使えそうな装飾もついています。詳しくは↓
>>デモ用自由装飾
※各部アイコンの変更方法
→Remix Icon
CDN(アイコンを使うためのリンク)はskin-cover.htmlの<head>で読み込んであります。
メニュー先頭のアイコンや管理画面アイコンなど、htmlファイルで指定されている箇所は、<i class ～ </i>のタグを貼り付けてください。
CSSファイルのcontent:～;で指定されている箇所は&#x～のあとの4桁の英数字をバックスラッシュの後ろに貼り付けてください。
・メニュー部分のカテゴリとタグのアイコン→「skin-cover.html」33・36行目あたり
・カテゴリ名リンクの横につくアイコン→「tegalog-meikan.css」588行目あたり
・各記事見出し横のアイコン→「tegalog-meikan.css」861行目あたり
・記事に画像がないときのサムネのアイコン→「tegalog-meikan.css」798行目あたり
サムネと見出しのアイコンだけ変えれば作品展示スキンとして使えるんじゃないかと思います。
#スキンmeikan
更新履歴
2024/10/24 配布開始
#自由装飾
説明リストを利用してプロフィール項目に使えそうな自由装飾作った
PCは横並び、スマホからだと縦並びになります。
てがろぐ上での記述は以下のようになります(てがろぐのリスト記法に「DL」と「proflist」というオプションをつけ、項目と説明を改行して交互に書く)。
[L:DL:proflist:
名前
ナンラカノ・ハイフバ
性別
不明
職業
てがろぐスキン配布
経歴と生い立ち
2023年9月22日、勢いでてがろぐスキン配布開始。
]
→リストの記述方法(公式ページ)
(10/24追記)
今気付いたけど中の説明欄にリンク貼ったりするとブロックごと横並びになっちゃいますね…応急手当ですが、説明全体を適当な名称の自由装飾で囲んでおくと表示崩れをごまかせます。
↓こんな感じ
[F:a:2023年9月22日、勢いで[てがろぐ](https://～)スキン配布開始。]
↓以下CSS(スキンのCSSファイルか、設定→フリースペース→【上書きスタイルシート】に書き足すといいと思います)
<>
/* 項目列挙用説明リスト */
dl.listdeco-proflist {
width: 100%;
margin: 1rem auto;
display: grid;
grid-template-columns: 150px 1fr;/* 項目タイトル150px、説明幅いっぱいの繰り返し */
gap: 0.5rem;
}
.listdeco-proflist dt {/* 項目タイトル */
margin: 0;
padding: 0.3rem 0.8rem;
color : white;/* 項目タイトルの文字色 */
background-color: silver;/* 項目タイトルの背景色 */
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.listdeco-proflist dd {/* 項目説明 */
margin: 0;
display: flex;
align-items: center;
}
@media only screen and (max-width: 499px) {/* 画面幅499px以下のとき横並びを解除 */
dl.listdeco-proflist { display: block;}
.listdeco-proflist dt { margin-bottom: 0.5rem;}
.listdeco-proflist dd { margin-bottom: 1rem; justify-content: center;}}
.listdeco-proflist + br { display: none;} /* 直後の改行を非表示 */
- 名前
- ナンラカノ・ハイフバ
- 性別
- 不明
- 職業
- てがろぐスキン配布
- 経歴と生い立ち
- 2023年9月22日、勢いでてがろぐスキン配布開始。
PCは横並び、スマホからだと縦並びになります。
てがろぐ上での記述は以下のようになります(てがろぐのリスト記法に「DL」と「proflist」というオプションをつけ、項目と説明を改行して交互に書く)。
[L:DL:proflist:
名前
ナンラカノ・ハイフバ
性別
不明
職業
てがろぐスキン配布
経歴と生い立ち
2023年9月22日、勢いでてがろぐスキン配布開始。
]
→リストの記述方法(公式ページ)
(10/24追記)
今気付いたけど中の説明欄にリンク貼ったりするとブロックごと横並びになっちゃいますね…応急手当ですが、説明全体を適当な名称の自由装飾で囲んでおくと表示崩れをごまかせます。
↓こんな感じ
[F:a:2023年9月22日、勢いで[てがろぐ](https://～)スキン配布開始。]
↓以下CSS(スキンのCSSファイルか、設定→フリースペース→【上書きスタイルシート】に書き足すといいと思います)
<>
/* 項目列挙用説明リスト */
dl.listdeco-proflist {
width: 100%;
margin: 1rem auto;
display: grid;
grid-template-columns: 150px 1fr;/* 項目タイトル150px、説明幅いっぱいの繰り返し */
gap: 0.5rem;
}
.listdeco-proflist dt {/* 項目タイトル */
margin: 0;
padding: 0.3rem 0.8rem;
color : white;/* 項目タイトルの文字色 */
background-color: silver;/* 項目タイトルの背景色 */
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.listdeco-proflist dd {/* 項目説明 */
margin: 0;
display: flex;
align-items: center;
}
@media only screen and (max-width: 499px) {/* 画面幅499px以下のとき横並びを解除 */
dl.listdeco-proflist { display: block;}
.listdeco-proflist dt { margin-bottom: 0.5rem;}
.listdeco-proflist dd { margin-bottom: 1rem; justify-content: center;}}
.listdeco-proflist + br { display: none;} /* 直後の改行を非表示 */
2024年9月 この範囲を時系列順で読む この範囲をファイルに出力する
aien更新しました。kozin・sirasonと色の変数名を揃え、各所の配色を若干変更、ギャラリーモードは単独記事へのリンクをサムネから分離し、サムネクリックの挙動をカスタマイズできるようにしました。何か不具合等ありましたらお気軽にご連絡ください。
aien更新しました。kozin・sirasonと色の変数名を揃え、各所の配色を若干変更、ギャラリーモードは単独記事へのリンクをサムネから分離し、サムネクリックの挙動をカスタマイズできるようにしました。何か不具合等ありましたらお気軽にご連絡ください。
#カスタマイズ #スキンaien
ギャラリーモードで、画像をクリックで拡大ではなく単独記事に飛ぶようにする
2024/09/30以降リニューアルしたaienでは、ギャラリーモードで通常投稿のサムネをクリックすると画像が拡大表示され、鍵投稿のサムネをクリックすると単独記事に飛ぶ仕様になっています。これを、全てのサムネをクリックで単独記事に飛ぶようにする方法です
①「tegalog-aien-gallery.css」793行目あたりの
.gallogbox:not(.logstatus-lock) .imgpermalink { display: none;}
を消す
②ギャラリースキンの「skin-onelog.html」5行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換える
2024/09/30以降リニューアルしたaienでは、ギャラリーモードで通常投稿のサムネをクリックすると画像が拡大表示され、鍵投稿のサムネをクリックすると単独記事に飛ぶ仕様になっています。これを、全てのサムネをクリックで単独記事に飛ぶようにする方法です
①「tegalog-aien-gallery.css」793行目あたりの
.gallogbox:not(.logstatus-lock) .imgpermalink { display: none;}
を消す
②ギャラリースキンの「skin-onelog.html」5行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換える
#カスタマイズ
#スキンaienのギャラリーモードは、標準スキンの
「skin-onelog.html」内[[ONEPICT:1]](1投稿1枚目の画像を読み込む)の部分を
[[COMMENT:PICTS]](1投稿全ての画像を読み込む)にして
cssの.imagebox :nth-child(n+2) { display: none;}の部分で2枚目以降を非表示にしています。
これはギャラリーモードだけで全ての画像を見られるようにするためですが、標準の仕様と同じにしたい方は、
ギャラリーモード用スキンの「skin-onelog.html」5行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換え、
「tegalog-aien-gallery.css」の740行目あたり.imagebox :nth-child(n+2) { display: none;}の部分を消しておいてください。
この標準仕様なら、「(鍵投稿でも)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定で1枚目の画像がワンクッションになるはずです
「(鍵投稿でも)本文の1行目だけは常に見せる」設定だと、1行目に書いたハッシュタグがギャラリーモードでも表示されます ご都合のいい方で使い分けてください
「skin-onelog.html」内[[ONEPICT:1]](1投稿1枚目の画像を読み込む)の部分を
[[COMMENT:PICTS]](1投稿全ての画像を読み込む)にして
cssの.imagebox :nth-child(n+2) { display: none;}の部分で2枚目以降を非表示にしています。
これはギャラリーモードだけで全ての画像を見られるようにするためですが、標準の仕様と同じにしたい方は、
ギャラリーモード用スキンの「skin-onelog.html」5行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換え、
「tegalog-aien-gallery.css」の740行目あたり.imagebox :nth-child(n+2) { display: none;}の部分を消しておいてください。
この標準仕様なら、「(鍵投稿でも)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定で1枚目の画像がワンクッションになるはずです
「(鍵投稿でも)本文の1行目だけは常に見せる」設定だと、1行目に書いたハッシュタグがギャラリーモードでも表示されます ご都合のいい方で使い分けてください
＞09/29 13:28の方へ
<>
メッセージありがとうございます。
そもそも「畳む」を押したときページ位置が戻らないのはてがろぐの仕様のようです。このサイトの一部の記事で押す前の位置に戻っているように見えるのは、多分記事の隠してある部分と開いた画面の高さがちょうど同じくらいだからかな？と思います。過去にも要望が出ているようなので、てがろぐ側でアプデが来るのを祈っていただければ…と思います。
メッセージありがとうございます。
そもそも「畳む」を押したときページ位置が戻らないのはてがろぐの仕様のようです。このサイトの一部の記事で押す前の位置に戻っているように見えるのは、多分記事の隠してある部分と開いた画面の高さがちょうど同じくらいだからかな？と思います。過去にも要望が出ているようなので、てがろぐ側でアプデが来るのを祈っていただければ…と思います。
＞09/26 17:34の方へ
<>
メッセージありがとうございます。
ギャラリーモードスキンは、デフォルトでは「skin-gallery」という名前のフォルダの中に入っているものが適用されます。これは「設定」→「補助出力」→【ギャラリーモードの出力】から変えられるので、「skin-sirason-gallery」をフォルダごとアップロードし、ここの設定名称を「skin-sirason-gallery」にしてみてください。これで適応できるはずです。
※もしくは、設定を変えずに「skin-gallery」の中身(多分デフォルトのギャラリースキンが入っていると思います)と「skin-sirason-gallery」の中身を入れ替える方法もあります。お好きな方で適用してみてください。
公式の説明ページはこちらです
→ギャラリー用スキンの作り方・使い方
「skin-sirason」の適用方法は、「フォルダごとアップする→スキン切替の設定で適用する」でOKです。表示がおかしくなったり重かったりしたら、フォルダから3つのファイルを出してcgiと同じ場所に置く方法も試してみてください。
→スキンの置き方
うまくいかなかったとかもっとこうしたい等、また何かありましたらご連絡ください～
メッセージありがとうございます。
ギャラリーモードスキンは、デフォルトでは「skin-gallery」という名前のフォルダの中に入っているものが適用されます。これは「設定」→「補助出力」→【ギャラリーモードの出力】から変えられるので、「skin-sirason-gallery」をフォルダごとアップロードし、ここの設定名称を「skin-sirason-gallery」にしてみてください。これで適応できるはずです。
※もしくは、設定を変えずに「skin-gallery」の中身(多分デフォルトのギャラリースキンが入っていると思います)と「skin-sirason-gallery」の中身を入れ替える方法もあります。お好きな方で適用してみてください。
公式の説明ページはこちらです
→ギャラリー用スキンの作り方・使い方
「skin-sirason」の適用方法は、「フォルダごとアップする→スキン切替の設定で適用する」でOKです。表示がおかしくなったり重かったりしたら、フォルダから3つのファイルを出してcgiと同じ場所に置く方法も試してみてください。
→スキンの置き方
うまくいかなかったとかもっとこうしたい等、また何かありましたらご連絡ください～
2024年8月 この範囲を時系列順で読む この範囲をファイルに出力する
-Tags-
ダウンロード (2024/11/23更新)
→デモ用サンプルページ
説明
↓以下詳細説明
<>
使用フォント
アイコン：Google Fonts Icons (Material Icons Rounded)
使い方
※全体の色カスタマイズ方法
「style.css」ファイル11行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください。スキンkozinと色の変数名を揃えているので、コピペで同じ配色になると思います。
※ヘッダー画像について
元画像の大きさに関わらず、PCで150px四方、スマホで100px四方の円型になります。調整したい場合は「style.css」59行目より。
透過ロゴ画像やバナー等、丸くない画像を表示したい場合は「index.html」22行目あたり<img src="img/demohead.png" class="headimg maru">のclass="headimg maru"の「 maru」を消してclass="headimg"にしてください。
簡単な個人サイトっぽいトップページや、入口リンクだけ置いたワンクッション用ページ、1枚プロフページ等、お好きなように改造してご使用ください。
#htmlテンプレート
更新履歴
2024/11/23 スキンに合わせてサブタイトルを追加
2024/11/04 配布開始