カテゴリ「てがろぐ」[32件]
リアクションボタンをサイトにつけるやつ
なんかすごくてこずったけど実装できた!!根性で埋め込んだのでどうやったかはあんまり説明できない。
グレー枠内の絵文字を押すと、上に絵文字が召喚できます。
・head追記は、スキンのcover内head始まって5行目ぐらいのlink relの大群の一番上に入れる。パスはサイトURLから記述。
・body追記はcover内bodyの底に置く。
・リアクションの置きたい場所に記述する項目はまじでてこずった。
onelogに記述するんだけど、説明通りにdiveclassのcomentに置いてもだめそうだった。ので、3行目くらいにあったarticle classってとこの後ろにreaction-idをねじ込んで、divやらなんやらをちまちま入れ替えてるうちになんか上手くいった。だめなら気合いでどうにかするしかないね。
・文字のやつはMEGAMOJIで作った。
・よく見るアニメーションのやつはSlackmojisでダウンロードした。parrotは専用ページから。
たたむ
ここは私の城なので、私を褒めたたえることしかできないようにしました。気軽に褒めてね!
なんかすごくてこずったけど実装できた!!根性で埋め込んだのでどうやったかはあんまり説明できない。
グレー枠内の絵文字を押すと、上に絵文字が召喚できます。
・head追記は、スキンのcover内head始まって5行目ぐらいのlink relの大群の一番上に入れる。パスはサイトURLから記述。
・body追記はcover内bodyの底に置く。
・リアクションの置きたい場所に記述する項目はまじでてこずった。
onelogに記述するんだけど、説明通りにdiveclassのcomentに置いてもだめそうだった。ので、3行目くらいにあったarticle classってとこの後ろにreaction-idをねじ込んで、divやらなんやらをちまちま入れ替えてるうちになんか上手くいった。だめなら気合いでどうにかするしかないね。
・文字のやつはMEGAMOJIで作った。
・よく見るアニメーションのやつはSlackmojisでダウンロードした。parrotは専用ページから。
たたむ
ここは私の城なので、私を褒めたたえることしかできないようにしました。気軽に褒めてね!
てがろぐでD&Dまたはコピペで画像投稿するやつ
これ参考にして、画像をドラッグアンドドロップするだけで投稿できるようにした!
コピペで画像貼れるようになってすごく便利になった。
加工したい内容にチェックを入れてから画像を読み込まないと加工してくれないことに注意。
文字と透かし画像は同時に入れられないっぽい。
注意点
・upload.js upload.php NotoSansJPのttf(使うフォントファイル) watermark.png(透かし画像サンプル)がてがろぐ本体のある場所に追加された。
・edit.htmが今使ってるプロフィールスキンに追加された。
元データからの変更点
・テキスト挿入時のフォントはM+フォントからNotoSansJPに変更
・テキスト挿入のデフォルトにAI禁止を追加
ついでに投稿画面の設定もいじった。
・既存画像の挿入の文言を投稿済み画像の挿入に変更
・てがろぐ更新で増えたなんでも簡単入力ボタンを編集して、「改行」「隠す」「リンク」のコマンドをワンボタンで追加できるようにした。
リンクの入力ルールに慣れなさ過ぎて毎回自分の投稿見返しながら書いてたのですごくたすかる
たたむ
#HTMLとCSS
これ参考にして、画像をドラッグアンドドロップするだけで投稿できるようにした!
コピペで画像貼れるようになってすごく便利になった。
加工したい内容にチェックを入れてから画像を読み込まないと加工してくれないことに注意。
文字と透かし画像は同時に入れられないっぽい。
注意点
・upload.js upload.php NotoSansJPのttf(使うフォントファイル) watermark.png(透かし画像サンプル)がてがろぐ本体のある場所に追加された。
・edit.htmが今使ってるプロフィールスキンに追加された。
元データからの変更点
・テキスト挿入時のフォントはM+フォントからNotoSansJPに変更
・テキスト挿入のデフォルトにAI禁止を追加
ついでに投稿画面の設定もいじった。
・既存画像の挿入の文言を投稿済み画像の挿入に変更
・てがろぐ更新で増えたなんでも簡単入力ボタンを編集して、「改行」「隠す」「リンク」のコマンドをワンボタンで追加できるようにした。
リンクの入力ルールに慣れなさ過ぎて毎回自分の投稿見返しながら書いてたのですごくたすかる
たたむ
#HTMLとCSS
skin-profileの改造をした。
・リンクの色をあっさりした感じに調整した。
・リンクページ行間を、投稿ページの行間と同じサイズに調整。
・「Yaku Han JP」「Noto Sans Japanese」導入。
・たたむボタンの色を目立たないようにした。
・リンクの切れてたファビコンを修正。
・カテゴリ欄を横並びにし、ハッシュタグと同じ文字サイズに調整。
参考ページ
・【Web制作】約物半角フォント「Yaku Han JP」とてがろぐ検索避け
・フォントの太さをスマホでは400、PCでは500にしたい
これはうまくできなかったけど、フォントを「Noto Sans Japanese」にしたら気にならなくなった。
#HTMLとCSS
・リンクの色をあっさりした感じに調整した。
・リンクページ行間を、投稿ページの行間と同じサイズに調整。
・「Yaku Han JP」「Noto Sans Japanese」導入。
・たたむボタンの色を目立たないようにした。
・リンクの切れてたファビコンを修正。
・カテゴリ欄を横並びにし、ハッシュタグと同じ文字サイズに調整。
参考ページ
・【Web制作】約物半角フォント「Yaku Han JP」とてがろぐ検索避け
・フォントの太さをスマホでは400、PCでは500にしたい
これはうまくできなかったけど、フォントを「Noto Sans Japanese」にしたら気にならなくなった。
#HTMLとCSS
インラインフレームのスクロールと境界線消し
括弧iframe src="埋め込みたいURL" frameBorder="0"scrolling="no"> target="_blank rel="noreferrer noopener"></iframe括弧でいけた
#HTMLとCSS
括弧iframe src="埋め込みたいURL" frameBorder="0"scrolling="no"> target="_blank rel="noreferrer noopener"></iframe括弧でいけた
#HTMLとCSS
skin-profileにスキン変更した!
余白が増えて画面がすっきりした。
ヘッダーは1400×500px。
以下変更点
・ファビコン設定
・ヘッダー画像・アイコン画像
・ホーム画面のフリースペース削除
・ホーム画面の画像一覧削除
・投稿一覧の上に検索ボックス等追加
・投稿一覧下の時系列検索をボックス表示に
たたむ
余白が増えて画面がすっきりした。
ヘッダーは1400×500px。
以下変更点
・ファビコン設定
・ヘッダー画像・アイコン画像
・ホーム画面のフリースペース削除
・ホーム画面の画像一覧削除
・投稿一覧の上に検索ボックス等追加
・投稿一覧下の時系列検索をボックス表示に
たたむ
画像表示のポップアップ出なくなってたのを修正。
Tanの設定でlightboxじゃない設定にしてたの忘れてててこずった
てがろぐのlightboxを変更する方法
管理画面の[設定]→[システム設定]→【画像拡大スクリプトの選択】で、下図のように「Lightboxを使う」か「他のスクリプトを使う」かを選択できます。ここで、Lightbox以外の任意の画像拡大用スクリプトのURLを指定できます。
次に、管理画面の[設定]→[ページの表示]→【投稿本文の表示/画像】や【投稿本文内のURL処理】で、画像リンクに対して指定する必要のある特定の記述を加えます。
たたむ
ついでに、画像拡大時にぐいーんと枠が広がるアニメーションを無効にして一瞬で表示する方法も導入
Tanの設定でlightboxじゃない設定にしてたの忘れてててこずった
てがろぐのlightboxを変更する方法
管理画面の[設定]→[システム設定]→【画像拡大スクリプトの選択】で、下図のように「Lightboxを使う」か「他のスクリプトを使う」かを選択できます。ここで、Lightbox以外の任意の画像拡大用スクリプトのURLを指定できます。
次に、管理画面の[設定]→[ページの表示]→【投稿本文の表示/画像】や【投稿本文内のURL処理】で、画像リンクに対して指定する必要のある特定の記述を加えます。
たたむ
ついでに、画像拡大時にぐいーんと枠が広がるアニメーションを無効にして一瞬で表示する方法も導入
X_modokiのヘッダー画像を変更した。
tegalog.cgi設置ディレクトリ内「images」フォルダに「X-header.jpg」という名前でアップロードすれば適用される。
スキンのファイル内にassets→faviconのファイル作って入れてみたけど反応するかな
(追記:一日半くらいでちゃんと出た)
アイコンを透過から白地にしてツイッターっぽくした
tegalog.cgi設置ディレクトリ内「images」フォルダに「X-header.jpg」という名前でアップロードすれば適用される。
スキンのファイル内にassets→faviconのファイル作って入れてみたけど反応するかな
(追記:一日半くらいでちゃんと出た)
アイコンを透過から白地にしてツイッターっぽくした
てがろぐtanの改造終わった!
・onelog(投稿ごとの表示)のID表示をカテゴリ名のリンクに変更
・フリースペースの表示を削除
・カテゴリごとのタブ追加が難しかったので、てがろぐの書式でカテゴリ一覧を追加した
・サイドのメニューを検索窓・ハッシュタグ一覧・ほかサイトのリンク(フリースペースで入れてたリンクを直打ちした)に変えた
・検索や絞り込みしたときに出てくるパンくずリストを削除
直したいところ
・タブ表示にしたい(カテゴリ一覧が一列に収まるようになってほしい)
・フォントがなぜかかわらない
・検索と投稿の窓に入力中のフチ消したい
・隠した文章を表示したときに背景がグレーになるのを白にしたい
・ハッシュタグ一覧をもっとコンパクトにしたい(1行1項目でなくてもいい)
たたむ
・onelog(投稿ごとの表示)のID表示をカテゴリ名のリンクに変更
・フリースペースの表示を削除
・カテゴリごとのタブ追加が難しかったので、てがろぐの書式でカテゴリ一覧を追加した
・サイドのメニューを検索窓・ハッシュタグ一覧・ほかサイトのリンク(フリースペースで入れてたリンクを直打ちした)に変えた
・検索や絞り込みしたときに出てくるパンくずリストを削除
直したいところ
・タブ表示にしたい(カテゴリ一覧が一列に収まるようになってほしい)
・フォントがなぜかかわらない
・検索と投稿の窓に入力中のフチ消したい
・隠した文章を表示したときに背景がグレーになるのを白にしたい
・ハッシュタグ一覧をもっとコンパクトにしたい(1行1項目でなくてもいい)
たたむ
MEGAMOJI
カスタム絵文字がすぐ作れるやつ
カスタム絵文字がすぐ作れるやつ
絵文字のサイズは16×16の画像にすると良さそう
ファビコンのダウンロードは、
「http://www.google.com/s2/favicons?domain...ファビコンがほしいサイトのURL」
絵文字の記法、投稿欄以外では機能しない。
・リンクでのアイコン表示は、「img src="場所" alt="代替え文字"」を<>で囲って表示。
・カテゴリのアイコンは、設定のカテゴリ情報→アイコンで、httpから始まる場所指定が必要。
#ファビコン
ファビコンのダウンロードは、
「http://www.google.com/s2/favicons?domain...ファビコンがほしいサイトのURL」
絵文字の記法、投稿欄以外では機能しない。
・リンクでのアイコン表示は、「img src="場所" alt="代替え文字"」を<>で囲って表示。
・カテゴリのアイコンは、設定のカテゴリ情報→アイコンで、httpから始まる場所指定が必要。
#ファビコン
絵文字テスト
両方とも16×16で、ファビコンから持ってきた
これはミスキーからつれてきた 128×128
でかいな
・文字はダブルクリックでコードコピーできる
・設定→「投稿本文の表示/カスタム絵文字」で、「絵文字画像の高さをCSSで2文字分に制限する」を解除すると、文字より下に下がってた絵文字が、文字の少し上に移動した。
ただ、表示したいサイズよりもでかめの画像を載せていると、この項目のチェックを外すと画像がばかでかくなる。
#テスト
両方とも16×16で、ファビコンから持ってきた
これはミスキーからつれてきた 128×128
でかいな
・文字はダブルクリックでコードコピーできる
・設定→「投稿本文の表示/カスタム絵文字」で、「絵文字画像の高さをCSSで2文字分に制限する」を解除すると、文字より下に下がってた絵文字が、文字の少し上に移動した。
ただ、表示したいサイズよりもでかめの画像を載せていると、この項目のチェックを外すと画像がばかでかくなる。
#テスト
ギャラリーページをコピーしたnoirにしたら、統一感でた。
ファビコンの設定とかスクロールバーのデザインもちゃんと出てくるようになった。
ファビコンの設定とかスクロールバーのデザインもちゃんと出てくるようになった。
フォントが全部よもぎになってたので、ちょっとフォントをいじった。
(よもぎの|、ハートになってかわいいんだけど、もっとシンプルにしたかったので)
ついでに題字をTrain Oneにした。
Vivaldiはやっぱりフォントの読み込みすぐしないようにできてるのかもしれない。
Train One
https://fonts.google.com/specimen/Train+...
参考サイト
https://saruwakakun.com/html-css/basic/f...
(よもぎの|、ハートになってかわいいんだけど、もっとシンプルにしたかったので)
ついでに題字をTrain Oneにした。
Vivaldiはやっぱりフォントの読み込みすぐしないようにできてるのかもしれない。
Train One
https://fonts.google.com/specimen/Train+...
参考サイト
https://saruwakakun.com/html-css/basic/f...
フォントがかわいくなった!
HTMLのhead部分の最後に、googleフォントから持ってきたリンクを貼り付けて、cssでfont-family指定。
題字はHTMLのクラス属性内でfont-family指定。
参考サイト
https://zero-plus.io/media/css-font-rule...
Zen Maru Gothic
https://fonts.google.com/specimen/Zen+Ma...
HTMLのhead部分の最後に、googleフォントから持ってきたリンクを貼り付けて、cssでfont-family指定。
題字はHTMLのクラス属性内でfont-family指定。
参考サイト
https://zero-plus.io/media/css-font-rule...
Zen Maru Gothic
https://fonts.google.com/specimen/Zen+Ma...
CSSでボタンのデザイン変更したのに全然読み込んでくれないなと思ってたら、VivaldiがJava読み込まなくなってただけだった。
【追記】
一時間くらいしたら、Vivaldiで開いてた方もJava適応された。なんだったんだろう
デザインの参考サイト
https://kyoheiomi.com/design/css_button_...
【追記】
一時間くらいしたら、Vivaldiで開いてた方もJava適応された。なんだったんだろう
デザインの参考サイト
https://kyoheiomi.com/design/css_button_...
・最近の投稿にNEWがつくよう修正
・日付クリックで単独ページへ移動するように調整
・日付クリックで単独ページへ移動するように調整
投稿文表示の仕組み
COMMENT:LINE:1が一行目、COMMENT:BODYがその後の行
COMMENTが全文っぽい
COMMENT:LINE:1が一行目、COMMENT:BODYがその後の行
COMMENTが全文っぽい
スキン変更した
使用したスキン→Noir
参考サイト
てがろぐ用スキン「Noir」を作った
https://note.nememori.info/posts/tegalog...
______________
・元のスキン[skin_white]は、切り替えできるようにしてある
・ログイン時にだけ、編集ボタンと投稿欄が出るように調整
・ヘッダーに検索欄追加
・設定→ページの表示/全体→日付境界バーを挿入しない
・設定→ページの表示/投稿単独→本文の下に、「ユーティリティリンク枠を表示する」の不要部分のチェックを外す
使用したスキン→Noir
参考サイト
てがろぐ用スキン「Noir」を作った
https://note.nememori.info/posts/tegalog...
______________
・元のスキン[skin_white]は、切り替えできるようにしてある
・ログイン時にだけ、編集ボタンと投稿欄が出るように調整
・ヘッダーに検索欄追加
・設定→ページの表示/全体→日付境界バーを挿入しない
・設定→ページの表示/投稿単独→本文の下に、「ユーティリティリンク枠を表示する」の不要部分のチェックを外す
は~~~やっとTwitterカードのサムネ出た……
ずっと絶対パスのURLの間にファイルアップローダ側のいらん名前入ってたのと、画像ファイルの名前を変えたときに間違えて拡張子消してたことに気付けんかった
設定のしかた参考
https://endofwinter.sakura.ne.jp/tegalog...
OGP確認サイト(なんかTwitter公式のは確認できなくなったらしい)
https://rakko.tools/tools/9/
ずっと絶対パスのURLの間にファイルアップローダ側のいらん名前入ってたのと、画像ファイルの名前を変えたときに間違えて拡張子消してたことに気付けんかった
設定のしかた参考
https://endofwinter.sakura.ne.jp/tegalog...
OGP確認サイト(なんかTwitter公式のは確認できなくなったらしい)
https://rakko.tools/tools/9/
急にタブが米粒みたいになったので、タブはなくしました
いろんなサイトのタブを試し直したけど一向になおらんかったら諦める
ツイッターみたいに絵と検索欄をタブで分けてすぐアクセスできるようなスキンがほしいけど、自分でうまく実装できない
いろんなサイトのタブを試し直したけど一向になおらんかったら諦める
ツイッターみたいに絵と検索欄をタブで分けてすぐアクセスできるようなスキンがほしいけど、自分でうまく実装できない
動きはMEGAMOJIさんで。
自己紹介みたいなのいれてなかったので、投稿一覧の一番下辺りにくっつけといた。
CSSに入れても無反応だったので、HTMLにども!styleでーす!って記述のしかたすることで事なきを得た。一瞬で終わらすはずが3時間くらいてこずった。