
このブログのテーマは、わいひらさんが開発してくれた『Cocoon』を使わせていただいています。
今回はサイドバープロフィールの背景に画像を設定する方法を書き残しておきます。
今回やりたいこととしては、
- サイドバープロフィールのアイコンの背景に画像を設定
- 背景画像の縦幅を自分好みに調整
このあたりに変更してみようと思いました。
方法は、Cocoonの子テーマ『style.css』に下記コードを追記します。
※コピペでいけます。
/* プロフィール背景カスタム===ここから↓↓ */
#sidebar .author-thumb {
float: none;
width: 100%;
margin: 9px auto 0;
background: url(”設定したい画像のURLをコピペしてください”) center no-repeat;
background-size: cover;
height: 0;
padding-top: calc(100%*250/700); /* ここの数値で大きさを調整 */
position: relative;
}
/* プロフィール背景カスタム===ここまで↑↑ */
『background: url』の(”設定したい画像のURLをコピペしてください”)の部分に設定したいURLをコピペしてください。※『”』は消してください。
画像のURLは、管理画面の「メディア」から設定したい画像を選択して、

赤枠のURLをすべて選択してコピペしたらOKです。
横幅・縦幅は『padding-top: calc(100%*250/700);』←ここの数値をいじると調整できます。
変更前↓

変更後↓

こんなかんじになりますヾ(‘ω’)ノ

ぶくろさん
いいぞ~♪
そのほかのCocoonカスタム記事も参考にどうぞ↓
ということで今回は以上となります。
この記事が誰かのお役に立てますように。




