記事投稿時にカテゴリ（テーマ）を増やしたい時はその場で「テーマを追加」ボタンを押して編集すればよいが、カテゴリを編集したり、並び順を変えたり、削除する際、編集画面を見つけるのに何度も迷ってしまったので忘備録。
サイドバーの設定 ≫ テーマ一覧
その場所は、上の見出しの場所にある。[編集]リンクをクリックすれば、目的のメニューに辿りつける。
私のように最近アメブロをはじめた人で、HTMLで記事を書きたい人がよく陥る疑問だと思うが、タグ編集エディタ、新エディタではHTMLでソースを書いても編集エリア内の改行が勝手に<br>に変換されてしまう。
標準エディタを使えばよい！
各編集モードを確認してみると、何と標準エディタでは問題が起こらないことが分かった。タグ編集エディタなんていらんやん！あ、そうか。。。タグを編集してしまうエディタのことなんや。（笑）。
標準エディタであれば、「タグの非常時」←→「HTMLタグを表示」を切り替えても、新エディタのように<br>が増殖してゆくこともない。
CSS編集用デザインでは、5つのレイアウトタイプが選択できるようになっています。今回は、それぞれのレイアウトの特長について見ていきたいと思います。CSSが編集できないテンプレートでもそれは同じですので、参考にしていただけると思います。
(1) 2カラム・メニュー左
左に横幅300ピクセルのカラムが来て、その右にブロブ本体部分が配置されるレイアウトです。横幅の300ピクセルというのは、左カラムの2ブロック目に表示されるバナーサイズ（横300ピクセル×縦240ピクセル）に合わせてのサイズですね。この幅を狭くすると、おそらくAmebaさんに怒られると思いますので、注意しましょう（笑）。
バナーが上から2ブロック目に配置されるというのは、どれも同じみたいです。人にもよると思いますが、左側にメニューが配置されるというのがウェブサイトではもっともオーソドックスなパターンですので、私個人的には、この形式がいちばん安定して見ることができます。
(2) 2カラム・メニュー右
見た瞬間、記事がまず目に入りやすいという点で、(1) のパターンよりは、より読んでもらいやすいだろうと思います。また、サイドメニューと本文という区分がよりはっきり感じられるような気がします。アフィリエイトを行うならサイドメニュー部分にはより多くの要素が配置されることになるかと思いますので、(1) と (2) なら、まず見た目が落ち着いて見えるこちらのほうが効果を上げやすいような気がします。
個人的な感想ですので、データのおもちの方がいらっしゃいましたら、よろしければ教えてください。
(3) 3カラム・右ワイドメニュー
左のメニューの幅は180ピクセル。右カラムが300ピクセル。マージンもありますので、本文部分は410ピクセル程度です。アメブロでは、この狭いコンテンツ幅を使われているブログが多いので、読者には受け入れやすいのかも知れませんが、アフィリエイトを考えるとき、横幅468ピクセル×縦60ピクセルのレギュラーサイズのバナーの掲載ができないというデメリットがあります。
ただ、カラムが3つになることで、左側2つのカラムがコンテンツにかかわるもの。右カラムはそれ意外というように、すみ分けをしやすくなります。ブログをより分かりやすいものにするためには有効な手段になると思います。ただでさえ、コンテンツの流れを中段させるデフォルトで差し込まれる広告がありますので。
(4) 3カラム・左ワイドメニュー
(3) のパターンの逆。情報の探しやすさという点では同じだと思います。うーん、どっちがいいんでしょうか？ ご意見あるかた、是非教えてくださいm(__)m
アフィリエイト広告を掲載する場合、沢山バナーが掲載されることになりますので、広告がデフォルト分しか掲載されていない状況とは雰囲気が変わってしまうと思いますが、個人的には300×240サイズの広告が右側にある (3) のタイプのほうが、より落ち着いてブログが読めると思います。
(5) 3カラム・右メニュー
慣れてしまえばどれも同じなのでしょうが、それまでは分かりにくいような気がします。並んだ2つのサイドバーの横幅が、コンテンツの幅を超えてしまっています。それもアンバランスに感じますね。
どれを選択するか？
こうして5つのタイプを見てきて私なら選択したいのは、(2) ですね。ブログとしての分かりやすさをまず優先して徐々にデザインをカスタマイズしてゆきたいと思います。ただこれは好き好きだと思いますし、ブログによってそれぞれ長所・短所も変わってくると思いますので、アフィリエイト目的なら、効果を基準に選択できればいいですね。
デザインをカスタマイズする場合、(5) つのメニューのどれに変更してもレイアウトが崩れないように配慮しておきたいものです。アフィリエイト効果を注視しながら各レイアウトでの結果を追っていけば、必ず「これがいちばん！」というものが見つかるだろうと思います。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
もし、ありがたいことに早速このページを見つけてくださった方、HTML初心者向けの記事は、しばらくおまちください。現在、アメブロのカスタマイズのために、ページとスタイルシートの基本的な構造を分析していますので、それが完了次第、徐々にアップしてゆきます。私のブログもまだ真っ裸
ですので、早くお化粧してあげたいです
基本構造を解析してみました
テンプレートをCSS編集用デザイン、レイアウトを3カラム・右メニューに設定して書き出されるHTMLコード、CSSファイルから基本的な構造を分析してみました。
右図がその概念図です。クリックすると拡大表示できます。
この構造を理解しておけば、カスタマイズを考えやすくなります。図で記されている各ブロックについて、もう少し細かく見てゆきたいと思います。
ブロックごとの設定を少し詳しく
- div.skinBody
- 全体を覆うブロックです。blog111206.css ではその設定はされておらず、編集対象のスタイルシートに項目が立てられています。図には書いておりませんが、このなかに、div.skinBody2、div.skinBody3 が入れ子になっていて3重入れ子構造になっています。シャドウをつけたりするときには便利だろうと思います。
- ul#keyJumpNav
- blog111206.css では、
display: hidden;と設定されていて通常は表示されません。音声ブラウザなどで見ている人が、コンテンツにいち早く辿りつけるように配慮された部分です。 - ul#amebaBar
- Ameba の小さなロゴのある最上部の行のデザインを規定している部分です。
- div.skinFrame
- ここが、ヘッダ、コンテンツやナビゲーションなどを含めたブログの本体になります。内側にdiv.skinFrame2をもつ2重構造になっています。概念図では省略していますが、正確にはdiv.headerBnrArea（W728×h90バナー）の入るブロックがdiv.skinFrame2の上にあります。このなかの各パーツをスタイルシートで設定してデザインをつくりあげてゆくことになります。
- ul.footerNav
- 記事数が多くなると、「次へ」「前へ」「▲」というナビゲーションが現れます。背景画像を設定しても、ここより下には反映されません。
- div.ad_frame
- 最下部に広告枠が2つ並んでいます。google AdWords 広告が2本並んで見えます。
この他に javascript で書き出されるブロックがいくつかありますが、省略しています。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
【新エディタ】でHTMLを書いてみます。通常表示から途中でHTML表示に切り替えましたので、Pタグが大文字のものがあったりします。改行ごとにパラグラフが p タグで囲まれてますので、<BR>が連続するよりはいいですね。
楽天のショップシステムなんかもそうですが、こうしたASPで書き出されるソースコードはメチャクチャ
なことが多いのですが、かなりまともそうなのに驚いています。
何よりもの驚きは、HTMLバージョン5で書かれていること。スマートフォン対応はスムーズになりそうですが、PC用ブラウザの実装はまだまだバラけていると思いますので、その確認がしんどそうです。私自身も、仕様書とにらめっこする時間が増えそうです。
エディタでは font タグが使われてしまったり、 <A name=blogContent></A>
なんてのがソースコード中にあるのは、ご愛きょの範囲ですね。1記事投稿した段階で、W3C Validator にかけたところ、「エラー：20／警告：7」。そのエラーの内容的にみても、かなり優秀な範囲ではないかと思います。
アメブロで読み込んでいるスタイルシート
- http://stat100.ameba.jp/common_style/css/user/amebabar100314.css
- http://stat100.ameba.jp/blog/new/css/cmn/blog111206.css
- http://stat100.ameba.jp/p_skin/wu_pf_cssedit/css/skin.css
画像をアップロードした後に貼り付けるると、周辺のソースの改行が、<BR>に置き換えられてしまうのは辛いですね。URIも絶対URIでペーストすると、通常エディタでURIを書いたのと同様に扱われてしまうようです。ソースのタグは、小文字で書いても編集するために開くと通常表示がデフォルトのため、HTML表示に切り替えると全部大文字に変わっています。改行もどんどん増えていってしまうので、HTMLを書ける人にとっては辛いですね。
カスタマイズ対象のスタイルシート
skin.css です。
【2012-12-22追記】だと思ったのは勘違いでした。CSSを編集しない段階では当記事で書いた通りのCSSしか読み込みませんが、一度CSS編集をすると新たにCSSファイルが作成されて読み込まれるようになります。編集対象はそのファイルでした。
訂正してお詫び申し上げます。
アメーバーのデザインカスタマイズ具合を見るために、ブログを書いてみる。
文字装飾がどのように反映されるかを見るために、いろいろしてみる
2つ改行を入れて、なるほど、なるほど、なるほど…
HTMLがどのように反映されるかを見るために、HTMLを書いてみる。
文字装飾がどのように反映されるかを見るために、いろいろしてみる
2つ改行を入れて、なるほど、なるほど、なるほど…