【展示】skin-tako-4
【概要】
試しに見てみる
以前は配布していましたが、一度配布zipを取り下げています。現在お使いの方はそのまま使っていただけます。
現在スキンを使用されている方は、ver3.9.0から追加されたカスタム絵文字について意図しない動作をする場合がありますので、下記をご確認ください。
また、NSFW画像への対応についても、下記に記載のCSSを追加してください。
画像に対して、imgタグでスタイルを適用していたので、カスタム絵文字に対して意図しない装飾が適用されることがあります。
記事内の画像クラスへの適用に変更しましたので、ＣＳＳファイル内の31行目～imgで指定されている部分を削除して、下記の記述に差し替えてください。
/* 画像に関する設定*/
img {
height: 100%;
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* 投稿本文の画像 */
/* 画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
display: inline-table;
margin: 5px 0;
padding: 0;
border-collapse: collapse;
vertical-align: top
}
/* キャプション */
.embeddedpictbox figcaption {
display: table-caption;
background-color: var(--background-sub);
caption-side: bottom;
text-align: center;
font-size: .8em;
}
/* 画像ボックスに含まれる画像 */
.embeddedpictbox img {
vertical-align: middle;
}
/* 画像リンク */
.imagelink {
display: inline-block;
vertical-align: inherit;
line-height: 1;
}
/* 画像そのもの */
.embeddedimage {
max-width: 100%;
max-height: 240px;
width: auto;
height: auto;
margin: 5px;
}
また、NSFWフラグの画像についても、記述のアップデートを行っております。461行目からの記述を、下記の記述に差し替えてください。
/* NSFWフラグ付き画像 */
.imagelink.nsfw {
display: inline-block;
overflow: hidden;
}
/*NSFWフラグ付き画像のフィルター（モノクロ化＋ぼかし）*/
img.nsfw {
-webkit-filter: grayscale(1) blur(20px);
filter: grayscale(1) blur(20px);
}
Ver 3.9.0以降に追加されたリスト機能に対応する場合は、下記を追加してください。
L:リストの指定(Line)
.decorationL {
list-style: inside disc;
}
.decorationL li ul {
list-style: inside circle;
margin-left: 1rem;
}
Ver 4.0.4以降実装のカスタム絵文字について、今回装飾を加えております。
カスタム絵文字をホバーしたときふわっと大きくしたいときは、下記を追加してください。
.cemoji img {
transition: transform .2s ease;
}
.cemoji img:hover {
transform: scale(1.2);
}
畳む
【スキンについて】
クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合
アイコンは「Font Awesome 」を使用しています。
ヘッダー・日付部分のフォントに「Google Fonts 」を使用しています。
英語の場合「Bungee」日本語の場合「デラゴシック」で表示されます。
文字装飾について
┗標準機能にはおおむね対応しているかと思います。強調、極小文字を入力しても、おおむねノート罫線のデザインの範囲に収まります。（強調文字はめっちゃでっかいです）
ものすごい装飾してものすごい長文を入力するとずれることがありますが、そもそもそういう使い方を想定していないので不具合として扱っていません。（200文字程度の短文投稿を想定しています）
罫線のデザイン調整のため、画像を200px×200pxに設定しています。画像の下に文章を入力しても罫線に収まります。
参考サイト
┗CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech
【概要】
- 展示のみ
- 携帯サイトのリアルタイム日記スキン風
- 確認バージョン：てがろぐ Ver 4.0.4
試しに見てみる
以前は配布していましたが、一度配布zipを取り下げています。現在お使いの方はそのまま使っていただけます。
現在スキンを使用されている方は、ver3.9.0から追加されたカスタム絵文字について意図しない動作をする場合がありますので、下記をご確認ください。
また、NSFW画像への対応についても、下記に記載のCSSを追加してください。
画像に対して、imgタグでスタイルを適用していたので、カスタム絵文字に対して意図しない装飾が適用されることがあります。
記事内の画像クラスへの適用に変更しましたので、ＣＳＳファイル内の31行目～imgで指定されている部分を削除して、下記の記述に差し替えてください。
/* 画像に関する設定*/
img {
height: 100%;
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* 投稿本文の画像 */
/* 画像ボックス(FIGオプション指定時) */
.embeddedpictbox {
display: inline-table;
margin: 5px 0;
padding: 0;
border-collapse: collapse;
vertical-align: top
}
/* キャプション */
.embeddedpictbox figcaption {
display: table-caption;
background-color: var(--background-sub);
caption-side: bottom;
text-align: center;
font-size: .8em;
}
/* 画像ボックスに含まれる画像 */
.embeddedpictbox img {
vertical-align: middle;
}
/* 画像リンク */
.imagelink {
display: inline-block;
vertical-align: inherit;
line-height: 1;
}
/* 画像そのもの */
.embeddedimage {
max-width: 100%;
max-height: 240px;
width: auto;
height: auto;
margin: 5px;
}
また、NSFWフラグの画像についても、記述のアップデートを行っております。461行目からの記述を、下記の記述に差し替えてください。
/* NSFWフラグ付き画像 */
.imagelink.nsfw {
display: inline-block;
overflow: hidden;
}
/*NSFWフラグ付き画像のフィルター（モノクロ化＋ぼかし）*/
img.nsfw {
-webkit-filter: grayscale(1) blur(20px);
filter: grayscale(1) blur(20px);
}
Ver 3.9.0以降に追加されたリスト機能に対応する場合は、下記を追加してください。
L:リストの指定(Line)
.decorationL {
list-style: inside disc;
}
.decorationL li ul {
list-style: inside circle;
margin-left: 1rem;
}
Ver 4.0.4以降実装のカスタム絵文字について、今回装飾を加えております。
カスタム絵文字をホバーしたときふわっと大きくしたいときは、下記を追加してください。
.cemoji img {
transition: transform .2s ease;
}
.cemoji img:hover {
transform: scale(1.2);
}
畳む
【スキンについて】
クイック投稿フォーム、新規投稿ボタン、各投稿ごとの編集ボタンは、CGIの設定でQUICKPOSTを『ログインしている際にのみ表示する』に設定している場合、非ログイン状態で表示されません。
┗ てがろぐ公式：ログインされている場合にだけ表示されるようにしたい場合
アイコンは「Font Awesome 」を使用しています。
ヘッダー・日付部分のフォントに「Google Fonts 」を使用しています。
英語の場合「Bungee」日本語の場合「デラゴシック」で表示されます。
文字装飾について
┗標準機能にはおおむね対応しているかと思います。強調、極小文字を入力しても、おおむねノート罫線のデザインの範囲に収まります。（強調文字はめっちゃでっかいです）
ものすごい装飾してものすごい長文を入力するとずれることがありますが、そもそもそういう使い方を想定していないので不具合として扱っていません。（200文字程度の短文投稿を想定しています）
罫線のデザイン調整のため、画像を200px×200pxに設定しています。画像の下に文章を入力しても罫線に収まります。
参考サイト
┗CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech