ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑦サイドバー:プロフィールを整えるCSS】

ブログ

こんにちは
ニワトリです

『ブログのサイドバー見やすく
 オシャレにしたい・・・』

『デフォルトのプロフィールは
 はなんか少しダサい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回はサイドバーに表示する
プロフィールについて紹介していきます!

当ブログのプロフィールは
このようになっています。

simple is the BESTです!

今回は簡単に作れるプロフィールについて
紹介していきますね!

今回のカスタマイズ
  • プロフィールの設定
  • プロフィールの調整

プロフィールを設定する

デフォルトではサイドバーに
プロフィールが配置されていません。

設定方法
  • サイドバーにプロフィールを配置
  • プロフィールの作成
  • CSSをスタイルシートに貼り付ける
  • スマホとPCでデザインの確認

サイドバーにプロフィールを配置する

やり方
  • wordpressメニュー
  • 外観
  • ウィジェット

やり方
  • プロフィール横の▼を押す
  • サイドバーを選択
  • 「ウィジェットを追加」を押す

やり方
  • 右に移動した
    プロフィール横の▼を押す
  • タイトルを入力
  • 肩書きラベルを入力
  • 画像を円形にするに✓
  • 右下の「保存」を押す

ウィジェットはこれで設定完了だよ!

プロフィールを作成する

やり方
  • wordpressメニュー
  • ユーザー
  • プロフィール

  • ニックネームを入力
  • メールアドレスを入力
  • 各SNSのURLを入力

  • プロフィール情報を入力

  • プロフィール画像を
    アップロード
  • 設定が完了したら
    「プロフィールを更新」を押す

更新せずにページを変えると
変更が反映されないため
忘れずに更新をしておきましょう!

これでブログのサイドバーにプロフィールが表示されるようになったよ!

【コピペでOK!】プロフィールのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
  • 今回の追加CSSを前回のCSSの下から
  • 貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS

/************************************
** プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url( /*こちらに背景画像のアップロードURLを入力*/) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.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-2 p{/*自己紹介文の周囲の空白幅*/
margin:1em 2.5em;
}
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;
}
a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
a.follow-button.rss-button.rss-follow-button-sq{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;
}
}
@media screen and (max-width: 1023px){/*モバイル時非表示*/
div.sidebar {
display: none;
}
}

/*こちらに背景画像のアップロードURLを入力*/)
*と*の間にプロフィール画像のURLを貼り付けます

プロフィール編集画面に戻り
プロフィール画像のアップロード横の
URLをコピーして貼り付けます。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCでデザインが反映しているか確認する

変更したプロフィールが
スマホ・PC両方に反映しているか
確認をします。

サイドバーに上の画像のように表示されて
いれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はインデックスカードについて
紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

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