アメブロデザインの著者による読者サポートブログ https://ameblo.jp/customize-book/ 翔泳社から発売されている、Ameba公式ガイド「かんたんアメブロデザイン」の著者が運営する、読者サポートブログです。書籍には書けなかった内容や最新の情報をお届けします。 ja 10a,10b,10cのテンプレートでヘッダー画像をクリックできるように この画像部分をクリックして、トップページなどにリンクできるように
カスタマイズする方法を解説します。

まずは、フリースペースにクリックできるエリアheader_picと、
その部分をクリックしたときのリンク先を追加します。

<div id="header_pic"><a href="http://www.ameblo-c.jp/"></a></div>

クリックできるエリアheader_picは、
スタイルシートでヘッダ画像と同じ位置に
absoluteで定義します。

div#header_pic{
position:absolute;
top:124px;
width:1115px;
height:450px;
margin:0;
padding:0;
}

aタグはブロックレベルに変更して
エリアいっぱいを対象とします。

div#header_pic a{
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
}

この方法は、自分の好きな位置をクリックさせたい時に
応用できるかと思いますが、位置の計算を間違えないように
注意してくださいね。

]]> https://ameblo.jp/customize-book/entry-11151531844.html Tue, 31 Jan 2012 21:16:34 +0900 サンプル6a,6b,6cのテンプレートをご利用の方へ 問題があることがわかりました。

その解決方法をご案内致します。

既にこのテンプレートをご利用の方は、
お手数ですが、ご対応よろしくお願い致します。



■現象：

記事ページにて、記事の上や下に表示される、
次ページ、前ページ、記事一覧の表示が
重なってしまう。



■解決方法：

１）一部削除

次の記述（.paginArea）をスタイルシートより、
削除してください。

サンプルCSSの９５行目あたりです。
CTRL+Fで「pagingArea」で検索してもOKです。

（サンプルサイトからダウンロードできるCSSは既に修正済みです）

次の４行を削除してください。

.pagingArea{
width:100%;
margin:auto;
}



２）追加

スタイルシートに以下の内容を追加してください。
該当部分の文字の頭を揃えるため。

.pagingList{
margin-top:4px;
}

以上です。



テストするときは、キャッシュされている可能性があるので、
ブラウザの再読み込みを行って下さい。


ご不明な点があれば、メッセージにてご質問願います。



]]> https://ameblo.jp/customize-book/entry-11146459786.html Thu, 26 Jan 2012 12:16:03 +0900 サンプル１０を３カラムに変更するには 全サンプルの画面ショットは、Ｐ．８１～８４に記載されています。

そのサンプル・デザインの中で、１０ａ、１０ｂ、１０ｃは、大きな写真を表示できるように、横幅１１１５ピクセルでレイアウトされています。２カラムで、記事部分の横幅は、なんと８００ピクセルもあります。

読者の方から、「この２カラムのレイアウトを３カラムに変更したい」とのご質問がありましたので、変更方法を掲載させていただきます。

【手順１】　レイアウトの変更

メニュー：ブログを書く→デザインの変更→レイアウトの変更

「２カラム・メニュー左」から、「３カラム・右ワイドメニュー」に変更して下さい。

【手順２】　ＣＳＳの修正

メニュー：ブログを書く→デザインの変更→ＣＳＳの編集

参考：http://ameblo-c.jp/samples/ より、10aのCSSリンクをクリックしてください。
行番号が付いたCSSが表示されます。


修正１：#globalにleft:0を追加（３０２～３１０行目）

div#global{
position:absolute;
top:84px;
left:0; /* これを追加してください */
width:1115px;
height:40px;
margin:0;
padding:0;
z-index:1;
}

修正２：columnAをcolumnCに、または横幅を変更

・修正前（６６～７７行目）

.columnA .layoutContentsA{
width:1115px;
margin:0;
padding:0;
}

.columnA .skinMainArea{
width:800px;
margin:0;
padding:15px 0;
background:transparent;
}

・修正後

.columnC .layoutContentsA{
width:920px;
margin:0;
padding:0;
}

.columnC .skinMainArea{
width:605px;
margin:0;
padding:15px 0;
background:transparent;
}

修正３：columnAをcolumnCに変更

・修正前（１７０～１８１行目）

.columnA .skinSubA{
width:300px;
margin:0;
padding:15px 0;
background:transparent;
}

.columnA .skinSubA2{
width:300px;
margin:0;
padding:0;
}

・修正後

.columnC .skinSubA{
width:300px;
margin:0;
padding:15px 0;
background:transparent;
}

.columnC .skinSubA2{
width:300px;
margin:0;
padding:0;
}

修正４：.columnC .skinSubBを追加

最終行に以下の内容を追加してください

.columnC .skinSubB{
padding:15px 0;
}



完成すると次のような感じになります。


アメブロ・デザイン・サンプル10a

]]> https://ameblo.jp/customize-book/entry-11112864077.html Wed, 21 Dec 2011 11:30:24 +0900 かんたんアメブロデザイン発売記念キャンペーンを開始します。 アメンバー限定公開記事です。 https://ameblo.jp/customize-book/amemberentry-11083838289.html Sun, 20 Nov 2011 11:08:55 +0900 「かんたんアメブロデザイン」いよいよ明日発売となりました アロマネット株式会社の中村義和です。

明日（２０１１年１１月１２日）、いよいよ発売となります。
（ご購入まだの方、以下の画像をクリックしてアマゾンへどうぞ）

アメブロカスタマイズに関する本「かんたんアメブロデザイン」読者サポートブログ

それにともない、読者サポートサイトや、
Blog（アメブロ）による情報提供も開始します。

サポートサイト
http://ameblo-c.jp/
※アマゾンギフト券がもらえるキャンペーンを
　12/25まで行っています！

ブログ（今読んでいただいているアメブロです）
http://ameblo.jp/customize-book/

ブログでは、書籍には掲載できなかったカスタマイズ方法や、
テクニック、最新情報などを提供する予定です。

「かんたんアメブロデザイン」とは？


この「かんたんアメブロデザイン」では、
初心者でもアメブロのカスタマイズ方法を
基本から学べるような構成になっています。

HTMLやCSSを知らなくても、
Part1でわかりやすく解説しました。

さらに、次のような特長もあります！

・３０種類のテンプレート
・２２８個の素材集
・新テンプレート対応（7/26より提供）

３０種類のテンプレートは、
「かんたん」に導入できるようになっています。

自分の画像に変えるだけで、
即オリジナルブログに早替わり！

Part2では、各テンプレートで使っているテクニックを
詳しく解説しています。

アメブロのとくにカスタマイズにご興味のある方、
本書をお読みいただき、

ぜひブログの「読者登録」もしてください。

お役立てられるよう、情報発信していきます。

お楽しみに！

]]> https://ameblo.jp/customize-book/entry-11075267954.html Fri, 11 Nov 2011 15:33:04 +0900