【WordPress】STINGER8でサイドバーにプロフィールを入れて自己主張をする！

今回はサイドバーにプロフィール欄を作成します。

プロフィールがあるだけでも、ブログの雰囲気が大きく変わってくるように思えます。
ついでに自己主張をしてみましょう。

サイドバーにプロフィールを作る
1. style.css
コピペも良いですが・・・

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

国内シェアNo.1の高速サーバーなのでストレスフリー！
自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

サイドバーにプロフィールを作る

プロフィールをつくる場合は、7やplusと変わっていません。
WordPressのメニューの
外観＞ウィジェット　で「テキスト」をサイドバーウィジェットに入れます。

その後、好きなタイトルを入力し、内容の部分に下記のコードを入力します。

<div class="profile-box clearfix">
 <div class="profile-ph">
  <img  src="プロフィールで使いたい画像のURL" aｌｔ="好きな単語" >
 </div>
 
 <div class="profile-le">
ぷるぷるです
東京在住の個人事業主です!
最近はウィスキーにはまっています！
 </div>
 
<div class="profile-de">
<a href="こちらに詳細URLを入力">詳しくはこちら</a>
</div>
</div>

【2017/1/20追記】
「詳しくはこちら」をクリックした際に詳細ページへ飛ぶようにしたい場合は、
下記の「こちらに詳細URLを入力」の箇所に、
詳細ページのURLを入力してください。

<a href="こちらに詳細URLを入力">詳しくはこちら</a>

なお、下のほうにある「自動的に段落追加する」のチェックを入れると、
勝手に改行してくれるので、お好みでチェックを入れてください。

「プロフィールで使いたい画像のURL」と「alt」を入力すると、
このようになります。

この状態ではあまり締まりがないので、
スタイルシートをいじりましょう。

style.css

スタイルシートに下記のコードを入力します。

.profile-ph img
{
     border-radius:10px;
     width:80px; 
     height:auto;
}
 
 
.profile-ph
{
    float:left;
    margin-right: 10px;
}
 
.profile-le
{
    overflow: hidden;
    font-size: 15px;
}
 
.profile-de
{
    padding-top: 4px;
    text-align:center;
}
.profile-de a {
    padding: 4px 10px;
    background:#38b48b;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #38b48b;
    border-radius: 5px;
}

このようになります。