カテゴリ「コンテンツ」に属する投稿［13件］

更新履歴

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

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

【概要】

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

【配布】skin-matuba

【概要】

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

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

試しに見てみる

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

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

【ライセンス】
MIT

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

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

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

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

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

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

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

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

【配布】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」は作者の主張というより、何かあっても既存のクラスと干渉しないように統一して入れているので、お好きな名前に入れ替えて使ってくださって問題ありません。
予告なく改変する場合がありますのでご注意ください。

【配布】skin-hujitubo

【概要】

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

試しに見てみる

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

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

【ライセンス】
MIT

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

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

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

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

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

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

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

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

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

【配布】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）

【配布】記事番号リンクで記事を挿入する

【概要】

記事リンクで、リンク先の記事を引用表示する
jQueryを使用
htmlまたはプレーンテキストで表示
AI生成のコードのため、使用は自己責任で

【ライセンス】
CC0で配布します。
コメントは一部おくとが書いていますが、ソース自体はChatGPTです。
（動作はvivaldi、Edge、safari(iPhone)で確認しています。）
配布というかソースはご自由にコピペ可で公開、くらいのニュアンスです。

【詳細】
てがろぐの独自記法で任意の記事番号リンクを記述した場合、その記事の本文がリンク直後に挿入されます。
独自記法は＞＞123　[＞123:リンクテキスト]のような書き方でもどちらでも使えます。
自己言及が多い方、掲示板のように使用している方におすすめです。

htmlをそのまま表示するか、プレーンテキストで表示するかの２つの方法があります。

htmlで表示する場合、改行、文字装飾を行ったものやリンクなどもそのまま表示されます。
画像などもそのまま出力されますが、文字数の設定によってはソースが不十分になり、完全に表示されない場合があります。
例）記事内に画像を挿入すると、figure 、a、imgタグなどがセットで出力されますが、<figure class="embeddedpictbox"> …くらいで文字数制限が来た場合、imgタグまでたどり着いていないので、結果画像が出力されない…みたいな状況になります。
だいたい350字くらいで画像が表示されますが、lightboxは使えないみたいなので、そもそも記事本文先頭が画像の記事はリンクしないのがおすすめです。

プレーンテキストで表示される場合、改行や装飾は無視されます。
本文の先頭にテキストがない場合、画像を無視して一番最初の文章が表示されます。
本文先頭の画像にキャプションがあるときはキャプションを表示します。テキストで表示できる文章が何もない場合は何も表示されません。

複数記事リンクは対応していません。その場合、最後の記事の内容が引用されます。

【使い方】

skin-onelog.htmlに記述（されているか確認）する内容
<div class="comment">[[COMMENT]] </div>
てがろぐの記事本文を表示するタグ[[COMMENT]] が、<div class="comment">で囲まれているか確認してください。
クラス名自体は異なっていても大丈夫ですが、その場合は続きの部分で指定している内容を書き換える必要がありますので、注意してください。

skin-cover.htmlに記述する内容
jQueryを使用するため、skin-cover.htmlのbodyタグ内に、CDNなどでスクリプトを読み込んでください。
ソースは下記のURLなどから取得してください。
https://releases.jquery.com

例
<script src="ｈttps://code.jquery.com/jquery-3.7.0.min.js"></script>
上記はてがろぐの自動変換除けで先頭のｈが全角になっているので、半角に変換してください。
てがろぐの独自タグ[[JS:LIGHTBOX:JQ]]でjQueryを読み込んでいる場合は置き換えてください。
（理由について、詳しくはページ最後の注釈をご確認ください。）

続いて、下記の内容を追加します。
<script>

$(document).ready(function () {
   // 記事リンクに標準で付加されているクラスpostidlinkをトリガーにする
   $('.postidlink').each(function (index) {
      var linkElement = $(this);
      // そのあとに<div class="qpost-番号">を加える。
      // qpost=QuotePostです。クラス部分はお好みで変更
      var newDivElement = $('<div>').addClass('qpost-' + (index + 1));

      // リンク要素の後に新しい div 要素を挿入
      linkElement.after(newDivElement);

      var linkURL = linkElement.attr('href');

      $.ajax({
         url: linkURL,
         type: 'GET',
         dataType: 'html',
         success: function (html) {
            var tempDiv = $('<div>').html(html);

            // リンク先から取得した内容から<div class="comment">のテキストを抽出
            // comment以外のクラス指定の場合はfind('.comment')の部分を書き換え
            // プレーンテキストで表示する場合は.html()を.text()に書き換え
            var commentContent = tempDiv.find('.comment').html();

            // 加える文字列を制限して100文字までに切り詰め
            // 省略する場合は省略記号...を追加
            var maxLength = 100;
            var limitedContent = commentContent.length > maxLength ?
               commentContent.substring(0, maxLength) + '...' :
               commentContent;

            // 新しい div 要素にリンク先の内容を追加
            // プレーンテキストで表示する場合は.html(略)を.text(略)に書き換え
            newDivElement.html(limitedContent);
         },
      });
   });
});
</script>
上記はhtmlの内容を表示します。プレーンテキストで表示したい場合は、コメントに記載の通りに書き換えてください。
また、<div class="comment">で情報を取得している部分がありますので、[[COMMENT]] を別のクラスで囲んでいる場合は、そのクラス名に正しく書き換えてください。

引用部分を装飾するCSS（例）
a.postidlink + div {
margin: 5px 2px;
padding: 8px 10px;
background-color: whitesmoke;
color: dimgray;
font-size: 0.8em;
border: dotted 1.5px gray;
border-radius: 5px;
}
上記のCSSは例なので、お好みで装飾を加えてください。
このままコピペで使っていただいても大丈夫です。（その場合も使用報告等不要です）
畳む

【参考リンク】
今回作成にあたって、10press（えむおか様）の記事を参考にさせていただきました。
記事のタイトル部分をhead内のtitleに記載する方法や、前後ページの移動リンクに置き換える方法など、ページの表示に役立つ情報が載っていますので、ぜひご覧ください、
（本文一行目をクラスの指定など、異なる部分が多くあります。ご利用状況に合わせて、必要なものは違うかと思いますので、そのあたりは自己判断＆自己解決していただければ…。）
※当記事で公開している情報に関しての10press（えむおか様）へのお問い合わせはやめてください。

また、今回の内容と別の表示をしたい、という方は、配布されているCMSkin を
CMSkinはトップページ・作品展示・コメント返信…などでさまざまなスキンを使い分けることができ、また記事の引用以外にも多くの独自実装があります。

小さいパーツとして記事の引用を使用する方は、こちらのソースをご利用くださればと思います。
どんなスキンにも使えるパーツがほしくて作りました。
（将来えむおか様がパーツとして配布・ソースを公開される場合はそちらを使われたほうがいいと思います。~~多分私もそうします~~）

注釈：独自タグ[[JS:LIGHTBOX:JQ]]について
上記記事でも言及されていますが、[[JS:LIGHTBOX:JQ]]ページ内に画像が表示される場合のみ読み込むそうです。
今回の場合ですと、記事内に画像がない場合、正常に機能しなくなります。
詳しくはてがろぐ公式（にしし様）に解説がありますので、ご確認ください。
https://www.nishishi.org/testground/tega...

【展示】skin-tako-5

【概要】

展示のみ
状況によって表示が変わるスキン
モノクロ・シンプル
確認バージョン：てがろぐ Ver 4.0.4

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

以前は配布していましたが、一度配布zipを取り下げています。現在お使いの方はそのまま使っていただけます。

【スキンについて】
大きく分けて、汎用スキン・トップページ・疑似フレーム・目次（小説作品の展示を想定）の４種類を、class="[[SITUATION:CLASS]]"で切り分けて表示を変更しています。

メニューについては、4つの方法を想定しています。
スキン（skin-cover.html）に直接記述する
フリースペースを[[FREESPACE]]で挿入する
メニュー用の記事を作成し、[ONEPOST:●●]]で記事を挿入する
メニュー用のファイルを作成し、[[INCLUDE:ファイル名]]で挿入する

【展示】skin-tako-4

【概要】

展示のみ
携帯サイトのリアルタイム日記スキン風
確認バージョン：てがろぐ 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

【展示】skin-tako-3

【概要】

展示のみ
縦書き
作品展示向けスキン
一覧ページはタイトルのみ表示
確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる
一覧表示

記事（長文）
記事（短文）

【スキンについて】
日記・ブログ向きではなく、小説作品展示向きスキンです。
　フォントはGoogleFontsから「ひな明朝」を使用しています。
　テーマは「投稿ページをスクショに撮ってTwitterに投稿できる」ということで、1画面で完結する構成にしています。
　文章作品のスクリーンショットをサンプルとして、続きの文章を自サイトにリンクする、という使い方ができるかと思います。
　私は短歌を詠みたくて作成しました。
　カテゴリやタグのリストを表示させてても面白いと思います。
ヘッダーのURLはてがろぐホームのURLタグを使っていますが、直打ちで自サイトのURLを入れるのもいいかなと思います。

全体表示と投稿単独ページのCSS切り替えについて
　記事一覧だとシンプルなリスト表示ですが、投稿単独ページでは縦書きで表示されます。
　短文の場合は画面の中心あたりに内容が表示されます。
　長文の場合は横にスクロールできます。
　┗てがろぐ公式：▼一覧表示時と単独表示時とで適用デザインを分ける方法
　上記の説明通りに、Ⓐ「記事一覧」とⒷ「記事単独」でHTMLとCSSを作っています。

　縦書きに表示する用のボックスを作り、writing-mode: vertical-rl;で縦書きにしています。
　┗参考リンク：MDN：writing-mode
　このボックスの縦横のサイズを決めて見た目を調整します。overflow-y: hidden;で縦（ｙ軸方向）のスクロールバーが非表示になります。
　横（ｘ軸方向）のスクロールバーは長文（枠からはみ出る）とき表示、短文（はみ出ないとき）は非表示です。
　overflow-xはoverflow-yがhiddenの場合初期値がautoになるので指定してないです。これでうまくいってると思うのでこのままですが、正しくはどうすればいいのかわかりません。。。
　鍵付きの投稿は入力欄と送信ボタンが横書きに固定みたいなので、説明欄も.passkeyguide{writing-mode: horizontal-tb;}で適当に縦書きを解除しています。
鍵付き投稿のサンプル

スキン独自の装飾について
　３点実装しています。おおよその機能についてはこちらを確認してください。
　┗てがろぐ公式：▼class名を自由に指定できる装飾記法

　①dai　文字を大きく・太くします。また、行間の幅を広げて題名っぽい感じにできます。
　　　　.deco-dai{font-size: 3em; font-weight: bold; line-height: 5em;}
　②yoko　縦中横の設定です。半角文字（!?とか123）を縦向きにする装飾です。スキン３での表示でしか適用されません。
　　　　.deco-yoko{text-combine-upright: all;}
　　半角文字も含めて縦書きにするならあんまり使わないかもしれませんが個人的に「通常、半角の文は横向き」「特定の文字だけ縦に並べる（縦中横にする）」という使い方が好きなのでこのようになりました。
　　┗参考：日本らしさを表現！CSSで文字の縦書きに挑戦！
　③owari　指定した文字列の前に適当に空白を入れます。空白と言いつつ、白背景に白文字を入力して見えなくしているだけなのでもっといい方法があるのかもしれないけどわかりません。
　　　　.deco-owari:before{content: "ここに適当に文字を入れる"; color: white;}

【使用フォント】
GoogleFonts - Hina Mincho

【展示】skin-tako-2

【概要】

展示のみ
偽横タブ型
白黒・赤アクセントカラーのシンプルスキン
確認バージョン：てがろぐ Ver 4.0.4

試しに見てみる

【スキンについて】
左サイドバーはheight100%のボックスをposition:fixedで固定しています。skin１のような、同じページ内に内容を表示するタブ型ではないです（ページが変わります）
（もうちょっといいやり方があるのかもしれません。。。）
　一番上のリンクはホームに戻るリンク、その下は[[CATEGORY:TREE]]を挿入しています。

外側スキン[[CATEGORY:TREE]]の装飾について
　　①まずは見た目を安定させるため、第２階層以降を非表示にします。公式説明に従って.depth2 { display:none; }を記述します。
　　　　┗てがろぐ公式：カテゴリの第1階層だけを表示させる方法
　　②付箋っぽくしたいので、サイドバーの右側、カテゴリーの各リンクをボーダーで適当に囲います。
　　③「○○のカテゴリを表示すると、○○のボタンの色が反転する」という装飾をします。
　　　公式説明に従って<body>とかにclass="[[SITUATION:CLASS]]"を指定します。
　　　　┗てがろぐ公式：そのときの表示状況に応じてページデザインを切り替える方法
　　　これでカテゴリ名に対応したカテゴリIDをクラス名として持つページができます。
　　　<body>に指定しているのでページ全体の背景を変更したり、自由なカスタマイズが可能です。
　　　（これでできる方にはできると思いますが、管理人自身が忘れないためのメモ的説明です。多分もっと簡単でちゃんとした方法があると思います…。）
　　　今回は『カテゴリ名「共通内容」カテゴリID「cat1」というページを表示したとき』に装飾をしたいので、
　　　　.selected-cat.cat-cat1 .catlink.cat-cat1 {～～}
　　　というような記述をします。
　　　.selected-cat.cat-cat1はcat1を表示したときに[[SITUATION:CLASS]]に出力されているクラス、
　　　.catlink.cat-cat1はカテゴリツリーのcat1に付与されているクラスです。
畳む
　　④縦書きにします。（ここは好み）　writing-mode: vertical-rl;
　　⑤box-shadowで右に水平に5pxくらい伸ばして付箋っぽくします。そのほか、適当に好みの形に整えて終わりです。

CSSだけでページ内移動をなめらかにする方法
　html { scroll-behavior: smooth;} を記述
　Javascripttとかわかる方はこれ以外の方法でもできると思います。

【参考リンク】
CSSでページ内リンクをなめらかにスクロールする