てんぷろぐ- Tegalog Skin Demo -

コミックビューワスキンを追加しました。#サンプル

コミックビューワスキンを追加しました。#サンプル
 
スクリプトはlaymic を利用しています。
カテゴリ一覧からカテゴリID「comic」を含むリンクに飛ぶとコミックビューワスキンで開きます。別スキンにするとページ移動に難があるのでメインスキンに統合しました。カテゴリIDに「comic」という文字列を含むカテゴリに属した記事にビューワを開くボタンが表示されます。
投稿本文では添付した画像一枚目のみが見えるようになっています。

novel viewer を導入してみました。

novel viewer を導入してみました。
現在配布しているスキンへ記述はありませんが、導入に必要なスクリプトやCSSの読み込みも動的に行うことにより、小説カテゴリに属する記事単体表示のみになっています。配布元のespace さんの利用規約により、拙作スキンファイルへのnovel viewer自体の同梱は致しません。

ギャラリーモードスキン2種

ギャラリーモードスキン2種
最初の画像一枚だけ＆記事単体ページへのリンク
https://10prs.com/tegalog-cms/?mode=gallery
記事内の画像全部見せ＆その場でLightbox表示
https://10prs.com/tegalog-cms/?mode=gallery&skin=skin-gallery/all
CSSもなんとなく整理したので使い方書いたら配布開始します🙄

mp3・mp4の本文内埋め込み表示に対応しました。

mp3・mp4の本文内埋め込み表示に対応しました。

てがろぐで上記の種類のファイルをアップロードするにはまず
管理画面＞システム設定＞アップロードを許可する画像形式でmp3、mp4を追加が必要です。
そのあとは普通に画像を投稿する手順で本文に入れます。


甘茶の音楽工房 からお借りしています


らぼわんの無料動画素材 | 結婚式から誕生日まで。自作ムービーをおしゃれに！  からお借りしています
#サンプル

本日以下を修正・追加しました

本日以下を修正・追加しました

• グローバルナビ以外の小説カテゴリリンククリック先もサイトマップモード時系列表示
• クイックポストフォームに画像一覧を開くボタン追加
• 小説カテゴリに投稿した本文内で区切り文字を自由装飾「hr」で囲んだ時にページ内リンクを生成
  • 例はオツベルと象 第一日曜 - CMSkin for てがろぐ をご覧ください

【JavaScript】セパレータごとにページ内リンクを自動生成する方法｜未花月葉｜note を参考にさせていただきました。

「CMSkin for てがろぐ」機能追加はひと段落とします。
ひとまずベータ版としてでも配布開始する時期をGW付近目指してソースの整理や使い方解説書きを始めます

記事ナンバーリンクの表示

記事ナンバーリンクの表示
記事ナンバーリンクのポップアップを改良しました。以下#サンプル です。

>>16：
クリックでポップアップ表示、ポップアップ領域外をクリックで非表示します。
記事ナンバーリンクを装飾ボタン「引用」でくくると
>>1：
記事本文内に読み込みます。
ここはHTMLタグ反映しない状態で表示したかったんですが現時点では方法がわかりません…
普通の文字列として取得・表示はできましたが1ページ内に複数あると最後の記事リンク先内容で上書きされてしまいます、要改善😑できた～！
>>25：
記事リンクが右端のほうだと　　　　　　　　　　　>>17：

複数記事リンクには対応していません（ページ遷移します）。
>>1,2,3

ねる

ねる

• パンくずリストのoverflowあたり（スマホなどで最下層溢れて見えなくなってる）
• 独ドメメール受信できてない悪寒、要対処

#試行錯誤

これは#独自装飾 の#サンプル 文章です。

これは#独自装飾 の#サンプル 文章です。

斜体をさらに斜めに … 「斜体（Italic）」ボタンで2回囲っています
さらに打消し …「取り消し線（Delete）」ボタンで2回囲っています

マウスホバー・タップでぼかしを解除 … 「〇（自由装飾）」ボタンで「bokashi」と入力したもので囲っています。

縦長画像を入れた投稿です。

縦長画像を入れた投稿です。
長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　

画像を入れた投稿です。

画像を入れた投稿です。

長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト　長文テスト
　
画像を「隠す」に入れることもできます。
続きを読む

畳む

これは各種埋め込み#サンプル です。

これは各種埋め込み#サンプル です。

ツイッター（現𝕏）

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

インスタグラム

（Instagram埋め込み処理中...）Instagramで見る

YouTube


Spotify

これは標準の装飾ボタンによる装飾の#サンプル 文章です。

これは標準の装飾ボタンによる装飾の#サンプル 文章です。
強調　Bold　斜体　下線　打消し　小さい　極小さい　漢字(ルビ)

これは引用のデモです。
間もなく洞穴へ帰って来た子狐は、
「お母ちゃん、お手々が冷たい、お手々がちんちんする」と言って、濡れて牡丹色になった両手を母さん狐の前にさしだしました。母さん狐は、その手に、は――っと息をふっかけて、ぬくとい母さんの手でやんわり包んでやりながら、
「もうすぐ暖くなるよ、雪をさわると、すぐ暖くなるもんだよ」といいましたが、かあいい坊やの手に霜焼ができてはかわいそうだから、夜になったら、町まで行って、坊やのお手々にあうような毛糸の手袋を買ってやろうと思いました。
https://www.aozora.gr.jp/cards/000121/files/637_13341.html

これは隠す機能のデモです。続きを読むこれは隠す機能のデモです。これは隠す機能のデモです。これは隠す機能のデモです。畳む
さらに隠す機能のデモ。続きを読むあいうえおかきくけこさしすせそたちつてと。一生懸命書いている。
ド素人が真心を込め一文字一文字手打ちした逸品です。畳む

動作確認環境

動作確認環境
当サイトで展示しているスキンは

• てがろぐ Ver. 4.3.0 以降
• Javascript・CSSともに有効

の状態で想定通りに動作・表示ができます。動作・表示確認は以下でしています。

• Windows11 - Firefox・Edge・Vivaldi
• Android - Firefox・Google Chrome

その他の環境で表示したときの情報を求めています。

制作開始

制作開始
てがろぐをCMSっぽく使うためのスキンを作りたい

「#CMSkin for てがろぐ」小説の投稿方法

「#CMSkin for てがろぐ」小説の投稿方法
「CMSkin for てがろぐ」で小説を専用の表示で投稿する方法を説明しています。
「CMSkin for てがろぐ」はIDに「novel」という文字列を含むカテゴリに記事を投稿すると

• 小説用のデザインで記事が表示されます
• 2行目はあらすじや注意書きの扱いになります
  • 小説カテゴリをサイトマップモードで表示したときのみ見えますが
  • CSSの変更で記事単体表示時に見えるようにすることも可能です
• ので本文は3行目以下から始めてください

カテゴリにチェックを入れるのを忘れないように注意（自戒）