サイドバーに簡単なプロフィールを入れる

公開日:  最終更新日:2015/03/11

gushサイドバー

プロフィールの写真を用意する

今回はメディアライブラリに写真を入れました。

最初から調度良い大きさに加工してからアップしても良いのですが、めんどうなのでwordpressのサムネイル用のイメージを使おうと思います。

サムネイル用の画像のURLがわからない場合は、投稿画面のテキスト編集でメディアを追加からサムネイル写真を貼り付けてそのタグをコピーしてください。

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

ウィジェットのサイドバーにテキストを入れます。そのテキスト欄にプロフィールのソースを書きます。

18

テキスト欄は簡単にこんな感じでいれました。


<div id="prf_box"><!-- id名はなんでもOK -->
<img src="自分のプロフィール写真のURL" />
<dl>
<dt>name</dt>
<dd>自分の名前</dd>
</dl>
<p>挨拶文をなど書く。
</p>

</div><!-- /#prf_box -->

cssはこんな感じにしました。


#prf_box{
	border:solid 1px #333; /* プロフィール欄の囲い */
	padding:10px;
}
#prf_box img{
	margin:10px auto;
	display: block;
}
#prf_box dt{
  font-size : 18px;
  font-weight : bold;

  margin-bottom : 12px;
  border-bottom :1px solid #999;
  border-left : 7px solid #DE0927; /* nameの横のアクセント */
  padding : 2px 0 2px 20px;
}

#prf_box dd{  
  font-size : 15px;
  margin-bottom : 15px;    
  border-bottom :1px solid #999;
  padding-left : 20px;
}

出来上がり

17

プロフィール欄にSNSボタンなどいろいろ入れたいですが、それはまた次の機会にやります。 まだまだ殺風景ですがじわじわカスタマイズしていきます。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを投稿

  • 自分の写真
    name
    Aya imai

    三人の子を持つ主婦です。パソコン、編み物など 下手の横好きですが、いろんな事をやりたがります。 どれも大した知識はありませんが、上達を目指しがんばります。

Category

PAGE TOP ↑