「アフィリエイターのための」アメブロカスタマイズ講座… アメブロの基本的な構造調査に時間をかけてばかりいて、まだサイト名に恥じない記事はアップできていないと感じています。
あんなこともできる、こんなこともできるというアイデアは、いっぱいたまってきているのですが。
今日から再びエンジンかけて、続々役立てていただけるような記事をアップしてゆきますよ！
頭のなかを整理するためにも、今後の記事予定についてまとめてみました。
まず、こんなところからいきたいと思っています。
アメブロでは、5つのレイアウトタイプから好みのレイアウトを選択できる ようになっています。
HTMLとCSSのソースコードレベルでみてみますと、内容はまったく一緒で、各パーツの配置をCSSで変更するという考え方が基本。単純に考えれば、デザインはそのままでレイアウトだけが変更されると考えがちです。
しかし、レイアウト変更をおこないますと、カスタマイズしたCSSファイルは消去されてしまうようです。つまりプレーンな状態に初期化されてしまいます。
だけど、復旧方法は簡単！ カスタマイズしたCSSのバックアップを上書きするだけで、デザインはそのまま、レイアウトだけが変更されるという目的が達成されるはずです。
ここで一度記事公開。結果はどうなるのでしょうか？
念のため、CSSの編集画面を表示させて、何も手を加えずに「編集」ボタンを押してみました。といいますのは、こうすることで、読み込む設定になっていなかったカスタマイズ用CSSを、各ページが読みこむようになるからです。
「一度編集したカスタマイズCSSがどこかに保存されていて、再び呼び戻されることはあるのか？」
なんて少し期待しましたが、そういうことはありませんでした（笑）。
では、バックアップデータで、カスタマイズ用CSSを上書きしてみます。ハイ！ 期待通りデザインが適用され、レイアウトのみが変更されました。
レイアウトが変更できる機能があるのですから、レイアウトに依存しないデザインを行なっておいて、いつでもレイアウト変更が行える余地を残しておくと楽しめますよね。
非常に便利なアメブロ機能。サイドバーへのメニュー配置にはすごく柔軟性があっていい。
しかしアフィリエイターなら、いかに広告を効果的に見せるかで「いるもの・いらないもの」の選別には頭を悩ませるのではないかと思う。
私の場合は、アフィリエイトマーケティングを突っ込んで研究したいと思う一方、主役はやはり記事である。将来の広告掲載を念頭におきつつ、「いるもの・いらないもの」について考えてみた。
現状で不満に思うことは、テーマごとの記事タイトル一覧をシームレスに見せることができないことがまず一つ。トップページでもそうだし、テーマをクリックすると長たらしく記事全文が新着順に表示されてしまう。せめて記事冒頭の100文字を表示する機能とか、概要を表示する機能がデフォルトであればありがたいのだが、それも簡単にはできない。記事のタイトル一覧は「記事一覧」から見ることができるのだが、ちょっと分かりにくい。
それであれば、というアイデアがひとつ。
グローバルナビをつける方法は、たくさんの人が解説しているが、なぜかこのアイデアについてはまだ見当たらない。
大切なプラグインエリアにソースを書くことでグローバルナビは実現する。ほんの少しソースコードの分量は増えるが、グローバルナビだけでなく、ヘッダエリアのメインビジュアルを含めてソースコードを書きこむという方法が考えられる。デフォルトのヘッダエリアは、height:1px;text-indent:-9999pxとかにして実質表示しないようにすればSEO的にも大きな問題はでない。
そうすれば、ヘッダ画像全体をトップページへのリンクにせずにすむし、メインビジュアル部分を好きなようにやりたい放題できる。
私の場合なら、グローバルナビはHOMEへのボタンとテーマ一覧へのリンクにする。そうすれば、サイドメニューから「テーマ」を落とすことができる。
自分のサイトは情報サイトだと思うので、「最新の記事」10件さえ掲載できれば、「月別」と「カレンダー」もいらない。
ウェルカムメッセージの一部として、プロフィールはメッセージボードに移動。これでサイドバーからプロフィールも消せる。
「ブックマーク」もなくていい。
こうして整理すると残るのは、「検索窓」「最新の記事」「プラグインエリア」の残り分、AmebaのW300×H240バナー広告枠、「フリーエリア」、「ブログ読者」、「お気に入りブログ」、「ランキング」他デフォ分。ちょっと多いけど、やはり記事部分の幅が410ピクセルしかないというのは辛い。メニューへの配置項目を少なくすることで、2カラム運用が見えてくる。
なんてことを考えながら、「どんなデザインにしようか？」と考えをめぐらせています。
アメブロをカスタマイズするうえで理解しておくべきHTMLの文章構造を理解し、アイデア検討とその実現について検討したいと思います。
前回の記事では全体の構成について見てきました。今回は、コンテンツ部分を構成するメインブロックであるdiv.layoutContentsAとdiv.layoutContentsBの構成を研究してゆきます。
div.layoutContentsAの構成の概念図は右のとおりです。
本文であるdiv.skinMainAreaと幅300ピクセルのサイドメニューの2つの大きなブロックが直下に置かれています。
サイドメニューはHTML5からの新しい要素であるasideで囲まれています。asideは、デフォルトではブロックレベル要素として扱わないブラウザがあるため、disply:block;の設定がされていますが、それ以外にスタイル設定はされていません。
div.layoutContentsBの構成の概念図は右のとおりです。構成は、div.layoutContentsAのコンテンツカラムがなくなったものと同じと考えて差し支えありません。asideで囲まれたなかに「div.skinSubB, div.skinSubArea」ブロックがあり、そのなかに各メニュー項目が格納されています。
こうして見てくれば、かなり構造が単純なものとして理解できてきたと思います。2重・3重化されたブロックも多いので、複雑なデザイン実現も可能であり、デザインの共通性をもたせると同時に個別に設定が可能なように、2つのクラスが同時設定されているブロックが多く見受けられるのが特長かと思います。
次の記事では、5つのレイアウトがどのような設定になっているのかを詳しくみてゆき、デザインカスタマイズの可能性を探っていきたいと思います。
（続く）
月別、カテゴリ別、テーマ別の投稿一覧を表示したいとき、トップページの記事の上の「記事一覧」から表示させることができる。けどこれ、目立ちませんよね。知らない人が多いかも？ って考えるのは私だけ？
メッセージボードを使って、この部分のインターフェースを侵略（笑）してしまえば、ナビゲーション的にも統一されていいのではなかろうかという、思いつきを投稿。表示させるタグが分かればできる可能性のあることですけどね…
他には、それぞれURLは固定なので、記事中からテーマごとの一覧を見せたいときは単純にリンクさせて使うという方法も便利ですね。
テーマタイトルそのまま。記録のページです。
いくつかスタイルを追加・修正しているので、忘れないうちに登録。CSS修正前（変身前）の画像と、修正部分のCSSソースコードを貼りつけてゆきます。日付の近い記事と連動していることになります。
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(4) その他、拡張
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
div.skinArticleHeader2 h1 {
letter-spacing: 0.2em;
}
/* ■■■■■■■■■ブログ本文の設定■■■■■■■■ */
/* general */
div.articleText { /* 文字のフォントを等幅に。元の設定は1.4の行間を少し広く。 */
font-family:Verdana,Arial,Helvetica,Geneva,'MS Gothic',"ＭＳ ゴシック","MS UI Gothic","Osaka－等幅","ヒラギノ角ゴ Pro W3",monospace,sans-serif;
line-height: 160%;
}
div.articleText p {
margin-bottom:10px;
}
/* heading（見出し文字） */
div.articleText h2 { /* エントリータイトルに次ぐ見出し */
padding: 4px 5px 2px 5px;
background: #f7f7f7;
border: 1px dashed #e4e4e4;
font-size: 1.2em; /* 標準の文字の大きさの1.2倍にする */
}
/* emphasis（強調文字） */
div.articleText strong { /* 文字強調。emより重要度大 */
color: #ff3333;
font-size: 1.2em;
font-weight: bold;
}
div.articleText em { /* 文字強調 */
border-bottom: 1px dotted #ff99cc;
font-style: normal;
color: #f62290;
}
/* list（リスト） */
div.articleText dl { /* 定義付きリストブロック */
}
div.articleText dt { /* リストの項目 */
border-top: 1px dotted #e4e4e4;
border-bottom: 1px dotted #e4e4e4;
font-weight: bold;
}
div.articleText dd { /* 項目の説明 */
padding-bottom: 10px;
color: #666666;
}
/* text（その他の文字） */
div.articleText code { /* キーボードから入力された内容 */
padding: 0 2px;
color: #45519d;
}
div.articleText pre { /* スペースや改行など入力した通りに表示する */
margin: 0 0 10px 0;
padding: 10px;
background: #45519d;
color: #fff;
}
div.articleText pre code { /* キーボードから入力された内容 */
padding: 0;
color: #fff;
}
div.articleText kbd { /* キーボードから入力された内容 */
padding: 0 2px;
background: #000000;
color: #ffffff;
}
div.articleText kbd:before { /* キーボードから入力された内容 */
content: "[";
}
div.articleText kbd:after { /* キーボードから入力された内容 */
content: "]";
}
div.articleText .note {
font-size: 90%;
color: #7f7f7f;
}
div.articleText .note:before {
content: "※ ";
}
div.articleText div.free_column {
margin: 0 0 10px 0;
padding: 5px 10px;
border: 1px solid # 666666;
background: #dbf8ff;
}
div.articleText div.free_column a {
overflow: visible;
padding-left: 40px;
background: url('http://stat001.ameba.jp/user_images/20111221/15/jalan2-net/b9/eb/g/t00290017_0029001711684528893.gif') left bottom no-repeat;
font-size: 120%
}
デザインさていないプレーンな状態からの調整。エントリータイトルが弱く見えるようになってきたので、次はその微調整ですかね。ヘッダー含めてデザインを考える際には、全体的に手を入れることになると思います。
このカテゴリでは、記事中で探したソフトウェア、ブログ執筆やアフィリエイトを行うために便利なソフトウェア等を紹介してゆきたいと思います。
PCのディスプレイ上にマウスカーソルをもっていけば、場所場所の色のRGB値を取得できるというソフト。実は私、色が知りたいときはその部分をキャプチャーしてビットマップ形式で保存し、Photoshopでファイルを開き、同ソフトのスポイトツールでその色を調べるという手間のかかるやり方をしてました。これがあったらその作業が一瞬で終わってしまいます。何で「こんなソフトないのかなぁ？」という問いかけを自分にしてこなかったのでしょうか？
自分のアホさ加減を教えてくれたソフトでした（笑）
上記で紹介したColorPickerを起動したい際、「くるくるっとマウスをまわし、出てきたウィンドウで目的のソフトのボタンを押せば起動する」というようなことができるようになるソフト。これをランチャーソフトっていいます。
PCを長く使っていると、たくさんのアプリをインストールすることになると思いますが、全部のソフトのショートカットをデスクトップ上に置きつづければたちまちごちゃごちゃになってしまうし、スタートメニューからプログラム選択するのも同じこと。目的のアプリを起動する最短の道筋をつくってくれるのがランチャーソフトです。
私が長く使っているのが、Stealth LauncherII 。くるくるっとマウスを回すとランチャーが起動するように設定しています。ランチャーはタブ分けされていて、アプリケーションの種類ごとに名前をつけて整理。1タブごとに25本のアプリが登録できて、タブは10まで増設可能。かなり便利です。
HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
さて準備ができたら 、早速文字色の変更をしてみましょう。文字色の設定は、次のように行われています。
/* (1-2) ブログタイトル文字
--------------------------------------------*/
/* skinTitle ブログタイトル文字 */
.skinTitle,
.skinTitle:visited,
.skinTitle:hover,
.skinTitle:focus{
color:#000000;
font-weight:bold;
font-size:2.11em;
}
/* skinDescription ブログの説明文字 */
.skinDescription{
color:#333333;
}
CSSを上から順番に見ていくと、同じ部分がみつかると思います。color:#000000;の部分が文字色の設定部分です。#000000を変更するとこで、文字色を変更することができます。#を最初につけるのはお約束ですので（続く数値が16進数であるということを表しています）、消さないようにしてくださいね。
いま色は、#000000となっています。これは、「真っ黒」を意味します。どのような数字がどの色に対応するかは、前のエントリーでご紹介したez-HTML
でも簡単に取得できますし、たくさんフリーソフトもありますので、「windows RGB値」とかのキーワードでググッてみて自分がいちばんいいと思うものを選ばれたらいいと思います。定番ソフトのColorPicker
は、画面の上にカーソルをもっていくとそのRGB値が分かるというソフト。これは直感的で分かりやすいですね。
数字の意味は、最初の2桁が赤（Red）、次の2桁が緑（Green）、最後の2桁が青（Blue）を意味します。値は、00からFFまでで、00ならその色の成分はゼロで、FFならその色の成分はMAXです。ですので、#FF0000なら真っ赤。適当に数字を割り当てて遊んでみてもいいかも知れません（笑）。
CSSファイルで丁寧にどこの色かということが説明されていますので、それぞれ6桁の数字を変更するだけで、ブログタイトルと説明文の変更をすることができます。簡単ですね。
CSSを見ていけば、同じ要領でどんどんカスタマイズできる場所があることが分かります。
/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/
/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{}
上記の部分は、「最新の記事」「プロフィール」「テーマ」なんかの文字の色です。いま何も設定されていませんので、共通の色設定になっています。この色を設定することで、サイドバーのメニュータイトルの色を全部いっぺんに変更することができます。
/* (1-4) サイドバー内の文字のスタイル
--------------------------------------------*/
/* skinMenuTitle サイドメニュータイトル文字 */
.skinMenuTitle{
color:#ff0000;
}
という具合に、最初の部分を書き換えれば、#ff000ですから、全部真っ赤になります（笑）。そう、最初、{}となっていましたが、その間にcolor:#ff0000;が付け加えられていますね。CSSの設定はこのように行うのがルールです。また、数値のffは、大文字でFFとしても同じ結果になります。元々が小文字で書かれていますので、統一したければ小文字、自分が変更した場所をわかりやすくしたければ大文字にするなど、お好きに料理してくださいませ^^;
色の件は、アメブロの記事編集画面の「カラーパレット」ボタンを押して色を選択したときも、RGB値が表示されていますので、ご存知だった方も多いかも知れませんね。
最後に、このボタンの並びにあるBボタンで設定したHTMLタグへの設定方法をご説明します。「カラーパレット」で編集した文字は、残念ながらCSSでは設定できません。これ実は、詳しいことは書きませんが、HTML5（難しいかな？）では文法違反なんですね。使っちゃいけないタグで設定されてますので、CSSでの設定ができないわけです。だけど、誰でも使いやすくということを大切に考えてこのように実装されているわけで、みなさんの使い勝手を考えると、適切なやり方だと思います。
何も設定しない状態では、Bボタンを押すと太字になると思います。たとえば、「太字にする」という文章を選択してBボタンを押すと、HTMLは太字にするというふうになります。
<strong>～</strong>が太字にするというHTMLタグで、このタグに色を設定してみましょう
div.articleText strong {
color: #ff3333;
font-size: 1.2em;
はい。これで完了です！
こうした追加の設定は、CSSファイルの最後のほうにある
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(4) その他、拡張
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
/* その他、拡張があれば記述 */
の下に追加するようにします。え、見慣れないものがある？
font-size: 1.2em;の部分ですね。この行は、文字の大きさを1.2倍するという命令になっています。1.2の数字を変更することで、大きさを変えられます。不要ならこの行を削除すればいいわけです。
今回はこれで終了です。CSSファイルを見ていると、他にも#ff0000みたいに書かれている部分がたくさんあります。気になりますねぇ。いろいろ試してみてみるのも面白いかもです。背景の色だったり、線の色だったり、いろんな部分の色が変更されるかも知れません。
「このブログの記事通りやったのに、おかしくなった。どうしてくれるんだ！」
申し訳ありませんが、そうした責任は一切お引き受けできませんので、すべて自己責任でお願いいたしますm(__)m
HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
何本か記事を書いてきて、記事本文にHTMLを使用しましたので、使ったHTMLタグのスタイル設定（デザイン設定）を行なってみました。
いくつかの設定を行いましたが、今回は初心者の方でも色が変更できるようになる方法を説明したいと思います。たとえばブログ記事編集の際、太文字にしたいときにはBボタンを押しますよね。そうして書かれた文字の色をすべて一斉に変えることができるようになる方法です。
まず作業を行う前に、カスタマイズの際に必ず守っておきたいお約束の部分からです。
CSS編集メニューを開くには、マイページのヘッダ下の「クイックリンク」をクリックして、出てくる窓のいちばん左の列の「［デザインの変更］≫スキンCSSの編集」をクリックするのがいちばん便利かと思います。
ページを開くと、「！ご注意」の下に@charset "utf-8";ではじまる大きな窓があります。ここに書かれている文字を変更することで、ブログデザインの変更できちゃいます。
作業をはじめる前に、変更前の状態を必ずバックアップするようにしましょう！
間違ったり、気に入らなかったりしたときに、すぐ元に戻せるようにするためです。枠の下に、「編集前の状態に戻す」というリンクがありますが、1段階前の状態にしか戻りません。CSSを修正する際には、修正して確認するという作業を繰り返すことになりますから、最初の状態まで戻したい時のために、必ずバックアップを行う必要があるのです！
私は、HTMLやCSSの保存にはez-HTML というソフトを使用しています（無料／リンクウェア）。ウェブサイト制作を本業とする方も多く使っているスグレモノです。ご興味のある方はダウンロードして使ってみてください。
さて、バックアップファイルの保存がすんだら、バックアップファイルを上書きしてしまわないために、再び「名前を付けて保存」で作業用ファイルを保存しておきます。ファイル名は何でもOKです。mystyle_yymmdd.cssとでもしておけばよいでしょう。yymmddは日付で、2011年12月21日であれば、mystyle_111221.cssとなります。こうしておけば、いつでもある日付の状態に戻すことができるようになります。
さて、ファイルの内容を見てみましょう。目次からはじまっています。丁寧です。下のほうを見ていくと、おまじないのような文字の他に、いろいろ説明が書かれています。CSSファイルでは、*/と*/の間に挟まれた部分が説明文となり、この間には何を書いても設定に影響を与えません。だけど、その他の部分は、一文字削除しただけでもデザインに影響が出てしまいますので、ご注意ください。
このCSS、めちゃくちゃ優秀です。アメーバユーザーのために分かりやすくするために丁寧につくられていますが、プロも見習いたいくらい優秀です。それほど分かりやすく、見通しよくつくられています。アメーバ技術者の優秀さがうかがえます。
（続く ）
ブログエントリー部分の本文部分を等幅フォントにしようとしたのだが、どうもうまくいかない。HTML5で書かれているのが原因か？ 少し実験してみることにする
なるほど、「ＭＳ ゴシック」が「ＭＳ Ｐゴシック」として表示されてしまうわけだ。Chrome、IE、Firefoxのそれぞれ最新版でそうなのだから、等幅にこだわるのなら、「MS Gothic」指定を前にもってくればよいようだ。とりあえず、それで対処することにしよう。気に入らなければ次は、「letter-spacing」指定で考えてみるしかないか…