大人げない生き方
Amebaでブログを始めよう!
1 | 2 | 3 | 4 | 5 | 最初次のページへ >>
2012-01-29 00:02:32

ブログ再開

テーマ:このブログについて
お久しぶり。ってだれ? って感じですが

むしろ初めまして。
JUNCOです。

飽きっぽくてなかなかブログ続けられません。

そして、何回目かわからない中断のあと
また再開しに戻ってきました。

過去の記事は、ある程度下書きに戻して再出発。

色々考えて前に進めなかったり
同じところぐるぐる回っちゃう性質があるので
とりあえずまた進んでみようかと

回ってるだけでもいいじゃない?

2009-06-12 22:30:51

アメブロカスタマイズのためのスタイルシート編集可能範囲調査

テーマ:ブログカスタマイズ
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

広告と、ナビゲーションバーのスタイルシートです。

まあ何かトリックを使えばここの表示を変えることは
できるかも(できるような)気もしますが

広告とかは、ちゃんと表示するように弄らないようにしましょー。(笑


逆に言うと、この広告とナビバー以外の部分は
スタイルシートでなんとかできる範囲なら、
カスタマイズできることがわかりました。

まあ、けっこう面白いかもしれません。

でも、かっこいいデザイン案を作るのが大変なんですけどね。

プログラマよりなので、コーディングのほうが楽しいです(笑


今回はこの辺で。

ペタしてね
2009-06-11 10:07:24

アメブロ構造解析

テーマ:ブログカスタマイズ
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 サイドバー2


さらにコンテンツ部の中身。

まず全体をいったんdivで囲うようです。
div id=subFirstContentsArea


コンテンツの中身

div id=sub_a サイドバー1
div id=main div
  id=sub_main メイン


ここでスタイルシートデザインとは関係ないのですが
思い出しました。

この構造を見ればわかるとおり

サイドバー1は本文より先に読み込まれます。
なので、サイドバー1にたくさんプラグインをおくと

とくにアクセス解析や逆アクセスランキング、外部フラッシュなどの
重いデータをおくとですね

これらの表示がすむまで、本文が表示されなくなります。

前訪問したアメブロで本文がでるまで5秒ぐらいかかったのがありました。
わたしは辛抱強いし、そのブログは読みたかったので
我慢して待ちましたが、ふつうだと読者さんが去っていくでしょう。

気をつけましょう。


はい、でいよいよメインの中身です。


一番上は メッセージボックス
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/


まだまだカスタマイズは続きます。

ペタしてね
1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

Ameba人気のブログ