home palette
chat
karashi03
karashi03

カテゴリ「てがろぐ32件]

よく考えたら著作権的に怪しくね?と思ったので、絵文字を自分の手書きか文字に変えてきた!
動きはMEGAMOJIさんで。

自己紹介みたいなのいれてなかったので、投稿一覧の一番下辺りにくっつけといた。
CSSに入れても無反応だったので、HTMLにども!styleでーす!って記述のしかたすることで事なきを得た。一瞬で終わらすはずが3時間くらいてこずった。

てがろぐ

リアクションボタンをサイトにつけるやつ
なんかすごくてこずったけど実装できた!!根性で埋め込んだのでどうやったかはあんまり説明できない。
グレー枠内の絵文字を押すと、上に絵文字が召喚できます。


・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

てがろぐ

skin-profileの改造をした。

・リンクの色をあっさりした感じに調整した。
・リンクページ行間を、投稿ページの行間と同じサイズに調整。
・「Yaku Han JP」「Noto Sans Japanese」導入。
・たたむボタンの色を目立たないようにした。
・リンクの切れてたファビコンを修正。
・カテゴリ欄を横並びにし、ハッシュタグと同じ文字サイズに調整。


参考ページ
【Web制作】約物半角フォント「Yaku Han JP」とてがろぐ検索避け
フォントの太さをスマホでは400、PCでは500にしたい
これはうまくできなかったけど、フォントを「Noto Sans Japanese」にしたら気にならなくなった。

#HTMLとCSS

てがろぐ

skin-profileにスキン変更した!
余白が増えて画面がすっきりした。
ヘッダーは1400×500px。


以下変更点
・ファビコン設定
・ヘッダー画像・アイコン画像
・ホーム画面のフリースペース削除
・ホーム画面の画像一覧削除
・投稿一覧の上に検索ボックス等追加
・投稿一覧下の時系列検索をボックス表示に

たたむ

てがろぐ

画像表示のポップアップ出なくなってたのを修正。
Tanの設定でlightboxじゃない設定にしてたの忘れてててこずった
てがろぐのlightboxを変更する方法
管理画面の[設定]→[システム設定]→【画像拡大スクリプトの選択】で、下図のように「Lightboxを使う」か「他のスクリプトを使う」かを選択できます。ここで、Lightbox以外の任意の画像拡大用スクリプトのURLを指定できます。
次に、管理画面の[設定]→[ページの表示]→【投稿本文の表示/画像】や【投稿本文内のURL処理】で、画像リンクに対して指定する必要のある特定の記述を加えます。
たたむ


ついでに、画像拡大時にぐいーんと枠が広がるアニメーションを無効にして一瞬で表示する方法も導入

てがろぐ

X_modokiのヘッダー画像を変更した。
tegalog.cgi設置ディレクトリ内「images」フォルダに「X-header.jpg」という名前でアップロードすれば適用される。
スキンのファイル内にassets→faviconのファイル作って入れてみたけど反応するかな
(追記:一日半くらいでちゃんと出た)
アイコンを透過から白地にしてツイッターっぽくした

てがろぐ

X_modokiのスキン適用してみた
NotoSansだし、タブ表示できるし、トップにもどるボタンもついてるのでかなり理想に近い


改造したとこ
・検索避け
・ファビコン(反応ないので様子見)
・フリースペース書き込み
・プロフィール編集ボタンのダミーに投稿一覧のリンクをのせる
・カテゴリごとのタブ用意・並び替え

なおしたいところ
・投稿タブ押すだけで、カテゴリ別一覧を解除できるようにしたい
(今は投稿一覧リンクかタイトルのクリックでカテゴリ別一覧を解除する形にしている)
・ファビコン表示させたい
・ヘッダーの編集
・画像表示をライトボックスみたいにする

たたむ

てがろぐ

てがろぐtanの改造終わった!


・onelog(投稿ごとの表示)のID表示をカテゴリ名のリンクに変更
・フリースペースの表示を削除
・カテゴリごとのタブ追加が難しかったので、てがろぐの書式でカテゴリ一覧を追加した
・サイドのメニューを検索窓・ハッシュタグ一覧・ほかサイトのリンク(フリースペースで入れてたリンクを直打ちした)に変えた
・検索や絞り込みしたときに出てくるパンくずリストを削除

直したいところ
・タブ表示にしたい(カテゴリ一覧が一列に収まるようになってほしい)
・フォントがなぜかかわらない
・検索と投稿の窓に入力中のフチ消したい
・隠した文章を表示したときに背景がグレーになるのを白にしたい
・ハッシュタグ一覧をもっとコンパクトにしたい(1行1項目でなくてもいい)
たたむ

てがろぐ

絵文字のサイズは16×16の画像にすると良さそう
ファビコンのダウンロードは、
http://www.google.com/s2/favicons?domain...ファビコンがほしいサイトのURL」

絵文字の記法、投稿欄以外では機能しない。
・リンクでのアイコン表示は、「img src="場所" alt="代替え文字"」を<>で囲って表示。
・カテゴリのアイコンは、設定のカテゴリ情報→アイコンで、httpから始まる場所指定が必要。
#ファビコン

てがろぐ

plasticitysushiski絵文字テストtwitterblender
両方とも16×16で、ファビコンから持ってきた

これはミスキーからつれてきたparty 128×128
でかいな

・文字はダブルクリックでコードコピーできる

・設定→「投稿本文の表示/カスタム絵文字」で、「絵文字画像の高さをCSSで2文字分に制限する」を解除すると、文字より下に下がってた絵文字が、文字の少し上に移動した。
ただ、表示したいサイズよりもでかめの画像を載せていると、この項目のチェックを外すと画像がばかでかくなる。


#テスト

てがろぐ

ギャラリーページをコピーしたnoirにしたら、統一感でた。
ファビコンの設定とかスクロールバーのデザインもちゃんと出てくるようになった。

てがろぐ

フォントが全部よもぎになってたので、ちょっとフォントをいじった。
(よもぎの|、ハートになってかわいいんだけど、もっとシンプルにしたかったので)
ついでに題字をTrain Oneにした。
Vivaldiはやっぱりフォントの読み込みすぐしないようにできてるのかもしれない。

Train One
https://fonts.google.com/specimen/Train+...


参考サイト
https://saruwakakun.com/html-css/basic/f...

てがろぐ

スキン変更した

使用したスキン→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/

てがろぐ

急にタブが米粒みたいになったので、タブはなくしました
いろんなサイトのタブを試し直したけど一向になおらんかったら諦める
ツイッターみたいに絵と検索欄をタブで分けてすぐアクセスできるようなスキンがほしいけど、自分でうまく実装できない

てがろぐ

黄鞠
きまり
blenderとsketchup勉強中。
たまに絵を描く。