Demo たこつぼくらぶ

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 を使用しています。

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

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

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

skin-tako-5

状況によってデザインが変わるスキン #skin-tako-5

試しに見てみる
●トップページ
●各種サンプル
●一覧（その１）
●一覧（その２）


＜スキンについて＞
●大きく分けて、汎用スキン・トップページ・疑似フレーム・目次（小説作品の展示を想定）の４種類
    ●skin-cover.html

        ヘッダー・・・
            メインタイトル（てがろぐHOMEへのリンク）、状況に応じた見出しの表示

        メニュー・・・
            記事の埋め込み・またはフリースペースを使用して、サイト内のメニューリンクを出力します。
            HTMLに直接記述してももちろん大丈夫ですが、サーバーにアップロードする手間が必要になるため、
            てがろぐ自身で完結する場合は今回のやり方がおすすめです。
            記事埋め込みの場合は、まずメニューとなる記事を作成し、HTMLに記載のタグ[[ONEPOST:●●]]の
            ●●部分を、該当するIDに差し替えてください。
            てがろぐ記事IDでのリンク・任意URLでのリンク、各種文字装飾はそのまま反映されます。
            フリースペースを利用する場合は、HTMLが使えます。フリースペースタグ[[FREESPACE]]を
            使用してください。
            複数のフリースペースを使用する場合は、下記の公式リンクを参考に作成してください。
            フリースペースの書き方（複数のフリースペースを設ける方法）
            https://www.nishishi.com/cgi/tegalog/cus...

        最近の投稿・・・
            新着投稿・新着画像を表示するエリアです。
            新着投稿で表示したい内容については、「設定」→【新着投稿リストの表示】から設定できます。
            また、新着投稿については「下げる（一覧外）」の投稿も表示されます。
            最近の公式サポート掲示板で、下げる投稿を表示しなくなる機能を検討します～」という質疑があったので、この部分はいったんこのままでも大丈夫そうかな…と思っています。。。質問者さん、ありがとうございます…！！
       
        メイン・・・
            てがろぐ記事・ページナビゲーション・ウィジェット（と呼んでいる検索窓等の表示部分）
            ウィジェットエリアの各種機能については、後述するフッターアイテムのエリアに置いても
            ほぼ同じ装飾で表示されると思います。
       
        クイックポスト・・・
            クイックポストのエリア

        フッター・・・
            フッターアイテム（メニュー同様、てがろぐ記事の埋め込み・フリースペースで
            内容を挿入できます。
            「無断転載禁止」等の注意書きやサイト情報など、すべてのページで表示されるような
            内容を想定しています。
            [[VERSION]]タグはてがろぐ公式の規約で必須のため、絶対に削除しないでください。

    <div class=container>は、XREAサーバーで広告が隠れることを回避するために存在しています。
    広告なしのサーバーの方は特に必要ありません。
    後述のグリッド表示のコンテナとして使用しているので、その部分をbodyに書き換えてください。
    書き換えなくても機能しますので、面倒な方、わからない方はそのままでも大丈夫です。

    lightbox用のタグは、別スプリクトを使用している場合、適宜差し替えてください。

    ●skin-onelog.html
        forPostAll・・・
            記事一覧のページで全文を表示する（通常のブログ的な表示）
        forPostTitle・・・
            記事一覧のページでタイトルのみ表示する（小説作品等の展示を想定）

        forPostTitleの部分については、特定のカテゴリのみで表示される、という運用を想定しています。
        CSSでどのカテゴリで適用するかの切り替えを行います。


●CSSは、詳細をCSS本体に記載しております。
でも全然甘いです…にししさん、毎回更新のたびにたくさんコメントを書いてくださるの、改めて感謝いたします……！
注意事項は下記です。
    ●前回同様、配色はまとめて変更できます。
    ●skin-cover.htmlのbodyに付加した[[SITUATION:CLASS]]タグで、スキンの切り替えを行っています。

        汎用スキン・・・
            一覧と単独表示用に、特にクラスを指定していないプレーンなスキン

        トップページ用のスキン・・・
            サイトのトップページで表示する、大きな画像を表示します。
            記事は表示せず、新着投稿・画像リストを表示します。

        何か指定がある 状況での 一覧 表示（その１）・・・
            PCでは２カラムで表示するスキンです。
            グリッドレイアウトで表示しており、フレーム表示っぽくなっています。
            特定のカテゴリーで適用したい場合、公式サイトを確認しつつ、「body.cat-●●」の
            部分を書き換えてください。
            装飾のカスタマイズ方法（状況に応じて装飾を変化させる、状況表示行の装飾）
            https://www.nishishi.com/cgi/tegalog/cus...
            （例）カテゴリーIDが「diary」のカテゴリーに適用したい場合、「body.cat-diary」
            タグへの適用はやってみたんですがうまくいきませんでした…。

        何か指定がある 状況での 一覧 表示（その２）・・・
            タイトルのみ表示される一覧ページです。
            skin-onelog.htmlの「forPostTitle」で表示される部分がここです。
            小説サイトの作品一覧ページを想定しています。
            「その１」と同じように、カテゴリーIDまたはユーザーIDなどで指定してください。
            変更する部分は２か所です。
            (1)「デザインの切り替え」で、タイトルを表示するページと全文を表示するページを
            切り替える「body.cat-●●」の部分
            (2)「何か指定がある 状況での 一覧 表示（その２）」の「body.cat-●●」の部分

        何か指定がある 状況での 単独 表示・・・
            インフォメーションページなど、少数のページに適用することを想定しています。
            この記事自体がサンプルになっています。
            表示したい記事を作成し、CSSの記事ID（log-●●の部分）を書き換えてください。
            （例）記事IDが１の場合、「log-1」


●基本的に、このまま使うスキンというよりは、お好きに改変してもらって、
「てがろぐでサイトを作る」のたたき台になれば…と思います。
なるべく表示は簡易的になるように、機能への対応は網羅的に…と思って作ったスキンです。

●配布zip
こちら からどうぞ。
使用報告は不要です。
改変を前提としたスキンなので、大幅な改変を行ったスキンを作成される場合は、
「Theme by takotubo-club」の表記は削除していただいても大丈夫です。
※Powered by てがろぐ Ver～～の部分は削除しないでください！※

改変したスキンの配布なども行っていただいて大丈夫…
というかてがろぐ公式機能の応用に過ぎないのでお好きにしてくださって大丈夫です。
ただし、このサイトからダウンロードしたファイルそのままのスキンを再配布するのはご遠慮ください。


ご利用は自己責任でお願いいたします。

てがろぐを使ってるサイト向けのサーチ、てがWA! に登録しました。
また、たこつぼくらぶのトップページにもリンクを追加しています。

以前からTwitterで告知されていて、楽しみにしていたサーチさんです。

てがろぐを使っているサイトさんってこんなにあるんだ…！わくわくしています。
（Twitterで見かけたことのないサイトさん‥それはそうか…てがろぐユーザーはてがろぐでつぶやくのでTwitterにあんまりいない…）

たくさん盛り上がるといいなと思います。

独自タグ[[CALENDAR]]で出力されるHTMLを装飾するCSS　
実際にCSSを適用したカレンダーは下の画像の通り。

土日は文字色・背景色が変化
今日の日付の背景色が変化
投稿した日はマークがつく

自動で出力されるクラスで装飾を指定しているので、ユーザー側でクラスを追加したりしなくても大丈夫です。
[[CALENDAR]]タグの挿入→CSSに下記のコードをコピペでOK！

改変はご自由に。使用報告、著作権表記など不要です。
ご自身でカレンダーを装飾する場合の、ひな形としてご利用いただいても問題ありません。

CSSコードはこちらから
/*----------カレンダー要素全体----------*/
.calendar {
    box-sizing: border-box;
    width: 250px;
    border-collapse: collapse;
    text-align: center;
    font-size: 12px;
    line-height: 2.5;
}

/*-----投稿のある日-----*/
.calendar a {
    position: relative;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
}

.calendar a::after {
    position: absolute;
    top: calc(50% + 0.5em);
    left: calc(50% - 0.2em);
    display: block;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background-color: hsl(300, 100%, 60%);
    content: "";
}

/*-----●●年●月の部分-----*/
.calendar caption {
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1.4em;
}

/*-----曜日の見出し行-----*/
.calendar tr.daysofweek th {
    border-bottom: 2px solid;
    text-align: center;
    font-size: 1.2em;
    line-height: 2.3;
}

/*-----カレンダー内の境界線-----*/
.calendar tr {
    border-bottom: 1px solid;
}

.calendar tr:last-child {
    border-bottom: none;
}


/*-----日付セルごとの設定-----*/
.calendar td {
    vertical-align: middle;
}


/*-----土曜日の設定-----*/
.calendar th:nth-child(7) {
    color: hsl(200, 70%, 40%);
}

.calendar tr td.sat {
    background-color: hsl(200, 100%, 90%);
}

/*-----日曜日の設定-----*/
.calendar th:nth-child(1) {
    color: hsl(0, 70%, 40%);
}

.calendar tr td.sun {
    background-color: hsl(0, 100%, 90%);
}

/*-----今日の日付-----*/
.calendar tr td.today {
    background-color: hsl(50, 100%, 90%);
}


/*-----空の日付-----*/
.calendar td.empty::after {
    content: "-";
}
畳む
コピー＆ペーストしてご利用ください。

参考：てがろぐ公式 ▼カレンダー表示の装飾方法