#Aftereffects #Animation #Illustration

サイドバーにユーザープロフィールを追加したので備忘録【SANGO改造】

TOPページにユーザープロフィールが入っていなかったので入れてみました

ここのこと↑

そもそもこのサイトはwordpressで出来ているサイトで

テーマはサルワカさんが作っている”SANGO”&”PORIPU”というのを自分仕様にプラグインを追加したり、html,cssをカスタマイズして使っています

はてなブログじゃなくてnoteでもなくてjindo、Wixでもなくて自分のドメインを持ってサイトを持つって言葉に出来ないよさがありますよね、、、

テーマを”SANGO”にしたのは”SANGO”のコンセプトが結構好きなのと、マテリアルデザインが採用されてるっていうのが決め手でした

特に広告も貼っていないのでサイト高速化とかあんまり気にしていないです

もう早2年くらい使っているので愛着が湧いてる

サイドバーにユーザープロフィールを追加する

で、先ほどサイドバーにユーザープロフィールを追加したので書き残します

“SANGO”だとコードをいじらずにページ下部に”この記事を書いた人”というのは簡単に追加出来るんですが

サイドバーに入れるのはかなり面倒です

事前準備

まず事前にwordpressプラグインでカスタムHTML、CSSというのを入れておいてください

でwordpress管理画面から外観→ウィジェットをクリック

サイドバーの欄にカスタムHTMLを挿入

そのあとは基本的な動作についてはサルワカさんのカスタマイズ指南書があるので読んでみてください

参照URL サルワカさんのカスタマイズ指南サイト:https://saruwakakun.com/sango/my-profile

これの通りにやると、あれ、ここうまく出来ないとか

プロフィール本文の上部のマージンが多過ぎるなど問題が起きたため、

自分で調節したのが以下のCSSです

ぜひ入れてみてください

(まだfont awesomeのアイコンの色変更などはよくわかっていません)

カスタムCSS

wordpress管理画面からCustom CSSを選択します

CSSに入れるのは以下です

——————————

.yourprofile {
padding:0px 0;
}
.yourprofile .profile-img {
margin: 10px auto 0;
}

.profile-content {
padding: 0px 15px;
font-size: 0.95em;
}

.yourprofile .profile-img {
position: relative;
width: 80px;
height: 80px;
margin: -40px auto 0;
text-align:center;
}

.textwidget p {
margin: 0em 0;
}

.profile-sns {
margin: 0;
padding: 20px 10px 20px;
text-align: center;
}

.yourname {
padding: 10px 10px 0px 10px;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}

——————————