今回は記事エリアのフッターをカスタマイズてみたいと思います。
なお、アメデコでは「カスタム可能」な中にある「CSS編集用デザイン」を元に
記事を書かせて頂いておりますので、そちらをご了承頂いた上でご覧ください。
※記事エリアのフッターは初期状態なら下記の様になっていると思います。
※表示サイズの関係上、画像を一部加工してあります。
それでは早速やっていきましょう。
CSSの編集に追加する内容
.skinArticleFooter {
margin: 10px 29px 13px;
border: 1px solid #4CAD28;
background: #EAF6E2;
}
.articleExLinkArea {
margin: 10px 10px;
text-align: left;
}
.articleLinkArea {
margin: 10px 10px;
text-align: left;
}
今回は設定するCSSはこれだけです！
皆様のブログの雰囲気に合うようにてオレンジ色の部分を変更してください。
上記の画像で紹介させて頂いた記事エリアのフッターは
大きく分けて3つのCSSで構成されています。
そちらの元々設定されているCSSに対して装飾を加えています。
上記のCSSを追加した場合の表示をブラウザで確認してみましょう。
上記のような感じに表示されていれば完成です！
初期状態に対してのCSSなので、記事エリアのフッターの表示がおかしい場合は
marginの数値を色々と変更してみてください。
枠線のタイプを変えた場合の表示も一部紹介しておきます。
dashed（破線）で設定した場合のブラウザでの表示はこちら
「border: 1px solid #4CAD28;」の部分を「border: 1px dashed #4CAD28;」へ
dotted（点線）で設定した場合のブラウザでの表示はこちら
「border: 1px solid #4CAD28;」の部分を「border: 1px dotted #4CAD28;」へ
今回紹介させて頂きました記事エリアのフッターのように
一部をカスタマイズするだけでも、また違った印象を与える事ができます。
皆様も記事エリアのフッターをカスタマイズしてみてはいかがでしょうか？
最後まで記事を読んでくれてありがとうございました！