プロフィール部分を窓枠みたいにする

BEFORE

AFTER

窓から覗いてる感がいいよね

カスタマイズは自己責任でやろう

自己責任の意味がわからない方、初めてカスタマイズする方は、必ずこちらの記事を読んでくださいね。

関連カスタマイズは自己責任。ぼくはこんな風に思っています。

Contents

カスタマイズの
準備
1. プロフィール部分に追加する背景画像
2. CSSコードの追加方法
カスタマイズに必要な
CSSコード
1. コメントあり
2. コメントなし
うまくできたか
確認
くまからのお礼

カスタマイズの
準備

プロフィール部分に追加する背景画像

もしも、ぼくと同じように背景をレンガチックにしたい方は、以下の画像を右クリックして「名前をつけて保存」してください。

保存する画像

ただし、こちらはぼくが使用しているものとは色が違います。ぼくはピンクでしたが使いやすいように黒（半透明）にしておきました。

CSSコードの追加方法

おすすめは追加CSSからコードを追加する方法です。

はじまてカスタマイズする方は、こちらの記事を読んでくださいね。

関連ブログのカスタマイズを加速させる「追加CSS」の使い方

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

複数のカスタマイズをしたい方は、テーマエディターだと編集しやすくておすすめです。普段からFTPソフトを使ってる方はそちらからアップロードしてもカスタマイズできます。

カスタマイズに必要な
CSSコード

コメントあり

/*--------------------------------------
  窓からのぞいてる　サイドバープロフィール部分
--------------------------------------*/
.my-profile .my-profile-thumb {/*アイコン部分*/
border-radius: 50% 50% 3px 3px;/*角丸を四隅でそれぞれ設定*/
}
.sidebar_style6 .widget-profile {/*サイドバーの種類によってstyle◯の部分を変更してください*/
background-image: url(★背景画像URL★);/*背景画像を設定*/
}

コメントなし

/*--------------------------------------
  窓からのぞいてる　サイドバープロフィール部分
--------------------------------------*/
.my-profile .my-profile-thumb {
    border-radius: 50% 50% 3px 3px;
}
.sidebar_style6 .widget-profile {
    background-image: url(★背景画像URL★);
}