HOKAN

hokanで使用できるビューア　見つけたら随時確認していきます
起動スクリプトの表記はJS初心者が書いてるので不確実ですが、試してみたら動いたので多分いけます

動作確認済ビューア
☑Lightbox(てがろぐ標準)
☑fancybox(3系)
☑Spotlight

☑baguetteBox
→起動スクリプトが
<script>window.onload = function() { baguetteBox.run('任意のクラス名');};</script>
になっていれば大丈夫だと思います　メインになるエリアか記事一つを囲むクラス名を設定しておいてください　「画像リンクに独自のclass属性値を追加」だとスワイプできないっぽい

☑Luminous
→起動スクリプトが
<script>
window.onload = function() {
new LuminousGallery(document.querySelectorAll('任意のクラス名')
);};
</script>
になっていれば大丈夫だと思います　これは「画像リンクに独自のclass属性値を追加」でOK

☑Magnific Popup
→起動スクリプトが
<script>
window.onload = function(){
$('任意のクラス名').magnificPopup({
type: 'image',
gallery: { enabled:true}
});
};
</script>
これもLuminousと同じで「画像リンクに独自のclass属性値を追加」

☑GLightbox
<!-- ↓非表示にした画像をリンクごと消す処理 -->
<script>～</script>
という部分をGLightboxの起動スクリプトの前に移動してみてください


□fuwaimg→少し格闘してみたのですが、今の管理人のjsぢからでは満足いく形に実装できなかったです…すまない…


(あとはだいたい起動スクリプトが「window.onload = function()」になってれば大丈夫じゃないかな…)


以下hokanの作りの説明
続きを読む
「hokan」は一覧用と単独記事用の表示を用意して、状況別にどちらかを非表示にすることでデザインが切り替わっているように見せているスキンです。そのため、非表示にした画像をビューアが拾って表示してしまうことがあります。
24/07/14の更新でIF文対応したことにより、非表示にした分のhtmlを出力しなくなったので大部分は大丈夫になったのですが、トップだけは先頭固定を残すためCSSで切り替えています。
「skin-cover.html」の末尾<!-- ↓トップで非表示にした画像を記事ごと消す処理 -->で非表示部分を無効にしていますが、この処理が働くより起動が早い画像ビューアには対応できず…申し訳ありません　一応見つけたビューアは確認してみました
畳む

カスタマイズ　前>>

※カスタマイズはバックアップとってから始めるといいです

※リトルサーバーお使いの方、WEBマネージャーから直接ファイルを編集すると\(半角バックスラッシュか¥)が消える問題があるようです　基本ローカルのテキストエディタとかで編集してアップするのがいいと思います

・ヘッダー画像の変え方→管理画面の「画像の管理」 から「tega_header.png」という名前の画像をアップする、もしくは「images」フォルダ内にそのまま入れる
「設定」→「システム設定」→「画像投稿機能」で「元のファイル名をできるだけ維持する」になっているか確認してください
(横縦4：1の比率で表示されます　1000px ✕ 250pxくらいが最大値です)
ファイル名や画像の種類を変えたい場合は「skin-cover.html」の43行目あたりの「ヘッダー画像」に設定があります

・全体配色の変え方→「tegalog-hokan.css」12行目あたりからの「カスタム用色変更欄」のカラーコードをいじってください

・メニューの増やし方→「skin-cover.html」の29行目あたりからのメニュー部分に<li>タグで囲んだリンクを付け足してください(文字でもRemixIconのアイコンでも)長くなったメニューはスマホでは横スクロールできるようになってます(なってるはずです)(なっててくれ頼む)
RemixIconの使い方はLineAwesomeとほぼ同じです(検索した方がちゃんとした説明が見つかるはず)

・見出しなどのフォントの変え方
Google Fontsの使い方はググれば出てくると思うんですがスキンの設定としては、「skin-cover.html」15行目からフォントの読み込みを、「tegalog-hokan.css」25行目あたりの「タイトルなどのフォントの名前」でフォント名の指定をしています　ここを上書きしてください

一覧デザインの切り替え方
「omake」フォルダには、一覧の別デザインcssファイルが入ってます

↓「ichiran-mozi.css」…画像なし文字リンクのみの一覧デザイン


↓「ichiran-e.css」…画像大きめの一覧デザイン


デザイン切り替え方は、「skin-cover.html」と同じディレクトリに「ichiran-mozi.css」か「ichiran-e.css」のファイルを入れ、「skin-cover.html」14行目あたりの
<!-- ↓一覧デザイン読み込み -->
<link type="text/css" rel="stylesheet" href="ichiran.css?ver=1.0.0">
の「ichiran.css」を「ichiran-mozi.css」か「ichiran-e.css」に書き換えてください

・「ichiran-mozi」で抜粋文の字数を変えたい→「skin-onelog.html」11行目くらいの[[COMMENT:BODY:50]]ってとこの数字を変える
・抜粋文に(画像省略)って表示されるの消したい→「設定」→「ページの表示」→【投稿本文の表示／画像】の「▼画像が省略される場面での表示」

・カテゴリごとにデフォルトサムネや横の線の色を変えたい
「ichiran(-e).css」の末尾に以下のように付け足します
.ichiran.カテゴリID .NoImageError { background-color: 好きな色;}
.ichiran.カテゴリID .NoImageError::before { content: 'アイコンの番号';}

カテゴリなしとかデフォサムネ全部を変える場合は、/* 記事に画像がないときのサムネ */のところの
.NoImageErrorのbackground-color、.NoImageError::beforeのcontentを同じように変えてください
contentには文字とか記号とかも入れられます

「ichiran-mozi.css」の場合は
.ichiran.カテゴリID { border-color:好きな色;}　でOKです

※鍵投稿は何のカテゴリでも鍵サムネになります


<<次 Lightbox以外の画像拡大ビューアを使用する場合 / おすすめ設定 前>>

・「設定」→「システム設定」→【管理画面内の表示】→「投稿削除・カテゴリ削除ボタンを右寄せで表示する」にチェックを入れておいた方が絶対にいい　これはマジ

・これは好みもありますが、画像のファイル名を英数字で付けている人は「設定」→「システム設定」→【画像投稿機能】→「元のファイル名をできるだけ維持する」にチェック入れておいた方が使いやすいと思います

・「設定」→「投稿欄の表示」→【投稿入力欄の表示と動作】から、クイックポストや投稿画面の入力欄の大きさが変えられます　管理人はここをcssでいじろうとしてハマった

・「設定」→「投稿欄の表示」→【QUICKPOSTの表示】で「ログインしている際にのみ表示する」にチェックを入れると、クイックポストや各記事編集アイコンなどがログイン時のみ表示されるようになります

・鍵投稿のタイトルは「設定」→「ページの表示」→【鍵付き(パスワード保護)投稿の表示】→「本文の1行目だけは常に見せる」をONにすると記事タイトルになります
(※Ver 4.3.1以降、「本文の2行目も常に見せる」設定が可能になりました　2行目にタグや鍵投稿内容の説明文などが書けます)

・カテゴリ間のコンマ→「設定」→「ページの表示」→【カテゴリの表示】　好みで　何もなくてもちょっと隙間は空きます

・OGP「設定」→「補助出力」→【OGP＋Twitter Cardの出力】→「共通画像のURL」てがろぐURLをTwitter(X)にシェアすると出る画像の設定はここ　単独記事シェアしたときは記事一枚目の画像が出るはず


とにかくてがろぐはデフォで設定できる項目がたくさんあるので、「ここのデザインやシステムをもう少しこうしたい…」ってときはcssよりまず設定を確認してみるのがおすすめです

<<次 カスタマイズ　/　記事内の書き方と自由装飾　前>>

自由装飾
・「設定」→「投稿欄の表示」→【装飾ボタンの表示設定】から自由装飾ボタンをON(【文字装飾・リンク挿入機能の動作設定】から「事前に範囲選択していなくても各種記法を挿入する」もONにすると便利)

サムネリンクの書き方
・サムネイルから拡大
[F:thumb:[PICT:h_test01.png][PICT:h_test02.png]]
画像をthumbで囲むだけでOK

・サムネイルから1記事へ
[F:thumb:[[PICT:h_test01.png]]任意のURL]
画像を任意URLリンクにしてから外側をthumbで囲む
※(23/12/29)Ver 4.2.0から丸かっこ付きリンクや相対リンクなどの表記方法が増えました！詳しくは →公式ページのリンクの書き方 をご参照ください
※上記のアプデにより単独記事リンクは
[[PICT:h_test01.png]](./?postid=5)
こう書いてもいけるっぽい


・midasi1
見出し1
→単独記事タイトルと同じ装飾にしてあります　1記事内でセクション分けたいときとかにどうぞ

・midasi2
見出し2
→見出し1より控えめな見出し

・omozi
→文字が若干大きくなる

・thumb
→画像サムネ並べる用　これで囲んだ画像は小さくなり、周りに余白が付きます
(※23/12/02：画面幅によって、サムネ横幅100px以下になるといい感じに自動で折り返すようになりました)
(※24/07/14：画像タグごとに改行しても詰めて表示するようになりました)
(サイズを変えるには、「tegalog-hokan.css」669行目あたりの100pxって書いてあるとこをいじってください)

・lbutton
→リンクをボタン にする　[ボタン:CL(lbutton)]任意のURL

・novel
→小説本文用　本文表示幅が若干狭くなり、行間も若干広がります　ここにwebフォントとか指定してもいいかも

・tate
→小説本文用　縦書きになります(明朝体フォントが入っている環境なら明朝体になります)　もちろんwebフォントとか指定してもいい　>>サンプル

・sen
　
→仕切り線が入ります　スペース一個を囲むといい感じに上下に余白ができます

・center
→中央寄せ

・right
→右寄せ

・box1
→ぶきや　ぼうぐは　"そうび"　しないと　こうかがないぞ！

↑の自由装飾の記述は「tegalog-hokan.css」の後ろの方にあります　お好きにいじってみてください

★自分で自由装飾を作る
・基本「.deco-◯◯」の名前でcssを書き、自由装飾記述で「◯◯」の名前で囲むだけです
・公式ページが一番詳しく説明してくれているのでこちらを読んで頑張ってください
→自由装飾(class名を自由に指定できる装飾記法) (てがろぐ公式ページ)

・自分で作ったcssはスキン本体ではなくフリースペースのcssに書いとくと便利です(「上書きスタイルシートを出力する対象」を「すべてのスキンに対して強制出力する」とかにしておくといいと思います)

<<次 おすすめ設定　/　基本の使い方　前>>

・内容
「skin-cover.html」…外側スキン
「skin-onelog.html」…内側スキン
「tegalog-hokan.css」…主なデザイン
「ichiran.css」…記事一覧画面のデザイン(他CSSファイルと入れ替えることでデザイン切り替えができます)
omakeフォルダ…→「>>カスタマイズ」で説明しています
├「ichiran-e.css」…絵が大きめの一覧デザイン
└「ichiran-mozi.css」…絵なし小説向けの一覧デザイン

→スキン適用の説明 (てがろぐ公式ページ)
※CGIと同じディレクトリにスキンファイルを置いておく標準適用をおすすめします(サブディレクトリに入れとく場合でも、特に問題なければ大丈夫です)

「hokan」はCSSファイルを2つに分けているため、「skin-cover.html」、「skin-onelog.html」、「tegalog-hokan.css」、「ichiran.css」計4つのファイルで1セットになります

・記事投稿
★トップに出す記事→「先頭固定」
★作品記事→カテゴリを付ける

↑基本これだけです。一行目がタイトル、二行目以降が本文になります。(一覧のデザインによっては二行目以降50文字が抜粋文になります)記事内の画像の一枚目がサムネとして一覧に出ます。
小説の投稿は表紙絵を付けても付けなくてもお好みで

注※「続きを読む」で隠す記法で＜＞のやつが使えません(なんか本文をタイトルと2行目以降に分けるとそうなる仕様らしい)　普通に[H:]では隠せるのでそちらのみ使ってください

・先頭固定投稿はいくつでも好きな順番でできます　「設定」→「ページの表示」→【先頭に固定表示する投稿】より編集できます

・先頭固定もカテゴリ/タグも付けない投稿は全文検索とかで出ます　記事への直リンクを貼っても行けます　※更新履歴(新着投稿リスト)には掲載されます
→記事内リンクなどの書き方 (てがろぐ公式ページ)

・「下げる投稿」はデフォルトではカテゴリやタグから行ける一覧に表示されますが、「設定」→「ページの表示」→【下げた投稿の表示】から表示状況を変えられます　※更新履歴(新着投稿リスト)には掲載されません
「単独記事のみ表示」で記事への直リンクを貼れば隠しページとして使えるかも

・更新履歴(新着投稿リスト)は最新の投稿が勝手に出ます　表示スタイルは「設定」→「ページの表示」→【新着投稿リストの表示】から変えられます　このデモサイトの表記は「D…HC(日付/タイトルリンク/カテゴリ)」です(記号が使えるのでちょっとした装飾もできます)
特定のカテゴリだけ表示とかもできるみたいです
→新着投稿リストの掲載対象をスキン側で限定する方法 (てがろぐ公式ページ)

・フリースペースは「設定」→「フリースペース」から編集できます　htmlなので記事投稿の書き方とはちょっと違います　ここはhtmlのなんかを貼る必要があるときとかに使ってください　いらなければ「skin-cover.html」から該当部分(65行目あたりからの「フリースペース」)を消してください

・単独記事ページは「次へ/前へ」リンクが出ないので、続き物小説や漫画の次前リンクとかは自力で貼ってください…ごめん…

↓このリンクも手動で貼ったやつ
<<次　記事内の書き方と自由装飾