09:58作成日誌カゼ、少しマシになった。厚着して暖房ガンガンして水分とって熱っついモン食って汗流して、着替えて外出て冷たい空気で深呼吸する...を繰り返す。...と、いつもこんな感じで治してます。医者に行った事ありませんwまあ、悪寒と軽い咳程度のカゼだったので今は2台のパソコンで表示チェックしながらビール飲んでタバコ吸ってまっすョw■PC表示テストやはり、Chrome,Edge,新OperaのChrome系ブラウザと、Firefoxは(軽い調整をしただけで)特に問題はなかった。互換モードじゃないと意図した表示にならなかった。Windows版Safariも、Android版Safariも同じカンジで思い通りの表示じゃなかったので、Macも旧Operaも同じだろうから使えないブラウザだ。07:41作成日誌:完成?昨日夕方から編集を続けた結果、どうやら完成したぽぃw(見た目だけだが...)\(^O^)/ワーイ思いの外上手く行ったので「滑り込みセーフ」くらいで公開出来る状態までこれた、、記述が無かったり変更箇所があったりなどまだまだだが、「やれやれ、間に合った」って感じっス。年始の「お知らせ」などに使用するため、今までの「お知らせリンク」をサイト更新時にどうしても書き直したかった、のだ。明日深夜から数日間、30,40サイトくらい編集しまくる為ほとんどこのブログの編集は出来まヘン。公開後にぼちぼちやろうと思いま〜〜す。昨日昼から今まで、永遠とPC版トップページの編集をやってました。限界、疲れ果てた..(^-^;ハハハ数時間かけてイメージに近いページレイアウトのCSSとhtmlソースを作ったのに、実際にhtmlテキストを記述してみるとナノの不完全な機能に阻まれイメージ通りにはならず、イメージに近いデザインになるように色々試して数時間、、、、ようやく新たなイメージが固まって来たよ......(*_*)イメージでは。ならない事が分かり諦めて本文を省略表示にして、記事ページリンクを真横に表示して一覧ぽくしてみた。見た目は3カラムですが、2カラムです。記事リンクは表示するつもりだったので無駄なテキストが省けた、、ってところか?w.......................................■省略表示。webkitは省略文の末尾に、「...」が表示される独自のCSSがあるのでそれを使いました。他のブラウザはどんな表示か分からんから後で調整するつもり。昨日に続きスマホPC版の記事ページのCSS編集をやりました。htmlテキストの作成とレイアウトだけは、ほとんど終わったのでテストや配色など後回しで、PC版のトップページの編集に取り掛かっていこうと思いまっす。01:40作成日誌6時間ほど記事ページの編集をやってました。今回は出来る事出来ない事の実験や大まかなレイアウトをやりました。ページ全体のwidthをコントロールしたかったが、やはりpositionプロパティを複雑に使ったせいで☆music.BBSの掲示板のようには出来ませんでした。onClickで表示させる実験に少し手間取ったが、上手く出来そうです。┗CSSのみで実現する為にhover擬似要素でテストした。↑コメント記事もこれでやろうと思う。/>にdisplay:block;を指定している事に気づき、削除したところ直りましたw(^-^;ハハハ...アセッタヨChromeじゃ問題なかったからホンマ分からんかった。02:41作成日誌:スマホ版記事ページ一昨日24日〜25日朝まで、まる1日CSSの編集していたせいで昨日25日は夕方6時に起きてしまったw今日朝6時に仕事行かなアカンからもうすぐ寝ま〜す、、(^-^;ハハハ急ぎ記事ページのhtmlテキストを書いて、出来合いのCSSをコピペして、表示確認とFirefoxでソースチェックしました。先に#bodyのwidthを狭くしてcenter表示にしよう。PC版のメインとmax-widthを合わせたいと思う。■PC版は......。記事(メイン)を左側に、スマホ版のmainなどを右側の2カラム表示にするつもり。2カラム表示だが、右左独立してスクロールさせる!ヘッダーとフッターと最下部ナビとnano広告は画面いっぱいの表示にするつもりだ。右側の記事タイトルアンカーで左側の本文を上部移動させるためにアンカーに日時独自タグを使うつもりだ。03:27作成日誌1日かけてスマホ版トップページのデザインと言うかレイアウトが終わりました。細かいところは後回しで記事ページをサクッと仕上げようと思います。本格的な作成開始から1ヶ月が過ぎましたが、半分出来たかな?ってところすネ...w微調整は後回しで下部のUIなど作ったところで再確認の為にAndroid実機でチェックしました。┗最下部に固定しているナビゲーション表示が各ブラウザで違う為に調整しました。┗SafariはやっぱりCSS3に対応出来てないのでヘッダーに対応ブラウザを表示しました。●ChromePCと同じで、まあ安定的で問題ないかな?つか、Chrome基本で作ってま〜すw●Firefox読み込み等が終わるまでフリーズした様なカンジになるが良いですね、慣れていればこれで閲覧したいと思うブラウザです。PC版FirefoxはRSSリーダーを標準装備しているので便利です!●SafariCSS3に対応出来ていないのに加え拡大縮小などで問題がありoranchi@(僕)のサイトには向かないブラウザなので、対応ブラウザから外しました。●Edge(Windows10のブラウザ)テストしていませんが、最新版Operaと同じGoogleChromeなのでたいした問題はないと思います。.......................................そんなこんなで世が更けてしまいました。昨日もCSSの編集を5,6時間やってました。見た目はな〜〜ンも変わってません。言う見た事もないプロパティがある事を知りまして色々とやっている間に時間が過ぎたカンジです...使い方はこんなんです、、<style>*{appearance:none;}</style>※実際はベンダープレフィクスを付けたりしてます。試したところ、確かにselectなどのformパーツがリセットされた感じになりました。01:42作成日誌ようやくheaderのレイアウトとデザインが決まったカンジです。しても<header><h1>の直下に<p>(サイト説明)を置きたかったが、どうにもならないのでhtmlテキストを変更(配置転換)しました。配色は後回しでどんどんCSSを書いて行ってます。今日もヘッダーのCSSをいじくり倒しただけで終わってしまったwheaderの内容と配置をを変更したので少し時間がかかってしまったのだ。カレンダーを表示するつもりだったが、ナノが出力する幼稚なソースではChromeやFirefoxではデザインが崩れてしまうので止めざるを得なくなった(PCもAndroidもダメ、クソSafariだけケータイと同じ表示だw)。tableで枠組みすりゃいいのに、&nbsp;を連続で使った幼稚なテキストだからまるで表示が崩れてしまうのです。white-space:pre;でなんとかなるようにしてもらいたいものだ。)スマホ版は記事ページ使うので、CSSは記事ページのbody内に記述しようと思う。トップページ専用のCSSもトップのbody内に移動しよう!出来れば、IE9以前のブラウザを拒否したい。04:07作成日誌ヘッダーのデザインを何時間も永遠とやってます。配色とか全然決まらない、、CSSの記述も長くなって来たのでグラデーション背景は止めるしかなく上手くも出来ない、、って感じなのですが。当初、PC版のヘッダーだけ横長画面向けの2カラム、スマホ版は縦長画面向け1カラムにするつもりだったのだが、大画面アンドロイドでの横長表示にも対応するためにPC版と同じにするしかなくなってしまった。00:24作成日誌スマホ版トップのbodyの大まかなレイアウト完了?。■ナノ広告..の、3つから成り立ってまして、目障りなナノ広告を最下部に追いやる為にCSS3のposition:;の組み合わせをいろいろ試してみました。▼大雑把な指定で今後変更するかもですが、記述しておきます。!important;padding-top:20px;padding-bottom:100px;opacity:0.4;filter:alpha(opacity=40);}#bottom_nav{position:fixed;font-weight:bold;bottom:0;z-index:3;opacity:0.6;filter:alpha(opacity=60);background:#ffffff;width:100%;}#body{position:fixed;top:0;z-index:2;background:#ffffff;overflow:auto;width:100%;height:100%;}ナノ広告だけposition:relative;bottom:0;で、本編とナビゲーションをposition:fixed;にする事でイメージ通りに出来ました。下にあるテキストほど一番表面に表示されるみたいですが一応、z-indexを指定しています。アンドロイドでテストした結果、Safari以外ではツールバーが隠れる動作が無効になりました。今日からスマホ版のマークアップを開始。ケータイ版との振り分けと基本的なソースの作成までは順調だったのだが、リセットCSSを作成しようとしたところでつまずいた。́;ω;`)?なんと、CSSが全く反映されないトラブルに見舞われて原因究明に2、3時間を費やしてしまった。ナノのCSSファイルからコピペした文字列が原因だったらしく、それを削除して直った。01:27作成日誌ケータイ版のチェック完了!ソースの整理と確認OK!やっと雛型出来た。)メモナノのスマホ向け広告目障りやからbodyの裏に隠すか透明にしたい。仕事の関係で数日ストップしていました。ケータイ版の各ページのCSSの編集も終わりました。imb2.0で修正と確認したら、まずはスマホ版を作ろうと思います。スマホ版はケータイ版をhtml5に書き直してフォームなどを折り畳んで表示物を増やしたい。PC版は2カラム表示にしたい。PC版☆music.BBSの真ん中を抜いた感じで、右サイドはiフレームだけに、左サイドはスマホ版のテキストで出来たらいいな〜w若しくは、メイン記事を左サイドに表示して、右サイドのスマホ版テキストのページ移動アンカーでページまるごと2ページ目に移動、記事アンカー(のJavaScript)で内容をトップ移動にするか??↑これにしよw、iフレームはアカンわ、、PC版の作成は小型ノートPCでモニターしてやってみようと思う。01:31作成日誌いちおう、ケータイ版のマークアップ完了。ページ階層が分かりづらいから、見出しタグでランク付けしよう。