どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレス「STINGER8」のサイドバーに、「プロフィール」を設置しておくのは意外と重要です。
プロフィールがあることでユーザーがブログに訪問した際に、ブログ運営者がどんな人物なのかを確認でき、共感を持ってもらえれば信用性も上がるので今後もリピーターとして、訪問してくれる可能性も高くなります。
プロフィールがすぐに確認できるように設置してアピールし、自分のことをよく知ってもいましょう。
また、STINGER8のサイドバーの見出しは非常にシンプルなので、少しカスタマイズして見やすいように変更しましょう。
それではプロフィール設置と見出しのカスタマイズについてご紹介していきます。
サイドバーにプロフィール設置
STINGER8でサイドバーにプロフィールを設置するには、まずワードプレスの管理画面左メニューの「外観」⇒『ウィジェット』をクリックします。
「利用できるウィジェット」から「テキスト」を選択して、右側のサイドバートップ内またはサイドバーウィジェット内にドラッグ＆ドロップします。
ここではサイドバーウィジェット内を選択します。
テキスト内にプロフィール画像や紹介文を入力
記事作成時と同様の入力ができるテキストが表示されるので、「タイトル」を入力後に以下のものを「ビジュアルモード」ではなく「テキストモード」の方に入力します。
<center><img src="画像URL" width="150" height="150" /></center> 好きな紹介文を入力 <center><a href="プロフィール記事のURL">詳細プロフィールはこちら</a></center>
「画像URL」はワードプレスに画像をアップロードした際に、右側に表示されているURLのことです。
「width(横幅)」と「height(高さ)」で画像サイズを調節でき、ビジュアルモードで正常に表示されているか確認して『保存』をクリックします。
後はサイドバーに表示されているか確認しましょう。
CSSカスタマイズでプロフィール設置
CSSコードをカスタマイズすることで、先程とは違ったプロフィールを表示させることができます。
上記の画像が完成系のプロフィールになりますので、これを目指してカスタマイズをしていきます。
ウェジェットのテキストを編集
以下のコードをウェジェットのテキスト内に入力します。
<div class="profile-box clearfix"> <div class="profile-ph"> <img src="画像URL"> </div> <div class="profile-le"> 好きな紹介文を入力 </div> <div class="profile-de"> <a href="プロフィール記事のURL">詳細プロフィールはこちら</a> </div> </div>
テキストモードで「プロフィール用画像のURL」と「プロフィール記事のURL」を追記して、紹介文まで入力が終わったら保存をクリックします。
子テーマ「スタイルシート(style.css)」を編集
続いてワードプレスメニューの「外観」⇒『テーマの編集』をクリックします。
子テーマの「スタイルシート(style.css)」に以下のコードを追記します。
/*-- プロフィール --*/
.profile-ph img
{
border-radius: 10px;/*画像かどの丸み*/
width: 90px;/*画像の横幅*/
height: 160px;/*画像の高さ*/
}
.profile-ph
{
float:left;/*画像の配置*/
margin-right: 10px;/*画像右の余白*/
}
.profile-le
{
overflow: hidden;
font-size: 15px;/*紹介文の文字サイズ*/
}
.profile-de
{
padding-top: 10px;/*リンク上の余白*/
text-align: center;/*リンクの配置*/
}
.profile-de a {
padding: 0px 15px;/*リンク内の高さ・横幅*/
background: #38b48b;/*リンクの背景色*/
font-size: 15px;/*リンク内文字サイズ*/
color: #fff;/*リンク内文字色*/
text-decoration: none;
border: 1px solid #38b48b;/*リンクの枠線色*/
border-radius: 5px;/*リンクかどの丸み*/
}
後は『ファイルを更新』をクリックすればカスタマイズは完了です。
もし変更内容が反映されない時は、キャッシュを削除してから再度更新してみて下さい。
見出し(タイトル)の表示をカスタマイズ
プロフィールの上に表示されている見出し(タイトル)は、デフォルト設定のままだと太字になっているだけであまり目立たないので、style.cssに以下のコードを追記しましょう。
/*-- サイドバーの見出し --*/
.menu_underh2{
font-weight: normal;
font-size: 16px !important;/*見出しの文字サイズ*/
text-align: center;/*見出しの配置*/
color: #fff;/*見出しの文字色*/
padding: .5em .0em;/*見出し内側の余白*/
background-color: #696969;/*見出しの背景色*/
box-shadow:0px 5px 4px -2px #a0a0a0;/*見出し枠の影*/
}
文字サイズは通常のCSSコードでは反映されなかったので、「!important」を追記してコードの優先度を上げておきます。
文字色や背景色などはお好きな色に変更して使用して下さい。
これではっきりと見出しが判別できるようになりましたし、ついでに見出しタイトルを左寄せから中央揃えに変更しています。
サイドバー項目間の間隔を調整
今の状態だとサイドバーの各項目の間隔が狭すぎるので以下のコードで調整します。
/*-- サイドバー各項目の間隔 --*/
.ad {
margin-bottom: 30px;/*項目下の余白*/
}
間隔が広くなったことで読みやすくなり、圧迫感を抑える効果もあります。
以上でサイドバーのプロフィール設置と見出しのカスタマイズは完了になります。
まとめ
今回ご紹介した見出しカスタマイズは、ウィジェットの「サイドバートップ」のエリアでは表示されませんので、編集する場合は「サイドバーウィジェット」内に追加していくようにして下さい。
ブログのサイドバーはトップページや記事の閲覧中にも表示されている部分なので、コンテンツとして重要な機能を担っています。
表示する内容や見せ方でブログのアクセスアップも期待できるかと思いますので、カスタマイズを行って自己アピールなどをしていきましょう。
