カテゴリ「返信」に属する投稿［21件］（2ページ目）
＞04/01 20:21の方へ
嬉しいメッセージありがとうございます！お役に立てたようで何よりです。温かい応援いただけて、開発のモチベも上がってきました…！近日中にお披露目できるといいなと思います。改めてありがとうございます！
畳む
嬉しいメッセージありがとうございます！お役に立てたようで何よりです。温かい応援いただけて、開発のモチベも上がってきました…！近日中にお披露目できるといいなと思います。改めてありがとうございます！
畳む
＞03/13 22:44の方へ
メッセージありがとうございます
「設定」→「投稿本文の表示/テキスト」→「改行を許可」にチェックが入っていれば、記事投稿時に画像コードと文章の間を改行すれば回り込まなくなると思います
画像をセンター表示するCSSは以下になります、「tegalog-kozin.css」の末尾に追加してみてください
/* 本文内の画像とキャプション付き画像を中央寄せにする */
.comment .imagelink,.comment .embeddedpictbox {
display: block;
width: fit-content;
margin: 0 auto;
}
/* キャプション表示調整 */
.comment .embeddedpictbox figcaption { display: block;}
(このCSSで画像を中央寄せにした場合、画像コードと文章の間に改行を入れると1行分スペースが空いてしまうので、記事投稿時の改行はお好みで調整してください)
※自由装飾を使う別案
画像中央寄せと左寄せを使い分けたいときなどに、自由装飾を使う手もあります
「tegalog-kozin.css」末尾か、「設定」→「フリースペース」→【上書きスタイルシート】のCSSに
/* 中央寄せ */
.deco-center { display: block; text-align: center;}
と追加して、記事投稿時に画像コードを
[F:center:[PICT:test04.png]]
のように囲んでみてください その画像だけ中央寄せできると思います
(この自由装飾は文章も中央寄せできます)
→てがろぐ公式自由装飾の説明ページ
どちらかでお好みの表示にできると思うのですが、いかがですか？うまく表示できないとか、もう少しなんとかしたいなどありましたらまたご連絡ください
畳む
メッセージありがとうございます
「設定」→「投稿本文の表示/テキスト」→「改行を許可」にチェックが入っていれば、記事投稿時に画像コードと文章の間を改行すれば回り込まなくなると思います
画像をセンター表示するCSSは以下になります、「tegalog-kozin.css」の末尾に追加してみてください
/* 本文内の画像とキャプション付き画像を中央寄せにする */
.comment .imagelink,.comment .embeddedpictbox {
display: block;
width: fit-content;
margin: 0 auto;
}
/* キャプション表示調整 */
.comment .embeddedpictbox figcaption { display: block;}
(このCSSで画像を中央寄せにした場合、画像コードと文章の間に改行を入れると1行分スペースが空いてしまうので、記事投稿時の改行はお好みで調整してください)
※自由装飾を使う別案
画像中央寄せと左寄せを使い分けたいときなどに、自由装飾を使う手もあります
「tegalog-kozin.css」末尾か、「設定」→「フリースペース」→【上書きスタイルシート】のCSSに
/* 中央寄せ */
.deco-center { display: block; text-align: center;}
と追加して、記事投稿時に画像コードを
[F:center:[PICT:test04.png]]
のように囲んでみてください その画像だけ中央寄せできると思います
(この自由装飾は文章も中央寄せできます)
→てがろぐ公式自由装飾の説明ページ
どちらかでお好みの表示にできると思うのですが、いかがですか？うまく表示できないとか、もう少しなんとかしたいなどありましたらまたご連絡ください
畳む
＞02/14 21:24の方へ
メッセージありがとうございます 全年月リストや検索を実行するとすぐ時系列順に並ぶ…という動作はまだ実装されていないっぽいので、恐らくJavaScriptの分野のようです(私もそこまでは書けませんでした…)
代替案でよければ、全年月リストと検索欄にオプションを付けて、記事の並びを最新順か時系列順で選べるようにできます。以下、kozinでオプションを表示する手順です
・全年月リストに時系列順オプションを加える
実は最初からオプションが付いているのを非表示にしているだけなので、「tegalog-kozin.css」532行目あたりの
.datelimitboxoptions,.datelimitlist .datelimitsublist .year { display: none; }
を削除すればオプション欄が出てきます
以下は見た目を若干整えるcssです よければ「tegalog-kozin.css」の末尾にでも追加しておいてください
.datelimitboxoptions { display: block; margin-top: 0.3rem;}/* 段落を変えて上に隙間を空ける */
.datelimitboxoptions label { display: inline-block;}/* 各ラジオボタンをインラインブロックにする */
↓こうなる
・検索欄に時系列順オプションを付ける
単語検索の他に複合検索という機能があります
「skin-cover.html」の54行目あたり、[[SEARCHBOX]]部分を[[SEARCHBOX:COMPLEX]]に書き換えてみてください たくさんオプションが出てくると思います
これを検索欄と時系列オプションのみの表示にしたければ、[[SEARCHBOX:COMPLEX:O]]と書けばOKです
以下は右揃えにして見た目を整えるcssです お好みで「tegalog-kozin.css」の末尾とかに追加してください
.complexsearch .queryinput {
padding: 0.3rem 1rem;/* 検索フォームの余白 */
border-radius: 20px;/* 角を丸くする */
border: 1px solid var(--usu-mozi-iro);/* 線を付ける */
}
.searchoptions {
width: fit-content;
margin-left: auto;/* オプション欄を右寄せ */
list-style: none;/* 黒点を非表示 */
}
※1行検索欄とは少し作りが違うので、全く同じ見た目にはなりませんがご了承ください
↓こんな感じになるはず
複合検索欄は公式ページにカスタマイズ方法が載っているので、お好みで書き換えてみてください
→検索条件プルダウンメニューの取捨選択や掲載順序の指定
→検索オプション項目名のカスタマイズ方法
あと他には、「今表示されている記事群を時系列順にするリンク」[[REVERSE:URL]]を追加する方法もあります
「skin-cover.html」のサブ領域内とかに
<a href="[[REVERSE:URL]]">[[REVERSE:NAME]]で表示する</a>
みたいに追加すると、時系列順⇔最新順と切り替えるリンクが貼れます
「order=reverse」を追加できるのはurl(アドレス)ですね 例えばこのサイトだと今年1月の記事群を表示するアドレスは
https://mk-okiba.wew.jp/tegalog_haihu/?date=2024%2F01
になりますが、この最後に&order=reverseを追加して
https://mk-okiba.wew.jp/tegalog_haihu/?date=2024%2F01&order=reverse
にすると時系列順で表示されます
ただこれは、時系列順に表示させたい区分の数だけリンクを全部作らなければいけないので大変かと思います 部分使いとかにはいいかも
このどれかでご希望の動作を実装できそうでしょうか？また何かありましたらご連絡ください
畳む
メッセージありがとうございます 全年月リストや検索を実行するとすぐ時系列順に並ぶ…という動作はまだ実装されていないっぽいので、恐らくJavaScriptの分野のようです(私もそこまでは書けませんでした…)
代替案でよければ、全年月リストと検索欄にオプションを付けて、記事の並びを最新順か時系列順で選べるようにできます。以下、kozinでオプションを表示する手順です
・全年月リストに時系列順オプションを加える
実は最初からオプションが付いているのを非表示にしているだけなので、「tegalog-kozin.css」532行目あたりの
.datelimitboxoptions,.datelimitlist .datelimitsublist .year { display: none; }
を削除すればオプション欄が出てきます
以下は見た目を若干整えるcssです よければ「tegalog-kozin.css」の末尾にでも追加しておいてください
.datelimitboxoptions { display: block; margin-top: 0.3rem;}/* 段落を変えて上に隙間を空ける */
.datelimitboxoptions label { display: inline-block;}/* 各ラジオボタンをインラインブロックにする */
↓こうなる
・検索欄に時系列順オプションを付ける
単語検索の他に複合検索という機能があります
「skin-cover.html」の54行目あたり、[[SEARCHBOX]]部分を[[SEARCHBOX:COMPLEX]]に書き換えてみてください たくさんオプションが出てくると思います
これを検索欄と時系列オプションのみの表示にしたければ、[[SEARCHBOX:COMPLEX:O]]と書けばOKです
以下は右揃えにして見た目を整えるcssです お好みで「tegalog-kozin.css」の末尾とかに追加してください
.complexsearch .queryinput {
padding: 0.3rem 1rem;/* 検索フォームの余白 */
border-radius: 20px;/* 角を丸くする */
border: 1px solid var(--usu-mozi-iro);/* 線を付ける */
}
.searchoptions {
width: fit-content;
margin-left: auto;/* オプション欄を右寄せ */
list-style: none;/* 黒点を非表示 */
}
※1行検索欄とは少し作りが違うので、全く同じ見た目にはなりませんがご了承ください
↓こんな感じになるはず
複合検索欄は公式ページにカスタマイズ方法が載っているので、お好みで書き換えてみてください
→検索条件プルダウンメニューの取捨選択や掲載順序の指定
→検索オプション項目名のカスタマイズ方法
あと他には、「今表示されている記事群を時系列順にするリンク」[[REVERSE:URL]]を追加する方法もあります
「skin-cover.html」のサブ領域内とかに
<a href="[[REVERSE:URL]]">[[REVERSE:NAME]]で表示する</a>
みたいに追加すると、時系列順⇔最新順と切り替えるリンクが貼れます
「order=reverse」を追加できるのはurl(アドレス)ですね 例えばこのサイトだと今年1月の記事群を表示するアドレスは
https://mk-okiba.wew.jp/tegalog_haihu/?date=2024%2F01
になりますが、この最後に&order=reverseを追加して
https://mk-okiba.wew.jp/tegalog_haihu/?date=2024%2F01&order=reverse
にすると時系列順で表示されます
ただこれは、時系列順に表示させたい区分の数だけリンクを全部作らなければいけないので大変かと思います 部分使いとかにはいいかも
このどれかでご希望の動作を実装できそうでしょうか？また何かありましたらご連絡ください
畳む
＞01/16 0:27の方へ
メッセージありがとうございます、楽しく使っていただけているようで嬉しいです！
解決したようで何よりです。ブラウザのキャッシュが残っていて、CSSの変更が反映されていなかったようですね。もしまたカスタマイズをして変更をすぐ確認したかったら、ブラウザのキャッシュを削除してみるか、スーパーリロード(Ctrl + F5)を試してみてください。すぐ反映されるはずです。
畳む
メッセージありがとうございます、楽しく使っていただけているようで嬉しいです！
解決したようで何よりです。ブラウザのキャッシュが残っていて、CSSの変更が反映されていなかったようですね。もしまたカスタマイズをして変更をすぐ確認したかったら、ブラウザのキャッシュを削除してみるか、スーパーリロード(Ctrl + F5)を試してみてください。すぐ反映されるはずです。
畳む
＞12/29 1:48の方へ
メッセージありがとうございます
「1カラムのままtenranのような形のメニュー形式」の部分がちょっとよくわからなかったのですが、
「ヘッダー画像の下を【メイン領域】【縦並びカテゴリリストメニュー】の横並びにする」みたいな感じですか？(これはもう2カラム)
①「skin-cover.html」に追加
46行目あたり
<!-- ヘッダー画像を抜いたメイン領域 クイックポストからフリースペースまで -->
のすぐ上に
<div class="wrap">
<div class="catmenu">[[CATEGORY:TREE]]</div>
を追加、
次に71行目あたりの</main>のすぐ上に</div>を追加してください
②「tegalog-hokan.css」に追加
末尾に
.wrap {
width: 100%;
display: flex; /* 中のアイテムを横並びにする */
}
.mainarea { overflow: hidden;} /* はみ出させない */
.catmenu {
order: 1; /* カテゴリを右側に */
flex-shrink: 0; /* 画面幅狭くても縮めない */
width: 200px;
height: fit-content; /* ↓3行 カテゴリを固定する */
position: sticky;
top: 3rem;
}
.catmenu ul { /* カテゴリの見た目を整える */
list-style: none;
margin: 0;
padding: 1rem;
}
.headmenu .catpullbox { display: none;} /* プルダウンのカテゴリを消しておく */
@media screen and (max-width:800px) { /* 画面幅800px以下のとき */
.catmenu { display: none;} /* 横のカテゴリを消す */
.headmenu .catpullbox { display: block;} /* プルダウンのカテゴリを復活させる */
}
と追加してください
③mainareaの幅を調整
2カラムにすると全体幅が狭めになるので、「tegalog-hokan.css」の193行目あたり
width: min(100%,900px);
で900pxになってるとこを1000pxくらいに変えてみてください(全体の最大幅が変更できます)
こんな感じでいかがでしょう(画面幅狭いと見づらいので、横800px以下のときは元の1カラムに戻しています)
突貫で作ったので表示が若干怪しいところがあるのですが、ご希望に近くなりましたか？「これじゃない…」とか「もうちょっとこうしたい！」とか、不具合等あったらまたご連絡ください
畳む
メッセージありがとうございます
「1カラムのままtenranのような形のメニュー形式」の部分がちょっとよくわからなかったのですが、
「ヘッダー画像の下を【メイン領域】【縦並びカテゴリリストメニュー】の横並びにする」みたいな感じですか？(これはもう2カラム)
①「skin-cover.html」に追加
46行目あたり
<!-- ヘッダー画像を抜いたメイン領域 クイックポストからフリースペースまで -->
のすぐ上に
<div class="wrap">
<div class="catmenu">[[CATEGORY:TREE]]</div>
を追加、
次に71行目あたりの</main>のすぐ上に</div>を追加してください
②「tegalog-hokan.css」に追加
末尾に
.wrap {
width: 100%;
display: flex; /* 中のアイテムを横並びにする */
}
.mainarea { overflow: hidden;} /* はみ出させない */
.catmenu {
order: 1; /* カテゴリを右側に */
flex-shrink: 0; /* 画面幅狭くても縮めない */
width: 200px;
height: fit-content; /* ↓3行 カテゴリを固定する */
position: sticky;
top: 3rem;
}
.catmenu ul { /* カテゴリの見た目を整える */
list-style: none;
margin: 0;
padding: 1rem;
}
.headmenu .catpullbox { display: none;} /* プルダウンのカテゴリを消しておく */
@media screen and (max-width:800px) { /* 画面幅800px以下のとき */
.catmenu { display: none;} /* 横のカテゴリを消す */
.headmenu .catpullbox { display: block;} /* プルダウンのカテゴリを復活させる */
}
と追加してください
③mainareaの幅を調整
2カラムにすると全体幅が狭めになるので、「tegalog-hokan.css」の193行目あたり
width: min(100%,900px);
で900pxになってるとこを1000pxくらいに変えてみてください(全体の最大幅が変更できます)
こんな感じでいかがでしょう(画面幅狭いと見づらいので、横800px以下のときは元の1カラムに戻しています)
突貫で作ったので表示が若干怪しいところがあるのですが、ご希望に近くなりましたか？「これじゃない…」とか「もうちょっとこうしたい！」とか、不具合等あったらまたご連絡ください
畳む
＞11/27 8:45の方へ
「(カテゴリ選択)」の変え方と累計数の非表示ですが、これ私も知りたいです。恐らくcssでは変更できないところだと思われます。多分「tegalog.cgi」のどこかに出力する設定があると思うのですが、私はプログラム本体に手を入れる勇気はありませんでした ごめん
畳む
「(カテゴリ選択)」の変え方と累計数の非表示ですが、これ私も知りたいです。恐らくcssでは変更できないところだと思われます。多分「tegalog.cgi」のどこかに出力する設定があると思うのですが、私はプログラム本体に手を入れる勇気はありませんでした ごめん
畳む
＞11/25 21:33の方へ
嬉しいメッセージありがとうございます！スキンご活用いただけているようで本当に嬉しいです。実はあまり深いことを考えず趣味の一環で作っているのですが、そう言っていただけるとかなり照れますね…ちょっとでもあなたの創作活動のお手伝いになれれば幸いです
カスタマイズ、簡単な解説ですがこちらに書きましたのでよろしければご確認ください
→kozinギャラリーモードでカテゴリ・タグの情報を消すには
→カテゴリ一覧を横並びにして「・」を消す(タグ表示と同じにする)には
改めて、嬉しいメッセージありがとうございました！
畳む
嬉しいメッセージありがとうございます！スキンご活用いただけているようで本当に嬉しいです。実はあまり深いことを考えず趣味の一環で作っているのですが、そう言っていただけるとかなり照れますね…ちょっとでもあなたの創作活動のお手伝いになれれば幸いです
カスタマイズ、簡単な解説ですがこちらに書きましたのでよろしければご確認ください
→kozinギャラリーモードでカテゴリ・タグの情報を消すには
→カテゴリ一覧を横並びにして「・」を消す(タグ表示と同じにする)には
改めて、嬉しいメッセージありがとうございました！
畳む
＞10/29 19:07の方へ
動きましたか！よかった…！もしかしたら怪しい記述かもしれませんので、油断せずお使いください… こちらこそありがとうございました！
畳む
返信不要の方も解決したようで何よりです！よかった！
動きましたか！よかった…！もしかしたら怪しい記述かもしれませんので、油断せずお使いください… こちらこそありがとうございました！
畳む
返信不要の方も解決したようで何よりです！よかった！
＞10/29 12:47の方へ
嬉しいお言葉ありがとうございます…！楽しく使っていただけて何よりです！
「他の画像ビューアを使用したときの挙動」はまさに心配していたことだったので、事例のご報告をいただけてありがたいです。
恐らくGLightboxを読み込むスクリプトは「skin-cover.html」の</body>直前に書いていらっしゃると思います(違ったらすみません)、この付近に
<!-- ↓非表示にした画像をリンクごと消す処理 -->
<script>～</script>
という部分があります。このスクリプトで非表示にした画像を消す処理を行っているのですが、GLightboxが動くタイミングがそれより早いので起こる現象だと思われます。
<!-- ↓非表示にした画像をリンクごと消す処理 --><script>～</script>をGLightboxの読み込みスクリプトの前に移動し、
$(function() {
の部分を↓
document.addEventListener('DOMContentLoaded', function() {
に書き換えてみてください。恐らくこれで大丈夫じゃないかと思います。(私もJSは初心者なのでもしかして間違ったことを書いていたら申し訳ありません…)
うまく動かなかったとか、不具合が起こったなどありましたらまたお気軽にご連絡ください！
畳む
嬉しいお言葉ありがとうございます…！楽しく使っていただけて何よりです！
「他の画像ビューアを使用したときの挙動」はまさに心配していたことだったので、事例のご報告をいただけてありがたいです。
恐らくGLightboxを読み込むスクリプトは「skin-cover.html」の</body>直前に書いていらっしゃると思います(違ったらすみません)、この付近に
<!-- ↓非表示にした画像をリンクごと消す処理 -->
<script>～</script>
という部分があります。このスクリプトで非表示にした画像を消す処理を行っているのですが、GLightboxが動くタイミングがそれより早いので起こる現象だと思われます。
<!-- ↓非表示にした画像をリンクごと消す処理 --><script>～</script>をGLightboxの読み込みスクリプトの前に移動し、
$(function() {
の部分を↓
document.addEventListener('DOMContentLoaded', function() {
に書き換えてみてください。恐らくこれで大丈夫じゃないかと思います。(私もJSは初心者なのでもしかして間違ったことを書いていたら申し訳ありません…)
うまく動かなかったとか、不具合が起こったなどありましたらまたお気軽にご連絡ください！
畳む
FREESPACE
フリースペースエリアです。
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも
管理画面から自由に編集ができます。
・プロフィールとか
・リンク集とかにしてもいいかも
嬉しいお言葉ありがとうございます！
ippenのセットスキン内で、例えば「memo」というカテゴリで投稿するとそれだけ日記(つぶやき)的な表示になる感じですか？ 日記的機能は悩んでいたところだったので、需要があるなら作ってみようと思います。ちょっとうまくいくかはわからないので、あまり期待せず気長にお待ちください。
(そうではなくて、ippen02や03のように独立した日記スキンが欲しいなど、他ご希望ありましたらまたご連絡ください)
畳む