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

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

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

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

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

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

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

CSS1(10.10.01/96ＫＢ)

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

CSS1(10.10.01/96ＫＢ)

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

フリープラグインの導入

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

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

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

(10.10.17/396ＫＢ)

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

(10.10.20/420ＫＢ)

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

(10.12.06/654ＫＢ)