てがろぐ
- Fumy Otegaru Memo Logger -
カテゴリ「カテゴリなし」の投稿［3973件］（101ページ目）
ハッシュタグ簡単入力機能って、モバイル端末での投稿時にかなり役立つことが分かった。モバイル端末だと、半角 # を打ってから全角文字を続けるのは切り替え操作が面倒だから。
テスト投稿はご自由にどうぞ。ご質問やご要望もお気軽にどうぞー。その他、何でもない呟きもどうぞー。
「続きを読む」や「畳む」リンク(ボタン)を装飾するCSSの書き方 #🌱豆知識
何も装飾を指定しないと、「続きを読む」も「畳む」も普通のテキストリンクとして表示されます。標準添付しているスキンだと、ボタン型に装飾した状態で表示されます。この動作サンプルCGIのように。
ご自身で記述したCSSで、「続きを読む」や「畳む」を装飾したい場合は、以下の書き方が使えます。
▼「続きを読む」と「畳む」の両方に共通する装飾
▼「続きを読む」と「畳む」を別々に装飾したい場合
標準スキンのCSS（tegalog.css）では、『/* ▼続きを読むリンク（ボタン） */』と書かれた行を検索して頂くと、各種装飾ソースが見えますので参考にして下さい。
標準添付のCSSにはどれもコメントで簡単な説明を加えるようにしていますが、特に標準スキンのCSSが最も詳しく書いてあります。畳む
何も装飾を指定しないと、「続きを読む」も「畳む」も普通のテキストリンクとして表示されます。標準添付しているスキンだと、ボタン型に装飾した状態で表示されます。この動作サンプルCGIのように。
ご自身で記述したCSSで、「続きを読む」や「畳む」を装飾したい場合は、以下の書き方が使えます。
▼「続きを読む」と「畳む」の両方に共通する装飾
.readmorebutton { ～装飾～ }
▼「続きを読む」と「畳む」を別々に装飾したい場合
.readmoreopen { ～続きを読むリンクだけの装飾～ }
.readmoreclose { ～畳むリンクだけの装飾～ }
標準スキンのCSS（tegalog.css）では、『/* ▼続きを読むリンク（ボタン） */』と書かれた行を検索して頂くと、各種装飾ソースが見えますので参考にして下さい。
標準添付のCSSにはどれもコメントで簡単な説明を加えるようにしていますが、特に標準スキンのCSSが最も詳しく書いてあります。畳む
Re:1196
なるほどそうでしたか!ラベルの装飾がしたくてFont Awesomeを使っていました。今後はreadmorebuttonopen・closeにcssでつけることにしました。ご丁寧にありがとうございます!末永く活用します!
なるほどそうでしたか!ラベルの装飾がしたくてFont Awesomeを使っていました。今後はreadmorebuttonopen・closeにcssでつけることにしました。ご丁寧にありがとうございます!末永く活用します!
Ver 2.2.4で追加した「画像の遅延読み込み(LazyLoad)属性」の追加機能（デフォルトでON）は、今のところChrome76以降でしか効果がありません。おそらく今後は他のブラウザでもサポートされるようになるとは思いますが。このLazyLoadのマークアップや効果は以下の記事などが分かりやすいと思います。 #参考情報
https://www.suzukikenichi.com/blog/chrome-76-supports-...
従来は、画像の遅延読み込みを使おうと思うと、その機能を提供してくれるJavaScriptを読み込んだ上でHTMLのimg要素の記述を書き換えなければならなかったわけですが、上記の新仕様を使えば、img要素にただ「loading="lazy"」の記述を追記するだけで遅延読み込みがなされるようになります。
https://www.suzukikenichi.com/blog/chrome-76-supports-...
従来は、画像の遅延読み込みを使おうと思うと、その機能を提供してくれるJavaScriptを読み込んだ上でHTMLのimg要素の記述を書き換えなければならなかったわけですが、上記の新仕様を使えば、img要素にただ「loading="lazy"」の記述を追記するだけで遅延読み込みがなされるようになります。
#今後の構想
文字装飾に「ユーザ定義」ボタンを表示できるようにしようかな……。現状での文字装飾ボタンは以下のようになっているわけですが、
さらに設定で「１」～「９」までのボタンを(望めば)表示できるようにして、
……とか。
こうすると、CSSで .decoration1 ～ .decoration9 までの9種類ほど、自由な装飾を用意しておいて使い分けられるようになりますよね。たくさん装飾を使い分けたい場合には便利かも知れない。
文字装飾に「ユーザ定義」ボタンを表示できるようにしようかな……。現状での文字装飾ボタンは以下のようになっているわけですが、
［強］を押すと [E:～] で記録されて、実際には <em class="decorationE">～</em> で出力される
［小］を押すと [S:～] で記録されて、実際には <small class="decorationS">～</small> で出力される
さらに設定で「１」～「９」までのボタンを(望めば)表示できるようにして、
［１］を押すと [1:～] で記録されて、実際には <span class="decoration1">～</span> で出力される
［２］を押すと [2:～] で記録されて、実際には <span class="decoration2">～</span> で出力される
……とか。
こうすると、CSSで .decoration1 ～ .decoration9 までの9種類ほど、自由な装飾を用意しておいて使い分けられるようになりますよね。たくさん装飾を使い分けたい場合には便利かも知れない。
アップデートありがとうございます!!タグ入力とLazyLoadありがたいです。
質問なのですが続きを読む・読後に畳むラベルの部分はHTMLタグは使用不可になったのでしょうか？アップデート後に表示されなくなったのですが不具合か修正されたものなのか気になりました。
質問なのですが続きを読む・読後に畳むラベルの部分はHTMLタグは使用不可になったのでしょうか？アップデート後に表示されなくなったのですが不具合か修正されたものなのか気になりました。
ダウンロードいたしました!
> 「今日のひとこと」の場合は、まず、てがろぐ側で埋め込み専用のスキンを作ってあります。
せっかくソースを見せていただいたので、まるっとコピペで自分で試してみるのがいちばんですね！
> てがろぐVer 2.0.0以降では、スキン内部に外部ファイルの中身をそのまま合成できる [[INCLUDE:ファイル名]] という書き方が増えました
機能をあれこれ試しているうちに、2020年になってしまう･･･。もたもた置いて行かれないように色々楽しんで頑張りまーす。
解説ありがとうございます！ #感謝
せっかくソースを見せていただいたので、まるっとコピペで自分で試してみるのがいちばんですね！
> てがろぐVer 2.0.0以降では、スキン内部に外部ファイルの中身をそのまま合成できる [[INCLUDE:ファイル名]] という書き方が増えました
機能をあれこれ試しているうちに、2020年になってしまう･･･。もたもた置いて行かれないように色々楽しんで頑張りまーす。
解説ありがとうございます！ #感謝
個人的には、同一ドメイン下に複数のてがろぐを設置した場合でも、それぞれでログイン状態を維持できる機能を早急に作りたいんだけども。(最近、自分でも同一ドメイン下に複数設置して利用するようになったので、ログインし直すのが面倒に感じられて……。) しかしそれは、次の次のバージョンくらいだな……。
とりあえず、現時点までにできあがった機能で、9月1日(日)目標にリリースしたい。ちょっとした不具合の修正を含んでいるので、早めに公開したいので。
とりあえず、現時点までにできあがった機能で、9月1日(日)目標にリリースしたい。ちょっとした不具合の修正を含んでいるので、早めに公開したいので。
Ver 2.2.4（未配布）の動作テスト。
画像の遅延読込(LazyLoad)用属性が付加できるようになったり(※標準でON)、既存ハッシュタグの簡単再入力機能でリストアップする最大個数を制限できるようになったり(※標準では10個／無制限にも設定可能)。
画像の遅延読込(LazyLoad)用属性が付加できるようになったり(※標準でON)、既存ハッシュタグの簡単再入力機能でリストアップする最大個数を制限できるようになったり(※標準では10個／無制限にも設定可能)。
Ver 2.2.3（未配布）の動作テスト。#TEST
既存ハッシュタグを簡単に入力できる「＃」ボタンが増えました。既に存在するハッシュタグがリストアップされているプルダウンメニューが表示されて「挿入」ボタンを押すと挿入される仕様です。どうかなー。
既存ハッシュタグを簡単に入力できる「＃」ボタンが増えました。既に存在するハッシュタグがリストアップされているプルダウンメニューが表示されて「挿入」ボタンを押すと挿入される仕様です。どうかなー。
1177です。お返事ありがとうございます。そうです！私としてはプルダウンで選んで挿入できれば複数選びやすいし、全てのタグが見られて良さそうと思ってます。
Ver 2.2.2の設定項目のLightbox用の属性名変えられるの嬉しいです！これなら属性名変えてスキンに好きなjquery入れて使うこともできますね。楽しみにしてます。いつもお疲れ様です。
Ver 2.2.2の設定項目のLightbox用の属性名変えられるの嬉しいです！これなら属性名変えてスキンに好きなjquery入れて使うこともできますね。楽しみにしてます。いつもお疲れ様です。
Ver 2.2.2（未配布）の動作テスト。
設定項目がすごく増えました。
設定項目がすごく増えました。
コミティア
さっき気がついたんですが、ここに打ち込んだ文字は、改行も１文字と数えるのですね。さっき気がついた。
(だから何と言うわけではなくて。)
(だから何と言うわけではなくて。)
> 「今日のひとこと」という呟き枠がある
こういう風に表示させるのは、インラインフレームとか？ それとも今時はページに埋め込むのにもっとスタイリッシュな方法があるとか？
> 「今日のひとこと」の過去ログ用にシンプルなスキンを作った
サイトのデザインまんまにスキンがデザインされているのか、それともログ表示の部分だけを呼び出し(埋め込み)している･･･？
技術的な解説を図々しく求めているわけではありませんので、Yes/No程度にでもお答えいただけたら幸せです。
こういう風に表示させるのは、インラインフレームとか？ それとも今時はページに埋め込むのにもっとスタイリッシュな方法があるとか？
> 「今日のひとこと」の過去ログ用にシンプルなスキンを作った
サイトのデザインまんまにスキンがデザインされているのか、それともログ表示の部分だけを呼び出し(埋め込み)している･･･？
技術的な解説を図々しく求めているわけではありませんので、Yes/No程度にでもお答えいただけたら幸せです。
(承前) そんな「今日のひとこと」の過去ログ用にシンプルなスキンを作ったんだけども、よく考えたら配布している「シンプル版スキン」よりもよほどシンプルだった。^^;
こういう日付と中身くらいしかないスキンも配布すれば使い道あるかな……？
……とちょっと思ったんだけど、よく見比べたら、まあ大して変わらないか。
こういう日付と中身くらいしかないスキンも配布すれば使い道あるかな……？
……とちょっと思ったんだけど、よく見比べたら、まあ大して変わらないか。
うちのHOMEページ（にししふぁくとりー）には「今日のひとこと」という呟き枠があるんですが、その部分を「てがろぐ」による生成に切り替えてみました(下図)。
ページ自体はHTML手打ちですが、「今日のひとこと」という区画だけはSSIを使って「てがろぐCGIが生成した最新1件の内容」を呼び出す方法で埋め込んでいます。
この「今日のひとこと」枠は、これまでは長年ずっとHTML手打ちによる更新でした。^^; それでも更新作業自体は別に困らなかったんですが、過去ログを蓄積できない点をちょっと残念に思っていました。いや、残そうと思えばいくらでも残せるんですが、更新の度にログも書き換えるのはちょっと面倒だったので。
てがろぐ化することで、何もしなくても過去ログが残るようになって楽になりました。ちょっと嬉しいです。^^;
ページ自体はHTML手打ちですが、「今日のひとこと」という区画だけはSSIを使って「てがろぐCGIが生成した最新1件の内容」を呼び出す方法で埋め込んでいます。
この「今日のひとこと」枠は、これまでは長年ずっとHTML手打ちによる更新でした。^^; それでも更新作業自体は別に困らなかったんですが、過去ログを蓄積できない点をちょっと残念に思っていました。いや、残そうと思えばいくらでも残せるんですが、更新の度にログも書き換えるのはちょっと面倒だったので。
てがろぐ化することで、何もしなくても過去ログが残るようになって楽になりました。ちょっと嬉しいです。^^;
TEST
投稿1つを単独で表示した場合に本文の末尾に自動挿入されるユーティリティリンク枠（「ユーザ×××だけの投稿を見る」とかいくつか並んでいる枠）は、要らない場合もありますよね。
あの単独表示時に出てくるリンク枠は、Ver 2.2.4以降でなら管理画面の「設定」で消したり取捨選択したりできるようになりました。
Ver 2.2.0以下では、以下の方法で消せます。（CGIソースの編集は不要） #🌱豆知識
▼全部消す
以下のCSSを加えておくと、枠も含めて全項目を丸ごと消せます。
▼最後だけ消す
もし、リンクの一番最後にある「この投稿を再編集または削除する」という管理用リンクだけを消したい場合は、以下のCSSを書けばその1項目だけを消せます。
将来的には、あの枠内の項目も自由に選択できるような設定項目を加えたいとは思っています。今のところは、上記のようにCSSで非表示にする方法で対処下さい。Ver 2.2.4でサポートしました。
畳む
あの単独表示時に出てくるリンク枠は、Ver 2.2.4以降でなら管理画面の「設定」で消したり取捨選択したりできるようになりました。
Ver 2.2.0以下では、以下の方法で消せます。（CGIソースの編集は不要） #🌱豆知識
▼全部消す
以下のCSSを加えておくと、枠も含めて全項目を丸ごと消せます。
.utilitylinks { display: none; }
▼最後だけ消す
もし、リンクの一番最後にある「この投稿を再編集または削除する」という管理用リンクだけを消したい場合は、以下のCSSを書けばその1項目だけを消せます。
.utilitylinks > ul > li:last-child {
display: none;
}
畳む
いらっしゃいましたか。自分1人専用のツールである代わりに、HTMLタグを書き放題な「Fumy News Clipper2」は、（もう少し明確に方向性を分ければ）てがろぐと棲み分けは可能なようにも思うので、何かしたいとは思ってはいるんですけどもね……。
> 「てがろぐ」と「Fumy News Clipper2」を両方お使いの方っていらっしゃるでしょうかね？
ノ
ノ
先頭の投稿(No.1など)の単独表示時にも、ちゃんと次の投稿へのリンクが現れるように修正した Ver 2.2.1 の動作テスト。(※未配布)
スキンがもうちょっとどうにかならないかなーって思って立ち往生してます半年
誰かスキン配布して〜
誰かスキン配布して〜
> Ver 2.2.0 の製作裏話とか
(・▽)ﾉｼ∩ いいねいいねいいねいいね
IDが同じで、自作自演みたくなってしまったorz 別人です。
(・▽)ﾉｼ∩ いいねいいねいいねいいね
IDが同じで、自作自演みたくなってしまったorz 別人です。
TEST #テスト
てがろぐ Ver 2.2.0 の製作裏話とかをブログに書きました。
➡https://www.nishishi.com/blog/2019/08/tegalog_ver_220....
➡https://www.nishishi.com/blog/2019/08/tegalog_ver_220....
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
