どんなデザインにしたい？

アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。

難易度表示付き記事一覧はこちらです

ウェブ制作のプロがサイトデザインを行うとき、「どんなデザインにしたいか？」ということをヒアリングします。

デザインって感覚的なものですので、ここで顧客と違った方向を向いてしまっていては、いくら時間をかけても、気持ちを入れてデザインしても、顧客に気にいってもらうことはできません。

当サイトは自分でアメブロをカスタマイズしたい人向けの記事ですので、自分自身が分かってさえいればよいのですが、私自身まだ、将来的にどんなデザインにするかは検討中といったところです。

つまり、まだ明確じゃないんですね。なので、この『デザイン要件定義』を自分自身に対して行なってみたいと思います。

デザイン要件定義のヒアリングシート（仕事用）を参考に

意識する競合社、競合サイト

やはり、アメブロでデザインカスタマイズをビジネスにしている方のサイトは気になりますね。
ただ方向性は違うと思っていますので、それよりいいデザインにしたいとか、見た目で負けたくないという意識はないです。

そうしたサイトとの差別化のポイントをどこに置くか

アフィリエイト活用はしていきたいと思っていますが、あくまで情報サイトとしての立ち位置で考えたいです。その意味で、「営業色は出さない、信頼感をもってもらえる」という2点を大切にしたいです。

デザインを参考にしたいサイト・パーツ

記事内容を主役にしたいので、ごちゃごちゃせず、極力シンプルなデザインを希望。
「このサイトいいなぁ」と思ったサイトはあるのですが、探せなかったので、分かり次第ここに書きます。色数は少なく、パーツは大きめといった単純で分かりやすい構成。味気ないのはダメで、特徴的な、印象に残るようなサイトを目指して欲しいです。

どのようなイメージを求められますか

単純、誠実、信頼感、やわらかさ（あたたかさ）、かんたんさ、情報の豊富さ、親近感

競合サイトのデザインに対しての考え

特に競合として意識しているところはありませんが、大きな文字で同じことを何度も繰り返して、いかにも儲かるみたいな雰囲気を刷り込むやり方は合っていません。一見して全体が見通せて、落ち着いて見れるサイトでありたいと思います。

現状サイトのデザインに対しての考え・課題点

アメブロのカスタマイズの可能性を探りながらちょこちょこと修正をしていますが、やはり全体的な視野の元でデザイニングが行われていないので、現状では信頼感に欠けると感じています。課題は見た目のみで、コンセプト自体は上述の通り結構固まってきています。

ロゴ、カンパニーカラー、サイト基調色

特にありません。上述の内容を汲み取っていただければ、全体的におまかせします。

CIなどのデザインガイドラインの有無

特にありません。サイトタイトルの「アフィリエイターのための」の部分は強調する必要はありません。ついていればいいです。

サイドバー設定について

単純化したいので、

レイアウトパターンは左ワイドサイドメニューの2カラム構成で
グローバルナビにHOMEを加えたテーマを置く
[読者になる]ボタンを「最新の記事」の最下部に設置し、「最新の記事」は最丈夫に置く
「読者一覧」「お気に入ブログ」は、可能ならプロフィール欄のボタンの並びの下に置く
以下順番は、「検索窓」「フリープラグイン」「プロフィール」「フリーエリア」その他
メッセージボードは、カスタマイズ記事のメニューとして活用したい。「超入門」「やってみよう！」「ちょっと難しい」の最新3記事とmoreリンク（記事一覧への）を設置

要件があいまいな場合は

いつもはお客さんとお話をして、デザインのイメージを具体化してゆき、デザイナーとのキャッチボールのなかだちをする役なのですが、自分で書いてみると、かなり精力を使う作業です。

特に、「参考にしたいサイト」の部分、大切ですね。自分では気にいったサイトがあったんだけど、なかなか探せない。といって、そうしたイメージをもつサイトを伝えたいと思って探してみても、なかなか見つからない。

お客さんのほうも、これを探すの、かなり時間をかけてやっていただいていたんだということがよく分かります。自分の好みじゃなくて、決裁権者の了解をもらい、社としてのコンセンサスを伝えないといけないの場合もありますから…

私みたいに、イメージ先行で、具体的な例がない場合も結構あるんですよね。けど、そのイメージが詳しく書かれていたら、「これですか？」「これ違いますか？」って、参考サイトを集めてきて聞くことができます。

いまのこのサイトをデザインリニューアルしようと思えば、必要なのは見本としたいサイトを見つけること！ ということが分かりましたです。ハイ（笑）。仕事だと思えば、パワフル集中力も出てきますから（笑）

といっても、デザインするのは自分なんですけどね。いつも仕事している仲間なら、これだけ書けば、想像以上のものをつくってくれそうですが、私にはできません（笑）。私、デザインは専門ではありませんので。

けれども、専門家でない人がアメブロをカスタマイズする力になりたいというのが当サイトのコンセプトですので、当然、自分でやってのけます！　デザインの方向性さえ固まれば、効率的に時間を使えるようになりますので、それなりの仕事はできるものと思っています。

jQueryにお世話になってみる

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

今回はjQueryにお世話になってみたいと思います。

jQueryというのは、HTML文書の解析、イベントハンドリング、アニメーション、Ajaxとの相互利用を単純化するウェブ開発に役立つ高速・軽量なJavaScriptのライブラリー

だということです。

jQueryってのは私のイメージとしては、ブラウザがページの内容を分析するので、その分析にのっかって、「ここ！」とか、「あそこ！」とか言って、好きなもので置き換えたり、挿入したり、スタイル設定したりできる機能って感じですかね。

まだ私自身、実務レベルで正確に使用できるほど勉強がすすんでいませんので、当記事では、jQueryを使って当サイトで実験中の事柄についてご紹介してみたいと思います。

以下、短い念仏です（笑）→ご活用される場合は、当方は一切責任を終えませんので、自己責任でお願いいたします。

jQueryを使うには

アメブロのCSS編集可能なテンプレートでは（他のテンプレートは詳しく見ていません）、デフォルトではjQueryを使える状態にはなっていません。ですので、jQueryを読み込みそれを活用するには、フリープラグインを使わざるを得ません。また、jQueryは、prototype.jsと競合してしまうようですので、フリープラグインの文字数をすでに限界まで使っている方および、prototype.jsを使用している方は今回の記事を活用できない可能性がありますのでご注意ください。

記事の最後に「人気投票」のブロックを挿入する

アクセス対策のために人気ブログランキングをつかっている方、結構いらっしゃるんじゃないでしょうか？例に漏れない私は、各記事を読んでいただいた方に投票してもらえたらうれしいなぁ～なんて思い、各記事の最後に「人気投票」ブロックを挿入するようにしています。トップページでは、最新の記事の最後にのみ表示されます。

HTML部分の説明

いま背景をピンクにしている下のブロック部分ですね。

この部分のHTMLソースコードは、以下のようにしています。

<div class="b_ranking clearfix">
<p class="b_banner">
[人気ブログランキングのソースコード]
</p><p>
[もし記事が気に入ったら、クリックいただければうれしいです
<img alt="ニコニコ" src="http://stat.ameba.jp/blog/ucs/img/char/char2/139.gif" width="16" height="16" />　
またのご訪問、お待ちしております<img alt="音譜" src="http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif" width="16" height="16" />]
</p></div>

黄色い文字の行、

[人気ブログランキングのソースコード]

を、人気ブログランキングで発行されたソースコードで置き換えます。詳しくは「人気ブログランキング」に登録すると分かると思いますが、この部分は、選択したバナーに応じて、各個人ごとに違ってきます。別に人気ブログランキングでなくて、他の画像でも問題ないです。別のランキングのものでもかまいません。ただ、画像が極端に大きかったり小さかったりする場合は、次に記述している文章の分量調整をしてくださいませ。

で、同じく黄色の行、

[もし記事が～]

の部分は、お好きな文章をお入れください。まったく同じでいい場合は、黄色い箇所の最初と最後の[]は両方削除してください。メッセージを変更する場合は、この部分をそっくり差し替えてくださいね。

元のソースでは、顔文字を使用してますので、同様に顔文字を使用して他の文章にしたい場合は、Amabloで普通に記事を書いてみて（HTMLタグを表示以外で）、それを、「HTMLタグを表示」に切り替えてソースをまるまるコピー＆ペーストすればOKです。ただ、その際にという文字が自動的に付け加えられることがありますので、もしあったら削除しましょう。レイアウトに応じて、文字分量は調整してください。バナーの右側に文章が表示されるようになっているのですが、3行目はバナーの下側にも文字が回り込みますので、格好わるいです。ですから、文字分量は調整してくださいね。

以上が第一ステップ。次が第二ステップです。

<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">$(function(){$(".b_ranking").insertBefore(".articleThemeListArea");});</script>

先ほど編集したソースコードの下に、上記のソースコードを丸々はりつけます。これで第二ステップは終了。次は第三ステップです。

CSSの設定

スタイルシート（CSS）の設定は、次のようにしています。

.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;}
.b_ranking {
	margin: 20px 0 10px 0;
	padding: 5px 10px;
	border: 1px solid #666666;
	background: #ffdbe7;
}
.b_ranking p.b_banner {
	float:left;
	padding-right: 10px;
}

外側の境界の色（borderと背景の色（background）を設定している黄色文字部分は、お好きに設定してください。

色の設定方法がわからない場合は、「CSS　色」でgoogle検索してみてください。色見本と設定の仕方を解説しているサイトがたくさん見つかると思います。

フリープラグイン、CSSをそれぞれの変更作業ができれば、作業は完了です。

HTMLとCSSって何？　憶え方は？

当『超入門』コーナーでは、アメブロデザインカスタマイズのいろはのいについて解説したいと思います。初級・中級・上級者へとステップアップしてゆくための基礎の基礎固めに役立つ記事になるように努力します！

難易度表示付き記事一覧はこちらです

今回は少し眠たいお話になるかも知れません。だけど、「HTMLとCSSって何？」「どうやって覚えればいいの？」というテーマについて一定のケリをつけるためには、少し辛抱していただいてもその値打ちがあるのではないかと思います。

私の場合、何かを参考書にしてそれをベースに書きすすめるというタイプではございませんので、結構独自な考え方かも知れません。ひたすらPCに向かい続けて15年以上…　いろいろな遠回りを結構してきましたので、「これがツボでしょう！」という話に絞ってしたいと思っています。

この記事で言いたいこと

先に、この記事でいいたいポイントをまとめておきます。

HTMLもCSSも、基本の考え方が分かっていれば、憶える必要はない
HTMLとCSSを学ぶうえでの秘策をご紹介する

この2点です。できるだけ単純にお話したいと思います。

HTMLとCSSって何？

「HTMLとCSSって何？」　という話をしだすと眠たくなりますので、前回の記事：「なぜデザインの変更ができるのか？」の内容程度のことが何となく分かっていれば問題ないんじゃないかと思います。つまり、HTMLはウェブのページを記述するための決まりごと、CSSはページの見栄えを調整する方法だと思っておけばいいと思います。

大切なのは、その規格がW3Cによって決められているということかと思います。ですので、HTMLを憶えるということは、W3Cの定めた規格を憶えるということになるのですが、それは非常に困難な作業（笑）となります。なぜなら、たくさんの規格があり、新しい規格は古い規格をベースにしているかと思うと、まったく新しい点があったりして、非常にややこしい。おまけにすでに標準化されたものもあれば、まだ作成中のものもある。

アメブロはまだ作成中のHTML5という新しい規格で書かれていますので、将来的に廃止・変更される可能性のあるタグも使われていて、これを覚えようとするとますます頭は混乱してくるんじゃないかと思います。

ですので、それ（ウェブサイトのデザイン・制作等）でお金を稼ごうという方以外、間違っててもいいからいいとこ取りする。という考え方で望むのがいいと思います

バイブル

ですが、これから少しずつでも勉強しようと思えば、やはり教科書が必要になります。また、こんな話をしたのですから、どの規格を勉強したらいいかということも言っておかなくてはいけないような気もします。

で、思い返せば、私は昔ここで間違ったんですね。適当な教科書を買ってひと通り読みはしましたが、それだけでは覚えられませんでした。ディレクターという職種柄、自分でHTMLを書くことは多くなかったのですが、少しずつクリエイターのつくったHTMLをチェックするようにもなった。それで知ったんですよね。ほとんどのウェブクリエイターが、ちゃんとHTMLを書けていないことに。

もう10年程度前のことですが、ウェブビジネスをするのにそれほど大切なことではなかったんです、当時は。いまは違うとは思いますけどね。

そんな時に出会ったのが、以下の本

ユニバーサルHTML/XHTML/神崎正英: ￥2,310; Amazon.co.jp

残念ながら、2004年に第4刷が出て以来刷られていないようで、もう中古本以外手に入らないみたいですが、ご安心ください！

著者である神崎正英さんのサイト『The Web KANZAKI 』中の「ごく簡単なHTMLの説明」がその元ネタで、WEBで読むことができます。

私はこの本を手にして1月と経たずして、HTMLを書いてお金をいただいて仕事ができる自負をもてるようになりました。以来、新しい規格が出ようがまったく慌てることはありません。

本もウェブも、少し眠たくなるかも知れませんが、ややこしいウェブの規格の世界への超入門書となっています。すごくやさしく、順序を追って説明してくれています。

これを読めば、HTMLって簡単なんだと思えるようになるとともに、正しくHTMLを学んでいけるようになるんじゃないかと思います。読んでいただければ分かると思いますが、憶えることはほとんどなく、HTMLがすごく身近に感じられるようになると思います。

HTMLとCSSを勉強するうえでの秘策

HTMLなんて、その基本的な考え方が分かっていれば、憶える必要はないんです。忘れたらググッて調べればいいですし、適当に買った参考書をひもといてもいい。

アメブロもHTML5だからと言って構える必要はありません。面白そうだと思えば使ってみればいいんです。

HTMLやCSSを勉強したいと思われる方は、「ごく簡単なHTMLの説明」をまず読んでみる。これがHTMLとCSSを勉強するうえでの秘策です。

そしてとにかくHTMLとCSSを使ってみて、いいとこ取りをしてみてください！

さて、本日は

今日は何を書こうか？　なんて構える気持ちが少しあれば、筆って遅くなっちゃいますよね。お休み中なので家族サービス優先の一日ですが、『一日一記事』の今年の抱負を語ったくせに、ちょっと更新が滞っています。

ということで、本日の執筆宣言

ということで、書くぞ宣言をして、今日はきちんと記事を書きたいと思います。

「超入門」、「やってみよう」、「少し難しい」それぞれ1本ずつは行きたいですね。超入門のほうは、目次を決めているので何を書くか考えなくてよいのが楽です。

「やってみよう」で少し悩みます。簡単でニーズが高そうなjQueryモノを1本にしますかね。「少し難しい」のほうは、デザインの要件定義のお話にしようかと思います。

はい。決まりました！　あとは書くだけです（笑）

なぜデザインの変更ができるのか？

難易度表示付き記事一覧はこちらです

「なぜアメブロのデザイン変更はできるのか？」

ウェブサイトづくりにおいてはもっとも基本的なことですので、どのようにしてデザイン変更を実現しているのかを知っておくことは価値あることだと思います。

ページとデザインは別

実は、普段見ているインターネットのサイトでは、ページ内容とデザイン内容は別々に規定されているのです。ページ内容はHTMLファイルに書かれており、そのデザインはCSSファイルで設定されています。

こうすることで、デザイン変更したいとき、いちいち全部のページを修正する必要はなく、CSSファイルを修正すれば全ページいっぺんに変えることができるようになっています。

たとえば、h1といういちばん大きな見出しを意味するHTMLタグの場合を考えてみます。アメブロでは、記事タイトルにこのタグが付けられています。

<h1>記事のタイトル</h1>

この部分にデザインを施したいときは、CSSファイルでたとえば以下のように設定します。

h1 {
	color:red;
}

すると、記事タイトルは全部color:red;、つまり赤い色になります。設定できる内容はタグによって決められており、h1ならたとえば、文字の大きさ、四方を囲む罫線の設定、次の行との空きスペース、文字が表示される部分の背景の色や背景画像などなど、様々な設定をすることができるようになっています。

どんなデザインでも実現可能！

ページに書かれている要素は、すべて何らかのタグで囲まれていますから、CSS編集可能デザインならページに手を入れることなく、すべての要素に自由にデザインの設定ができるということになります。

デザイナーのつくったどんなデザインでも、（アメブロの広告を非表示にしないなど）アメブロの取り決めルールを守っている限り、CSSファイルひとつで実現可能なわけです。

HTMLもCSSも、計算機（検索エンジンのロボットなどのコンピュータ）が理解できるように、決められた規則に従って書かれていますので、元々のルールは簡単。最初はとっつきにくくても、少し覚えれば、自由にデザインしてゆける楽しみがどんどん広がっていくこと間違いないと思います。

HTMLとCSSの勉強の仕方は、別の記事で触れたいと思っていますので、お楽しみに。

今年の抱負は、1日1記事！

ブログネタ：今年の抱負参加中

本文はここから

ブログネタ記事に初投稿。まずは書きやすいところから「今年の抱負」を！

継続は力なり

すべてのことに通ずることだと思うのだが、自分自身の血肉になってくれることって、やはり続けられたことですよね。

それが好きなこと、気持いいこと、儲かることだったりしたら何とか頑張れるかも知れないけれど、辛いこと、しんどいこと、時間のかかることだったりしたら、結構な努力が必要になるもの。

けど、続けられたら、自然とそれが自分の財産になってくれるものなんですよね。

そう思うので、今年の抱負は、「当アメブロで1日1記事を書くこと」としました！

書けない日もあるだろうから、年間トータルで366本という設定にいたします。

色気を出してもだめだけど…

それが、こんなことにつながればいいなぁと、思っています。

ブログへのアクセス数アップ
ブログランキングのアップ
アフィリエイト収入のアップ
ウェブ技術力のアップ

最後のは数値化しにくいので、他の3点については、毎月集計発表しようと思っています。

「記事一覧」を目立たせる

難易度表示付き記事一覧はこちらです

前々から気になっていた目立たない「記事一覧」。今回は、この部分を目立たせるための小ネタです。

カスタマイズの準備

この部分は初心者の方は読み飛ばしてもらってもいいかと思います。カスタマイズのための準備調査です。

「記事一覧」部分のHTML

結構単純です。以下のようになっています。


<a class="pagingList skinPagingListColor" href="<a href="http://ameblo.jp/jalan2-net/entrylist.html">http://ameblo.jp/jalan2-net/entrylist.html</a>">記事一覧</a>

つまり、pagingListとskinPagingListColorの2つのクラス設定がされているというわけですか。じゃぁ、この部分のスタイル設定はどうなっているんでしょう？

「記事一覧」部分のCSS設定


.pagingPrev,
.pagingNext,
.pagingList {
	display:inline-block;
	vertical-align:middle;
}
.pagingList {
	margin-top:5px;
}

なるほど。ページングナビ共通の設定がされているだけですね。では、「<< 前のページ」「次のページ >>」のリンクの部分はどうでしょうか？

まず、HTML…


<a class="skinSimpleBtn pagingNext" href="<a href="http://ameblo.jp/jalan2-net/page-2.html">http://ameblo.jp/jalan2-net/page-2.html</a>次のページ >></a>

次はCSS…


.skinSimpleBtn:hover,
.skinSimpleBtn:focus {
	text-decoration:none;
}
.pagingPrev,
.pagingNext {
	position:absolute;
	top:0;
	white-space:nowrap;
	padding:4px 14px 3px;
	border-radius:6px;
}
.pagingPrev {
	right:280px;
}
.pagingNext{
	left:280px;
}
.listPagePaging .pagingPrev {
	right:260px;
}
.listPagePaging .pagingNext {
	left:260px;
}

なるほど。border-radius:6px;この部分がミソですかね。あと、「<< 前のページ」「次のページ >>」と文字の表示位置をあわせるために、margin-top:5px;の設定がありますので、これを上書きしないとだめですね。あと、上下ボーダー分の各1px分の高さも合わせないといけません。

背景を黒にして目立たせる

ここからが、この記事の本題です。ここから読んでいただければ、同様のカスタマイズは簡単にできちゃいます！

私は、「記事一覧」部分の表示を、背景を黒色、リンク色を白、マウスを乗っけたときとクリックしたときの色を黄色にして目立たせたいと思います。


/* ■「記事一覧」の表示を目立たせる設定■ */

.pagingList {
	margin-top:0; /*←元々5px設定だったのを上書き */
	white-space:nowrap;
	padding:5px 14px 4px;
	border-radius:6px;
}
.skinPagingListColor {
	background: #000000;
}
a.skinPagingListColor,
a:link.skinPagingListColor,
a:visited.skinPagingListColor {
	color: #ffffff;
}
a:hover.skinPagingListColor,
a:active.skinPagingListColor {
	color: #ffff00;
	text-decoration: none;
}

はい。これで完成です。上のソースコードをコピーして、CSSの最後の部分に追加すれば完了です。背景の色とリンク色等は、お好きな色を設定してくださいませ。

ブログデザインの変更の仕方は？（その2）

難易度表示付き記事一覧はこちらです

前回の記事からの続編。ここからは、実践編です。理屈はともあれ、実際にやってみたいという方は試してみてください。失敗しても元に戻すのは簡単ですので、失敗を恐れずにチャレンジしてみてください！

チャレンジの準備

今回の課題は、「ブログタイトルエリアの見栄えを変えてみる」です。理屈は、「やってみよう！カスタマイズ」（初級者向け）や、「ちょっと難しいカスタマイズ」（中級者向け）で説明していますので、分かる方はそちらの記事もご参照ください。

いまは分からなくても、『超入門』記事を読み進めていくことで、そちらの記事内容も自然と理解できるようになると思います。ゆくゆくは、今回の実験（笑）による経験がモノを言うようになりますのでチャレンジする価値はあると思います。

作業に入る前に、データのバックアップについてのご説明です。【文字色変更】カスタマイズ準備編の「CSS編集を行う前に」という見出しの部分をご一読ください。ブログデザインを変更したり、エントリーする記事を検討したりするとき、データバックアップは必ず役に立つ必須の作業となりますので、何も考えずにこの作業ができるようになることが大切です。

あ、リンクについてですが、私はリンクについては別窓で開かずに、すべて同一ウィンドウで開くようにしています。その理由は、「ウェブサイトづくりのルールとされているから」です。別ウィンドウで開きたい時は、Windowsの場合なら、Shiftキーを押しながらマウスをクリックしてください！

実際にCSS編集をしてみる

【画像6】

では、作業の説明です。このカスタマイズで、ブログのヘッダ部分は【画像6】のように変更されます。背景の色はお好きに設定いただけるよう、最後にご説明いたします。

ヘッダー部分のカスタマイズ手順

前回の記事の【画像5】のページを開き、赤い四角のなかをどこかクリックする。
マウスを右クリックして（Windowsの場合）、「すべて選択」をクリック。もう一度右クリックして、「コピー」をクリック。
notepadなどのテキスト編集ソフトにデータを貼り付けて、データのバックアップを取る。貼り付け方は、マウスを右クリックして「貼り付け」をクリックするだけです。バックアップファイルの名前は「default.css」など、お好きな名前で結構です。

CSSデータのなかから、以下の部分を見つける。


/* (3-2) ブログヘッダー
--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

その部分を、次の内容で置き換える。以下のコードの最初の部分（/* (3-2)の左）をクリックして、マウスをエリアの最後までドラッグして、マウスを右クリック。「コピー」をクリックすればコピーできます。同じ要領で、今度はバックアップを取ったCSSファイルのほうで該当部分を選択して、マウスを右クリックして今度は「貼り付け」をクリックすれば内容の置き換えは完了です。黄色い文字の部分が変更する箇所になります。
```
/* (3-2) ブログヘッダー
--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
	margin-bottom: 10px;
	background: Tomato;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
	padding:20px 20px 30px;
}
```
ここで、編集を終えたCSSファイルを別の名前で保存しておきます。たとえば、「mystyle_120105.css」など、日付が分かる形にしたり、「mystyle_120105ヘッダカスタマイズ.css」など、修正内容を分かるような名前にしておけば後で便利ですね。
編集を終えたCSSファイルの全データをコピーする。やり方は、2.の手順の通り。
【画像5】の赤い四角の中をどこか右クリックして「貼り付け」を選択する。
赤い四角の下にある［保存］ボタンをクリックする。

これで作業は完了です。［保存］ボタンの上の「表示を確認する」というリンクをクリックすれば、変更後のページが別窓で開き、その姿を確認することができます。

ヘッダーを元に戻す方法

変更直前の状態に戻すには、【画像5】の赤い四角の下の「編集前の状態に戻す」リンクをクリックすればよいのですが、google Chromeのようにこの機能がうまく働かないブラウザもあるようです。

そんな時に役に立つのがバックアップファイル。最初に保存したデータで赤い四角の枠内のデータを置き換えて、［保存］ボタンをクリックすることで、元の状態に戻すことができます。

ヘッダーの背景色を別の色にする方法

背景の色を決めているのは、5.の手順で置き換えたソースコードのなかのbackground: Tomato;の部分です。つまりいまは、Tomato色になっています。このTomatoの部分、様々な色が指定できます。googleで「CSS　色の名前」で検索すれば様々な参考サイトが見つかると思いますので、いろいろ試してみてください。

この部分の指定方法については、少し難しいですが「【文字色変更】カスタマイズ実践編」の記事中で説明していますので、ご参照いただいてもよいと思います。いまの段階では、理解できなくても問題ありませんので。

ブログのタイトルの位置と、ヘッダー部分とその下の間隔は、それぞれpadding:20px 20px 30px;とmargin-bottom: 10px;で指定しています。文字が黄色くなっていた部分です。この指定についても、少し難しいですが「サイドメニューをカスタマイズする！」という記事中で説明しています。同様にご一読いただければと思います。

ブログデザインの変更の仕方は？（その1）

難易度表示付き記事一覧はこちらです

分かる人には当たり前のことでも、PCを使いはじめた頃のことを思い起こすと、何でもないことに一日を費やしてしまったような記憶が私にもあります。その当時のことを思いだして、小学生でも分かる入門編記事と位置づけ、アメブロカスタマイズについてゆっくりていねいに、解説してゆきたいと思います。

この記事を読まれている方は、もうAmebaでブログを開設し、手順どおりにひととおりの設定がお済みかと思いますので、その段階からブログデザインを変更するにはどうすればいいか？　というケーススタディーとして話をすすめたいと思います。

課題：ブログタイトルエリアの見栄えを変えてみる

今回の記事では、実際にブログデザインを変更しようとしたとき、どういった操作をすればよいか？　について順を追って解説してゆきたいと思います。

折角ですので、「ブログタイトルエリアの見栄えを変えてみる」というテーマを設定してみました。その操作については、続編の記事で解説いたしますが、その直前まですすめれば、この記事内容についてはOKです。

デザインカスタマイズ可能なデザインを選択する

アメブロには、沢山のデザインが用意されていて、好きなデザインを選択することができます。また一度選んだデザインは、いつでも変更することができます。そのデザインのことを、『スキン』とも言っています。スキンとは英語で皮膚や肌のこと。皮膚や肌をいつでも変える訳にはいきませんが（笑）、“外見”といったような意味あいです。

【画像1】

マイページトップからスキンを選択するページを表示させる方法は、【画像1】をご参照ください。簡単な方法を2つあげています。

ページ左上の「ameba」という文字（ロゴ）画像下の「クイックリンク」の文字をクリックする。出てきた画面のいちばん左の列の中頃の [デザインの変更] の下にある「スキンの選択」をクリックする。
画面の左の上から3つ目の四角、「アメーバピグ」の下の「ブログ」というタイトルの付いた四角のなかの「デザインの変更」をクリックする。

の2つです。

【画像2】

右の画面（【画像2】）が出てきたら、「ブログデザインを探す」というタイトルの下に並ぶ4つの丸のいちばん右側、「カスタム可能」という丸をクリックする。

【画像3】

右の画面（【画像3】）が出てきたら、いちばん最初（左上）に表示されいている「CSS編集用デザイン」を選択します。

【画像4】

「CSS編集用デザイン」をクリックすると、右の画面（【画像4】）が表示されます。

「ブログデザインの表示確認・レイアウト変更」では好きなレイアウトを選択すればよいのですが、ここでは真ん中の「3カラム・右ワイドメニュー」を選択したとします。

「3カラム・右ワイドメニュー」の文字あるいは左の○をクリックして、その下の [適用する] ボタンをクリックします。

CSSの編集画面を開く

クリックすると、「ブログデザイン適用完了」画面が表示されます。「CSS編集用デザイン」を適用しました。のメッセージの下に「CSSの編集をする」というリンクがありますので、クリックしてください。

【画像5】

すると、右の画面（【画像5】）が表示されます。赤い四角は実際には表示されませんが、このなかの文字を編集することで、アメブロのカスタマイズができちゃいます！

マイページトップからこの画面を表示させる方法を説明しておきます。

【画像1】の1番目の方法では「スキンの選択」をクリックしましたが、その2つ下の「スキンCSSの編集」をクリックする。
【画像1】の2番目の方法で【画像3】の「ブログデザインを探す」画面を表示させ、適用中のデザイン：「CSS編集用デザイン」と書かれている下の画像の右にある「CSSの編集」リンクをクリックする。

この2つが簡単です。

実際にマイページトップに戻り、「CSSの編集」画面を表示させてみてください。それができれば、この記事の内容についてはOKです。

（その2 ）に続く

今月のまとめ

まもなくことしも終わろうとしています。アメブロを開設したのが2011年12月20日。結構時間がたったような気もしていましたが、今日が12月30日ですから、まだ11日目なんですね。

あすから家を空けますので、おそらく年内はもう記事もあまり書かけないと思います。ここまでのまとめと、来月の計画について考えておきたいと思います。

12月のまとめ

このブログ、思いついたらもう初めてました（笑）。そして、思いつくままに書いてきました。ちょこちょことCSSをいじりながらの記事執筆。ブログの見た目は、それなりにまとまってきたかな？と思っているのですが、デザインとしては、まだ思いつきの域は超えていないかなぁ？という気はいたしております。

ですが！当面、この延長線上で行きいます。

あまり大げさに考えずに、ちょこちょこっといじって、うまくいったらにやけてみる。

そんな感じで、気軽にCSSに手を入れられる人が増えたらいいなぁ～　なんて思っています。

ですので、私も気軽にいきたいと思います。

今月は、アメブロのXHTMLとCSSの構造について分析しながら記事を書くということを繰り返してきました。機能面やプラグインのこともだいたい分かってきました。まだまだちょこっとやって楽しいネタはたくさんありますので、年が明けたら、順次書いていきたいと思っています。

2012年の1月には

「誰にでも分かるように」ということは心がけてはいるんですか、「ほんとにそうか？」と自問しているところもあります。ですので、『超入門』というテーマを立ててみたいなと思っています。

『超入門』の目次予定

思いつきのまま（笑）、その目次を考えてみますと…

ブログデザインの変更の仕方は？
なぜデザインの変更ができるの？
HTMLとCSSって何？覚え方は？
デザインには、どんなソフトが必要？
失敗してデザインが崩れてしまったら？
どこがおかしいのか分からない時は？
うまくデザインするコツは？

みたいな感じですかね。だいたい書くことも具体化できてきました。

難易度の表示

それとこれは、書きながら思っていたことなんですが、カスタマイズ内容に応じて、難易度を表示できたらいいな、と思っています。

現在、簡単なのと難しいのにわけて、「やってみよう！カスタマイズ」と「ちょっと難しいカスタマイズ」というテーマを立てていますが、これに「超入門」が加わることになります。それぞれ3つに分けて、9レベルくらいに分類できたらいいですかね。

アフィリエイトネタ

私がアフィリエイトで稼いでいる訳ではありませんので、もうちょっと積極的にアフィリエイトしないと！と、思っています。ただ、あくまで、記事内容に関連していて、情報として有益な広告だけ掲載するという姿勢でいきたいと思っています。

アフィリエイターの方って、デザインカスタマイズに積極的な方が多いと思うんです。なので、いままでの記事でも、イイトコ取りしていただければうれしいのですが…

自分がアフィリエイトに積極的になることで、もっともっとニーズを捉えた記事が書けるんじゃないかと思っています。

<< 前ページ次ページ >>