まずは新しい背景画像から引くつもりなんですが、それだけなら、あんまり違和感でないような気がしてます。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
うかつな間違いをしていました。ページ幅に関する認識に、抜け落ちがありました。ページ幅が980ピクセルってのは間違いないのですが…
左60ピクセル空きの謎
ウィンドウサイズを狭めてゆくと…
あれ？ 左側にスペースが残ってる！
気にしてなかっただけで、おそらくずっと見てきたんですよね。ほんま、注意力散漫です。はかってみると、だいたい60ピクセルあります。うーん…
謎解きを続けること約10分。あらあら、大元にこんな設定があったんですね（笑）
body {
min-width:1100px;
}ページ幅が980ピクセルですから、(1100-980)/2＝60というわけです。
謎は解けましたが、間違った認識の元に書いた記事がありますので、ここで記しておきます。
- ちょっと本気でアメブロカスタマイズ！ （テーマ：ちょっと難しいカスタマイズ ）
失礼いたしました。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
さて、アメブロに背景設定をするとき、どう考えるのが効率的でしょうか？ アメブロHTMLの基本構造 解析をもとに、いちばん効率的な方法は何かを探ってみました。
ユーザーCSSの推奨
結論の前に、まずアメブロさんの推奨を見てみましょう。編集可能CSSには、以下のように記述されています。
/* (3-1) ボディ（全体）
--------------------------------------------*/
/* skinBody ボディ */
.skinBody{}/* ←ブログ全体に背景を敷きたいとき */
.skinBody2{}
.skinBody3{}
/* (3-2) ブログヘッダー
--------------------------------------------*/
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */
全体とブログヘッダーについてコメントされていますね。背景については、メッセージボード、記事、サイドメニュー全体・タイトル・本文にそれぞれコメントがありますが、今回のテーマとは大きな関係がありません。
ちなみに、ブログ全体、つまりdiv.skinBodyにbackground:#000;とブラック背景を設定したときには、右の画像のようになります。コンテンツ部分でも黒く表示される部分が出てきますので、その部分だけ背景色を適用しないようにするためには、div.skinFrameとdiv.ad_frameにコンテンツ部分に設定したい背景色設定をすればよいということが分かります。
さて、ブログに背景設定を考えるとき、次のようなケースが考えられるのではないかと思います。
- ブログ全体に背景を置く
- ヘッダーバナーエリアを覗いて背景を置くことで、ブログ本体と再上部バナーを分離して見せる
- コンテンツエリアにシャドウを効かせた背景を設定する
HTMLの構造的には背景設定可能なのは、親から見ていくとhtml、bodyと続いて、その次にdiv.skinbody、ul.footerNav、div.adFrameが続いていることが分かります。
3重構造のボックスを活かして余裕残し
こう見てくるとやはり、3重構造になっているdiv.skinbody、div.skinbody2、div.skinbody3を使って背景設定するのがいちばん効率的だというのが結論のように思えます。いずれのボックスにもデフォルトでは何も設定されていませんので、自由自在に使うことができます。
アメブロのCSS編集デザインにおいて幅（980px）が設定されているいちばん外のブロックは、各レイアウトともdiv.skinHeaderAreaとdiv.skinContentsAreaです。前者は外にdiv.skinHeaderFrameを、内にdiv.skinHeaderArea2をもち、後者は外にdiv.skinContentsFrameを、内にdiv.skinContentsArea2をもつという念のいれようです。そして両者は、div.skinFrameとdiv.skinFrame2の2重ボックスに囲まれているという、もう訳が分からなくなるくらいの念の入れようなのです。
単純に考えれば、背景設定には外側の幅の指定されていない3重構造ボックスを使えばよく、さらに複雑な設定をしたければ、まだ猶予があるというふうに認識しておけばよいのだと考えておけばよさそうです。
先に述べた「コンテンツエリアにシャドウを聞かせる」という設定なら、シャドウ画像を縦方向にリピートしてdiv.skinFrameに適用させ、フッター部分はdiv.skinFrame2で上書きすれば何の問題もなく、ヘッダーバナーエリアを除外させたければ、高さが決まっていますので、もう1重余裕があるところを使ってもよいし、div.skinHearerFrameに対して設定してもよいということが分かります。ともあれ、冗長に設定されているボックス構造を、いちばん外から利用してゆけばよいんだということです。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
記事タイトル下に表示される投稿日付とテーマの2行。これを1行にまとめて表示したいと思う方も多いんじゃないかと思います。どうにかならないものでしょうか？
投稿日付と投稿の属するテーマ（カテゴリー）、この2つは記事タイトルと直接関係の深い属性のようにも思うのですが、HTML上では別ブロックに属しています。タイトルは、記事のヘッダーを表すdiv.skinArticleHeaderブロック。日付とテーマはその次に配置されている記事本文ブロックのdiv.skinArticleBodyに属しています。まぁそれは、日付とテーマを1行で表示させたいというのと直接関係はありません。
HTMLを解析すると
投稿日付と投稿の属するテ－マ表示部分のソースコードを見てみます。
<div class="articleDetailArea skinWeakColor">
<span class="articleTime"><time datetime="2011-12-25" pubdate="pubdate">2011-12-25</time></span>
<span class="articleName"></span>
<br />
<span class="articleTheme">テーマ：
<!-- google_ad_section_start(name=s2, weight=.1) -->
<a href="http://ameblo.jp/jalan2-net/theme-10047057969.html" rel="tag">やってみよう！カスタマイズ</a>
<!-- google_ad_section_end(name=s2) --></span>
</div>何やら怪しい部分がありますね。
内容が空になっている<span class="articleName"></span>です。クラス名からすると記事の名前ですから、記事タイトルのようにも思いますが、h1タグで囲まれた本家の記事タイトルのほうには、skinArticleTitleクラスが指定されています。これ、何者でしょうか？ 将来の機能追加のために予約されている部分だったりするんでしょうか？ そうだとすると、あまり周辺をいじりたくはないですね。
さて、2行になっている表示部分ですが、HTMLでは日付の行のあとに<br />があり、改行してテーマの行を表示させるようになっています。それぞれの行にspan指定がされていますから、CSSで1行表示させることはできないことはないですね。
しかし、そこまでやる必要があるのか？ って思ってしまいますよね。それぞれがpタグで囲まれたブロックレベル要素ならあまり躊躇しないような気もするんですが、はっきり改行して表示せよって、書かれてるんですもんね。
ですので結論としては、「日付とテーマは、2行表示されるという前提のもとにデザインを考えたほうがよいだろう」ということになりました。
ちなみに、google_ad_sectionのコメント部分は、表示されるGoogle広告を、より記事の内容にマッチしたものにするためのものらしいです。「セクション ターゲットの概要とその設定方法 」というページで詳しく解説されています。
アメブロカスタマイズを考える際、多かれ少なかれ、HTMLやCSSを触ることになります。WindowsについているNotepadでも事足りますが、それを生業としている者でも、Notepadでは結構厳しいんです。やはり入力支援やチェック機能のついたそれ専用ソフトのほうが便利です。
そこで紹介したいのが、ez-HTML。Dreamweaverのように、バグに恐れおののくような経験もせず、もう使いはじめて9年目になります。
初心者の方におすすめしたい理由
- リンクウェアである
- フリーウェアに近いですが、ウェブサイトをもっている方は、ez-HTMLのサイトにリンクを貼ってくださいね、という使用条件。
非常に高機能で安定性もあり、操作性にすぐれるこのソフトが無料というのは、ずっとすごいと思っていますので、あちこちで紹介しまくっている私です。 - ソフトウェアが正しいHTMLを書かせてくれる
- 入力支援機能により、HTMLタグを途中まで書くと、使用可能なリストが表示されます。これはつまり、書いてはいけないタグは、候補として表示されないということでもあります。使い込むと、自然にこの機能をフルに使うようになります。
「どういうことっかって？」
はい。タグは全部、途中までしか入力しないんですよね。全部入力すると間違う可能性がありますから（笑）。最有力候補は、選択せずリターンキーを押せば確定されるので、候補が絞れる文字数まで書いてあとはリターンキーを押すだけ。ですので、特に閉じタグなんて、</までしか入力したことしかありません。
いちばん大きいのは、この2点ですかね。使っていただけないとその良さは分からないと思いますが、ありとあらゆる機能が盛り込まれています。
ボタン一発機能は結構多いですね。色選択、リンク設定、画像選択などなど。ちょっと難しくなっていきいますが、HTMLやCSSの文法検証や、正規表現を使用した置換、文字コード変換なんかももちろんできます。
完全プロ仕様のソフトだから、おすすめしたい
実は、初心者におすすめしたいのももちろんなのですが、プロに使って欲しいエディターでもあります。なんちゃらビルダーは当然問題外なんですが、Dreamweaverを使っている間は初心者。別にez-HTMLを使う必要はないですが、書き出されるソースコードに違和感を感じないようではダメだと思います。初心者の方でも苦労して慣れれば使えるソフトだと思いますが、同じ苦労をするなら、ez-HTMLを使ったほうが絶対いいというのが私の考え方なので、お仕事でおつきあいができると、必ずおすすめしています。
HTMLが分からなくても、ある程度助けてくれるソフトって、ウェブサイト更新の敷居を下げてくれるもんなんですよね。
アメブロ書く分には、別にHTMLを意識する必要はないんですが、カスタマイズをしながらHTMLとつきあうはめになり、ある程度覚えちゃうと、記事中でHTMLを使えばすごく便利で楽しくなるということが分かってもらえると思うんです。
楽して書ける。それも正しいHTMLが。ソフトに慣れるまでの苦労が報われる。自然とHTMLを憶えてしまうから。
そんなソフトだと思うんですよね。
カスタマイズについては放ったらかし気味のプロフィール欄。大切なページですので、きちんと考えないとですよね。はじめてHTMLを見て気づいたことからエントリー。
プロフィール欄をHTML編集する際の注意点
プロフィール欄に入力した内容は、自動的にpタグで囲まれてしまいます。ですので、pタグを使おうと思って<p>とはじめてしまうと、実際にはpタグの開始タグが2つ重なることになってしまいます。ブラウザによっては、勝手に</p>を補ってしまうものもありますから、意図したとおりに表示されない結果になってしまうかも知れません。
ですので変則的ですが、pタグを使いたい時は、開始タグ、終了タグを省略する必要があります。たとえば、
<p>はじめまして！</p><p>唐突ですがピグ担当は娘です。記事担当は私。生業はウェブディレクターです。</p>と書くのではなく、
はじめまして！</p><p>唐突ですがピグ担当は娘です。記事担当は私。生業はウェブディレクターです。と書いてあげれば、最初のコードのようにページ上には書き出されるわけです。
<br />タグについては特に意識せずに使用しても問題ありませんので、pタグを使いたい場合の注意点でした。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
「どんなデザインにしたい？ 」を書いてから、「このブログも早めにちゃんとカスタマイズしないとなぁ…」という思いに襲われています。
ちょっと本気で考え始めております。
アメブロでは、どんなデザインも実現可能！？
HTMLとCSSを見た限り、アメブロはかなりデザインのカスタマイズ性には気を配っているなという印象をもっています。ここまでやってくれたら、「何でもできるぞ！ きっと…」という印象をもっています。
守るべき制限は、ワイドサイドメニューを300ピクセル（以上）にすること。これがまず1点。W300×H240のアメブロ広告を掲載するためです。もう1点は、全体の幅980ピクセル。
いまや少数かも知れませんが、解像度が横幅1024ピクセルのディスプレイを使っている方もいらっしゃいます。一定の幅を超えると、ブラウザを画面いっぱいの表示にしていても横スクロールバーが出ちゃいます。これは、うっとおしい。アメブロさんですから、そこら辺は調査したうえでの横幅980ピクセルだと思いますので、これを越えてデザインする必然性はありません。じゃまくさいので、どこまでいけるかの調査はしませんが（笑）。
ちゃんとしてるかな？
とっつきやすくて、分かりやすい。そんなサイトを目指してるのですが、「どんなデザインにしたい？ 」で整理してみた要件って、二律背反の事項もあるんですよね。
だって、思いのまま、なるべく具体的に制作者（私なのですが）に伝えたいと思って書きましたから、それはそれで、しょうがないと思うんです。包み隠さず正直に、思うところを伝えたら、あとは受け取る側に任せればいい。そう思うんですよね。（今回それを受け取る側も私なんですけどね（笑））
で、制作途上のデザインを、右側にご紹介させていただきます。
クール目で信頼感のある雰囲気も重視したかったのですが、総合的に考えて、とっつきやすさのほうを大切にしている感じです。それは大きな間違いのないジャッジだと思うので、この延長線上で決まると思いますが、現状の完成度は半分以下かも知れません。
記事部分のデザイニングがまだですので、それができれば順次改訂していきたいと思っています。
考えられるネタはいっぱい！
ある程度きちっとデザインしようと思えば、レイアウト固定することになるのは仕方ないような気がしています。これまでは、その時の気分でレイアウトを変えてきましたが、「左ワイドサイドメニュー」が、いちばんよいだろうという結論です。
レイアウト変更による見た目の変化って、それほど大きくないのかも知れませんが、自由度って、あったほうが面白いですよね。まぁ、それができなくなるのは仕方ないのかも知れませんが…
ただ、詳しくはここで述べませんが、レイアウトに応じたデザイン設定が可能な仕組みもアメブロには用意されてますので、労力さえ厭わなければ、どんなデザインであれ、全レイアウト用のデザインを準備することは可能なんですよね。今回は、左ワイドサイドメニューから行きますけどね。
こうしてデザインを検討していると、結構たくさんネタが浮かんできました。
ポピュラーなネタもありますので、「探せば他でもあるからわざわざ…」って思っていた内容の記事を書くのにいい機会になりそうです。自分のブログ改訂と同時並行でやっていけば、少しでも身近に感じていただけるんじゃないかな？ って思っているんですがどうでしょうか？
けど普通すぎても面白く無いので、新さを探しながら、読んでいただける方に少しでも楽しんでいただける内容にしたいと思っています。「やってみよう！」の記事にするか、「ちょっと難しい」にするかは、まだ未定ですが、基本はややこしくなりそうですね（笑）。
新しさがありそうで、思いつくテーマは…
- メニュー数非依存のグローバルナビの設置
- 模様、シャドウ… 背景処理の効率化検討
- サイドメニューパーツ使用の極小化
ってとこですかね。
HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
当記事は、以前書いた「アフィリエイト広告をコンテンツ風に見せる 」という記事の改訂版記事です。
執筆当時はまだ提携アフィリエイト会社が少なかったので様々な広告を掲載することができませんでしたが、ひと通り提携が完了して、現在、右の画像のような形で利用しています。少し見栄えも調整しまいたので、再掲載することにしました。
コンバージョン獲得なら「画像＋テキスト」形式
実は当形式、バナーやテキスト広告枠より、コンバージョン率を上げるのに向いている広告枠なんです。画像でアイキャッチができて、少ない文字数ながらもテキストでその補足ができるという広告形式によるところもありますが、広告枠をコンテンツ風に見せているという特長が最大の武器です。
とはいえそれは、mixiやMSNやYahoo!なんかをはじめとしたポータルサイトでのお話。似たような形状をした記事が同じページ内にあるんですよね。ですので、個人ブログではその効果はまた違ってくるかも知れません。きわめて低い成果しかあがっていない当ブログでは、数字の検証のしようがないのが残念です（爆）。
ともあれ、単に与えられたソースコードを貼り付けるだけでは満足できない、掲載広告に自分なりの気持ちを一緒に込めたい方にはオススメします。
記事部分のソースコード
記事部分のソースコードは下記の通りです。
<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader">
<span class="skinMenuTitle">［メニュータイトル］</span>
</div>
<div class="skinMenuBody">
<ul class="skinSubList clearfix custumad">
<li><p class="ad_ttl">［上部タイトル文字］</p>
<p class="ad_img">［画像］</p>
<p class="ad_txt">［説明文］</p>
</li>
</ul></div></div></div>この広告枠の特徴は、アメブロで設定したサイドバーの各メニューデザインと同様のデザインが適用されるという点です。そのために、たとえば「最新の記事」などの他のメニューと同様のHTML構造になっています。ですので、後にタイトル部分や枠のCSSをカスタマイズして体裁を変えれば、自動的にこの枠にもそのデザインが適用されます。
赤い文字の<li>～</li>がひとつの広告の単位です。複数掲載したい場合は、この部分のその数分コピー＆ペーストして、黄色い文字の部分を編集します。
各黄色い文字の部分について説明します。
- ［メニュータイトル］
- 当サイトの掲載画像で、「知っ得の≪収入源情報！≫」となっている部分です。当広告枠の精神に則って（笑）、有益な情報提供をしたい！という思いのたけを、タイトルに込めてください！
- ［上部タイトル文字］
- 画像とその右側のテキスト文字の上の広告タイトルです。各アフィリエイト会社のテキストリンク広告を主に使うとよいと思います。ただ、あまりいいテキストはないと思いますので、自由に編集できるテキストリンクがあれば、それがいちばんよいと思います。
- ［画像］
- 各アフィリエイトから発行された、画像のリンクコードを貼り付けます。
<--～-->のコメント部分については文字数節約のために、私は削除しています。 - ［説明文］
- ここで、アフィリエイターの思いの丈を込めてください！。画像のサイズや高さに応じて、使える文字数は変わってきますので、適宜調整してください。
記事部分のソースコードをどこで利用するか？
上記のソースコードをどこに貼り付けて利用するかについては、各個人によって状況が違ってくると思います。選択肢は「フリースペース」か「フリープラグイン」。私の掲載例では、バリューコマースのアフィリエイトを掲載していますので、フリープラグインを使用せざるを得ない状況です。フリースペースは文字数制限が全角5000文字と多いので、おそらく私もゆくゆくは、バリューコマースの広告掲載を見送ってでも、フリースペースを使用するのではないかと思います。
だってフリープラグインエリアって、半角3800文字がMAXなんですよね。この文字数、あっという間ですから。
フリースペースでは、JavaScriptやiframeをはじめとして使えないタグがあるんですよね。まぁ、ともあれ、使えないタグを使っていないアフィリエイト会社の広告を使用して、「フリーエリア」に掲載することを推奨させていただきます。
掲載については、各アフィリエイト会社の規定に反しない範囲でしてくださいね。私は問題ないつもりですが、当記事に基づいて行動された責任は一切取れませんので、自己責任でお願いしますm(__)m
CSSの設定
CSSの設定部分は下記の通りです。初心者の方は、そのままCSSファイルの最後に貼り付けていただければよいと思います。分かる方は、clearfixについては適宜省略・調整してください。
/* ■.clearfix■ */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* ■freeプラグインの設定■ */
/* W120×H60サイズ画像＋テキスト形式広告の枠設定 */
.custumad li .ad_ttl {
margin: 5px 0 3px 0;
font-weight: bold;
}
.custumad li .ad_img {
float:left;
padding-right: 5px;
}
.custumad li .ad_txt {
line-height: 140%;
font-size: 95%;
}
私、この広告枠については、こだわっていきたいんですよね。説明分の文字色とか、hoverの設定とかもしてみたら面白いと思うんですが、状況を見ながら、いろいろやっていきたいと思っています。
当ブログの講座記事に難易度を★印でつけようと思っています。記事タイトルに画像を使ってつけることができればいちばんよいと思い、可能かどうか調べてみました
文字数制限
意外と入力できる文字数の制限は厳しく、全角・半角問わずに48文字まで。つまり、最大で96バイトとなっています。ただ、普通に考える分には十分な長さですね。HTMLタグを使うとなると厳しく感じるのですが、さて、そのHTMLタグは使用できるのでしょうか？
HTMLタグは使用不可
使用不可というのは正確な言い方ではなく、「入力しても反映されない」といったところでしょうか。
たとえば、
<span style=color:red;>赤字色の文字</span>
と入力するとそのまま<span style=color:red;>赤い色の文字</span>と表示され、期待している
赤い色の文字
のようには表示されません。であれば、< > をエスケープして、
<span style=color:red;>赤字色の文字</span>としたところで、入力したとおりに表示されるだけでした。
HTMLを使わせないなら当然といえば当然なのですが、やはりよくできています。
今日写真を取ったらチャレンジをクリアしてピンクの☆とアメ２個もらいました！
やってみてください！
