アピールエリアをカスタマイズしたい
事務所のホームページのデザインを再考してみました。
当事務所のホームページはアピールエリアをタイトル画面風に使用しています。ここが事務所の看板となる部分です。cocoon のオリジナルのままですとアピールエリアのタイトルの文字の大きさが少々小さすぎるように感じました。また色を変更できないことも残念です。
そこでこのアピールエリアをカスタマイズできないものかと検索してみました。
アピールエリアのタイトルの大きさと色を変更してみました
今回、参考にしたホームページは「With G」https://with-g.co.jp/ という会社のホームページです。エクステリアや外構工事を行っている会社のようです。この会社の BLOG に cocoon でホームページを作成し、カスタイマイズする方法が掲載されています。
具体的には、アピールエリアのテキストエリア表示をカスタマイズする に cocoon のアピールエリアをカスタマイズする方法が掲載されています。
ここに紹介されていた「アピールエリアタイトルとメッセージのフォントカラーを影付きの白にしてフォントサイズを少し変更」する CSS を使わせていただいて、自分なりにアレンジしてみました。
アピールエリアの文字色とフォントサイズを変更する CSS
/* アピールエリアタイトル文字の色とサイズ、影 */
.appeal-title { font-size:30px;color: #fff;text-shadow: 3px 3px 2px #000000;}
この CSS をもとに、当事務所では、