藍鼠 @ainz_fav 1年以上前 てがろぐスキンカスタマイズメモスキン配布元: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>#てがろぐ favorite ありがとうございます!
スキン配布元: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>
#てがろぐ