プロフィールボックスのCSSカスタマイズテンプレート(SCSS記法)

  • ブックマーク
  • -
    コピー

snow_monkey_before_entry_content

snow_monkey_prepend_entry_content

このサイトのプロフィールボックスのスタイリングを変更しようと思った際に、こういった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 {

        }
      }
    }
  }

}
「あれ?この情報、古くない?」と思ったらご連絡ください。

snow_monkey_append_entry_content

snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者