音楽サイト情報

作成日誌

引き続き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で枠組みすりゃいいのに、&nbsp;を連続で使った幼稚なテキストだからまるで表示が崩れてしまうのです。
せめて、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でモニターしてやってみようと思う。。

作成日誌

いちおう、ケータイ版のマークアップ完了。

ページ階層が分かりづらいから、見出しタグでランク付けしよう。　
トップページから見直さないとダメだ、

コメントページで再考す

作成日誌

昨日は、配置換えなどマイナーチェンジにとどまった。。


寝ます、、

作成日誌

粛々と進めてきたケータイ版の記事ページのデザインは、まあまあ落ち着いた、、かな？

ジャンル名をヘッダーにして、記事タイトルを<h2>にするかしないかで随分悩んでる。。

と、言うのも。、
ページのタイトルも変えられないし、多分同じページに複数のURLが発生するが link rel="canonical" の指定も出来ないし、headが同じだから検索ロボット用ナビゲーションも出来ないのです、、
Orz...

考えていてもしょうがないし、
やってみるしかない。
成るようになれっすワｗ

‐‐‐‐‐‐‐‐‐‐‐‐‐‐

‐MusicLinks‐の掲示板でテスト済みだから、やりようはあるのだがトップページのheadで作ると決めたからやるしかないのダｗ
実験出来るサイトでしか暴言できないから、、間違いｗ
冒険出来ないからネ(^.^)b

追記ページ作って一段落だ。頑張るぞー

作成日誌：重大な欠陥

記事ページ編集やってて、画像のレイアウトしようと思い独自タグをみたら、、、

#img画像番号#
#timg画像番号#
#img画像番号_url#
#timg画像番号_url#

。。はぁ？？？？

記事番号の表示も出来きんのに、画像番号どうやって取得すんねんｗ
そもそも画像のレイアウトが出来けへんやんケ、、
アホやこのサイトｗ
(^-^;ﾀﾞﾒﾀﾞｺﾘｬ..

‐‐‐‐‐‐‐‐‐‐‐‐‐

このサイトのブログ機能誰も使っとらんのかナ？誰も疑問に思わんのんか？指摘せんのんか？

これじゃ普通のブログサイトは作れンよｗ

このブログは日記じゃないから、どうでもいいけれど、よう笑わせてもろたワｗ

作成日誌

昨日の続き...

半日かけてコメントページの携帯版をマークアップした！

テーブルタグのオンパレード久々やったな〜〜ｗ
まずまず上手く出来てひと満足、つか。なんとかなったって感じ、、
スマホ版もテーブルでやろうと思う。

やっと、記事ページ全体をマークアップ出来るようになった、、


新たな問題点をメモメモ
___φ(.. )
■コメント送信に必須項目設定出来ないから、ＰＣ版は手を加えンとアカンす。
■コメントがない場合にメッセージを表示させる。

作成日誌

思い通りにならなさ過ぎて、しんどくなって来た、、
やっぱり大手サイトでやった方がいいのかな〜〜ｗ

(記事ページ内に埋め込まれる)コメントページの編集をやり始めたところで、なんだか行き詰まった感満載だ。
(^-^;汗‥‥

コメントページの編集を3時間くらいやったところで、嫌気して｢酒飲んで寝るか〜｣ってなってますｗ

なんとかナランカナ？
今年中の完成はムリぽいっスｗ

作成日誌：記事画面ﾌﾟﾗﾝK

ようやく、携帯版の記事画面の編集を開始。
ナノの実装のまま作るつもりだから <head>はトップページと同じなんで、よくよく考えて熟考せなアカンす。

スマホ版も考慮しつつシュミレーションしま〜す、、
※コメント と 追記 のページが単独表示出来るのでその辺上手くやらなアカン。

※普通に記述した方が良いのかな？、視覚的にもコンテンツを区切らないとアカンよ！
コメントをsectionでなく単にarticleにするか？だな、
投稿フォームをsection、aside内に設置するかな？ダメ！

footerは？どうするの？

※コメント部は<table>を使おう！！
先ずコメントページの作成からやろう！！
携帯版は、 width="90%"くらいで<blockquote>っぽくする

■記事画面プラン１

〈body〉〈div id="body"〉
〈nav〉トップナビ〈/nav〉
〈article〉
〈header〉
〈h１〉記事タイトル〈/h１〉
〈/header〉
〈time〉年月日〈/time〉
〈p〉本文
〈a〉追記※追記はformタグなども使う！〈/a〉
〈/p〉
〈nav〉ページナビ〈/nav〉


▼ここからコメント
〈section title="メインコンテンツへのコメント"〉
〈h2〉コメント〈/h2〉
〈p〉非表示の説明文〈/p〉
〈article〉〈p〉コメント１〈/p〉
〈aside class="robots-nocontent"〉 rel="nofollow"編集リンク〈/aside〉
〈/article〉
〈article〉〈p〉コメント2〈/p〉
〈aside class="robots-nocontent"〉 rel="nofollow"編集リンク〈/aside〉
〈/article〉
〈article〉〈p〉コメント3〈/p〉
〈aside class="robots-nocontent"〉 rel="nofollow"編集リンク〈/aside〉
〈/article〉
〈nav〉ページナビ〈/nav〉
〈aside〉form、投稿フォーム〈/aside〉
〈/section〉
▲ここまでコメント

〈footer〉フッター〈/footer〉
〈/article〉

‐‐ナノ広告‐‐

〈/div〉〈/body〉



■コメント部プラン2

▼ここからコメント

〈article title="メインコンテンツへのコメント"〉
〈h2〉コメント〈/h2〉

〈div〉〈p〉コメント１〈/p〉
〈time〉年月日〈/time〉〈aside class="robots-nocontent"〉 rel="nofollow"編集リンク〈/aside〉〈/div〉

〈/article〉
〈nav〉ページナビ〈/nav〉

〈aside〉form、投稿フォーム〈/aside〉

▲ここまでコメント
■コメント部プラン3
　　上手く出来るかな？

▼ここからコメント

〈table width="90%" align="center" summary="“title”へのコメント"〉
〈thead〉〈caption〉コメント〈/caption〉〈/thead〉
〈tbody〉

〈tr〉〈td〉〈article align="left"〉
▼繰り返し部分
〈div〉〈p〉コメント〈/p〉
〈time〉年月日〈/time〉
〈aside〉編集〈/aside〉
〈/div〉〈hr /〉
▲繰り返し部分

〈/article〉〈/td〉〈/tr〉

〈tr〉〈td〉
〈nav〉ページ移動〈/nav〉
〈/td〉〈/tr〉

〈tr〉〈td〉
〈form〉投稿フォーム
※ケータイ以外折り畳む
※上手く出来なければ別テーブルで！！〈/form〉
〈/td〉〈/tr〉

〈/tbody〉
〈/table〉

▲ここまでコメント

※テスト

あ

作成日誌

フィードを少し勉強して、昨日くらいからChromeとFirefoxで登録テストなどやっています。

フィードの<link>タグは、｢これがいい｣と思う記述を<head>の上部に設置しました。
↓↓↓↓↓↓これ
<link rel="alternate" type="application/atom+xml" href="http://www.nanos.jp/ongakugroup/blog/1/feed/atom" title="音楽サイト情報 Atom1.0 フィード" />

このサイトは、AtomとRSS2.0の2種類があるので２つ記述しています。
トップページ下部にはテスト用のテキストリンクを表示しています。
↓↓↓↓↓↓↓↓これ
Atom|RSS

■Firefox50でテスト
テキストリンクを押してみましたらAtomとRSS共に購読を促す画面になり、なんなくブックマークツールバーにどちらも登録出来ました。
しかし、ツールバーやメニュー内のどこにもフィードリーダーのアイコンが無いので ｢変だな〜｣ と思い調べたところ、、

●右上のメニューボタンで開いた一覧の最下部にある ＋カスタマイズ を押す。
●開いた画面からフィードリーダーっぽい 購読 と書いたアイコンをドラッグする。
●ツールバーなど任意の場所にドロップする。
、、、と、アイコンが設置されて、フィードリーダーが対応サイトの時反応すると分かりました。

最初からやり直してみたところ、RSSアイコンからも購読登録画面になり簡単に登録が出来ました。
ちゃんと<link>に指定したtitleが表示されていましたよ！

■Chrome54でテスト
先ず、テキストリンクを押してみたところ、XMLのソース丸見えの表示になり意味不明でした。
ｗダメじゃん、(・・?)ｱｾﾞﾝ

｢RSSリーダーは何処？｣、と、探し回り その他ツール 内の 拡張機能 の最下部の 他の拡張機能を探す を押してみたところ、Chromeウェブストア にジャンプしました、、
｢なんじゃそれ？｣ｗと、思いながらRSS feed readerを検索し、、

RSS Subscription Extension(by Google)

、、をダウンロードしてみました。

ツールバーにRSSのアイコン(呼称がわからん)が表示されて、対応サイトにアクセスするとオレンジ色になり、ポインターを乗せると クリックして登録します とメッセージが出て<link>タグ内のtitleが表示されているので押しましたが、、いつまでたっても登録完了せずタイムアウト、、
またしても ｢なんじゃそれ？｣って、、もはや怒り心頭じゃボケー！
(ﾒ｀´)／"ｴｴｶｹﾞﾝﾆｾｰｮｺﾞﾗｰ

設定なのか何なのか分からン、設定方法もさっぱりわからんやんｗ
他のアプリを何個かダウンロードしてみましたがどれも同じだったので、あきらめて(呆れ果てて)全削除したったｗ

が、、思い直してGoogleのアプリを再ダウンロードし、テキストリンクを押したところ、普通の登録画面が表示され ｢やれやれ登録出来る｣ と思いましたが、、いざ登録ボタンを押したところ、、やっぱりタイムアウト、、
(T_T)ダメじゃんｗ
｢フィードプレビューが見れるだけましか、、｣、程度しか使えないっスｗ

作成日誌

予告通りGoogleSiteSearchのソースを、、

■オリジナル
<!-- SiteSearch Google -->
<center>
<form method=get action="http://www.google.co.jp/search">
<table bgcolor="#FFFFFF"><tr valign=top><td>
<a href="http://www.google.co.jp/">
<img src="//www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a>
</td>
<td>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
<font size=-1>
<input type=hidden name=domains value="YOURSITE.CO.JP">
<input type=radio name=sitesearch value=""> WWW を検索
<input type=radio name=sitesearch value="YOURSITE.CO.JP" checked> YOURSITE.CO.JP を検索
</font>
</td></tr></table>
</form>
</center>
<!-- SiteSearch Google -->

以上コピペですが、貴方のレンタルホームページの文字コードがShift_JISの場合は以下の様にします。

<!-- SiteSearch Google -->
<center>
<form method=get action="http://www.google.co.jp/search">
<table bgcolor="#FFFFFF"><tr valign=top><td>
<a href="http://www.google.co.jp/">
<img src="//www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a>
</td>
<td>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
<font size=-1>
<input type=hidden name=domains value="YOURSITE.CO.JP">
<input type=radio name=sitesearch value=""> WWW を検索
<input type=radio name=sitesearch value="YOURSITE.CO.JP" checked> YOURSITE.CO.JP を検索
</font>
</td></tr></table>
</form>
</center>
<!-- SiteSearch Google -->

あとは、YOURSITE.CO.JP の部分を貴方のサイトアドレスに書き変えるだけです。http://〜からのURLでも構いません。

※name=domains が何なのか分からないのですが、無いと正常に動きません。
※WWW を検索 の value=""に値が無いままだと誤作動する事があります。
※submitの name=btnG の部分は必要ありません。ボタン名も変更自由です。
※TABLEタグもGoogle画像リンクも全く必要ありません。

■当ブログでのソース
当サイトの携帯電話版は XHTMLでマークアップしており尚且つ検索フォームのラジオをセレクトに変更してますので、参考までに記述しておきます。
※実際のモノと若干違います
※headのCSS割愛

<!-- SiteSearch Google -->
<div style="text-align:center;">
<form method="get" action="http://www.google.co.jp/search">
<table style="margin:0 auto;"><tr style="vertical-align:top;"><td><a href="http://www.google.co.jp/"><img src="//www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle" /></a></td>
<td><div style="font-size:small;">
<input type="hidden" name="ie" value="Shift_JIS" />
<input type="hidden" name="oe" value="Shift_JIS" />
<input type="hidden" name="hl" value="ja" />
<input type="hidden" name="domains" value="www.nanos.jp/ongakugroup/blog/1/" />
<div><input type="text" name="q" size="13" maxlength="255" /><input type="submit" value="検索" /></div>
<select name="sitesearch" size="1">
<option value="http://www.nanos.jp/ongakugroup/blog/1/">このブログ を検索</option>
<option value="http://xxmusicxx.2.tool.ms/">音楽仲間TOPを検索</option>
</select>
</div></td></tr></table>
</form></div>

※携帯電話用コピーエリアは 追記 の中にあります