プロフィールをカスタマイズ

くすひら

こんにちは、楠平です

コピペ術を使いつつ

プロフィールをカスタマイズしました

ご参考サイトさま
①　https://s41t0h.jp/cocoon-author-box-customize/
②　https://web-ashibi.net/archives/2625

くすひらブログのスキン
Coccon（https://wp-cocoon.com/terms-of-use/）
COLORS（ブルー）（わいひらさん）

最初はBizarre-food（ブルーカレー）でしたがうまくカスタムいかない部分もあり変更しました。

CSSを追加する前に参考サイトさんを元に各プロフィール設定なども済ませました。

Cocconはプロフィールアイコンを丸くする機能が元々あるのですね！

CSSの実装

大元は、①斉藤コウさんのコードを丸コピペしました。

SNSフォローボタン

フォローボタンがなぜか白くなってしまったため、①②両者のタグを見比べ。

②DICEさんのコードを元に、部分的に書き換えました。

書き換え前

.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }

書き換え後

.author-box .twitter-button { background-color: #1da1f2 !important; }

理由は分かりませんが、.bc-brand-color.sns-followを消すとアイコン復活しました。

プロフィール背景をもう少し下げたい

次に、背景をもうちょっと下げたいと思い。

これかな？と思う数字をいくつかいじったら場所が判明しました。笑

.author-box figure.author-thumb img{
	border: 3px solid #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	height: auto;
	width: 30%;
	max-width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -3.5em;
}

bottom: -3.5em;の数字をいじった結果、自分で納得いく長さになりました。

デフォルトは-4.5em

数字を小さくすると、背景が下へ下がってくれました。

カスタマイズについて

テーマにCocconを選んでいて良かったです。

初心者にとって、分からないときはすぐググることになりますが

利用者が多い＝疑問点の答えが見つかることが多い　ということですね。

私はコードも出来るようになりたいので

今回のように基本のコピペから部分カスタマイズというのも挑戦していきたいです。

いまはまだ暗号文のようですが、コードを見て解読していくのが楽しみです。