No.125
スキン「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」の値を変更してみてください。横長で大きくしたり縦長で小さくしてみたり。ブラウザの横幅を変えたりスマホで見たりしてみて、お好みの大きさと比率を設定してください。
※新着投稿欄のカスタマイズ
「設定」→「ページの表示」→【新着投稿リストの表示】 デモの内容と順序は「DHC」
※自由装飾
hokanやtenranなどに付属している基本的な装飾に加えて、プロフィールリストに使えそうな装飾もついています。詳しくは↓
>>デモ用自由装飾
>>デモ用記事投稿例
※各部アイコンの変更方法
Remix Icon
CDN(アイコンを使うためのリンク)はskin-cover.htmlの<head>で読み込んであります。
メニュー先頭のアイコンや管理画面アイコンなど、htmlファイルで指定されている箇所は、<i class ~ </i>のタグを貼り付けてください。
CSSファイルのcontent:~;で指定されている箇所は~のあとの4桁の英数字をバックスラッシュの後ろに貼り付けてください。
・メニュー部分のカテゴリとタグのアイコン→「skin-cover.html」33・36行目あたり
・カテゴリ名リンクの横につくアイコン→「tegalog-meikan.css」588行目あたり
・各記事見出し横のアイコン→「tegalog-meikan.css」861行目あたり
・記事に画像がないときのサムネのアイコン→「tegalog-meikan.css」798行目あたり
サムネと見出しのアイコンだけ変えれば作品展示スキンとして使えるんじゃないかと思います。
#スキンmeikan
更新履歴
2024/10/24 配布開始
配布物
2024.10.24
No.125
back
この投稿と同じカテゴリに属する投稿:
カテゴリ「配布物」の投稿だけを見る
(※
時系列順で見る
)
この投稿日時に関連する投稿:
2024年10月24日の投稿だけを見る
(※
時系列順で見る
)
2024年10月の投稿だけを見る
(※
時系列順で見る
)
この投稿に隣接する前後3件ずつをまとめて見る
開発
(11)
自由装飾
(5)
スキンyousen
(1)
スキンtenran
(3)
スキンsirason
(3)
スキンmeikan
(1)
スキンkozin
(6)
スキンippen
(9)
スキンhokan
(2)
スキンaien
(1)
カスタマイズ
(11)
お知らせ
(3)
htmlテンプレート
(1)
HOME
ダウンロード
>>デモ用サンプル記事
説明
使用素材等
アイコン:Remix Icon
タイトルなどのフォント:Google Fonts Chivo/BIZ UDPGothic
デモ用画像など:SILHOUETTE DESIGN
特徴
使い方
※全体の色カスタマイズ方法
「tegalog-meikan.css」ファイル12行目くらいからの「カスタム用色変更欄」のカラーコードを書き換えてください。
※メニュー下部のホームアイコンは「設定」→「フリースペース」→「フッタ用フリースペース」の「サイトのHOMEへ戻る」リンクです。
※サムネイル比率の変更の仕方
「tegalog-meikan.css」ファイル26行目くらいからの「--thumb-width」「--thumb-aspect」の値を変更してみてください。横長で大きくしたり縦長で小さくしてみたり。ブラウザの横幅を変えたりスマホで見たりしてみて、お好みの大きさと比率を設定してください。
※新着投稿欄のカスタマイズ
「設定」→「ページの表示」→【新着投稿リストの表示】 デモの内容と順序は「DHC」
※自由装飾
hokanやtenranなどに付属している基本的な装飾に加えて、プロフィールリストに使えそうな装飾もついています。詳しくは↓
>>デモ用自由装飾
>>デモ用記事投稿例
※各部アイコンの変更方法
Remix Icon
CDN(アイコンを使うためのリンク)はskin-cover.htmlの<head>で読み込んであります。
メニュー先頭のアイコンや管理画面アイコンなど、htmlファイルで指定されている箇所は、<i class ~ </i>のタグを貼り付けてください。
CSSファイルのcontent:~;で指定されている箇所は~のあとの4桁の英数字をバックスラッシュの後ろに貼り付けてください。
・メニュー部分のカテゴリとタグのアイコン→「skin-cover.html」33・36行目あたり
・カテゴリ名リンクの横につくアイコン→「tegalog-meikan.css」588行目あたり
・各記事見出し横のアイコン→「tegalog-meikan.css」861行目あたり
・記事に画像がないときのサムネのアイコン→「tegalog-meikan.css」798行目あたり
サムネと見出しのアイコンだけ変えれば作品展示スキンとして使えるんじゃないかと思います。
#スキンmeikan
更新履歴
2024/10/24 配布開始