tsukalogo0000


alt
アメーバブログのカスタマイズ

アメブロといえばブログの老舗。カスタマイズもある程度進んでいる。そこはyahooと180度考え方が違うところでHTMLはオープン化していながらCSSが触り放題となる。(かなり強固に作ってあると思われるが記事部分で少しでもタグを間違えるとカラム全体に影響が出るデメリットもある。・html・head・body・frame・frameset・iframe・object・param・server・javascript・form ・input・embed・textarea・script・meta、禁止されているのは以上したがって独自のFlashは記事内では再生できない。
→アメーバBlogヘルプ“よくある質問”

alt

 

alt

クラウドサービスとしてCSSの組み立て

alt

マイアメーバblogで上部or中段[記事作成・編集]or中段[記事作成・編集]◎マイページ>左中段ブログ[設定]>左から3つ目デザインの変更>中段CSSの編集から→とりあえずカスタマイズといえどもあまりにもスタイルを崩してしまうと、ボタンやバナーの配置に至まで他人とコミュニケーション取りにくいと思い、取り急ぎ 3カラムのベーシックスタイルを採用そこから足し算する事に…

●参考/Customize Blogさんのアメブロ構造図

●アメーバブログのオリジナルカラム構成

amebaCSS
●DOWNLOAD/アメーバブログのカスタム

CSS1(10.10.01/96KB)

●DOWNLOAD/アメーバブログのカスタム

CSS1(10.10.01/96KB)

alt
但し過去の経験則からあまり本文とサイドが詰まって見えるのは読みづらくなるので自分の自己PRや過去の記事原稿及び運営するwebサイト等を集約した左サイドAカラム幅を160に短縮。そして右サイドBカラムは、自分以外の読者やお気に入り、広告などの影響がある為170~173をキープし、もう一つの理由としてメイン記事部が横書きの左揃いで右側がスカスカになってもボリュームが右にある均衡が取れるスタイルとした。本来は左右サイドのタッパは同じサイズの方が効率も差し替え変更にも強いのだが〜。
そしてメッセージボードはインパクトのある太角丸罫で囲み記事部分の#main.entry.contents もさらにセンター寄せに幅を圧縮、動画掲載や掲載内容も考慮した最低限度のサイズを選択した。但しこの数値も現在暫定的であり今後探りながらサイズを微調整していくのが良いのだろう。 楽天などのECサイトも確かこんな感じだったような。(上のpdfファイルにカスタマイズタグテキストを添付しています。緑文字はカスタマイズ部)
●サイドフリースペースの自己紹介タグの内容。
blog上部◎マイページ>左中段ブログ[設定]>左から4つ目サイドバーの設定>フリースペース[編集]→一応人気ブログランキングのバナーを張り付けたりその後自分の各サイトに誘導する仕組みを作ってます。今後動画を貼ったり様々な応用が効きます。ただやはり凝ったCSSを組むと即座にプレビュー出来ないのが困る。

 

alt

フリープラグインの導入

alt

blog上部◎マイページor中段[記事作成・編集]>左中段ブログ[設定]>左から4つ目サイドバーの設定>>プラグインの追加はこちらから→ここではフリープラグイン挿入場所がサイドバー設定場所にあり、そこから自己責任で各種プラグインが使用できる。(忍者ツールなど提携&推奨するblogパーツ用プラグインも行える。)
フリープラグインはいろいろ不具合もあるみたいだが、jQueryも使えるならば軽くてぶつかる事もないだろう。ホームページ作成ソフトみたくハックや検証、画像のリンクに至まで使いこなしは必ずしも快適じゃない。勉強不足かもしれないがいまのところYOUTUBEは別格としたFlash再生もヘッダーやフリーポジション以外は使えない様だ。(XHML内に置けない)日頃からipnone対策で使わない様にしていたので、特別弊害だとは思わないのだが…
●フリープラグインのカスタムタグ
このエリアで不要タグを挿入するとblogのサイドバーに文字が露出してしまうみたい。又IE6では最初の画像がフリープラグイン部分にこれまた露出する。ちなみにアニメーションのヘッド部分の一番目につきやすくすべくアメブロの主要ナビを集約、記事のナビゲーションをわかり易くした仕様。又、位置固定のスクロールナビとしてトップに戻るとtwtterをオリジナルで配置。
ブラウザのどのスクロール状態からでも移動が出来る様工夫がなされちいる。ペタのプラグインは別のプラグインやカウントダウンjsなどぶつかったり上手く機能しな伊場合も少なくなく読み込む順番やサイドバーの配置等様々な要因が複雑にからまっている模様。そして最大の障害は38000文字のアメブロが設定する限界数だ、これについては回避法を模索している最中です。
プラグインを単純に外部に振るのも手だが、まず一つの方法としてurlを短縮する方法が取れる。

●参考/URL短縮『オレンジURL(alpha)』

●DOWNLOAD/アメーバブログフリープラグイン2

(10.10.20/420KB)

●DOWNLOAD/アメーバブログフリープラグイン3

(10.12.06/654KB)

 
alt
アメブロルームのCSS設定

アメブロガーのもうひとつの顔であるルームという自己紹介ページがるのだが、ここもCSSカスタマイズが可能だ、しかし、ここはブログ本体とは切り放されているので別の方法を取る。タグの入れ方も独特でこのページにあるフリーページから普通のテキスト同様にで囲んで打ち込んでゆく。

room

●ルーム用CSSタグ
オリジナルより上部にマージンをやや取って文字サイズ及びタイトル部分を若干修正している。
具体的には上の部分はイラストの配置そして自分のサイトのjQueryのイラストスライドショーの誘導リンク、上部マージン、本文やサブタイトルなどのサイズ&かラーリング、最後にクリックで画像が入れ替わるタグを使っている。ここではカスタマイズが出来ないとされているエリアなので常に!important;}で命令する方法が多い。

amebloAmeba tsukapiko-blog
altアメーバBlog内のサイトマップ=ネットワークマップの頁
altアメーバBlog内の記事下用各カテゴリーindexタグの頁
altアメーバBlog内の当ブログ仕様マニュアルの頁
●参考/wazaわざメーバさん「アメブロをカスタマイズして自分らしくする」
アメブロで最初にカスタマイズで色々お世話になったblogです。内容もスッキリかつ解り易くここでカスタマイズすればたいていの事は足りてしまいます。意外とこの手のHow toものは数あれどおすすめのものは巡りあえませんよね。お悩み相談を解決してもらったりもしちゃいました。 ちなみに私と同郷の兵庫県の方です。
●参考/参加ぐるっぽ「アメブロ カスタマイズ」