作成日誌
カゼ、少しマシになった。
厚着して暖房ガンガンして水分とって熱っついモン食って汗流して、着替えて外出て冷たい空気で深呼吸する...を繰り返す。。
…と、いつもこんな感じで治してます。
医者に行った事ありませんｗ
まあ、悪寒と軽い咳程度のカゼだったので今は2台のパソコンで表示チェックしながらビール飲んでタバコ吸ってまっすョｗ
■PC表示テスト
やはり、Chrome，Edge，新OperaのChrome系ブラウザと、Firefoxは(軽い調整をしただけで)特に問題はなかった。
IE9以前は全くダメなのは分かっていたが IE9 IE10 IE11 は、互換モードじゃないと意図した表示にならなかった。
Windows版Safariも、Android版Safariも同じカンジで思い通りの表示じゃなかったので、Macも旧Operaも同じだろうから使えないブラウザだ。
IEだけDOCTYPEを非表示にするとか、このサイトじゃ出来ないからChrome系のブラウザで見てもらうように促すしかないっす、、
...φ(.. )メモ
作成日誌：完成？
昨日夕方から編集を続けた結果、どうやら完成したぽぃｗ(見た目だけだが…)
＼(^O^)／ﾜｰｲ
思いの外上手く行ったので「滑り込みセーフ」くらいで公開出来る状態までこれた、、記述が無かったり変更箇所があったりなどまだまだだが、「やれやれ、間に合った」って感じっス。
年始の「お知らせ」などに使用するため、今までの「お知らせリンク」をサイト更新時にどうしても書き直したかった、のだ。
明日深夜から数日間、30,40サイトくらい編集しまくる為ほとんどこのブログの編集は出来まヘン。
、、公開後にぼちぼちやろうと思いま〜〜す。
ｙ(^-^@
今日は、やる気になるまで休憩しまっすｗ
⇒ビデオ見ながらギター弾くっす！火暴音で？ｗ
(ToT)…カゼひいたポイからムリ...Orz
でわ
よひお年を
作成日誌：PC版作成開始
昨日昼から今まで、永遠とPC版トップページの編集をやってました。。
もう限界、疲れ果てた..(^-^;ﾊﾊﾊ
数時間かけてイメージに近いページレイアウトのCSSとhtmlソースを作ったのに、実際にhtmlテキストを記述してみるとナノの不完全な機能に阻まれイメージ通りにはならず、
イメージに近いデザインになるように色々試して数時間、、、、
ようやく新たなイメージが固まって来たよ…
...(*_*)
イメージでは。。
右側にスマホ版の記事リンク一覧を表示して、左側の記事本文をページトップに表示させようと思っていたのだが
なんと、！
ナノの不備だらけのブログ機能では、記事本文一覧と記事リンク一覧を同時に作成(表示)出来ない事に今ごろ気が付いた〜ｗ
...(-ﾛ-;)ｱｾﾞﾝ
何とか為らんかと試行錯誤を繰り返すこと数時間、、、、、、
どうにもならない事が分かり諦めて本文を省略表示にして、記事ページリンクを真横に表示して一覧ぽくしてみた。
見た目は3カラムですが、2カラムです。
どのみち記事リンクは表示するつもりだったので無駄なテキストが省けた、、ってところか？ｗ
…………………………………
■省略表示。
webkitは省略文の末尾に、｢…｣が表示される独自のCSSがあるのでそれを使いました。
他のブラウザはどんな表示か分からんから後で調整するつもり。
まあ、、何とか為らんかと試行錯誤を繰り返したので少し新しい知識を得る事も出来てそれなりに有意義な1日だったのかな？ｗ
作成日誌
昨日に続きスマホPC版の記事ページのCSS編集をやりました。
htmlテキストの作成とレイアウトだけは、ほとんど終わったのでテストや配色など後回しで、PC版のトップページの編集に取り掛かっていこうと思いまっす。
…………………………………
今日もいろいろと難題がありましたが、まずまず上手く切り抜けたでこの勢いで年始までには公開出来る状態にしたいナ〜ｗ
本当はJavaScriptを使った動的な表示など色々やりたいのだが、時間がなさ過ぎて後回しにするしかない、、
...Orz
溜まりに溜まったテレビ録画、いつになったらゆっくり観れるんだろう？ｗ
作成日誌
6時間ほど記事ページの編集をやってました。
今回は出来る事出来ない事の実験や大まかなレイアウトをやりました。
ページ全体のwidthをコントロールしたかったが、やはりpositionプロパティを複雑に使ったせいで☆music.BBSの掲示板のようには出来ませんでした。
(当初は想定してなかったのだｗ)
追記記事をマウスオーバーか onClickで表示させる実験に少し手間取ったが、上手く出来そうです。
┗CSSのみで実現する為にhover擬似要素でテストした。
↑コメント記事もこれでやろうと思う。
※コメントと追記ページはスマホPCで使わない
……………………………………
■ハマった...
Firefoxで記事を見てみたら、<br /><br />と2回連続改行している部分が1回しか改行されておらず、｢おかしな｣…って事で2時間近くハマってしまったｗ
bodyのCSSを全部消しても直らず、降参→｢やんぺじゃボケー！｣って、、投げそうになった寸前で……<br />にdisplay:block;を指定している事に気づき、削除したところ直りましたｗ
(^-^;ﾊﾊﾊ...ｱｾｯﾀﾖ
Chromeじゃ問題なかったからホンマ分からんかった。。
なんでこんな余計な事したんか覚えてヘンし、こんなんなるとは思わんかったワｗ
作成日誌：スマホ版記事ページ
一昨日24日〜25日朝まで、まる1日CSSの編集していたせいで昨日25日は夕方6時に起きてしまったｗ
今日朝6時に仕事行かなアカンからもうすぐ寝ま〜す、、
(^-^;ﾊﾊﾊ
急ぎ記事ページのhtmlテキストを書いて、出来合いのCSSをコピペして、表示確認とFirefoxでソースチェックしました。
一応PC版でも使うページなのでデザインはPCでも見やすいようにしなければならない、、
先に#bodyのwidthを狭くしてcenter表示にしよう。
PC版のメインとmax-widthを合わせたいと思う。
■PC版は……。
記事(メイン)を左側に、スマホ版のmainなどを右側の2カラム表示にするつもり。
2カラム表示だが、右左独立してスクロールさせる！
ヘッダーとフッターと最下部ナビとnano広告は画面いっぱいの表示にするつもりだ。
右側の記事タイトルアンカーで左側の本文を上部移動させるためにアンカーに日時独自タグを使うつもりだ。記事ナンバーを表示させる独自タグがないから仕方がない、、
忘れていたがJavaScriptを有効にするようにメッセージ表示しなければ、、
左側テキスト内に追記とコメントページへのアンカーを表示したいが可能なのかナ？
とりあえず、コメントページのhtmlテキストを作って記事ページでCSS編集しよう〜！
作成日誌
1日かけてスマホ版トップページのデザインと言うかレイアウトが終わりました。
(^-^;…見た目だけですがｗ、、
細かいところは後回しで記事ページをサクッと仕上げようと思います。
さてさて、上手く行きますかな？
■メモ...φ(.. )
#latest_blog1_date#
この独自タグ、、「date部分に日時関係タグが使える云々」て、書いたーるけど使えンやん、、、
...Orz、ウソばっかりやんケｗ
どないな使い方すんのんか具体的に説明しろやー！
作成日誌
本格的な作成開始から１ヶ月が過ぎましたが、半分出来たかな？ってところすネ…ｗ
微調整は後回しで下部のUIなど作ったところで再確認の為にAndroid実機でチェックしました。
┗最下部に固定しているナビゲーション表示が各ブラウザで違う為に調整しました。
┗SafariはやっぱりCSS3に対応出来てないのでヘッダーに対応ブラウザを表示しました。
●Chrome
PCと同じで、まあ安定的で問題ないかな？つか、Chrome基本で作ってま〜すｗ
●Firefox
読み込み等が終わるまでフリーズした様なカンジになるが良いですね、慣れていればこれで閲覧したいと思うブラウザです。
なお、PC版FirefoxはRSSリーダーを標準装備しているので便利です！
●Safari
CSS3に対応出来ていないのに加え拡大縮小などで問題がありoranchi@(僕)のサイトには向かないブラウザなので、対応ブラウザから外しました。
●Edge(Windows10のブラウザ)
テストしていませんが、最新版Operaと同じGoogleChromeなのでたいした問題はないと思います。
…………………………………
そんなこんなで世が更けてしまいました。。
...(^-^;ﾊﾊﾊ
また明日、、？
作成日誌
引き続きFORMのカスタマイズなどやっておりました、、
完成されたUI(ﾕｰｻﾞｰｲﾝﾀｰﾌｪｰｽ)を壊してから作り直すとか、ワケ分からんこと何日もやってて疲れ果ててますｗ
ふつうにUI作るのもoranchi@(僕)の場合数時間かかるところ、ブラウザと他者が作ったUIを加工するのは至難の業なんです、
...(^-^;汗
まあ、苦労した甲斐あって(まずまず)思い通りになりましたー！(ChromeとFirefoxで違いｱﾘっすｗ)
ヮｰｨ“ﾐ＼(^O^)／ﾐ
…が、、勢いで記事一覧のアンカー部分のUIも作ってみたのですが、全体的な配色が不満で足踏みしとりま〜〜すｗ
……………………………………
こだわり捨てて先に進まないと１月中の完成も難しい状況になって来た、、とにかく前進するっス！
作成日誌
昨日もCSSの編集を5,6時間やってました。
見た目はな〜〜ンも変わってません。
(^-^;汗…ﾊﾊﾊ
主に、フォームのリセットCSSの完成版を作っていたのですが、appearance と言う見た事もないプロパティがある事を知りまして色々とやっている間に時間が過ぎたカンジです...
使い方はこんなんです、、
<style>
*{appearance:none;}
</style>
※実際はベンダープレフィクスを付けたりしてます。
試したところ、確かにselectなどのformパーツがリセットされた感じになりました。
が、ナノのCSSもリセットしなければならないので中々思い通りに成らないっスーっ！
‐‐‐‐‐‐‐‐‐‐‐‐‐
話し変わりますが、XRIEと言うレンタルホームページスペースでブログとか作成すればsamehaのアカウントサイトからCSSファイルが使える事を思い出して「引っ越すか！」とか考えたけれど、モバスペそっくりでPCサイト作成には全く向いていないから「あっさり」止めましたｗ
火暴(≧∇≦)ﾉ彡ｶﾞﾊﾊ
モバスペだとファビコン設定出来たりするんだけどCSSファイルないし作り辛い、、
XRIEはサブドメインで良いンだけど、モバスペ同様 XHTMLで作れないし思い通りに成らない、、
...Orz
レンタルサイトでの作成は思い通りに成らない事ばかりでホンマしんどいですワｗ
作成日誌
ようやくheaderのレイアウトとデザインが決まったカンジです。
どうしても<header><h1>の直下に<p>(サイト説明)を置きたかったが、どうにもならないのでhtmlテキストを変更(配置転換)しました。
配色は後回しでどんどんCSSを書いて行ってます。
...遅いですが、(^-^;ﾊﾊﾊ…
スマホ版までは年内に作りた〜〜いｗ
つづく...
作成日誌
今日もヘッダーのCSSをいじくり倒しただけで終わってしまったｗ
headerの内容と配置をを変更したので少し時間がかかってしまったのだ。
あと。カレンダーを表示するつもりだったが、ナノが出力する幼稚なソースではChromeやFirefoxではデザインが崩れてしまうので止めざるを得なくなった(PCもAndroidもダメ、クソSafariだけケータイと同じ表示だｗ)。
tableで枠組みすりゃいいのに、 を連続で使った幼稚なテキストだからまるで表示が崩れてしまうのです。
せめて、white-space:pre;でなんとかなるようにしてもらいたいものだ。ｱﾎ〜ｗ
■覚え書き...φ(.. )
スマホ版は記事ページ使うので、CSSは記事ページのbody内に記述しようと思う。
トップページ専用のCSSもトップのbody内に移動しよう！
出来れば、IE9以前のブラウザを拒否したい。
作成日誌
ヘッダーのデザインを何時間も永遠とやってます。
配色とか全然決まらない、、CSSの記述も長くなって来たのでグラデーション背景は止めるしかなく上手くも出来ない、、
って感じなのですが。、概ねイメージ通りにはなって来たので、もうちょいってトコです。
‐‐‐‐‐‐‐‐‐‐‐‐‐
■CSSが長くなる理由
当初、PC版のヘッダーだけ横長画面向けの2カラム、スマホ版は縦長画面向け1カラムにするつもりだったのだが、大画面アンドロイドでの横長表示にも対応するためにPC版と同じにするしかなくなってしまった。。
このため、、、狭いウィンドウや拡大表示にしても横スクロールなどが発生しないようにリキッドレイアウトが必要になるなど、想定外に余計なCSSが増え続けているのです
…(^-^;汗
あーしんどｗ
作成日誌
ン〜〜〜ん、、、、
headerのデザインどうしようか？
イメージが湧いてこないっスｗ
(^-^;汗...
とりあえず☆music.BBSトップからCSSをコピペしまくってみたところで行き詰まりヤル気がなくなってしまったｗ
トップタイトルを最上部にして、説明文とかPageView部分を別のbackground-colorにしてその下にぶら下がるようにトップナビを置くかな？
トップナビとトップタイトルの背景はグラデーションにしたーいｗ
PC版も考慮しながらやらなアカンし、、CSSファイルがないからスタイルシートを出来るだけシンプルにしたいンだよねぇ、、、
作成日誌
スマホ版トップのbodyの大まかなレイアウト完了？。
bodyは大きく分けて、
■本編、
■下部ナビゲーションボタン、
■ナノ広告
..の、3つから成り立ってまして、目障りなナノ広告を最下部に追いやる為にCSS3のposition:;の組み合わせをいろいろ試してみました。
▼大雑把な指定で今後変更するかもですが、記述しておきます。
#nano{position:relative;
bottom:0;
z-index:1 !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ファイルからコピペした文字列が原因だったらしく、それを削除して直った。
なぜなのか不明です。、Orz..
今日は、肩こり過ぎてヤル気がなくなってしまったからまた明日。
‐‐‐‐‐‐‐‐‐‐‐‐‐
ナノの広告をなんとか裏に隠したいから、最下部ナビの部分を先に作ってから始めよう！
positionプロパティ使うしかないみたい、上手く出来なければ透明にするしかない、display:none;だと不味いと思うしナ、、
目障り広告さえなければこんな事しないで済むのに、、ﾊｧ..めんどくさい...
作成日誌
ケータイ版のチェック完了！
ソースの整理と確認ＯＫ！
やっと雛型出来た。。(^-^;汗
‐‐‐‐‐‐‐‐‐‐‐‐‐
ケータイとＰＣスマホの振り分けしようとheadをいじってたのですが、bodyタグの振り分けが出来ない、、
Orz...ﾑｶﾂｸ実装ﾔﾃﾞﾎﾝﾏ
しゃーないからまた各ページのCSSを変更してチェックのやり直しや、、しんどいワ〜〜ｗ
何はともあれ第一関門突破や、、次はどんなんかな〜〜ｗ
...φ(.. )メモ
ナノのスマホ向け広告目障りやからbodyの裏に隠すか透明にしたい。
z-indexかopacityで、なんとかならんかやってみる！
先ずリセットCSSの作成から始める！
作成日誌：ありゃ？
>>:重大な欠陥
今。、記事編集画面見たら、添付ファイルの表示方法が変わっとるがなｗ
未公開のこのブログ見とるンかいな？
キショクワル〜ｗ
しゃーけど、記事レイアウト編集画面内の独自タグの説明は変わっとらへんで？
一部だけコソコソ変えられても迷惑なだけやんケー！
やるなら全面的に変更せんかいナ〜〜ｗ
#img1#
■追記
なんじゃこりゃｗ
画像表示画面へのURL指定でけへんから画像に直リンクせなアカンやんケｗ
ワナかな？？
だいたい、サムネイル画像の画質やサイズ設定がでけへんからめんどくさい事せなアカンねんやろが？
簡単にUI作れないンやったらナノの掲示板並に独自タグ増やさなアカンで？ｗ
作成日誌
仕事の関係で数日ストップしていました。
ようやく、ケータイ版の各ページのCSSの編集も終わりました。
imb2.0で修正と確認したら、まずはスマホ版を作ろうと思います。
スマホ版はケータイ版をhtml5に書き直してフォームなどを折り畳んで表示物を増やしたい。
ＰＣ版は2カラム表示にしたい。
ＰＣ版☆music.BBSの真ん中を抜いた感じで、右サイドはiフレームだけに、左サイドはスマホ版のテキストで出来たらいいな〜ｗ
若しくは、メイン記事を左サイドに表示して、右サイドのスマホ版テキストのページ移動アンカーでページまるごと2ページ目に移動、記事アンカー(のJavaScript)で内容をトップ移動にするか？？
↑これにしよｗ、iフレームはアカンわ、、
ＰＣ版の作成は小型ノートPCでモニターしてやってみようと思う。。
作成日誌
いちおう、ケータイ版のマークアップ完了。
ページ階層が分かりづらいから、見出しタグでランク付けしよう。
トップページから見直さないとダメだ、
コメントページで再考す