ヘッダーに大きな画像を配置しているテンプレートです。
この画像部分をクリックして、トップページなどにリンクできるように
カスタマイズする方法を解説します。
まずは、フリースペースにクリックできるエリア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;
}
この方法は、自分の好きな位置をクリックさせたい時に
応用できるかと思いますが、位置の計算を間違えないように
注意してくださいね。
記事ページにて、次ページ、前ページ、記事一覧の表示に
問題があることがわかりました。
その解決方法をご案内致します。
既にこのテンプレートをご利用の方は、
お手数ですが、ご対応よろしくお願い致します。
■現象:
記事ページにて、記事の上や下に表示される、
次ページ、前ページ、記事一覧の表示が
重なってしまう。
■解決方法:
1)一部削除
次の記述(.paginArea)をスタイルシートより、
削除してください。
サンプルCSSの95行目あたりです。
CTRL+Fで「pagingArea」で検索してもOKです。
(サンプルサイトからダウンロードできるCSSは既に修正済みです)
次の4行を削除してください。
.pagingArea{
width:100%;
margin:auto;
}
2)追加
スタイルシートに以下の内容を追加してください。
該当部分の文字の頭を揃えるため。
.pagingList{
margin-top:4px;
}
以上です。
テストするときは、キャッシュされている可能性があるので、
ブラウザの再読み込みを行って下さい。
ご不明な点があれば、メッセージにてご質問願います。
問題があることがわかりました。
その解決方法をご案内致します。
既にこのテンプレートをご利用の方は、
お手数ですが、ご対応よろしくお願い致します。
■現象:
記事ページにて、記事の上や下に表示される、
次ページ、前ページ、記事一覧の表示が
重なってしまう。
■解決方法:
1)一部削除
次の記述(.paginArea)をスタイルシートより、
削除してください。
サンプルCSSの95行目あたりです。
CTRL+Fで「pagingArea」で検索してもOKです。
(サンプルサイトからダウンロードできるCSSは既に修正済みです)
次の4行を削除してください。
.pagingArea{
width:100%;
margin:auto;
}
2)追加
スタイルシートに以下の内容を追加してください。
該当部分の文字の頭を揃えるため。
.pagingList{
margin-top:4px;
}
以上です。
テストするときは、キャッシュされている可能性があるので、
ブラウザの再読み込みを行って下さい。
ご不明な点があれば、メッセージにてご質問願います。
本書ではサンプル・デザインを30種類用意しております。
全サンプルの画面ショットは、P.81~84に記載されています。
そのサンプル・デザインの中で、10a、10b、10cは、大きな写真を表示できるように、横幅1115ピクセルでレイアウトされています。2カラムで、記事部分の横幅は、なんと800ピクセルもあります。
読者の方から、「この2カラムのレイアウトを3カラムに変更したい」とのご質問がありましたので、変更方法を掲載させていただきます。
【手順1】 レイアウトの変更
メニュー:ブログを書く→デザインの変更→レイアウトの変更
「2カラム・メニュー左」から、「3カラム・右ワイドメニュー」に変更して下さい。
【手順2】 CSSの修正
メニュー:ブログを書く→デザインの変更→CSSの編集
参考:http://ameblo-c.jp/samples/ より、10aのCSSリンクをクリックしてください。
行番号が付いたCSSが表示されます。
修正1:#globalにleft:0を追加(302~310行目)
div#global{
position:absolute;
top:84px;
left:0; /* これを追加してください */
width:1115px;
height:40px;
margin:0;
padding:0;
z-index:1;
}
修正2:columnAをcolumnCに、または横幅を変更
・修正前(66~77行目)
.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;
}
修正3:columnAをcolumnCに変更
・修正前(170~181行目)
.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;
}
修正4:.columnC .skinSubBを追加
最終行に以下の内容を追加してください
.columnC .skinSubB{
padding:15px 0;
}
完成すると次のような感じになります。
全サンプルの画面ショットは、P.81~84に記載されています。
そのサンプル・デザインの中で、10a、10b、10cは、大きな写真を表示できるように、横幅1115ピクセルでレイアウトされています。2カラムで、記事部分の横幅は、なんと800ピクセルもあります。
読者の方から、「この2カラムのレイアウトを3カラムに変更したい」とのご質問がありましたので、変更方法を掲載させていただきます。
【手順1】 レイアウトの変更
メニュー:ブログを書く→デザインの変更→レイアウトの変更
「2カラム・メニュー左」から、「3カラム・右ワイドメニュー」に変更して下さい。
【手順2】 CSSの修正
メニュー:ブログを書く→デザインの変更→CSSの編集
参考:http://ameblo-c.jp/samples/ より、10aのCSSリンクをクリックしてください。
行番号が付いたCSSが表示されます。
修正1:#globalにleft:0を追加(302~310行目)
div#global{
position:absolute;
top:84px;
left:0; /* これを追加してください */
width:1115px;
height:40px;
margin:0;
padding:0;
z-index:1;
}
修正2:columnAをcolumnCに、または横幅を変更
・修正前(66~77行目)
.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;
}
修正3:columnAをcolumnCに変更
・修正前(170~181行目)
.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;
}
修正4:.columnC .skinSubBを追加
最終行に以下の内容を追加してください
.columnC .skinSubB{
padding:15px 0;
}
完成すると次のような感じになります。