No.53
スキン「tenran03」配布
↓tenranデザインのつぶやき(ブログ)用タイプ
ダウンロード03
(24/07/25更新)
>>デモ用サンプル記事
>>ギャラリーモードデモ
※リンクがほとんど元スキン行きになってるけど本番適用すればちゃんと遷移するはず 多分
説明
にししふぁくとりー
様で配布されているマイクロブログツール「
てがろぐ
」用のスキンです(Ver 4.4.0で動作確認)
画像管理もできるひとりごと・ブログツールとして使うことを想定しています
てがろぐ公式の標準スキンを改造して作っています
メタタグによる簡単な検索避け付
配布はゆるゆる適当ですが一応
利用規約
的なものをさらっと読んでおいてください
使用素材等
アイコン:
Remix Icon
タイトルなどのフォント:
Google Fonts
Montserrat・Noto Sans Japanese
ヘッダー画像:
矢印デザイン
デモ用画像など:
Unsplash
/
FLAT ICON DESIGN
(※素材等はこのサイトのデモからではなく、元の素材サイト様からDLしてください)
使い方
※一行目がタイトル、二行目以降が本文になります
<>以降を「続きを読む」で隠す記法が使えません(本文をタイトルと2行目以降に分けるとそうなる仕様らしいです) 普通に[H:]では隠せるのでそちらのみ使ってください
※全体の色カスタマイズ方法
「tegalog-tenran03.css」、「tegalog-tenran03-gallery.css」ファイル12行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください
※ヘッダーロゴ画像の差し替え方
管理画面から「
tega_head_t.png
」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください
元画像の大きさに関わらず、横幅150pxで表示されます。設定はcssファイル352行目あたりです
ファイル名や画像の種類を変えたい場合は「skin-cover.html」の33行目あたり
※タイトルや概要文の改行位置を調整したいとき
2カラム時、タイトル部分の幅が狭くて思った通りに改行できないときは、半角スペースやピリオドなどを入れればそこで改行してくれるはずです
「tegalog-tenran03.css」ファイルの360行目~にタイトル部分の設定があるので、フォントサイズを変更したりとかもしてみてください
※メニューをカスタマイズしたいとき
「skin-cover.html」39行目あたりからのリストに
<li>~</li>
で囲まれたリンクを足すと好きなメニューが増やせます。いらない場合は
<ul class="ue_menu">~</ul>
の部分を削除してください
※1記事のタイトルなくして本文だけにしたい場合
「skin-onelog.html」の4行目
<div class="onelogtitle">[[COMMENT:TITLE]]</div>
<!-- タイトル -->
を消して、5行目
[[COMMENT:BODY]]
を
[[COMMENT]]
に書き換えてください
↑日付境界バーにあるアイコンはそれぞれ「この範囲を時系列順で読む」「この範囲をファイルに出力する」リンクです 「設定」→【ページの表示/全体】→「▼日付境界バーの挿入位置」から非表示の設定ができます
※ギャラリーモードスキンの使い方
「skin-tenran03-gallery」フォルダをtegalog.cgiと同じディレクトリに置いて、「設定」→「補助出力」→【ギャラリーモードの出力】→スキン格納ディレクトリ名 を「skin-tenran03-gallery」に変える。
もしくは
「skin-tenran03-gallery」フォルダを「skin-gallery」という名前に変更してtegalog.cgiと同じディレクトリに置く。
公式ページ「ギャラリーモード」
公式ページ「ギャラリー用スキンの作り方・使い方」
つぶやき用スキンとギャラリーモードスキンはそれぞれ独立した作りのため、つぶやき用スキンを改造した場合はギャラリーモードスキンの方も同じく編集してください。
※ギャラリーモードの仕様
ギャラリーモードでは、カテゴリとタグの後ろの記事数は非表示にしています(全体の記事数が出ちゃうため)
てがろぐ標準の画像拡大スクリプトLightboxなら、ギャラリーモード時に記事を飛び越えて全ての画像を拡大閲覧できます。ただしNSFW画像もそのまま閲覧できてしまうため、他のスクリプトを使って記述を工夫したり、カテゴリやタグを使ってなんかうまいことやってください
「(鍵付き投稿の)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定のチェックを外しておくことを推奨します。
(Lightboxの移動で全画像見えちゃうため)
※ギャラリーモードで画像1枚目のみ見られるようにする(てがろぐ標準スキンの仕様と同じにする)
①ギャラリースキンの「skin-onelog.html」7行目あたり
[[COMMENT:PICTS]]
を
[[ONEPICT:1]]
に書き換える
②「tegalog-tenran03-gallery.css」の765行目あたり
.imagebox :nth-child(n+2) { display: none;}
の部分を消す
この標準仕様なら、「(鍵投稿でも)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定で1枚目の画像がワンクッションになるはずです。
※ギャラリーモードで画像をクリックで拡大ではなく単独記事に飛ぶようにする
①ギャラリースキンの「skin-onelog.html」7行目あたり
[[COMMENT:PICTS]]
を
[[ONEPICT:1]]
に書き換える
②「tegalog-tenran03-gallery.css」818行目あたりの
.gallogbox:not(.logstatus-lock) .imgpermalink { display: none;}
を消す
おまけの自由装飾は今回ついてません 使いたい方は
tenran01、02
からお好きなのをコピペしてきてください
#スキンtenran
更新履歴
2024/07/25 色々書き直して更新
2023/11/24 配布開始
配布物
2023.11.24
No.53
back
この投稿と同じカテゴリに属する投稿:
カテゴリ「配布物」の投稿だけを見る
(※
時系列順で見る
)
この投稿日時に関連する投稿:
2023年11月24日の投稿だけを見る
(※
時系列順で見る
)
2023年11月の投稿だけを見る
(※
時系列順で見る
)
この投稿に隣接する前後3件ずつをまとめて見る
開発
(11)
自由装飾
(5)
スキンyousen
(1)
スキンtenran
(3)
スキンsirason
(3)
スキンmeikan
(1)
スキンkozin
(6)
スキンippen
(9)
スキンhokan
(2)
スキンaien
(1)
カスタマイズ
(11)
お知らせ
(3)
htmlテンプレート
(1)
HOME
↓tenranデザインのつぶやき(ブログ)用タイプ
ダウンロード03 (24/07/25更新)
>>デモ用サンプル記事
>>ギャラリーモードデモ
※リンクがほとんど元スキン行きになってるけど本番適用すればちゃんと遷移するはず 多分
説明
使用素材等
アイコン:Remix Icon
タイトルなどのフォント:Google Fonts Montserrat・Noto Sans Japanese
ヘッダー画像:矢印デザイン
デモ用画像など:Unsplash / FLAT ICON DESIGN
(※素材等はこのサイトのデモからではなく、元の素材サイト様からDLしてください)
使い方
※一行目がタイトル、二行目以降が本文になります
<>以降を「続きを読む」で隠す記法が使えません(本文をタイトルと2行目以降に分けるとそうなる仕様らしいです) 普通に[H:]では隠せるのでそちらのみ使ってください
※全体の色カスタマイズ方法
「tegalog-tenran03.css」、「tegalog-tenran03-gallery.css」ファイル12行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください
※ヘッダーロゴ画像の差し替え方
管理画面から「tega_head_t.png」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください
元画像の大きさに関わらず、横幅150pxで表示されます。設定はcssファイル352行目あたりです
ファイル名や画像の種類を変えたい場合は「skin-cover.html」の33行目あたり
※タイトルや概要文の改行位置を調整したいとき
2カラム時、タイトル部分の幅が狭くて思った通りに改行できないときは、半角スペースやピリオドなどを入れればそこで改行してくれるはずです
「tegalog-tenran03.css」ファイルの360行目~にタイトル部分の設定があるので、フォントサイズを変更したりとかもしてみてください
※メニューをカスタマイズしたいとき
「skin-cover.html」39行目あたりからのリストに<li>~</li>で囲まれたリンクを足すと好きなメニューが増やせます。いらない場合は<ul class="ue_menu">~</ul>の部分を削除してください
※1記事のタイトルなくして本文だけにしたい場合
「skin-onelog.html」の4行目
<div class="onelogtitle">[[COMMENT:TITLE]]</div><!-- タイトル -->
を消して、5行目
[[COMMENT:BODY]] を [[COMMENT]] に書き換えてください
↑日付境界バーにあるアイコンはそれぞれ「この範囲を時系列順で読む」「この範囲をファイルに出力する」リンクです 「設定」→【ページの表示/全体】→「▼日付境界バーの挿入位置」から非表示の設定ができます
※ギャラリーモードスキンの使い方
「skin-tenran03-gallery」フォルダをtegalog.cgiと同じディレクトリに置いて、「設定」→「補助出力」→【ギャラリーモードの出力】→スキン格納ディレクトリ名 を「skin-tenran03-gallery」に変える。
もしくは
「skin-tenran03-gallery」フォルダを「skin-gallery」という名前に変更してtegalog.cgiと同じディレクトリに置く。
公式ページ「ギャラリーモード」
公式ページ「ギャラリー用スキンの作り方・使い方」
つぶやき用スキンとギャラリーモードスキンはそれぞれ独立した作りのため、つぶやき用スキンを改造した場合はギャラリーモードスキンの方も同じく編集してください。
※ギャラリーモードの仕様
※ギャラリーモードで画像1枚目のみ見られるようにする(てがろぐ標準スキンの仕様と同じにする)
①ギャラリースキンの「skin-onelog.html」7行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換える
②「tegalog-tenran03-gallery.css」の765行目あたり.imagebox :nth-child(n+2) { display: none;}の部分を消す
この標準仕様なら、「(鍵投稿でも)n枚目の画像を [[ONEPICT:n]] 記法等で表示する」設定で1枚目の画像がワンクッションになるはずです。
※ギャラリーモードで画像をクリックで拡大ではなく単独記事に飛ぶようにする
①ギャラリースキンの「skin-onelog.html」7行目あたり[[COMMENT:PICTS]]を[[ONEPICT:1]]に書き換える
②「tegalog-tenran03-gallery.css」818行目あたりの.gallogbox:not(.logstatus-lock) .imgpermalink { display: none;}を消す
おまけの自由装飾は今回ついてません 使いたい方はtenran01、02からお好きなのをコピペしてきてください
#スキンtenran
更新履歴
2024/07/25 色々書き直して更新
2023/11/24 配布開始