著者情報(SNSアイコン)

概要

著者情報に使える定型文です。
SNSリンクをアイコン形式にしているので、使用したいもの以外を削除し、各アイコンのaタグにリンクを設定してお使いください。

デモ

著者：はてな太郎

著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。著者情報を記入します。

html / css

タブ切替でhtml/cssを確認できます。
それぞれコピーしてお使いください。

See the Pen 著者情報(SNSアイコン) by hbm-design (@hbm-design) on CodePen.

カスタマイズ

背景色を変更する

.author-wrapper {
    background: #任意の色を入れます;
}

著者名の色を変更する

.author-wrapper .text-box .author-name {
    color: #任意の色を入れます;
    border-bottom: 2px solid #任意の色を入れます;
}