藍鼠 @ainz_fav 3年以上前 てがろぐスキンカスタマイズメモ スキン配布元:https://www.nememori.info/blog/tegalog-s... Twitterっぽ~い!ってテンションあがったのでスキンを適用しました。配布ありがたい。 アイコンとか「@ユーザ名」とかTwitterに寄せた。新しく用意するのが面倒だったので… ヘッダ画像は前に3DMV録画したときのやつです。プレパス衣装の鬼っ娘の角はいいぞ 画像表示用モーダル変更 画像表示のモーダルはデフォルトだと「GLightbox」だけど、挙動は「Fancybox」が好きなので変更。 Fancyboxの設定方法はてがろぐ公式でも案内されてる のでお手軽。ほんとはWordPressのもFancyboxにしたいところだけどプラグインで出てくるのはなんか違う… 基本的には配布サイトさんの案内にしたがって設定。いいねとシェアはなくていいかなと思ったので未実装。 assets/footer.htmlの[[JS:LIGHTBOX]]を削除skin-cover.htmlの</body>直前に[[JS:LIGHTBOX:JQ]]を追加 スマホ限定設定(本文の左右余白)追加 あとはスマホで見たときに左右の余白が欲しかったからcssの一番下に記述追加 @media screen and (max-width:480px) { /* 画面サイズが480px以下の場合ここの記述が適用される */ .onelogbox { padding-left: 20px; padding-right: 20px; } } てがろぐへのリンク指定をフォルダに 新規設定でログ移植したので、いままで「cgi」へのリンクしてなかったよな…?ってところも調べないといけなかった…忘れすぎである https://www.nishishi.com/cgi/tegalog/faq... 「.htaccess」ファイルね~なるほど~、確かに作ってあったわ…… 追加:時系列順リンク カテゴリとかタグ選択したときに、時系列順に並べるリンクが欲しかったので追加 「skin-cover.html」の65行目あたりにある記述がカテゴリ「(カテゴリ名)」[nn件] <div class="info f6 ttl mv3 ph2"> <span class="whereami v-mid">[[SITUATION]]</span><br> </div> ←このアイコンフォントは<div>のほうのクラス設定でついてるみたいだから、<div></div>を増やして、デフォスキン参考にしてリンク貼る <div class="info f6 ttl mv3 ph2"> <span class="whereami v-mid">[[SITUATION]]</span><br> </div> <div class="info f6 ttl mv3 ph2"> <span class="whereami v-mid"><a href="[[REVERSE:URL]]">今の表示を[[REVERSE:NAME]]で見る</a></span> </div> 追加:ロード中(?)の青丸削除 読み込み中なのか謎ですが、数秒間画面の中央で青い丸が表示されるのうっとうしかったので、「skin-cover.html」からそれにあたると思われる記述を削除 <!-- loading screen --> <div class="loading"> <div class="lds-ripple"><div></div><div></div></div> </div> 削除してサクッと表示されるようにはなったものの、他のタブ切り替えやらハンバーガーメニューがうまく動かなくなったので一旦戻した。JavaScript色々使ってて思ったよりややこしい作りになってた 「lds-ripple」がなにかしてんのかねえ… 追加:投稿日表示 skin-onelogを編集 Twitterライクの「○時間前」は数字が大きくなるほどいつなのかわからなくなるから、詳細日付も見えるように追加。 ついでに「・編集」の「・」にリンクついちゃうのなんか嫌だったので編集ボタンは日付のほうに移動 COMMENTから下の<div></div>が追加した部分。もともとの編集用リンクはコメント化 <div class="comment lh-content f5"> [[COMMENT]] <div style="font-size:smaller;text-align:right;"> <a href="[[EDITURL]]" title="No.[[POSTID]]を編集" class="Login-Required">[編集]</a> [[DATE:Y/M/D(b) h:m:s]] </div> </div> #てがろぐ
藍鼠 @ainz_fav 3年以上前 てがろぐ用の素敵なスキンを見つけたので適用!!!! レスポンシブなのもありがたい 太陽マーク押すと月に変わる&ナイトモード(?)になるの画期的 横の余白はもうちょっとほしい あとで調整したい #てがろぐ
藍鼠 @ainz_fav 3年以上前 うえーい。倉庫もだいたいできた! タイトル並べるだけにしようと思ったけど、シンプルだと抜粋が見えないからカプの状況わからん リストにした。アイキャッチは後追いで設定しようね
藍鼠 @ainz_fav 3年以上前 アイキャッチの見え方微妙すぎてカスタマイズいれないとなのかなあって思ってたけど、そもそも「文章」でアイキャッチ設定される想定してないっぽい? 1400×500推奨に従ってつくったのに、PCでみると正方形に切り取られるし抜粋の長さで拡大率変わるw よくよく読んだら推奨サイズは「固定ページ」用だった。インデックスとか作品一覧とか 小説一覧に設定しようかなっておもったけど、がっつりショートノベルていれちゃったからダメ あとで削除するかー
藍鼠 @ainz_fav 3年以上前 🔞タグだけ赤くしたいなって調べてみたけど、カスタム投稿タイプのタグ追加するときにクラス付与してないから難しそう まあ、EASELだとパス付きページは自動で鍵マーク付くからそっちで代用でいっか ページはだいたい整ったぞー あとはCSSであちこち調整かな。三点リーダはGoogleFontに頼る。部分指定めんどうだからもう全体的に適用しちゃう。
藍鼠 @ainz_fav 3年以上前 EASEL使ってて気づいたんだけど、私ダブルダッシュの代わりに罫線つかってたんだな……どうりで Pixivで繋がって見えるのは罫線だったからなのねw 直すかー。Pixivのほうは罫線のままにしておく。フォントこっちで決められないし繋がっててほしい
藍鼠 @ainz_fav 3年以上前 全体的なデザインはSWELLが好きだけど、小説サイトにしたいなって思うと、同人特化で作られてるEASELが強い 投稿日は出せないけど、カテゴリとタグ出してくれるのやっぱ便利 フォーラムありがとう… これ特定のタグだけ色変えたりできるかな。R18は赤にしておきたい気分的に
藍鼠 @ainz_fav 3年以上前 うーん。全件表示ができない ブログなら最大24件でもいいんだけど、小説タイトルはやっぱり全部1ページにおさめたいんだよなあ ショートコードとか別のカスタム必要か。助けてグーグル先生…
藍鼠 @ainz_fav 3年以上前 グーテンベルグ?ブロックのやつ、なかなか慣れないんだけど公式によるとそのうち完全移行ぽいからなあ 慣れるためにもSWELL触るべしだわ… ところでカテゴリーごとのページテンプレートつくりたいんだけどパーツ読み込みしてるあたり厳しいな? ブログ記事は日付表示して小説記事はまるっと削除したかったんだけども……まあいいか とりあえずローカルで整えてから実装よ freoも根強い人気らしくて、有志の人がPHP8対応版作ってくれてたから実装考えたんだけど、リトルサーバーでうまく設置できなくて挫折しました😉 なぜかローカルでも2個目の設置できなかったから、なにかしらが悪さしてるんだろうけど原因特定してまでfreoがいい!って熱意はない 軽いしなにがどこにあるのかはわかりやすいんだけどね。メルフォとか拍手プラグインなんかもあるし
藍鼠 @ainz_fav 3年以上前 ワードプレスのテーマ、いろいろ触ってみて数年前に勢いで購入したSWELLがいちばん自分の理想に近い 改行維持とか冒頭のスペース維持をプラグイン頼らなくて済むのもよい ところでSWELL購入時の60%オフ(だったはず)めちゃくちゃお得だった!過去の私グッジョブ!! いつのまにか認証ページのアドレス変わったぽくて再申請必要だったんだけど、数時間のうちに返信きたのもびっくりした。メール出したの20時だぞ……一人で開発してるぽいのに
藍鼠 @ainz_fav 3年以上前 ふたりとも、っていうときの“ふたり”がひらがななの拘りポイントなのかなあ できるだけ公式に寄せたいから、あえてなら直したいなあって思うけどさすがに書いたかどうかは思い出せん 気が向いたときにフォルダ内検索しようと思う
藍鼠 @ainz_fav 3年以上前 doさんの「ずぼログ 」(フォルダに入れた画像を自動で出力)を導入してらくがきまとめページを作ったよ。ポイピクとかくるっぷにも上げてあるけどサイトからはリンク貼ってなかったもんね らくちん! てがろぐ用のテンプレも借りてデザイン統一させたいvsカスタマイズめんどう…
藍鼠 @ainz_fav 3年以上前 彰こは+絵名のやつ地味に修正入れた。堪え性がないから書いてすぐ上げちゃうんだけど、少し時間あけて読み直すと直したいところちょこちょこ出る 次は私得トネリコパロかリクのどれか書きたい 高校生な二人書きたいしリクかなあ。着衣(制服)エロあたり?
藍鼠 @ainz_fav 3年以上前 久々に一人称で書いてる 一人称も楽しくて好き。ただ、三人称一元視点では使えた言葉が使いにくかったりするんだなあ…… これノメアキくん言う?言うかなあ?というか知ってる???みたいな
藍鼠 @ainz_fav 3年以上前 やりたいこと ・ここ(てがろぐ)の改装 ・ゲーム(ペゴはまだ購入迷ってるけどガレ魔女続きやりたい) ・リクエスト消化 ・パラレル詰め再録本準備 ・去年のポッキーネタ文章化
藍鼠 @ainz_fav 3年以上前 ツイッターのプロフィールから詳細プロフィールにリンク貼ってたけど、POTOFU は文字数制限で微調整が必要だったのネックだなーって思ってて、せっかく自サイト(サーバ)あるんだからページつくりゃいいじゃん!!という今更の結論に至ったからつくった。もちろんテンプレ借りたよ! SNSアイコン並べてる部分は別のテンプレサイトさんのパーツだよ!Pixivもべったーもあるの嬉しい ついでだからお気に入りのカスプロスクショも並べた https://krkrp.com/vischio/prof/
スキン配布元:https://www.nememori.info/blog/tegalog-s...
Twitterっぽ~い!ってテンションあがったのでスキンを適用しました。配布ありがたい。
アイコンとか「@ユーザ名」とかTwitterに寄せた。新しく用意するのが面倒だったので…
ヘッダ画像は前に3DMV録画したときのやつです。プレパス衣装の鬼っ娘の角はいいぞ
画像表示用モーダル変更
画像表示のモーダルはデフォルトだと「GLightbox」だけど、挙動は「Fancybox」が好きなので変更。
Fancyboxの設定方法はてがろぐ公式でも案内されてる のでお手軽。ほんとはWordPressのもFancyboxにしたいところだけどプラグインで出てくるのはなんか違う…
基本的には配布サイトさんの案内にしたがって設定。いいねとシェアはなくていいかなと思ったので未実装。
スマホ限定設定(本文の左右余白)追加
あとはスマホで見たときに左右の余白が欲しかったからcssの一番下に記述追加
@media screen and (max-width:480px) {
/* 画面サイズが480px以下の場合ここの記述が適用される */
.onelogbox {
padding-left: 20px;
padding-right: 20px;
}
}
てがろぐへのリンク指定をフォルダに
新規設定でログ移植したので、いままで「cgi」へのリンクしてなかったよな…?ってところも調べないといけなかった…忘れすぎである
https://www.nishishi.com/cgi/tegalog/faq...
「.htaccess」ファイルね~なるほど~、確かに作ってあったわ……
追加:時系列順リンク
カテゴリとかタグ選択したときに、時系列順に並べるリンクが欲しかったので追加
「skin-cover.html」の65行目あたりにある記述がカテゴリ「(カテゴリ名)」[nn件]
<div class="info f6 ttl mv3 ph2">
<span class="whereami v-mid">[[SITUATION]]</span><br>
</div>
←このアイコンフォントは<div>のほうのクラス設定でついてるみたいだから、<div></div>を増やして、デフォスキン参考にしてリンク貼る
<div class="info f6 ttl mv3 ph2">
<span class="whereami v-mid">[[SITUATION]]</span><br>
</div>
<div class="info f6 ttl mv3 ph2">
<span class="whereami v-mid"><a href="[[REVERSE:URL]]">今の表示を[[REVERSE:NAME]]で見る</a></span>
</div>
追加:ロード中(?)の青丸削除
読み込み中なのか謎ですが、数秒間画面の中央で青い丸が表示されるのうっとうしかったので、「skin-cover.html」からそれにあたると思われる記述を削除
<!-- loading screen -->
<div class="loading">
<div class="lds-ripple"><div></div><div></div></div>
</div>
削除してサクッと表示されるようにはなったものの、他のタブ切り替えやらハンバーガーメニューがうまく動かなくなったので一旦戻した。JavaScript色々使ってて思ったよりややこしい作りになってた
「lds-ripple」がなにかしてんのかねえ…
追加:投稿日表示
skin-onelogを編集
Twitterライクの「○時間前」は数字が大きくなるほどいつなのかわからなくなるから、詳細日付も見えるように追加。
ついでに「・編集」の「・」にリンクついちゃうのなんか嫌だったので編集ボタンは日付のほうに移動
COMMENTから下の<div></div>が追加した部分。もともとの編集用リンクはコメント化
<div class="comment lh-content f5">
[[COMMENT]]
<div style="font-size:smaller;text-align:right;">
<a href="[[EDITURL]]" title="No.[[POSTID]]を編集" class="Login-Required">[編集]</a>
[[DATE:Y/M/D(b) h:m:s]]
</div>
</div>
#てがろぐ