プロフィールページの一言メッセージフォームで感想を受け付けてます。お気軽にご利用ください。
タグ「CSS」［46件］
タイッツーのユーザースタイルシート、背景画像を1枚もの固定にしてみた。後はちょっと修正。
@-moz-document url-prefix("https://taittsuu.com/") {
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');
body,input,textarea,select,button{
font-family: 'Zen Maru Gothic', sans-serif !important;
}
html{
width:100vw;
height:100vh;
}
body{
background-image:url('https://example.com/bg.jpg') !important;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
}
a[target="_blank"]{
color:#991f5a !important;
}
a[href*="hashtags/search?query"]{
color:#146566 !important;
}
}隠す
適用したらこんな感じ。
思い通りにできて満足。
#CSS
@-moz-document url-prefix("https://taittsuu.com/") {
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');
body,input,textarea,select,button{
font-family: 'Zen Maru Gothic', sans-serif !important;
}
html{
width:100vw;
height:100vh;
}
body{
background-image:url('https://example.com/bg.jpg') !important;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
}
a[target="_blank"]{
color:#991f5a !important;
}
a[href*="hashtags/search?query"]{
color:#146566 !important;
}
}隠す
適用したらこんな感じ。
思い通りにできて満足。#CSS
スマホでもStylus使えるやん。そう、Fennecならね！というわけでタイッツーにユーザースタイルシート当ててフォントとリンク文字色変えてみたですよ。
本文の文字色と一緒だったのでリンクがわかりにくかったのよね。一応アンダーバーはあるけどさ…。ハッシュタグは他のリンクと差別化してみました。@-moz-document url-prefix("https://taittsuu.com") {
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');
* {
font-family: 'Zen Maru Gothic', sans-serif;
}
a[target="_blank"]{
color:#991f5a !important;
}
a[href*="hashtags/search?query"]{
color:#146566 !important;
}
}隠す
多分大丈夫なはず。
【追記】ソースに赤文字部分を追加しました。チョットミスった…。
#CSS
本文の文字色と一緒だったのでリンクがわかりにくかったのよね。一応アンダーバーはあるけどさ…。ハッシュタグは他のリンクと差別化してみました。@-moz-document url-prefix("https://taittsuu.com") {@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');
* {
font-family: 'Zen Maru Gothic', sans-serif;
}
a[target="_blank"]{
color:#991f5a !important;
}
a[href*="hashtags/search?query"]{
color:#146566 !important;
}
}隠す
多分大丈夫なはず。
【追記】ソースに赤文字部分を追加しました。チョットミスった…。
#CSS
どうしても#てがろぐ は昔配布されてたapeboardと後継のapeboard+を思い起こさせるんだけど、その理由はどちらもHTMLと#CSS でスキンを作成できる、掲示板CGIだけど日記やリンク集など使い方にバリエーションがあった、などが挙げられる。
てがろぐのほうが断然高機能なんだけど、用途としては大して差異はないかな。それにしてもVectorで今でもダウンロード可能みたい。サイトはとっくに消えちゃってるのに…。
#Web
てがろぐのほうが断然高機能なんだけど、用途としては大して差異はないかな。それにしてもVectorで今でもダウンロード可能みたい。サイトはとっくに消えちゃってるのに…。
#Web
#てがろぐ の日付リストを古い順から並べるのはこちらの方法でできるけど、月を横並びにした場合(Sakko Memoみたいに)にはどうしたらいいか考えてみた。*{
padding:0;
margin:0;
box-sizing:border-box;
word-wrap:break-word;
overflow-wrap: break-word;
}
li{
list-style-type:none;
}
li.datelimit-month .datelistlink span.year{
display:none;
}
li.datelimit-month:nth-last-child(n+2)::before{
content:" / "
}
.datelimitlist{
text-align:center;
display:flex;
flex-direction:column-reverse;
}
.datelimitsublist{
display:flex;
flex-direction:row-reverse;
justify-content:center;
flex-wrap:wrap-reverse;
}多分いけると思うけど未検証です。
#CSS
padding:0;
margin:0;
box-sizing:border-box;
word-wrap:break-word;
overflow-wrap: break-word;
}
li{
list-style-type:none;
}
li.datelimit-month .datelistlink span.year{
display:none;
}
li.datelimit-month:nth-last-child(n+2)::before{
content:" / "
}
.datelimitlist{
text-align:center;
display:flex;
flex-direction:column-reverse;
}
.datelimitsublist{
display:flex;
flex-direction:row-reverse;
justify-content:center;
flex-wrap:wrap-reverse;
}多分いけると思うけど未検証です。
#CSS
メッセージで#てがろぐ のカスタム#CSS 利用についてのご質問がありました。利用に制限はありませんしリンクも必須ではありません。お役に立てたらそれだけで嬉しいのでご自由に利用してください。
メッセージは[F:cite:〜]に関する質問だったのですが、FirefoxならFormat Linkというアドオンで簡単に引用記法(cite含む)をクリップボードにコピーできます。下記フォーマットをアドオンに登録して(フォーマット名は日本語でOK)引用したい範囲を選択→Format Link→登録したフォーマット名を選択でOKです。
/*Format*/
[Q:{{text.s("\\[","\\[").s("\\]","\\]")}}\n[F:cite:[{{title.s("\\[","\\[").s("\\]","\\]")}}]{{url.s("\\(","%28").s("\\)","%29")}}]]Chromeだと拡張機能のCreate Linkで同様のことができますよ。隠す
#返信
メッセージは[F:cite:〜]に関する質問だったのですが、FirefoxならFormat Linkというアドオンで簡単に引用記法(cite含む)をクリップボードにコピーできます。下記フォーマットをアドオンに登録して(フォーマット名は日本語でOK)引用したい範囲を選択→Format Link→登録したフォーマット名を選択でOKです。
/*Format*/
[Q:{{text.s("\\[","\\[").s("\\]","\\]")}}\n[F:cite:[{{title.s("\\[","\\[").s("\\]","\\]")}}]{{url.s("\\(","%28").s("\\)","%29")}}]]Chromeだと拡張機能のCreate Linkで同様のことができますよ。隠す
#返信
「キャッシュのせいだから再読込して」と毎回言わなくて済むようにする記述方法という記事をにししさんが書いてるんだけど、それを元にして#てがろぐ のスキンではこうしてる。<link type="text/css" rel="stylesheet" href="tegalog.css?[[INFO:LASTUPDATE:YMDhm]]">投稿すればクエリが変動するようになってるのでクエリの書き換えが不要になります。ただ、ファイルのタイムスタンプを取得できる記法を作る構想があるようなので、そうなると#CSS を無駄に自動再読込みしなくて済むので実装期待してます。
疑似要素::first-letterを使うとMac IEの悪夢がよみがえる私はインターネット老人会の仲間に入れますか？むかーしむかし、CSSバグリストという某巨大掲示板のスレッドをまとめたサイトがあって、にっちもさっちもいかなくなったときはお世話になってました。iswebのサイトだったので今は消滅してるけど。今はCan I use...でブラウザ別対応状況を調べるのがスタンダードですよね。
#CSS #Web
#CSS #Web
てがWA!のリンクバナーに#CSS でフィルターをかけてるけど、実はCSS Filter ジェネレーターというサイトでCSSを生成してます。勿論、#スマホ からでも使えます。むしろスマホからしか使ったことがない😅
自前の画像をアップロードして色んなフィルターを試せるので楽しいですよ。便利ツールを使えるだけ使えばCSS書くのも楽です。
#Web
自前の画像をアップロードして色んなフィルターを試せるので楽しいですよ。便利ツールを使えるだけ使えばCSS書くのも楽です。
#Web
ベースカラーはCSSファイルの冒頭でCSS変数を使って定義しておく方が便利かもしれない。と書かれてるのを読んで、Color Generatorというサイトを思い出した。サイトカラーを決めるのにも便利。
No.2182 - 開発放言 - にしし らぼらとりー
#CSS
doの記事にぼかしを入れるためのコード が紹介されてたけど、Android版Firefoxでは全くぼかしがかかってなかった。黒塗りのほうは問題なし。こういうのは環境によるので過信はしないほうがいいなと改めて思いました。
#CSS
#CSS