作成日誌
スマホ版トップの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〉
▲ここまでコメント
※テスト
あ
■初稿2016.12.１
■編集2016.12.2
作成日誌
フィードを少し勉強して、昨日くらいから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>
※携帯電話用コピーエリアは 追記 の中にあります
作成日誌
GoogleSiteｻｰﾁのソースを公開予定でしたが、いつも使っているimb1.0のN906ではなくimb2.0のケータイでテスト中の為次回にします、、
さて、
FirfoxでCSSの反映を確認して編集したのですが、IEっぽいimb2.0の表示とはかなり違ってて同じにするのは難しいから、この辺で携帯版トップを完成としようと思っています。
まだまだやる事あり過ぎ、、
ガンバルぞ！！！
MUSIC†SEARCHは、ﾃﾞｨﾚｸﾄﾘ検索型の音楽サイトRanking＆ｻｰﾁｴﾝｼﾞﾝです
音楽サイト検索 MUSIC†SEARCH
http://mbrank.jp/musicnkm/
音楽サイトのディレクトリサーチ型検索エンジン。音楽・バンドのホームページ宣伝登録自由です。多彩なランキングシステムとランダム表示
作成日誌：ナノで出来ない事
■ナノで出来ない事
前回ナノで出来ない事など書きましたが、ブログ機能で不便に思った事をいくつかメモメモ、、
___φ(.. )
●ページ毎のURL表示出来ない。
●カテゴリ名を(サブ)タイトルとしてカテゴリ毎の記事一覧表示出来ない。
●投稿やカテゴリ・月別表示などの送信フォームをカスタマイズ出来ない。
●投稿後に何処へジャンプするか指定出来ないし、投稿完了ページの編集も出来ない。
●ページ移動フォームはあるが、テキストリンクで表示出来ない。
何ページあるのか、何ページ目か直ぐに分からない。
●記事の総件数が分からない。
●コメント又は、長いタイトルや本文の省略表示出来ない。
●本文に使用出来るタグに制限がある。divは勿論、span、imgなど不可だ。
●返信リンクの様な記事同士の関連付けリンクが容易でない。
●送信フォームやページ移動リンクなどに accesskeyを自由に割り当てられない。
▲初稿：2016-11-27
‐‐‐‐‐‐‐‐‐‐‐‐‐
さてさて、、
昨日はGoogleSiteSearchのテストや検索フォームの完成版を作ったりしてました。CSSの方もちょこちょこイジリ始めたよン。。
あと、、
フィード関連のお勉強やらなんやらでなかなか前には進みませ〜〜んｗ
でわ、"＼(^-^;汗、、
次回SiteSearchのソースをオープンにしようと思います。
アップるΥは、音楽動画の広報サイトです
音楽動画アップるΥ
http://upplu.sameha.info/
携帯電話向けの音楽動画PRサイト群です。
YouTube動画リスト作成の他、ライブ告知やサイト宣伝の掲示板などにも動画アップロードやYouTube動画表示出来ますので音楽動画をアピールして下さいね！
アップるΥトップにもBBSがありまーす
作成日誌
Googleカスタムサーチは、なんだかめんどくさいからサイトサーチを１日中テストしてみた。
oranchi@のサイトのindex状況があんまり良くないのがわかってガッカリしてしまったｹﾚﾄﾞ、
音楽サイト検索 MUSIC†SEARCHのindex状況は比較的良好だと分かって安心した、、
このブログがどれくらいページindexされるのか分からないけれど、結果が知りたいから使ってみるつもり！
他のサイトで、もっとテストせなアカン、、URLをどう指定したら最適なのかよく分からンｗ
name=ドメインにURL指定する意味がさっぱり分からんやんケ！
それと｢wwwを検索｣で、不可解な動きになる原因がここのサイトなのかGoogleなのか分からんし、、
‐MusicLinks‐ではちゃんと動いてたのにナ、、ヘンダｗ
ガンバロ〜(^-^@
作成日誌
携帯版TOPのベーシックな部分はほとんど出来上がった感じだけど、何をどう配置するか悩みまくり、、、
だいたいAtomとかRSSとかフィードとか、さっぱり意味がわからんｗ
意味わかんないから大手ブログサイトでの作成を検討していたんだけれど、携帯版はいつ閉鎖になるか予測出来ないからいっそのこと思うがままにいちから作る事にしたのだが、、、
‐‐‐‐‐‐‐‐‐‐‐
■このレンタルサイトについて
ナノは<body>内のhtmlの他に、<meta>や<link>もほとんど思い通りに出来るのだがhtml5で作り辛いのが難点、、
つか、xhtmlでしか作れない、MIMEtypeがXHTMLになってる(ドコモダケ？)、CSS・jsファイルがない、ファビコン指定出来ない、検索エンジン無い、、
無い無いだらけだけど、あちゅら.jpやCROWT.jpと同じスクリプトだから僕にとってはとっても作りやすいレンタルサイトなのだｗ
‐‐‐‐‐‐‐‐‐‐‐‐
さて、寝ますか、、