ブログ再開
お久しぶり。ってだれ？ って感じですが
むしろ初めまして。
JUNCOです。
飽きっぽくてなかなかブログ続けられません。
そして、何回目かわからない中断のあと
また再開しに戻ってきました。
過去の記事は、ある程度下書きに戻して再出発。
色々考えて前に進めなかったり
同じところぐるぐる回っちゃう性質があるので
とりあえずまた進んでみようかと
回ってるだけでもいいじゃない？
むしろ初めまして。
JUNCOです。
飽きっぽくてなかなかブログ続けられません。
そして、何回目かわからない中断のあと
また再開しに戻ってきました。
過去の記事は、ある程度下書きに戻して再出発。
色々考えて前に進めなかったり
同じところぐるぐる回っちゃう性質があるので
とりあえずまた進んでみようかと
回ってるだけでもいいじゃない？
アメブロカスタマイズのためのスタイルシート編集可能範囲調査
JUNCOです。
アメブロを改造作業進行中です。
アメブロではhtmlを変更できないので
スタイルシートCSSのみの変更で対応します。
アメブロのソースを見ると
変更できるファイル以外にもスタイルシートが
たくさん読み込まれています。
スタイルシートでは、値が上書きされますので
あとから読み込まれている方が優先されます。
つまり、読み込まれる順番が結構重要です。
というわけで、カスタマイズ（変更）可能なファイルが
どの順番で読み込まれているか見てみました。
link rel="stylesheet"
とあるのがスタイルシートになります。
このブログが選んでいるグレーのテンプレートの場合
/p_skin/gray_ad/css/common.css
/p_skin/cmn/css/type_c.css
の部分が編集可能なようです。
これより後に読み込まれるスタイルシートが
http://stat.ameba.jp/p_skin/cmn/css/naviarea.css
http://stat.ameba.jp/p_skin/cmn/css/defaultad.css
広告と、ナビゲーションバーのスタイルシートです。
まあ何かトリックを使えばここの表示を変えることは
できるかも（できるような）気もしますが
広告とかは、ちゃんと表示するように弄らないようにしましょー。（笑
逆に言うと、この広告とナビバー以外の部分は
スタイルシートでなんとかできる範囲なら、
カスタマイズできることがわかりました。
まあ、けっこう面白いかもしれません。
でも、かっこいいデザイン案を作るのが大変なんですけどね。
プログラマよりなので、コーディングのほうが楽しいです（笑
今回はこの辺で。
アメブロを改造作業進行中です。
アメブロではhtmlを変更できないので
スタイルシートCSSのみの変更で対応します。
アメブロのソースを見ると
変更できるファイル以外にもスタイルシートが
たくさん読み込まれています。
スタイルシートでは、値が上書きされますので
あとから読み込まれている方が優先されます。
つまり、読み込まれる順番が結構重要です。
というわけで、カスタマイズ（変更）可能なファイルが
どの順番で読み込まれているか見てみました。
link rel="stylesheet"
とあるのがスタイルシートになります。
このブログが選んでいるグレーのテンプレートの場合
/p_skin/gray_ad/css/common.css
/p_skin/cmn/css/type_c.css
の部分が編集可能なようです。
これより後に読み込まれるスタイルシートが
http://stat.ameba.jp/p_skin/cmn/css/naviarea.css
http://stat.ameba.jp/p_skin/cmn/css/defaultad.css
広告と、ナビゲーションバーのスタイルシートです。
まあ何かトリックを使えばここの表示を変えることは
できるかも（できるような）気もしますが
広告とかは、ちゃんと表示するように弄らないようにしましょー。（笑
逆に言うと、この広告とナビバー以外の部分は
スタイルシートでなんとかできる範囲なら、
カスタマイズできることがわかりました。
まあ、けっこう面白いかもしれません。
でも、かっこいいデザイン案を作るのが大変なんですけどね。
プログラマよりなので、コーディングのほうが楽しいです（笑
今回はこの辺で。
アメブロ構造解析
JUNCOです。
アメブロ改造するぞーと言っていて
はや数日。
スタイルシートだけでどこまで改造できるんでしょうか。
楽しみです。
というわけで、ちょっと面倒ですが
まずアメブロのHTML構造を調査します。
ブラウザのソースを見るで、見ます。
文字コードがUTF-8というので作られているので
インターネットエクスプローラのソースを見るだと
文字化けすると思います。
Firefoxとかで見るとよいと思います。
無料でダウンロードできます、お勧めブラウザです。
さて、まず基本構造です。
みっつのパーツに分かれています。
ul アメブロのメニュー。(広告。
div id=frame コンテンツ
div id=footerArea フッター
アメブロの広告の表示は
いろんな意味でいじらないほうがよさそうです。
たぶんいじれないようにもされている気がしますし。
芸能人ブログなどを見ても
全体が黒いデザインのブログでも
そこだけ白いバーが乗ってますよね。
というわけで一番上にはアメブロの白いバーが載る
ということを前提にデザインすべきですね。
フッターも、とりあえずそのままでいいでしょう。
コンテンツが入っている frame部分をさらに見ていきましょう。
内側には サブフレームとアクセス解析用の画像がおいてあります。
div id=subFrame
image アクセスログ
さらにサブフレームの中を見ると
div id=overHeader ヘッダ部分
div id=wrap 中身
というわけで
まずヘッダです。
最初にあるのが、 ユーザーナビエリアです。
div id=userNaviArea
a JUNCO 名前
ul li ルーム ブログ フォト 相談
そしてヘッダ。
div id=Header
h1
h2
次にwrapの中身。
div id=firstContentArea コンテンツ部分
div id=sub_b サイドバー２
さらにコンテンツ部の中身。
まず全体をいったんdivで囲うようです。
div id=subFirstContentsArea
コンテンツの中身
div id=sub_a サイドバー１
div id=main div
id=sub_main メイン
ここでスタイルシートデザインとは関係ないのですが
思い出しました。
この構造を見ればわかるとおり
サイドバー１は本文より先に読み込まれます。
なので、サイドバー１にたくさんプラグインをおくと
とくにアクセス解析や逆アクセスランキング、外部フラッシュなどの
重いデータをおくとですね
これらの表示がすむまで、本文が表示されなくなります。
前訪問したアメブロで本文がでるまで５秒ぐらいかかったのがありました。
わたしは辛抱強いし、そのブログは読みたかったので
我慢して待ちましたが、ふつうだと読者さんが去っていくでしょう。
気をつけましょう。
はい、でいよいよメインの中身です。
一番上は メッセージボックス
div id=message
div class=contents
div class=subContents
次、トップのナビゲーション（次へなどのリンク）
div class=topPaging
そして一番新しい記事
div class=entry_new
div class=entry_head ヘッダ
h3
div class=contents 本文
div class=subContents
div class=foot フッタ
ああ疲れたよ…。
とりあえずまだ全部完全に解析してはいないけど
まあこのぐらいわかればとりあえずコーディングできるでしょう。
はい。
ロゴはFFっぽくしたいっていうのが当面の希望。
それ以外はどうしようかなー。
Final Fantasy13の公式ページ http://www.square-enix.co.jp/fabula/ff13/
まだまだカスタマイズは続きます。
アメブロ改造するぞーと言っていて
はや数日。
スタイルシートだけでどこまで改造できるんでしょうか。
楽しみです。
というわけで、ちょっと面倒ですが
まずアメブロのHTML構造を調査します。
ブラウザのソースを見るで、見ます。
文字コードがUTF-8というので作られているので
インターネットエクスプローラのソースを見るだと
文字化けすると思います。
Firefoxとかで見るとよいと思います。
無料でダウンロードできます、お勧めブラウザです。
さて、まず基本構造です。
みっつのパーツに分かれています。
ul アメブロのメニュー。(広告。
div id=frame コンテンツ
div id=footerArea フッター
アメブロの広告の表示は
いろんな意味でいじらないほうがよさそうです。
たぶんいじれないようにもされている気がしますし。
芸能人ブログなどを見ても
全体が黒いデザインのブログでも
そこだけ白いバーが乗ってますよね。
というわけで一番上にはアメブロの白いバーが載る
ということを前提にデザインすべきですね。
フッターも、とりあえずそのままでいいでしょう。
コンテンツが入っている frame部分をさらに見ていきましょう。
内側には サブフレームとアクセス解析用の画像がおいてあります。
div id=subFrame
image アクセスログ
さらにサブフレームの中を見ると
div id=overHeader ヘッダ部分
div id=wrap 中身
というわけで
まずヘッダです。
最初にあるのが、 ユーザーナビエリアです。
div id=userNaviArea
a JUNCO 名前
ul li ルーム ブログ フォト 相談
そしてヘッダ。
div id=Header
h1
h2
次にwrapの中身。
div id=firstContentArea コンテンツ部分
div id=sub_b サイドバー２
さらにコンテンツ部の中身。
まず全体をいったんdivで囲うようです。
div id=subFirstContentsArea
コンテンツの中身
div id=sub_a サイドバー１
div id=main div
id=sub_main メイン
ここでスタイルシートデザインとは関係ないのですが
思い出しました。
この構造を見ればわかるとおり
サイドバー１は本文より先に読み込まれます。
なので、サイドバー１にたくさんプラグインをおくと
とくにアクセス解析や逆アクセスランキング、外部フラッシュなどの
重いデータをおくとですね
これらの表示がすむまで、本文が表示されなくなります。
前訪問したアメブロで本文がでるまで５秒ぐらいかかったのがありました。
わたしは辛抱強いし、そのブログは読みたかったので
我慢して待ちましたが、ふつうだと読者さんが去っていくでしょう。
気をつけましょう。
はい、でいよいよメインの中身です。
一番上は メッセージボックス
div id=message
div class=contents
div class=subContents
次、トップのナビゲーション（次へなどのリンク）
div class=topPaging
そして一番新しい記事
div class=entry_new
div class=entry_head ヘッダ
h3
div class=contents 本文
div class=subContents
div class=foot フッタ
ああ疲れたよ…。
とりあえずまだ全部完全に解析してはいないけど
まあこのぐらいわかればとりあえずコーディングできるでしょう。
はい。
ロゴはFFっぽくしたいっていうのが当面の希望。
それ以外はどうしようかなー。
Final Fantasy13の公式ページ http://www.square-enix.co.jp/fabula/ff13/
まだまだカスタマイズは続きます。