WordPressテーマ「スワロー」のプロフィールをカスタマイズ♪【 CSSのみ】

うぅん……カタカタ……カタカタ……

むむむ、ウサギさんが何かに悩んでるみたい！

ブログのプロフィールをデザインしているのかな？

うん、プロフィールのカスタマイズが上手くいかないの……

はいっ、かがみ呼んできてー！

こんにちは、かがみ（@cony_tas）です！

WordPressテーマ「スワロー」のプロフィール（運営者の紹介）部分のデザインをカスタマイズする方法はご存じですか？

当ブログではウィジェットにカスタムHTMLでオリジナルのコードを入れていて、下のようなデザインになっています。

本記事ではソースコードをコピペするだけで、当ブログと同じプロフィールデザインにする方法をご紹介します。

記事でわかること

・スワローのプロフィールをカスタマイズする方法

記事の信頼性

筆者のかがみ（@cony_tas）はブログ立ち上げ時からスワローをカスタマイズして使用しています。

CONTENTS［ hide ］

01｜ WordPressテーマ「スワロー」のプロフィールをカスタマイズ♪
・プロフィールを表示する方法
・実装用コード
02｜最後に：WordPressテーマ「スワロー」のプロフィールをカスタマイズ♪

WordPressテーマ「スワロー」のプロフィールをカスタマイズ♪

WordPressテーマ「スワロー」は、シンプルで美しく、無駄なものをそぎ落とした洗練されたWordPressテーマです。

今回はプロフィール情報のデザインをカスタマイズしてみましょう。

プロフィールを表示する方法

ウィジェットでプロフィールを表示する方法ですが、当ブログではPCとSPで以下のようにウィジェットを設置しています。

PC版
外観 ⇒ ウィジェットを選択し、【PC用】サイドバーの欄にカスタムHTMLを設置する。

SP版
外観 ⇒ ウィジェットを選択し、【スマホ用】フッター上部の欄にカスタムHTMLを設置する。

HTMLコードはウィジェットのカスタムHTMLに貼り、CSSは子テーマのスタイルシートに追加しましょう。

実装用コード

それでは、実装用のコードをご紹介します。
HTMLはコピペでOKですが、CSSはカラーを変更したい場合はご自身で変更してみてください。

HTML

<div class="side-profile">
    <div class="icon-profile"><img src="アイコンURL" alt=""></div>
    <div class="description">
        <div class="name">
            名前<br>
            <span>肩書等</span>
        </div>
        自己紹介文
    </div>
    <div class="sns">
        <p class="follow-me">＼ Follow me ／</p>
        <ul>
            <li class="twitter"><a href="あなたのTwitterリンク" target="_blank" rel="nofollow noopener noreferrer"></a></li>
        </ul>
    </div>
</div>

CSS

.side-profile {
    position: relative;
}
.side-profile .icon-profile {
    width: 120px;
    height: 120px;
    margin: 30px auto 15px;
}
.side-profile .icon-profile img {
    width: 120px;
    height: 120px;
    border: 3px solid #fbf4d8;
    border-radius: 50%;
}
.side-profile .description {
    position: relative;
    margin: 0 0 25px;
}
.side-profile .name {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
}
.side-profile .name span {
    color: #ababab;
    font-weight: normal;
    font-size: 10px;
}
.side-profile .sns {
    padding: 7px 0;
    background: #f3f1ed;
}
.side-profile .sns .follow-me {
    margin: 0;
    color: #777;
    letter-spacing: 0.15em !important;
}
.side-profile .sns ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 100%;
    height: 28px;
}
.side-profile .sns li {
    width: 34px;
    height: 34px;
}
.side-profile .sns li a {
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    box-shadow: none;
    color: #777;
}
.side-profile .sns li a:hover {
    transform: translate3d(0px, 0px, 0px);
    box-shadow: none;
    background: none;
    opacity: 0.7;
}
@media only screen and (max-width: 767px) {
    .side-profile .description {
        font-size: 13.5px;
    }
    .side-profile .sns .follow-me {
        font-size: 13.5px;
        letter-spacing: 0.15em !important;
    }
    .side-profile .sns li {
        width: 34px;
        height: 34px;
    }
}