Demo たこつぼくらぶ

トップページを更新しました。
プライバシーポリシーを追加しています。
（正直来ると思ってなかった反応をいただいたので、あわてて追加しました…。ご案内が不十分ですみません…。）

概要
・メールフォームに書いてあることは保存されます（メールサーバとかに）
・同一人物の確認のため、IPアドレスとかの取得機能はそのまま使ってます。あらし・なりすまし対策なので普段気にすることはないです。
・XREAのアクセス解析を使ってます。ブラウザが何とか（CSSの対応に必要なので…）どのスキンが人気かな～とか見てます。
・cookieはやってると思うけど使ってません。XREA側の広告とかに使ってるのかな？でもコアサーバーの広告だし多分違うと思う…。よくわかってない。ブロックしてて大丈夫です。

よろしくお願いいたします。

gallery-tako-1
ギャラリー用スキン #gallery-tako-1

試しに見てみる

＜スキンについて＞
●ギャラリー用のスキンで、通常投稿の表示には向きません。
　ギャラリーモードの機能上、投稿内に画像（[PICTで始まる記法を使って掲載した画像）を持っている投稿のみ表示されます。イラストなどの展示に向いています。
┗ てがろぐ公式：ギャラリー用スキンの作り方・使い方

●画像を1～4列のグリッド風に展示できます。実際はFlexBoxで指定しています。

●鍵付き投稿、NSFWフラグ（てがろぐ3.9以降の機能）の投稿は代替画像が表示されます。

サムネイル表示部分のskin-onelog.htmlの記述
<div class="thumbnail">
    [[ONEPICT:1]]

    <!-- 鍵つき投稿の場合、画像が出力されないので代替画像＋コメントを表示 -->
    <div class="key-need">
        <a href="[[PERMAURL]]">
            <img src="[[PATH:SKINDIR]]Keyneed.png" alt="鍵投稿用の代替画像">
            <div class="caution">
                <p>クリックして鍵を入力</p>
            </div>
        </a>
    </div>

    <!-- NSFWフラグの画像を非表示にし、代替画像＋コメントを表示 -->
    <div class="one-cushion">
        <a href="[[PERMAURL]]">
            <img src="[[PATH:SKINDIR]]cushion.png" alt="NSFWの代替画像">
            <div class="caution">
                <p>クリックして表示</p>
            </div>
        </a>
    </div>
</div>



該当部分のCSSの記述
/* 鍵付き投稿、NSFW画像の代替画像を通常非表示にする */
/*NSFW画像を非表示にする */
.key-need, .nsfw img, .one-cushion {
   display: none;
}

/* 必要な部分で表示する */
.key-need:first-child, .thumbnail .nsfw~.one-cushion {
   display: block;
}

/* 鍵付き投稿。NSFW用の注意書き */
.caution {
   background-color: var(--bg-sub);
   position: absolute;
   top: 40%;
   width: 100%;
   padding: 10px 5px;
   text-align: center;
   font-weight: bold;
   opacity: 0.8;
}


鍵付き投稿は画像の出力自体されないので、「代替画像用のdiv要素が最初に来る」という指定で表示の切り替えをしています。
NSFWフラグ画像は、「同じ親要素(thumbnail)内にnsfwクラスがあると表示される」という指定で表示の切り替えをしています。
NSFWフラグ画像についてはフィルターをかけるのが一番楽だしデザイン的にもいいのかな…と思いますが個人的な好みで差し替え画像をどうしても使いたかったので…。

●他はそんなに難しいことのないスキンだと思います。「画像を表示する」ということに特化しているので、それ以外のデザインや装飾はできる限り省略しています。
　画像のキャプション（3.9以降の機能）は、ギャラリーモードで投稿本文と重複する場合があるので非表示にしています。
┗ てがろぐ公式：画像管理画面で画像1つ1つにキャプションやフラグを登録する方法
┗ てがろぐ公式：画像の表示方法に応じた実際の出力HTMLと装飾例

●アイコンはFont Awesome を使用しています。

【重要なお知らせ】

今更なのですが、たこつぼくらぶのドメイン設定を更新しました。これまでXREAの無料プランに付帯してくるshopドメインから変更していなかったのですが、手動で変更できることが判明したため、標準のURL( http://takotubo.s239.xrea.com )へ更新しています。

現在http://takotubo.shopでリンクをいただいている方は、ご面倒ですがURLの更新をお願い致します。
（しばらくはショップドメインでも標準URLへリダイレクトされるようにしておりますが、無料期間はXREA側のサービスのため、1年後に使えないURLになります。）

ご面倒をおかけしますがどうぞよろしくお願いいたします。

知らないうち作者様にRTしていただいていた…

（ツイート埋め込み処理中...）Twitterで見る

ありがとうございます。

正直自分が生まれたころからこの仕事されてる方に褒められるのすごいことじゃないですか？
2020年からてがろぐを使っていて結局楽しすぎて自分で使うだけじゃものたりなくなってこんなサイトまでぶちあげてるので、初心者もいいところ過ぎる…3年前まで自分でCSSを書く日が来るとは思わなかった。

これからも精進します。

HTMLサイト用の自作・配布テンプレートを適用する場合、追加で設定したほうがいいCSSの設定まとめ

Twitterの圧政・混乱・横暴ええと色々に耐えかねて個人サイトが再度トレンドに上がっています。
そしててがろぐも「いいかも」とつぶやいているかたをよく見かけるようになりました。

基本的にてがろぐは公式配布のCSSを見るのが一番勉強になります！公式のカスタマイズ説明文もとても充実しています。
簡単ではありますが、てがろぐのスキンを作っていて、これは公式のCSSをコピペしたほうがいい、調整したほうがいいという部分がいくつかありますので、ここにまとめておきます。
これはてがろぐの最初の一歩を踏み出した後、カスタマイズがしてみたい、自分の好きなテンプレートとデザインをそろえたい！好きな形にしていこう！という方への、「これだけは絶対にやったほうがいい！」という個人的なメモです。

※注意※
自作以外の配布テンプレートによっては、製作者のルール上、他デザイン・プログラムとの併用が禁止されている場合もありますのでご注意ください。

CSSのコメント・改行は軽量化しています。
クラス名をコピペして、てがろぐ公式配布のCSS（tegalog.css）（以下、公式CSS）内や、公式サイトを検索してみると、より詳しい情報や使い方のコメントが載っています。

-----

公式CSSをコピペすると便利なもの
1．URLが書かれた場合、文字列が記事からはみ出さないようにする
.url {word-break:break-all;}

2.装飾関連
2-1.引用したとき、文章の前後にかぎかっこがつかないようにする。
.decorationQ::before,.decorationQ::after{content:''}
3-2.引用するクラスに必須の記述
.decorationQ{display:block}

3.画像が挿入されたとき、記事からはみ出ないようにする。
.embeddedimage{max-width:100%;}
※デザインに合わせて変更したほうがいいもの 2-1.画像サイズも合わせてご確認ください。

4.動画を埋め込んだ時、記事からはみ出ないようにする。
@media all and (max-width:600px){.embeddedmovie{display:inline-block;max-width:100%;width:auto;height:auto}}

-----

デザインに合わせて変更したほうがいいもの
1．装飾関連
decorationE（強調）、decorationB（太字）decorationI（斜体）、decorationU（下線）、decorationD（取り消し線）、decorationS（小さめ）、decorationT（極小）
使用する自作・配布テンプレートにデザインを合わせて、文字サイズ・色・太さなどを調整すると良いです。
うまくいかないときは上記のクラス名をコピーして、公式CSS内を検索してみてください。詳しい使い方、装飾のコメントが書かれています。
公式CSSの最初のほうに書かれています。

2.画像関連
2-1.画像サイズ
.embeddedimage{max-width:100%;max-height:240px;width:auto;height:auto}
このうち、max-height:240pxは公式CSSの推奨サイズです。適用したいデザインに合わせて変更してください。
width、heightがautoのままだと、小さい画像は小さいまま、大きい画像は記事の横幅いっぱいまで表示されます。
サムネイル的に表示したい場合は適宜サイズを指定してください。

2-2.NSFWフラグへの対応
img.nsfw{filter:blur(9px)}
公式CSSではぼかす処理をしていますが、適用したいデザインに合わせてお好きに処理されるといいと思います。
ぼかし処理を行う場合はfigure.nsfw{overflow:hidden}も追加してください。
【公式】▼フラグが付いている画像の出力HTMLソース例　https://www.nishishi.com/cgi/tegalog/cus...
【公式】▼キャプション付きの画像・フラグ付きの画像を装飾するCSS例　https://www.nishishi.com/cgi/tegalog/cus...

3.続きを読むボタン
全体の指定はreadmorebutton
開く（続きを読む）はreadmoreopen
閉じる（畳む）はreadmoreclose
というようなクラスが指定されています。
基本的にはreadmorebuttonのクラスを調整すればいいのですが、開くボタンと閉じるボタンで色を変えたい、文字サイズを調整したい…というときはそれぞれのクラスで指定してください。
【公式】「続きを読む」ボタンによって隠された範囲の装飾方法　https://www.nishishi.com/cgi/tegalog/cus...

4.鍵付き投稿
鍵入力フォーム全体passkeyform
エラー時の警告文passkeyerror
ひとことヒント部分passkeyguide
送信ボタンpasskeysubmit
というようなクラスが指定されています。公式でコピペしてね！と書いてある通り、上記のクラス名から公式CSSの該当部分をコピペして調整します。
鍵入力後の記事は通常の投稿なので、ここで行うのはだいたい色替え・文字サイズの調整くらいだと思います。
【公式】▼鍵入力フォームを装飾する方法　https://www.nishishi.com/cgi/tegalog/cus...


5.クイックポスト
クイックポスト全体はpostform
本文の入力欄はtegalogpost
投稿ボタンはpostbutton
というようなクラスが指定されています。
装飾ボタンはdecoBtnsというクラスが指定されていて、各装飾ボタンごとに異なったクラスが指定されているので、細かい調整も可能です。
ver3.9.0の公式CSSでは485行目当たりから記述されているので参考にしてみてください。
この辺は開発者ツールとかで見るのが一番簡単に・自由にできるかな…と思います。

-----

番外：skin-cover.htmlに書いておくもの
必須
[[VERSION]]

意外と忘れがち（お使いの画像拡大スプリクトで異なります）
[[JS:LIGHTBOX]]
[[JS:LIGHTBOX:JQ]]



今のところは以上です。
その他の要素は必ず使うものではなかったり、skin-cover.htmlやskin-onelog.htmlを書いている際に自身でクラスを付与して調整することができるので、まずは公式配布や個人で配布されている方のスキンを調整・カスタマイズしたりして、てがろぐの記述に慣れていくといいかと思います。
他にも「これはどんなスキンを使うときにもやっておいたほうがいい！」というものができたら書き足しに来ます。
他にも何かあれば追加しますので、お気軽にご連絡ください。

てがろぐは自分の好きなデザインにできるところが大好きです！
公式の文章量に圧倒されてしまいがちですが、慣れれば本当に心強い味方です。何かに困っても公式サイトを読むか、公式のＣＳＳを探していればほとんど答えがあります。
（本当に答えがない時は公式のサポート掲示板（動作サンプル）もあります…！手厚い…！）

みなさまも是非楽しいてがろぐライフを！