新年明けましておめでとうございます！笑
今年初となるこの投稿なわけですが…。
特に書くこともありませんが…、更新してみようと思います。

実に半年振りのアメブロですが、いつの間にか管理画面が変わっていて、｢あれ？CSSの編集はどこへいったの？｣とちょっと焦りました*´ω｀*
一番焦ったのは『メッセージボード』でしょうか、スライドするメニューの最下部から見つけたときはちょっと嬉しくなりました(笑)

私のアメブロは、まだサンタさんの帽子をかぶっているぐらいですから、本当ご無沙汰なんですね。
でも、お客様のアメブロはたまに作ったりしますよ、本当たまにですが。
Aoi Design Worksは企業さんがメインとなっているので、アメブロのような個人ユーザーの多いサービスからのご注文というのはあまりありませんが、先日デザインされる方からTwitter経由でご連絡がありまして私がコーディングを担当することになりました*´ω｀*
既に納品済みで、来月その第二弾があったりします、楽しみですね。
たまに、アメブロのコーディングのような違うことをすると、気分が晴れるというか、リフレッシュになってよいですね。
WordPressは本当に大好きで堪らないのですが、毎日だとやっぱり疲れてしまいますからね(笑)、息抜き？は大事です*´ω｀*

この半年間、本当にいろんなことがありました。
出先でぶっ倒れて皆さまにご迷惑をおかけしたこともありましたし、超大手企業様のウェブサイトを構築する機会も与えていただきました。
善くも悪くも、私は周りの方に助けられ恵まれてると思いますよ、本当感謝です。
今年は「よい年だなあ」って実感しちゃいます。
やりたいことがたくさんあります。
年内に目標としている業務的なことはまだまだ達成できていなけど、うーん、焦らず生きていきます*´ω｀*

以下、お伝えしたいけど話したら長そうなので箇条書きにしました(笑)

• OLYMPUSのPEN買いました！写真が益々楽しくなりました！
• 現在、有名なお花屋さんのウェブサイトを構築中です。
• 本日、種子島のアクティビティをメインとするサービスのウェブサイトが納品になります！
• iPhoneにしました！
• 最近、優ちゃんの『洋菓子店コアンドル』観ました！最高！Twitterのフォロワーさんと映画話しで盛り上がってます*´ω｀* 『阪急電車』『ツレがうつなんで』も面白い！
• FacebookやTwitter、Instagramやってる方、仲良くしてください*´ω｀*

それではまた！
あまりにも時間がないのと、リニューアルさせたいのでAoi Design Worksのホームページは全く更新していない状況です。
現在は、近況を手軽に更新できる(笑) Facebookページ にアップしていますので宜しくお願い致します。

アメブロをカスタマイズしていくうえで求められるクウォリティは、”プログラムそのものの質は兎に角、如何にアメブロに見えないブログにするか”ではありません。
”HTMLやCSSを正しく理解し、それをアメブロで実践し、限られたアメブロというフィールドのなかでオリジナルを打ち出すか”です。
アメブロを利用されている目的は様々でしょうが、せっかくカスタマイズされるのですからしっかりとした知識を身に付けていただき、アメブロ以外のページでもお役立ていただきたいのが私の思いです。

「なぜそんなことを？」と思うかもしれませんが、この投稿タイトルにもあるようなカスタマイズ記事が多く出回っているからです。
HTMLを学ばれている方ならすぐに分かると思いますが素人さんは鵜呑みにしてしまいます。
”正しいのか・正しくないのか”なんて考えずに使ってしまい、それ(間違った知識)がやがては知識として身に付いてしまう…。
私はそういうのを少しでも取り除きたく、このエントリをしています。
間違ったエントリを発信しているブログの揚げ足を取りたいわけでもないので悪しからず（そもそもそんなブログに興味はない…笑）

アメブロでのSEOを考えての対策がそれ？

フリープラグインにmetaタグを記述するのは、アメブロでのSEOを考えた結果なのでしょうが絶対にそんなことしないでください。
理由は”書くところじゃない！”からです。
「なんで？」って思う方はよい疑問です、早速ググってみましょう！
そこからHTMLの勉強スタートです*´ω｀*
以下では一般的なSEO(検索エンジン最適化)対策をアメブロに置き換えて、初心者のあなたにでもデキる簡単な”アメブロでのSEO対策”をご紹介していきます。

metaタグは既に吐き出されている！

当り前な話ですが、アメブロでもSEO対策は少なからずされています。
トップページではブログタイトルやユーザーネームが含まれたキーワードが出力されています。

<meta name="keywords" content="HTML5 / CSS3 Hack for Ameba blog | アメーバブログ(アメブロ)をカスタマイズ,蒼井旬,ブログ,アメブロ,アメーバ,ameba" />

シングルページでは、投稿タイトルを含んだキーワードが出力されています。

<meta name="keywords" content="アメブロのデフォルトCSSをリセットする,CSS,HTML5 / CSS3 Hack for Ameba blog | アメーバブログ(アメブロ)をカスタマイズ,蒼井旬,ブログ,アメブロ,アメーバ,ameba" />

つまり、これと重複したmetaをフリープラグインに入力しても意味がありません。
またdescriptionもしっかりと吐き出されているのでSEO対策の”下の下”はできるということになります。
これを”中の下”にしたり”中の上”にするのはあなたの腕次第です。
SEO関連の書籍でも、制作サイドができるSEO対策は2～3割程度で残りの7～8割はユーザーサイドと言われています。

検索の対象となる要素を理解する

アメブロでは以下の要素が検索対象の優先順位として高いです。

• ブログタイトル(<h1></h1>)
• ブログの説明(<h2></h2>)
• 投稿のタイトル(<h1></h1>)

これらの内容が先述したtitleやmetaに反映されます。
※アメブロがHTML5になってからサイドバーのメニュータイトルはh要素ではなくなりました。

また忘れてはいけないのが投稿本文そのものです。

• 投稿の内容(自分でh要素を作ったり、<strong></strong>で強調したり)

小さなことでもできることはたくさんあります！
どんなポイントが検索ロボットに拾われやすいのかを考えて更新すると楽しくなってきますよ*´ω｀*

ブログへの入口を増やす

昔から言われていることですが”被リンク数”や”ページのボリューム”は今でも大切です。
しかし、現在では昔ほど労力を費やさなくても対策できるようになっていると思います。
アメブロには”読者登録”という機能があったり、外部ではmixiやTiwtter,Facebookなど様々なSNSがあり投稿をシェアしてもらうと同時に読者も増やしやすくなっていますよね。
ページを追加するにしてもブログなので新規投稿すれば自動でページが生成されます。
つまり、細かいことは考えずに(本当は考えてほしいけど…)”如何に自分のブログをシェアしてもらうか”を考える。
それが現在のSEO(SEM)対策だと、私は初心者さんに分かりやすく伝えるために用いているフレーズです。

そのためのコンテンツ配置やデザインをアメブロでも編集可能なCSSで補う。
それがアメブロのSEO対策に必要なカスタマイズであると考えます。
もっと読者を増やしたかったり、アクセスを伸ばしたかったり悩みは様々だと思いますが、原因は単純で”訴求不足”なのかもしれません。
もっと目立たせてアピールしてみたり、配置を変更してみたり、見やすいカラーに変更してみたり、SNSをもうちょっと頑張ってみたり…と改善策はいろいろありますので、是非前向きに挑戦してみてください*´ω｀*

補足：”ブログの説明”にキーワードを入力しない

フリープラグインの他にも”ブログの説明”にキーワードを入力して”SEO対策”を謳っているカスタマイズがありますが、それも真似しないようにしてくださいね。
”ブログの説明”とは見出し(<h2></h2>)というサイトの大事な概要に相当する要素です。
そこに意味不明なキーワードの羅列は音声ブラウザを含め、多方向に迷惑なカスタマイズです。
”使えるからといって安易に使わない”ことです。

前回のCSSをリセットすることを忘れないの続きです。
ブラウザのデフォルトCSSをリセットしても、なかなかユーザーCSSの編集の効率が上がらないのが今回の新バージョン(HTML5)です。
アメブロのデフォルトCSSによってガッチリと組まれているのが理由です。
なので、ユーザーCSSのクウォリティや編集の効率をアップさせたいのであれば、前回の投稿にも書きましたようにアメブロのデフォルトCSSのリセットは必須となってきます。


アメブロのデフォルトでは事細かに各要素がスタイルされています。
CSS編集用デザイン”と謳っているのであれば、もっとシンプルにユーザーが編集しやすい状態で提供していただきたいのが本音なとことです*´ω｀*

アメブロのボックスモデルを理解する

"アメブロのデフォルト"といっても一つではありません。
幾つかのCSSファイルによって構成されていることがソースをご覧いただければお分かりになるかと思います。
しかし、暇ではないのでそれらを一々確認してられませんよね（笑）
なので、ブラウザ頼りになりますがHTMLやCSSをモニタするのが一番手っ取り早くアメブロのボックスモデルを理解できる方法かと思います。
Firefoxですと有名なアドオンFirebugもありますし、Chromeですと右クリック(WinだとF12でもOK)の「要素を検証」で事足りると思います。
自分に合ったツールを使うことでデフォルトをリセットするスピードも上がります。

リセットで厄介なのはアンカー「.columnハック」を使う

私がカスタマイズした際に「これは面倒だ！」と思ったのがアンカー部分です。
実際にカスタマイズされたら分かると思いますが、まさかの

a {
text-decoration:none !important;
color:black !imortant;
}

と!importantを使って強制的に上書きしたくなるほど厄介です。
リンクに関してはそれ程デフォルトに邪魔されるということです。
しかし、こんなところで!importantルールなんて使いたくありませんので何とかしなければなりません。

方法としては幾つかあります。
まず、ポイントとして抑えていただきたいのは、デフォルトでは:hover以外の:visitedや:focusの疑似クラスも多用されていること。
そして、:linkは使われていなかったのでリセットの必要はないということ。
ですから、「aと:hoverはリセットしてるからOK！」とはならないということですね。
※「:linkだけ記述しないのは気持ち悪い…」という方は好きに書いてくださいね*´ω｀*

方法として挙げられるのは

• 要素毎に適宜上書き
• まさかの!importantハック
• 要素をまとめて記述して上書き
• .columnハック

の4つ。
「要素毎に適宜上書き」はCSSファイルの至るところにアンカーに関するスタイルをしなければならないので私は嫌で使っていませんが、適材適所上書きするので後から管理することを考えればメリットもありそうです。
デフォルトをまとめてリセットするのではなく、個々にしていく一般的な方法です。

「まさかの!importantハック」はこの項の冒頭でも説明してある通りで、!importantを使ってしまうと後にスタイルするアンカーには全て!importantを付加しなければなりませんので却下です。
一般的にCSSファイル内に!importantが多用されるのは”よくないCSS”です。

「要素をまとめて記述して上書き」はブラウザのデフォルトをリセットする要領です。
実際に書いてみました。

a,
a:visited,
.pagingArea a,
.pagingArea a:visited,
.columnB .skinArticleTitle,
.articleText a,
.skinWeakColor a,
.skinSubA a,
#footer_ad a,
#resPoint li a,
.commentOpenArea a,
.commentOpenArea a:visited,
.commentFooter a,
.commentFooter a:visited,
.trackbackHeader a,
.trackbackHeader a:visited,
.listPageArea.listContentsArea .contentsList li a,
.listPageArea.tabList .listContentsArea a {
text-decoration:none;
color:#503A45;
}
a:hover,
a:foncus,
.pagingArea a:hover,
.columnB .skinTitle:hover,
.columnB .skinArticleTitle:hover,
.articleText a:hover,
.skinWeakColor a:hover,
.skinSubA a:hover,
#footer_ad a:hover,
#resPointArea #resPoint li a:hover,
.commentFooter a:hover,
.trackbackHeader a:hover,
.listPageArea.listContentsArea .contentsList li a:hover,
.listPageArea.tabList .listContentsArea a:hover {
text-decoration:none;
color:#30363A;
}

まとまっていて綺麗なのですが結構長いでしょ？… orz
また後からの管理も厄介そうですし、正直リンクスタイルでこんなに長々書きたくありません。
しかし、この方法でやるとなれば上記のようにダラダラ書かないとアメブロのリンクスタイルがリセットされないのは事実です。
ということで「.columnハック」になります。

「.columnハック」って何？

私が勝手に命名したのでググっても出てきません（笑）
HTMLの3行目に

<html lang="ja" class="columnB" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#">

とありますよね。
そのclassを用いているだけで「!importantを使うよりはマシでしょ？」ってぐらいの体ですので…。
果たしてこれが”スマート”なのかどうかは好みだと思います（笑）
ちなみに”column”のあとに続くアルファベットはお使いのカラムによって異なります。
実際に書くのはこれだけ。

.columnB a,
.columnB a:visited {
text-decoration:none;
color:#503A45;
}
.columnB a:hover,
.columnB a:focus {
text-decoration:none;
color:#30363A;
}

これで全てのページのリンクが統一されます。
異なるリンクスタイルをもつ要素につきましては別途上書きすればOKです。

.columnB .post a {color:#DDD;}
.columnB .post a:hover {color:#30363A;}

リンクに関しては以上です。
※広告部分に関するリンクスタイルは別途エントリさせていただきます。

list-style-typeに関するリセット

アメブロのデフォルトではリストのはみ出し(overflow)値はhiddenとなっておりますので、list-style-typeの値でdisc/square/decimalなどをスタイルしたい場合には予めリセットしておいてあげると便利です。

.skinSubArea ul,
.skinSubArea li,
.listPageArea.listContentsArea ul,
.listPageArea.listContentsArea li {overflow:visible;}

margin/padding/border/backgroundのリセット

これもリンクスタイル同様”好み”です。要素毎に随時リセットしてもよいですし、まとめてリセットしてもよいです。
私は自分以外のアメブロを制作することもありますので”作業効率”を考えると後者で、marginに関するリセットは以下のようなものです。

.blogSearchForm,
.skinSubList li,
.subModule,
.skinArticleHeader,
.skinArticleFooter,
.skinArticleBody2,
.articleText img,
.articleExLinkArea,
.articleExLinkArea a,
.articleLinkArea,
.commentArea,
.commentTitleArea,
.commentList li,
.trackbackArea,
.trackbackTitleArea, 
.trackbackList li {margin:0;}

毎度ボックスモデルを確認するのは面倒ですし、ある程度このような雛型を作っておくことは制作サイドには必須かと。
※padding / border / backgroundにつきましては省略させていただきます。興味のある方は私のCSSを覘いてみてください*´ω｀*

非表示にする要素もまとめてリセット

使わないコンテンツもまとめて最初にリセットしておきましょう。※広告は絶対に消さないこと！

#aswift_0_anchor,
.articleDetailArea .articleTheme,
.contentNew,
.articleExLinkArea .nowBtn,
.articleExLinkArea .mixiBtn,
.skinSubA .rss,
.footerNav {display:none !important;}

一行目の#aswift_0_anchorに関しては「CSSで『#aswift_0_anchor』をリセットする」をご覧ください。
その他の要素は私好みのものなので適宜変更してください。

bodyに関するスタイルを理解する

まずはbodyの横幅(最小値)に関してです。
デフォルトでは

body {min-width:1100px;}

と定義されており、1100px以下は横スクロールが表示されます。
コンテンツの横幅がそれ以上であれば問題ですし、それ以下でも正直問題です。
これは自分のコンテンツ幅に合わせて適宜変更することをお勧めします。
例)コンテンツ幅が800pxなら

body {min-width:800px;}

その他には、アメブロの最上部には固定で白いバーが表示されていますよね。
デフォルトでは

body {padding-top:24px !important;}

と定義されております。
そのためbodyよりも上にあるレイヤー(body含む)に背景色・画像をスタイルした際、白いバーの裏側に回り込んでしまいますので、画像の開始位置(background-position)で適宜調整する必要があります。

.skinBody {background:url(images/body.jpg) no-repeat 0 24px;}

※単色・単調なものでしたら指定する必要はないです。

以上がアメブロのデフォルトCSSに関してのリセットです。
今回のバージョンは”上手くリセットできるか”が素敵なスキンを作る一つの鍵になってくると思いますよ*´ω｀*
デザインの見た目だけだけはなくCSSファイルそのもののクウォリティを素敵にしてみてください。
そんなこと言ってる自分のCSSは酷いですが（笑）

補足：ユーザーCSSが反映されないと思ったら…

途中で書きました「.columnハック」で用いられているclassは、アメブロのデフォルトCSS内でも度々登場してきます。
そのためユーザーCSSに記述した内容が反映されないこともしばしば。
そんなときは同様に.columnを付けて定義するかプロパティ値に!importantルールを用い優先順位を上げる他ありません。

.columnB .skinMainArea {}
.columnB .skinSubA {}
.columnB .skinTitle {}