【WordPress】ブログ初心者でもできる『プロフィール』のおすすめカスタマイズ【コピペでOK!】

ブログ運営のメモ WordPress

こんにちは、yujiです!WordPressで立ち上げたブログを自分なりにデザインしています。

「ブログ初心者なりに、ブログのプロフィールをおしゃれにデザインしてみたい。」

WordPressのテーマの多くは、隅々まで洗練されたデザインが行き届いていて本当に使いやすいものばかりです。

しかし多くの人が同じテーマを使っているので、どうしてもブログの雰囲気が似てきてしまいます。

そんな時、WordPressの醍醐味として、ちょっとした色味や幅の変更など、自分の好みに合わせてデザインすることができます!

ということで、この記事ではブログ初心者でもできる『プロフィール』のカスタマイズを紹介します。

sponser link

『プロフィール』の完成形はこちらです。

このページにも使われているとおり、プロフィールの完成形はコチラです。

以上のような『プロフィール』について、コピペでできるカスタマイズを紹介します。デザインは、モバイル表示にも対応しています。

※このブログはWordPress/Cocoonをベースにカスタマイズしています。

プロフィールの設定方法

WordPressメニュー「ユーザー」の「あなたのプロフィール」からプロフィール内容を設定できます。

コードはこちらです。

「外観」の「テーマエディター」から「style.css」を開き、以下のコードをコピペしてください。メモ書きも残しておいたので、参考にしていただけたらと思います。

style.cssにコピペするコード
/************************************
**     プロフィール
************************************/
.nwa .author-box {
max-width:none;
padding: 0;
}
aside#author_box-3.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url(https://yujiblog.org/wp-content/uploads/2020/02/madison-ralg-kxED2shuUg-unsplash-scaled.jpg) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,.2);
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){/*サイドバー表示時はMAX120pxで*/
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){/*モバイル表示*/
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 2em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
#author_box-3 p{ /*.author-descriptionがauthor box6などと被っているため*/
margin:1em 4em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:0 3px;
}
.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}

コピペができたら「ファイルを更新」をクリック。

これで『プロフィール』のカスタマイズは完了です!

この記事が少しでもお役に立てたら幸いです。最後まで読んでいただき、ありがとうございました!

【その画像の著作権、大丈夫ですか?】僕がおすすめする『安心のフリー素材サイト』9選!
【Twitterデータ公開してます】14日間でフォロワーを2,000人増やすノウハウ。
【2020年最新版】キャッシュレス初心者向け、おすすめのQRコード決済4選!
【本を聞くアプリで効率アップ】オーディオブックおすすめTOP5を徹底比較!

コメント

タイトルとURLをコピーしました