![[PukiWiki]](image/logo.webp "[PukiWiki]"){kind=logo}
#author("2024-02-18T05:47:02+09:00","","") #author("2025-01-29T19:26:43+09:00","","") Wikiアプデの際に生まれた副産物の配布および紹介が主なページ。続 Wikiカスタムにあたってのメモも記述 ----- この項目のそれは全てUTF-8が前提、且つ1.5.3以降＋PHP7系でしかテストしていません 旧環境およびPHP8環境だとエラーを吐く可能性もあります。利用は自己責任で ----- TFFAC時代：[[PukiWiki備忘録:https://www.tffac.wiki/?PukiWiki%E5%82%99%E5%BF%98%E9%8C%B2]] ----- #contents *配布 [#te035e4b] **PukiWiki 1.5.4向けのスキン [#b806cc74] ***名称 [#xd2fd657] ff …「フォルティッシモ」です。エフエフではありません。ホントウデス 商標対策ヨシ！ ***使い方 [#m851f7a5] +ionicons v2一式を[[外部の専用ページへ:https://ionicons.com/v2/]]からダウンロード、解凍 +スキン一式を[[添付ファイル一覧:https://t-fbl.wiki/?plugin=attach&pcmd=open&file=ff.zip&refer=PukiWiki%E5%82%99%E5%BF%98%E9%8C%B2%E3%83%BB%E7%B6%9A]]よりダウンロード、解凍 +skinchg.phpのみディレクトリの最上層に置き、残りはskin直下へ投下 +同梱の改造済プラグインは使うならpluginの同名ファイルと置き換え。使わないなら削除 +これでOK。後述するOGPはアップロード後、一定時間が経ってから反映されます ***収録内容 [#cc5ff417] -pukiwiki.skin.php --ff本体 -pukiwiki.css --ff専用CSS -pukiwiki-sp.css --ff専用CSS。スマホ／タブレット用 -skinchg.php --疑似PC表示固定機能。Cookieを利用しページ最上部のトグルアイコンでON/OFFを切り替える -smooth-scroll.js --スムーズスクロール用。jQuery呼び出しは不必要。再配布 -改造版のpcomment.inc.php --後述する改造が面倒・分からない人向け。必要無い場合は適宜削除 ***通常のスキンとの違い [#df56d467] -Milligramのソースを一部流用したFlexbox仕様でレイアウトを再構築 -Ioniconsを利用して編集者向けメニューをアイコン化 -デフォルトスキンよりレスポンシブ対応を強化、PC表示固定機能も搭載 -PC表示時のみページタイトル下に簡易検索窓搭載 -後々カスタマイズしやすくする為、無駄な隙間は悉く撤廃 ***TFFAC版スキンとの違い [#bc14a539] -OGP対応。Twitt…XでURLを入力するとカードっぽいのが出てくるアレ。ON／OFFの切り替え可能 -&color(Red){pcommentのラジオボタン周り調整};(要プラグイン改造なのでデフォルトではCSSの一部をコメントアウト。補足で解説) -Wiki最下部の著作権表記をほぼスキン側で管理。00が従来のPukiWiki用、01が追加用 -font-familyを Meiryo,Verdana,sans-serif; に変更、統一 -文字サイズ指定方法・配色・マーカー・注釈位置などの一部見直し -大きい表への対処は overflow-x:auto; に丸投げ。状況に応じて横スクロールさせる形 -input周りのレスポンシブ対応が甘かったので修正 -これらの影響で以前は多少配慮していたCSS3非対応環境を完全に切りました -また、以前ほど沢山の環境でテストしていません。もう手元に無い物もあるし… ***ライセンス [#a42cfdf3] スキン本体と専用CSSのライセンスは[[PukiWiki本家:https://pukiwiki.sourceforge.io/?PukiWiki/Install/%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6]]に準ずる形 再配布している同梱物(smooth-scroll.js)はMIT ***以前と同様の注意事項 [#x095fc9d] 当Wikiの見出し横に付いている編集用鉛筆マークは改造版%%paraedit%% secedit由来 故に配布中の専用スキンにデフォルトでは付いていません。あしからず また、デフォルトで想定しているサイズは横幅1280まで それ以上だとブラウザの中央配置となり周囲に余白が生まれます。ごりごりにカスタマイズする方は適宜変更を 右上のロゴ枠は自分で用意してください。一応バナーを置く事を想定した設計 ***以前と同様の対応を投げた箇所 [#ef74ee83] 2K以上のディスプレイ対応と4インチ未満の端末サポート。後者は初代iPhone SEが対応の境目 %%2K%%WQHD以上のディスプレイ対応と4インチ未満の端末サポート。後者は初代iPhone SEが対応の境目 iOSのPC向け表示時における文字入力時の自動拡大。iPadも考慮すると縦対応はともかく、横持ち対応は現実的でない ***補足 [#g27ccfc6] #region(OGP用の画像ってどこに入れればいい？サイズは？それとTw…X以外には対応してる？) +PukiWikiの本家ロゴが置いてある場所、つまりimageです。デフォルトではogp.png指定(変更可) +デフォルトでは小さい方を指定しているのでアスペクト比1:1の角が丸いもしくは無い画像が最適 +Wikiを使う層には関係無いだろう、という理由で対応してません。T…Xの今後次第では改変の余地あり #endregion #region(pcommentのラジオボタン周り調整＋2行以上の文章を扱う為の改造例) pcomment.inc.phpを開き、まずは投稿フォームの文章側inputをtextarea化する。127行目辺りの $comment = '<input type="text" name="msg" size="' . PLUGIN_PCOMMENT_SIZE_MSG . '" required />'; を、以下に書き換え 任意の数値は最小の方の文字数制限。このWikiでは荒らし対策として2にしている これだと一行一文字を繋げる遊びが出来なくなるのでまあ一長一短。あなたはお好みで数値を入れてもいいし入れなくてもいい $comment = '<textarea name="msg" minlength="任意の数値" maxlength="' . PLUGIN_PCOMMENT_SIZE_MSG . '" required></textarea>'; #br 次にその少し下にあるinput群を少し弄る。EOD;直前の <input type="hidden" name="count" value="$count" /> $radio $title $name $comment <input type="submit" value="{$_pcmt_messages['btn_comment']}" /> </div> EOD; を、以下に書き換え なおここはフォームの配置に関わる所なのでそのままでもいい、という場合は触れなくてもよし textarea化するならコメントだけ別の行にした方が使いやすいのでは？という判断で変更している <input type="hidden" name="count" value="$count" /> $radio $title $name <input type="submit" value="{$_pcmt_messages['btn_comment']}" /> $comment </div> EOD; #br 次に209行目辺りの $msg = str_replace("\x08" . 'MSG' . "\x08", $msg, PLUGIN_PCOMMENT_FORMAT_STRING); $msg = str_replace("\x08" . 'NAME' . "\x08", $name, $msg); $msg = str_replace("\x08" . 'DATE' . "\x08", $date, $msg); を、以下に書き換え n{7,}の部分は必要な処置＋荒らし対策。一定以上の空白改行を無視する役割 この場合、文章中の連続空白改行は5行まで許される。6行分以上続くとその部分の空白改行が無効化。指定値-2が上限と思っておけばいい $msg = str_replace("\x08" . 'MSG' . "\x08", preg_replace("/\n{7,}|\n/", "&br;" , $msg), PLUGIN_PCOMMENT_FORMAT_STRING); $msg = str_replace("\x08" . 'NAME' . "\x08", $name, $msg); $msg = str_replace("\x08" . 'DATE' . "\x08", $date, $msg); #br 最後に終わりの方にあるラジオボタン用の記述を変更 // Add radio buttons if ($reply) $comments = preg_replace('/<li>' . "\x01" . '(\d+)' . "\x02" . '(.*)' . "\x03" . '/', '<li class="pcmt"><input class="pcmt" type="radio" name="reply" value="$2" tabindex="$1" />', $comments); を、以下に書き換え 今回配布のCSS的にはここが一番重要。ここをきっちり書き換えないと追加部分が正常に機能しない ここの書き換えが終わった後に配布スキン用CSSの最後にあるadjust - pcommentのコメントアウトを外そう // Add radio buttons if ($reply) $comments = preg_replace('/<li>' . "\x01" . '(\d+)' . "\x02" . '(.*)' . "\x03" . '/', '<hr><li class="pcmt"><label for="pcmt_$1" class="pcmt"><input id="pcmt_$1" type="radio" name="reply" value="$2" tabindex="$1" /></label>', $comments); #endregion #region(なんでVerdana→メイリオじゃないの？) 両方使えるWindows環境下だと前後の文に左右されて英字表記が安定しなかった為、やむなく 同じSwitch表記なのに次の行では文字の間隔が違ったりする謎ブレの原因が最後まで特定出来ませんでした カウンターの数字表記はVerdanaの方が好みだった… ので、size系のプラグイン改造でなんとかしたい所… AndroidのVerdana＋機種依存だと可読性は普通なのでなおさら謎 現環境がiOSおよびメイリオが入っている環境のMacでどうなってるかは未確認 #endregion #br *コメント [#mf4be8ad] #pcomment(./コメント1,below,reply,30)