2023年5月 この範囲を時系列順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する
たこつぼくらぶ、トップぺージ等、少し更新しています。
・リンクについて
基本的にリンクフリーですが、サーチサイトへの登録など、管理人に無断で何かしらに登録する行為を禁止します。
サーチサイトやランキング等の登録はサイト管理者が自分の意志で行うべきと考えています。
第三者から見て、管理人（おくと）が登録したと誤認される可能性があるものや、
管理人（おくと）が削除削除要請や申し立てを行って登録が解除されると確証のない場所にリンクをされるのは不安です。
ご協力よろしくお願いいたします。
当然晒し・荒らし目的のリンクもご遠慮ください。
上記以外で、ご自身の管理するサイト、またはSNSアカウントとわかる場所で、当サイトをご紹介いただくのは大歓迎です。
しかし、ページの削除やスキン名の変更、サイトのお引越しなどでURLが変わる可能性もありますので、何かのページ・スキンがずっとアクセスできるとは限りません。
なるべく公開中のページは変更されないように気を付けますが、上記の点はご了承ください。
・.htaccessの設置
先日スパムメールが送られたため、該当のIPアドレスとブロックしています。
また、第三者登録可能なサーチサイトで、管理人が認識しているサイトをブロックしています。
これにより不具合（一応確認しているので、ないとは思いますが…）があれば教えてください。
どうぞよろしくお願いいたします。
・リンクについて
基本的にリンクフリーですが、サーチサイトへの登録など、管理人に無断で何かしらに登録する行為を禁止します。
サーチサイトやランキング等の登録はサイト管理者が自分の意志で行うべきと考えています。
第三者から見て、管理人（おくと）が登録したと誤認される可能性があるものや、
管理人（おくと）が削除削除要請や申し立てを行って登録が解除されると確証のない場所にリンクをされるのは不安です。
ご協力よろしくお願いいたします。
当然晒し・荒らし目的のリンクもご遠慮ください。
上記以外で、ご自身の管理するサイト、またはSNSアカウントとわかる場所で、当サイトをご紹介いただくのは大歓迎です。
しかし、ページの削除やスキン名の変更、サイトのお引越しなどでURLが変わる可能性もありますので、何かのページ・スキンがずっとアクセスできるとは限りません。
なるべく公開中のページは変更されないように気を付けますが、上記の点はご了承ください。
・.htaccessの設置
先日スパムメールが送られたため、該当のIPアドレスとブロックしています。
また、第三者登録可能なサーチサイトで、管理人が認識しているサイトをブロックしています。
これにより不具合（一応確認しているので、ないとは思いますが…）があれば教えてください。
どうぞよろしくお願いいたします。
2023年3月 この範囲を時系列順で読む(かんりにんの投稿に限定) この範囲をファイルに出力する
独自タグ[[CALENDAR]]で出力されるHTMLを装飾するCSS
実際にCSSを適用したカレンダーは下の画像の通り。
土日は文字色・背景色が変化
今日の日付の背景色が変化
投稿した日はマークがつく
自動で出力されるクラスで装飾を指定しているので、ユーザー側でクラスを追加したりしなくても大丈夫です。
[[CALENDAR]]タグの挿入→CSSに下記のコードをコピペでOK！
改変はご自由に。使用報告、著作権表記など不要です。
ご自身でカレンダーを装飾する場合の、ひな形としてご利用いただいても問題ありません。
/*----------カレンダー要素全体----------*/
.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: "-";
}
畳む
コピー＆ペーストしてご利用ください。
参考：てがろぐ公式 ▼カレンダー表示の装飾方法
実際にCSSを適用したカレンダーは下の画像の通り。
土日は文字色・背景色が変化
今日の日付の背景色が変化
投稿した日はマークがつく
自動で出力されるクラスで装飾を指定しているので、ユーザー側でクラスを追加したりしなくても大丈夫です。
[[CALENDAR]]タグの挿入→CSSに下記のコードをコピペでOK！
改変はご自由に。使用報告、著作権表記など不要です。
ご自身でカレンダーを装飾する場合の、ひな形としてご利用いただいても問題ありません。
/*----------カレンダー要素全体----------*/
.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: "-";
}
畳む
コピー＆ペーストしてご利用ください。
参考：てがろぐ公式 ▼カレンダー表示の装飾方法
てがろぐを使ってるサイト向けのサーチ、てがWA! に登録しました。
また、たこつぼくらぶのトップページにもリンクを追加しています。
以前からTwitterで告知されていて、楽しみにしていたサーチさんです。
てがろぐを使っているサイトさんってこんなにあるんだ…！わくわくしています。
（Twitterで見かけたことのないサイトさん‥それはそうか…てがろぐユーザーはてがろぐでつぶやくのでTwitterにあんまりいない…）
たくさん盛り上がるといいなと思います。
また、たこつぼくらぶのトップページにもリンクを追加しています。
以前からTwitterで告知されていて、楽しみにしていたサーチさんです。
てがろぐを使っているサイトさんってこんなにあるんだ…！わくわくしています。
（Twitterで見かけたことのないサイトさん‥それはそうか…てがろぐユーザーはてがろぐでつぶやくのでTwitterにあんまりいない…）
たくさん盛り上がるといいなと思います。
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～～の部分は削除しないでください！※
改変したスキンの配布なども行っていただいて大丈夫…
というかてがろぐ公式機能の応用に過ぎないのでお好きにしてくださって大丈夫です。
ただし、このサイトからダウンロードしたファイルそのままのスキンを再配布するのはご遠慮ください。
ご利用は自己責任でお願いいたします。
状況によってデザインが変わるスキン #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～～の部分は削除しないでください！※
改変したスキンの配布なども行っていただいて大丈夫…
というかてがろぐ公式機能の応用に過ぎないのでお好きにしてくださって大丈夫です。
ただし、このサイトからダウンロードしたファイルそのままのスキンを再配布するのはご遠慮ください。
ご利用は自己責任でお願いいたします。