snow_monkey_prepend_main

プロフィールボックスの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 {

        }
      }
    }
  }

}

外注先をお探しの方へ

当サイトを制作・管理しているオレインデザインを、WordPressを利用したウェブサイト制作の開発外部リソースに利用しませんか?
お気軽にお問い合わせください。

運営へのご連絡はこちらから snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

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

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

snow_monkey_append_main