今回もCocoonカスタマイズの続きです。
サイトをCocoonで模様替えしてみたものの、どーにもトップページがしろしぅて（当地方言でうるさい、やかましいの意）いかん、と思い立ち、閑雲亭や画房でやっているような…訪れるとどシンプルに画面一杯の画像がばばーんと！ という構成をやってみようと思ったのでした。
いわゆる「ファーストビジュアル」といわれる画面構成なのですが、いろいろ探しているうちに素晴らしく判りやすいページに辿り着きました。
「閑雲亭」にも書きましたが、手順の説明も大変丁寧で判りやすく、解説って斯く在るべきだよね、という親切さには思わず伏し拝みたくなりました。他にもためになりそうなコンテンツがたくさんありまして、ブログマスターは来訪者の質問にも大変丁寧に答えを返されていました。
平たく言うと、Cocoonのアピールエリアをウィンドウ一杯に表示する方法ですね。お陰で現在の当サイトのトップページが出来上がったわけですが、1つ困ったことが。
来訪者の投稿にもあったのですが、パソコン表示におけるトップ画像（アピールエリア）の下に余白が出来てしまうのです。しかも表示条件によってはこの余白、出現しないときたもんです。事実、テストで海の写真を入れてみたときは問題なく（特に余白ができてしまうことなく）表示できていたので気が付かなかったのですが、その後画像を変更すると、画像から本文までの間に得体の知れない余白が出現してしまう。
さてどうしよう。
そこでまずブログマスター様の提案通り、以下のCSSをトップページのカスタムCSSに追記してみました。
/* コンテンツエリア上部余白を0にするCSS */
.content {
margin-top: 0;
}
/* アピールエリア下の余白を0にするCSS */
.main{
margin-top:0;
}
それでも状況が芳しくないので、次は来訪者さんが提案されていた手法でトライ。
【管理メニュー】→【Cocoon設定】→【アピールエリア】の設定を開き、アピールエリアの高さ設定（数値）を画像の高さにあわせてみると、不自然な余白はさっぱり消えてくれました。
万歳。とっても優しくて丁寧なブログマスター様に感謝。
そんなわけで、新しい表紙はなぎさ水族館で撮ったニホンアワサンゴです。明るい方へ伸びる姿が、日光を求める腕めいてシュール（笑）
コメント