このサイトのプロフィールボックスのスタイリングを変更しようと思った際に、こういったCSSクラスの一覧があらかじめ用意してあれば、便利に使ってくれる方もいるのかな〜と思い、SCSS記法のみですがテンプレートを用意しました。
こちらの内容は、Snow Monkeyに搭載されているプロフィールボックス部分のマークアップが変更になった場合には使えなくなることもありますのでご注意ください。
使い方
下にSass(SCSS記法)を掲載しておきます。簡単にコメントでどんな箇所に該当するのかを書いておきましたので参考にしてください。
しかし、正確には各種ブラウザが提供している開発者ツールを利用して最終的に確認されることをお勧めします。
ソースコード
.wp-profile-box {
// プロフィールボックスの外枠ラップ
&__title {
// タイトル:「この記事を書いた人」のところ
}
&__container {
// コンテンツ全体
}
&__figure {
// 著者画像ラップ
img {
// 著者画像本体
}
}
&__body {
// コンテンツボディ
}
&__name {
// 著者の名前
}
&__content {
// 著者の紹介テキストなど
}
&__buttons {
// 記事一覧などのボタンエリア
}
&__archives-btn {
// 記事一覧ボタン
}
&__detail-btn {
// 詳しくのボタン
}
&__sns-accounts {
// SNSアカウントエリア
&-item {
// SNSアカウントそれぞれ
a {
svg {
}
}
}
}
}
外注先をお探しの方へ
当サイトを制作・管理しているオレインデザインを、WordPressを利用したウェブサイト制作の開発外部リソースに利用しませんか?
お気軽にお問い合わせください。