たこつぼくらぶ

更新履歴

2023/12/08 02:25:06 スクリプト1点配布
2023/12/04 17:20:52 スキン1点配布
2023/12/03 19:30:55 編集画面用のCSSとJSを公開

2023年12月この範囲を時系列順で読むこの範囲をファイルに出力する

スクリプト1点配布

マークダウンに変換するスクリプト
コードのハイライトも一応できます
使用は自己責任でお願いいたします。
詳しくはこちらの詳細ページをご覧ください。

マークダウンの部分は多分いい感じに動くと思います
ライブラリの選定はにししさんの開発放言で話されていたものを使いました
そのうちmarkedでも試してみたいです

以前からhighlight.jsを使いたくてすったもんだしており
Twitterでも助けていただいたのですが今回もこう…難しく…うーん……という仕上がりでした泣
ソースを記述する以上CDNの読み込みを書いておきたいのですが、これがURLの自動リンクと相性が悪く…うーん……
自動リンクを切るとてがろぐの良さもひとつ消える（と思う）ので多分自分で使うことはないと思います

このサイトをもうちょっとドキュメントとしてまとめようとおもっているのですが、長文は……mdで書きたい…というかGitHubからREADME転載したい…になっており　色々試していた一環でした
てがろぐの良さをなくしてまでマークダウンで書きたいと思ってないので、マークダウンで書くならAstroかHugoだなあ　自サイトをAstroで作っているので自動アップロードができるようになればここはAstroになります（Bluditが好きなので全然Bluditの可能性もあります -w- ）（個人的なつぶやき場所が欲しいな…と思っているので、こういうページとは別にてがろぐが欲しいので…）
畳む

【配布】てがろぐをマークダウンで書くスクリプト

【概要】

Javascriptで、てがろぐで書いた文章をマークダウンに変換します
マークダウンに変換する　markdown-it
コードを書いたとき、いい感じに色を付ける　highlight.js
許諾・報告不要です。ご自由にコピペしてご利用ください。
非公式のため、使用にあたり自己責任でお願いいたします。

【注意事項】
てがろぐのリンクの記法とコード（インライン・ブロック）の記法の併用はできません（技術不足です！すみません）
てがろぐ側の機能をオフにするか、URLが書かれた範囲をマークダウンに変換する範囲から外して書く必要があります。
　2023/12/09できました！公式のサポート掲示板でご教示いただきました…！
　https\://www.example.comのように書く必要があります。

また、マークダウンで変換した後はマークダウン用の装飾をCSS側で設定してあげてください。

【使い方】
まず、使用するにあたり、マークダウンに変換したい範囲を指定します。
てがろぐ本文すべてと、一部を変換するかで方法が異なります。

---1.本文すべてをマークダウンにしたい場合　（一部てがろぐの装飾記法が使えなくなります）
てがろぐ本文（[[COMMENT]]）を<div class="comment">[[COMMENT]]</div>このように囲んでください。
クラス名はお好きな内容で問題ありませんが、この後記述するスクリプト内で適切に書き換えてください。

---2.本文の一部をマークダウンにしたい場合、自由装飾記法で指定します。
投稿本文の指定したい部分を、決まった名前（ここでは「md」と指定します）で指定してください。

続いて、下記のコードをコピペして、外側スキンの<body>内に追記します。

13行目の var inputElements = document.querySelectorAll('.comment');で、
<div class="comment">にした人はそのまま、
自由装飾記法「md」で指定した人はvar inputElements = document.querySelectorAll('.deco-md');と変更します。

マークダウンだけ使いたい人はこれで完成です。
46行目以降は、コードを記述したい人向けなので、使わない場合は削除して大丈夫です。

highlight.jsを使う人向け
スタイルシートはできればheadタグ内で読み込んでください。
highlight.jsの公式サイトで、好きなデザインを選べます。
「Theme」で選んだ名前を確認して、48行目の「～styles/名前.min.css」部分を書き換えてください。
例ではmonokaiを選んでいます。

また、コードブロックとてがろぐの自動URLリンクの相性が悪いため、ソース内でURLを書くと<a>タグになって出力されてしまいおかしなことになります…。
URLの処理を全部設定からオフにすれば問題ありませんが、動画や音楽の埋め込みリンクなども一切効かなくなります。
このあたりの解決方法があれば教えてください！(T_T)
→（上記の通り解決済）

【備考】
マークダウンの記法自体は注意事項に上げたもの以外はmarkdown-itに準じます。
今回使用したサイトのデモページが参考になります。
markdown-it
オプションのカスタマイズもできるので、できそうな方はやってみてください！
（GitHubのページ）

マークダウンでのテーブルジェネレーターもあります。
Markdown表テーブル作成ツール

使用ライブラリ
markdown-it - MIT License
highlight.js - BSD 3-Clause License

スキン1点配布

【概要】

MITライセンスで配布
てがろぐVer 4.1.4.以降のバージョンでご利用ください
付箋型のスキンです。詳しくはこちらをご覧ください。

作っていたらIF文対応の最新β版が配布されたので、IF文で作りました。
執筆者（ユーザー）の紹介文を掲載するとかなりブログっぽくなる！とテンションあがったのでそれも組み込みました。
閲覧者より執筆者のことを考えて作ったスキンです。
よろしくお願いいたします。畳む

【配布】skin-matuba

【概要】

MITライセンスで配布
一覧で付箋型、単独でブログっぽい表示
確認バージョン：てがろぐ Ver 4.1.4（β版）

Ver 4.1.4以降で動作するタグを使っているため、対応バージョンへアップデートしてください。

試しに見てみる

【ダウンロード方法】
配布（GitHubリンク）

Codeのボタンからメニューを開き、Download ZIPから保存、展開してご利用ください。

【ライセンス】
MIT

【スキンについて】
付箋みたいな感じで一覧表示するスキンです。

固定投稿は、一覧にしたときにピンで刺したようなアイコンがつきます。

鍵付きの投稿は背景に鍵のアイコンがつきます。

閲覧者より使用しているユーザーに使いやすいデザインを目指しています。
たくさんメモを取るのも、詳しい記事を書くのもどちらでも、たくさん記事が並んでいると嬉しいスキンです。

右下のクイック投稿フォームを開くと、絵文字と画像の管理画面が開けます。

デモスキンで色々お試しください。

記事のIDでリンクをした場合、リンクの直後に改行して、任意の文字数分、引用として表示されます。

その他、同梱のREADMEをご覧ください。

編集画面用のCSSとJSを公開

【概要】

編集画面（スキン側ではなく、CGIの管理画面の新規投稿・編集画面）で読み込めるedit.cssとedit.jsのソースコードを公開しました。
絵文字と画像の管理画面を、iframeで読み込んで表示できます。
詳しくはこちらの詳細ページをご覧ください。

自分がてがろぐで何か書くときに一番めんどくさいな…と思うのが、既存の画像コードを編集画面から表示できないことです。
画像の添付は編集画面からできますが、記事の一番最後に挿入されるため、任意の場所にコードを挿入したい場合は、いちいち画像の管理画面で画像をアップロードし、コードを取得し、貼り付ける必要があります。

別タブ開いたり２窓したりするより楽、くらいの機能です。だれかもっといい感じのやつ作って下さいよろしくお願いします。畳む

【配布】edit.css / edit.js

【概要】

てがろぐ管理画面の新規投稿・編集画面に、カスタム絵文字の管理画面と画像の管理画面を表示
edit.css、edit.jsを読み込み（てがろぐの機能）
iframeで実装
使用は自己責任でお願いいたします。

【ライセンス】
CC0
著作権表記や許諾などは一切不要です。どなたでもご自由にご利用ください。
改変したり、これから配布するスキンに組み込んだりすることも可能です。
ご利用にあたり、たこつぼくらぶは一切の責任を負わないものとします。

【使い方】
まず、てがろぐの管理画面からedit.css、edit.jsを有効にします。
公式マニュアル：新規投稿/編集画面に自由なCSSやJavaScriptを加える方法【高度な設定】
マニュアルの通りに、
管理画面の[設定]→[システム設定]→【機能制限／自動調整／高度な設定】→[高度な設定]→『編集画面で、edit.cssとedit.jsを(あれば)読み込む』
にチェックを入れてください。

続いて、空のファイルedit.cssとedit.jsを作成し、それぞれCSSとJavascriptをコピペして保存してください。

（CSSタブの中身をedit.cssに、JSタブの中身をedit.jsにコピペ）

てがろぐ本体（tegalog,cgi）を同じフォルダにアップロードしたらうまくいっているはずです。

CSSは例として入れているだけなので、お好きに改変してください。
絵文字や画像を表示する部分を、画面の下半分に表示するようにしているので、
ボタンは上のほうにあったらいいかな…と思い、右上に固定するようにしています。

【備考】
表示が崩れる場合はキャッシュを削除してみてください。
クラス名や変数名などに入っている「tako」は作者の主張というより、何かあっても既存のクラスと干渉しないように統一して入れているので、お好きな名前に入れ替えて使ってくださって問題ありません。
予告なく改変する場合がありますのでご注意ください。

2023年11月この範囲を時系列順で読むこの範囲をファイルに出力する

スキン１点配布

【概要】

MITライセンスで配布
以前公開していたスキンをアップデート＆名前を変更しました
シンプルなタブ型スキンです。詳しくはこちらをご確認ください。

以前から、zipをDLしなくても簡単にコードの公開ができないかな～！と思っていたので、GitHubで公開するようにいたしました。
gitもGitHubもまだよくわかってないです。

スキン全体としてはMITライセンスですが、使っているPHPなどは以前コピペ可で公開していたものもあるので、抜き出して使って大丈夫です！と書いてあるやつは、別のスキンで使っても大丈夫です。

過去に公開していたスキンはリネームして順次配布したいです！ﾜﾀｼCSSﾁｮｯﾄﾜｶｯﾃｷﾀ

畳む

【配布】skin-hujitubo

【概要】

MITライセンスで配布
シンプルタブ型スキン
確認バージョン：てがろぐ Ver 4.1.3（β版）

試しに見てみる

【ダウンロード方法】
配布（GitHubリンク）

Codeのボタンからメニューを開き、Download ZIPから保存、展開してご利用ください。

【ライセンス】
MIT

【スキンについて】
過去に展示していたskin-tako-1 を
現在のバージョンに対応の上、配布スキンとして公開いたしました。
見た目は同じようなスキンですが、機能はかなり変更しています。

投稿の状態によって、こんな感じのラベルがついたりします。

ダークモード切り替えボタン、投稿のTwitter(X)へのURL共有ボタンに加え、カスタム絵文字リストをスキン側で表示・コードを挿入したり、記事をIDでリンクした場合、引用として表示するなどの独自機能があります。

絵文字コピペの機能と、記事引用の機能は、過去にスクリプトとして公開していたものをスキンに組み込んだものになります。

こういう感じで絵文字リストをクイック投稿フォームの下に入れられます。

絵文字をクリック（タップ）すると、投稿フォームに絵文字コードがコピペされます。

記事のIDでリンクをした場合、リンクの直後に改行して、任意の文字数分、引用として表示されます。

こういう感じになるので、どっちかというともう少し簡単なリンクだったり、自己言及リプライの代わりくらいのイメージです。

詳しくはスキンに同梱しているREADMEをご覧ください。

2023年10月この範囲を時系列順で読むこの範囲をファイルに出力する

スキン1点公開

改変自由なスキンを1点公開しました。
＞＞詳しく見る

2023.10.08追記
css1点修正しています。早速すみません…。よろしくお願いいたします。

【配布】skin-tako-6

【概要】

new.css（CSSフレームワーク）を利用したシンプルなスキン
クラスはてがろぐCGIが出力するもののみで構成
カスタムに便利
確認バージョン：てがろぐ Ver 4.1.1.

試しに見てみる

配布.zip

【ライセンス】
当スキンについてはCC0で配布します。コピペ自由。というか改造を前提に作っています。
一応スキン製作者の表示をしていますが、消して問題ありません。
これはこのスキンについてのライセンスであり、てがろぐの使用条件はにししふぁくとりー様に従ってください。

【説明】
このスキンはカスタマイズするのを前提に作成しています。
new.cssである程度のスタイルを適用していますが、お好きなフレームワークに差し替えたり、ご自身でスタイルを当てたりしやすいようにしています。

skin-cover.htmlも、skin-onelog.htmlもスキンの作成に必要な…というか私がよく使う構成で、スキン側で指定するクラスを排除して作成しています。

同梱されているcolor-theme.cssについて
new.cssで使用されているカラー設定を変更するためのCSSファイルです。不要な場合は使用しない、削除して問題ありません。
new.cssでどのようなスタイルがあてられるのかについては、公式サイトをご覧ください。
（GitHubからcss見るのが一番楽かも…）

同梱されているcustom.cssについて
以前公開していた、「HTMLサイト用の自作・配布テンプレートを適用する場合、追加で設定したほうがいいCSSの設定まとめ」の発展形のようなものです。
てがろぐスキンを改造するときにやったほうがいい設定を書いています。
（埋め込み動画の横幅を合わせる、NSFW画像のぼかしのはみだし対策など）

カレンダーや新着投稿などのクラスは、使わない人もいるかな…ということで記述していません。
（目的をもって「ここを装飾したい！」というときには、公式マニュアルが一番わかりやすいというのもあります）

カスタム絵文字の横幅など、CGI側で設定可能なクラスも同様に、記述をしていません。

「てがろぐスキンを作るなら絶対にやっておかないとダメそう」なクラスや、
「ここの装飾はやる人が絶対多そう」なクラスをピックアップしています。

また、.decorationEなどの、てがろぐ独自装飾の設定をクラスのみ記述しています。
お好きな装飾を加えてください。今あるものは網羅していると思います。抜けてたら教えてください。。。

「/*好みで変更してください*/」の部分は、見た目を整えるためにある程度の装飾をしています。
だいたいnew.cssの設定の流用なので、別のCSSを当てるときは、その通りに変更してください。

てがろぐの公式配布のスキンは、「それだけで使える」というスキンですので、CSSを見てもスキン側で指定してあるクラスと、CGI側で出力するクラスの差がわかりづらいですが、このスキンはスキン側で指定するクラスは一切ありません。

自作スキンのたたき台にどうぞ。

--------------------
追記2023.10.08
すみません、iPhoneで投稿フォームに移動するとズームされてしまう不具合があったので修正しています。
custom.cssに下記を追加してください。
textarea.tegalogpost {
font-size: 16px;
}
--------------------

このスキン（特にcustom.css）はてがろぐの更新がある場合、適宜アップデートする予定です。
（初版：2023.10.07）