この記事では、cocoonのプロフィール（ウィじぇと）をおしゃれにカスタマイズする方法について詳しく解説しています。
※「CTRL」＋「D」で、当サイト【コクブロ】がブックマークできます！
Cocoonは「プロフィールウィジェット」を使えば、簡単にサイドバーや記事本文下などにプロフィールを表示させることができます。
まだプロフィールを作っていない場合は、次の記事からどうぞ。
Cocoonのプロフィールを作成する
もちろん、デフォルトのプロフィールを使ってもいいんですが、飾り気がなくてシンプルすぎるので、ちょっとだけおしゃれにカスタマイズして、自分なりのプロフィールにかえてみましょう！
この記事では、プロフィールをおしゃれにカスタマイズする方法を詳しく解説していきます。
CSSの追加手順
これから、カスタマイズ用のCSSコードを追加していきますが、以下のどちらかの手順でCSSを追加してください。
どちらの手順でもいいですが、今後カスタマイズのたびにCSSコードが増えると思われるので、編集画面が大きい２番目の方法がおすすめです。
好きな色を選択する
CSSの色は、カラーネーム（redなど）またはカラーコード（#ff0000）のどちらでも指定可能です。
以下のサイトでは、カラーネームと、そのカラーネームに対応するカラーコードが用意されているので、好きな色を選択してくさい。
自分好みの色を作りたい場合は、以下のサイトが便利です。
■使い方
ページを開くと、一番上にベースとなる5色の色が表示されます。
好みのベースの色をクリックするとカラーピッカーが使えるので、あとは自分好みの色を作ればOK！（決まったらカラーコードをコピー）
「Generate」ボタンで、ベースの色を変更できますよ！
プロフィールをカスタマイズする
これより、プロフィールの各要素をカスタマイズしてみます。
ボーダー（プロフィールボックスの枠）
ボーダー（プロフィールボックス枠）の色や太さ、角丸をカスタマイズします。
/* ボーダー（太さ、色、角丸） */
.author-box {
border: 4px solid #058b7b; /* 太さ4pxで緑色 */
border-radius: 6px; /* 角丸が6px */
}
角丸（border-radius）は枠の角を丸める指定で、大きいサイズほど丸くなります。
プロフィール画像
プロフィール画像のカスタマイズです。
プロフィール画像を円形にする
プロフィール画像はデフォルトでは四角ですが、円形に変更することができます。
プロフィールウィジェットの「画像を円形にする」にチェック。
プロフィール画像に枠や影をつける
プロフィール画像に枠や影をつけるカスタマイズです。
/* ①枠をつける */
.author-thumb img {
border: 4px solid rgb(128 128 128 / 30%);
}
/* ②影をつける */
.author-thumb img {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.22);
}
/* ③盛り上がっている枠をつける */
.author-thumb img {
border: 4px outset rgb(128 128 128 / 30%);
}
「③盛り上がっている枠をつける」は、ちょっとわかりづらいですが立体的に見えるラインスタイル（outset）を指定しています。
プロフィールのカスタマイズの例
ここからは、プロフィールの各要素をまとめてカスタマイズした場合の例です。
背景色（斜めに2色）＋ボーダー＋画像枠
プロフィールボックスに2色の背景色（斜め）をつけて、プロフィール画像は立体的な枠にし、ボーダーは背景色の色と同じにしてちょっと太めで角丸にしています。
/* 背景色（斜めに2色） ＋ ボーダー ＋ 画像枠 */
.author-box {
background-color: white;
border: 10px solid #bde3e3;
border-radius: 6px;
background-image: linear-gradient(145deg, #bde3e3 0%, #bde3e3 50%, #f3fbf8 50%, #f3fbf8 100%, transparent 0);
}
.author-thumb img {
border: 4px outset rgb(128 128 128 / 30%);
}
コメント