【文字色一覧】 【タグ一覧】 【カラーコード一覧】
スレ一覧
30.ふたりかくれんぼ(保存)
 ┗180,183

180 :坂本龍馬
2019/08/11(日) 22:33


Whocaresでcssを使いたい時のコツ おまけ


hrに関して補足ついでに掲示板にかかっているcssについてもう少し詳しく書きます。
特に知ったからと言ってどうということはない、偏ったどうでもいい話なのでcssにけっこう興味のある方向けです。

■ hrに関して補足
当時僕は「上書きできない」といった表現をしていましたが、恐らくは当時も設定されているhrデザインを打ち消してから書き直すことで上書きはできたはずです。たぶん。(検証しようとしましたが当時の環境を再現出来ず出来なかったです…)
ただこれは通常HPを作る際使うことの少ない知識であり、ちょっと勉強したくらいだと辿りつきにくい部分だなぁと思います。
(HPなどで自分で全て組む場合、わざわざ打ち消すくらいなら別のクラスを設定して分けたほうがよほど分かりやすいですからね)
打ち消す分の記述も必要になってくるので、簡単に設定できるようにしてくださった管理人さんには重ね重ね、感謝しかありません。

hrに関しての補足は以上です。

10/07追記:勉強不足でした!!あくまで恐らくですが、優先順位の関係で打ち消しはできなかったと思います。
上書き自体は「できなくもない」ですが、無理やり優先入れ替えるような記述になるのでオススメできる方法ではなかったです。

■ 掲示板にかかっているcssについての詳細
僕は前の記事で「この掲示板にかかっているcssは分かりやすく言えば2種類ある」と話しました。
これは厳密に言うとちょっと違います。

より詳細に言うと、前述の
【掲示板を借りたユーザー(このサイトの場合だと管理人さんのことです)が設定しているcss】
これには設定する方法が2種類あります。

 1.管理システムの項目別に設定できるcss(body、a要素、hr要素 等が項目ごとに設定できます)
 2.管理システムの上級設定でheader内に自由に設定できるcss(まとめて設定できますがより知識が必要です)

この2種類です。これが理解するときに引っかかりやすいっちゃ引っかかりやすいです。
記述する上ではそんなに問題ないですが。
なのでつまりは

【元々掲示板に設定されているcss】
【ユーザー(管理人)が設定しているcss】

 ┗1.項目毎に設定できるcss
 ┗2.自由に設定できるcss


これがより正しい表現になります。
で、これがソースにどういう順序でどのように反映されているかというと(一覧ページのソースをもとに話します)

・headerの上に【元々whocaresという掲示板そのものに設定されているcss】が入ります。
・その下に続く形で2の上級設定で設定したcssが入ります。(この日記サイトでは設定されていないため入っていません)
・そして最後に1で指定した内容が、cssとしてではなくbodyに直接記述される形で入っています。

こういう形で反映されています。

なので、自分のしたいデザインが「どこにどう設定されているcssと干渉しておかしくなっているのか」を見つけると上書きがよりスムーズにできるかなと思います。
まあ理解せずとも上書きさえできていれば問題ないので与太話程度ですが…。
最悪じゃあとりあえず全部リセットする記述入れればいいじゃん!って言われたらそうだね!!って感じです。記述は長くなりますが。


[削除][編集][コピー]

183 :坂本龍馬
2019/08/12(月) 23:03


雑感とちょっとしたお知らせ


「Whocaresでcssを使いたい人向けのtips」頑張って書いた(>>182)ので読んでほしいです!!!
この記事をまとめてみて思ったことつらつら書きます。

改めて検証してみて、Whocaresは本当によくできているレンタル掲示板だなぁと感じました。痒い所に手が届くとはこのことです。
ですが、やはり時代遅れのツールであることは確かなんですよね。

1999年12月24日、HTMLが4.01にバージョンアップされたときには、すでにhr要素は非推奨となっていたそうです。
同じように「cssとしてではなく、bodyに直接スタイルを記述する」というやり方も現在、通常のサイトを作成する際には使われない非推奨な方法です。

僕が最近たらたらと勉強していた時に参考にしていたのは、もちろんHTML5の書籍やサイトなのですが。
きっとこれからこういった日記サイトでcssを組もうとする皆さんも、HTML5を前提としたcssの知識を得ることになるでしょう。
20年前のHTMLやcssの方式に基づいて書かれたサイトや著書を参考にすることは、ほとんどないと思います。

なので何も知らない状態からここまで辿りつくのは少々厄介な道のりですし、
身に付けたとして、まだWhocaresが使われているこの世界でしか使えないような知識です。

ですが、それでも僕はこの知識を愛しています。
ここに書いたことで、僕の大好きな世界がもう少しだけでも、豊かで、華やかなものになると嬉しいなあと思います。

僕は西郷さんと共にこの世界に骨を埋める気ですからね!!!


そうは言ってもこの世界遅れすぎてない?というのが僕の持論です。(てのひらクルー)
帯という最強アプリが出てしまったが故にインターネットブラウザ上でのなりきり文化は中々に停滞しているように思います。
やっぱり楽しかった思い出があるので懐古してしまうんですよね…。

こういう日記サイトくらいゆるい交流感が僕は好ましいのですが、そういう感じの新しいアプリやツールはないんですよね。
ただ日記サイト絶頂期の時、晒しや煽りがひどかった記憶もあるので…
時代に追いつこうとせず、今くらいまったりやる方が良いのかもしれません。

ちなみにここの日記サイトさんは僕が知っている中で史上最強に治安が良いです。
もうここにマイホーム建てます僕は。

…建ててますね!(表紙で)


あ、でもお盆中にちょっと表紙だけ改装しようかと思ってます!
前々から企んでいたことをようやく実行する形になります。
理由は、少しだけこの日記をスクロールしてみるとわかります。

気づきましたか?

最近!
僕しか!!
書いていないことに!!!

流石に表紙詐欺が過ぎるので変えようと思った次第であります。
とはいえ「西郷さん」とのやりとりはもう半年くらいしておりません。実は。
なんなら全然表紙のお二人で話す機会が多いですし、今もその姿で話しているんですが、日記を書く時だけ喋りたがるんですねぇ僕が…。なんででしょうかね。
ちょっと思いついたデザインがあったのでなんとか形にしたいなと思っています。うまく出来るかは謎です。


[削除][編集][コピー]



[戻る][設定][Admin]

WHOCARES.JP
182 :坂本龍馬
2019/08/11(日) 22:48


Whocaresでcssを使う時のコツ


また少し余白を整えました。粗削りに作ってからタニシのように少しずつ少しずつ整えて環境を良くしていくのが趣味です。
知識が足りない頃に作成した表紙のcssで余白調整をずっとミスっており、今回でスマホのスクロール時に画面がズレる問題が解決したはずです。
iPhoneのchromeとsafariでのみの確認で、たぶん僕しか気にしてなかったとは思うのですが、音量同様そういう細かな!気配りがね!大事ですので!!これがモテです!!!

今日はWhocaresでcss(タグ)を使いたい人向けにちょっと書きたいと思います。
僕が今までWhocares掲示板内でのcssについて格闘してきたことのまとめのようなものです。

とりあえず調べて作ってみたけどなんか違うな…みたいな人は参考になるかもしれません。
(cssに関しての知識がまったくない人にはよくわからない内容かもしれません…。cssをなんとなく触ったことのある人が「なりきりサイトの日記板でよく使われるWhocares掲示板」でcssを使うときのコツ、みたいな感じです)


先に何が書かれているか簡単にまとめると

・Whocares掲示板は元々タグが入ってるのでcssがうまく反映されないことがある
・そういうときは元々のタグをリセットするか上書きすることが必要
・元々のタグはこんな感じ
・ただこれは古い知識で今は使われない記述だし調べるのもちょっと面倒)
・だから今からタグ使おうって人用に書きました

そんな感じです。
以下、検証方法から詳しく話していきます。

まず、掲示板内でcss組む際は、元々掲示板自体に設定されたcssがあるため、普通のHPを組むより難しい…というかコツがいります。
最初は特に、あれ?なんか思ってたのと違うなぁ、とか表示されないなぁ…とかあると思うんです。
そういう場合の検証と解決方法を順に書きます。(基本的にPCから試す方法です)

■ 検証方法
1、プレビューを試す
僕はcodepenっていうコードを書いたらすぐ反映してくれるブラウザツールを使用してやっているのですが、そういうツールはいろいろあるので使いやすいものを使用してプレビューしてみてください。
この地点で表示されない・思ってたのと違う場合はcssの組み方が間違っています。
(※ こういったツールでは改行は反映されませんのでそこは気にしなくて大丈夫です。気になる場合はbrタグを足してください)

2、ページを更新する
日記ページはもちろん、外部cssがある場合はそのcssページも同じように更新してください。最悪ブラウザの履歴をクリアしましょう。
一度そのcssで開いてしまうとブラウザはそれを記憶してしまうので、更新が反映されずに表示されていないことがあります。
外部cssを使用している場合、特にこれに引っ掛かりがちです。

ここまでやっておかしい場合はWhocares掲示板にかかっているcssと干渉している可能性があります。

よくある問題は「フォントが反映されない」「文字の大きさが違う」「設定していないのに余白が入った」などです。
次のページで詳しく書きます。