しきしまにっき

たんなる日記です

【はてなブログ】サイドバーのプロフィールをボックス風にカスタマイズしてみた!

どうも。しきしま(@Hisayuki__S)です。

サイドバーのプロフィールにボックス風にカスタマイズしてみました。こんな感じで↓

プロフ画像が手書きでイマイチなので、オシャレ感は伝わってこないが、あなたの素敵なプロフ画像ならイカした感じになるはずだ。

ちなみに、これやるのに半日くらいかかりましたw

僕の血と汗の結晶を、今回は特別大サービスでコピペOKで公開しますぜ!

ただーしっ!タダというわけにはいかんぜぉ

今、この「しきしまにっき」の読者には、何と0人!これは寂しすぎるので、下のコード使うなら読者登録して下さいまし↓

さらに、贅沢を言うとブロガー同士のつながりが欲しいので、ツイッターもフォロワーして下さいまし。マジでお願い、このとおりorz

てなわけで、この低いハードルを越えてくれた人は、じゃんじゃんコピペしちゃって下さい。

はい

コードはこんな感じ↓

HTML

<div class="p-box">
<p class="p-title">プロフィール</p>

<a class="profile"><img src="img画像" width="120" height="120"><a href="プロフィール詳細リンク"><p class="p-name">なまえ</p></a>

<div class="follow">
<a class="f-hatena" href="読者になるボタンURL" target="_blank"><i class="blogicon-hatenablog lg"></i><br><span style="font-size: 0.3em;">Hatena!</span></a>
<a class="f-twitter" href="ツイッターURL" target="_blank"><i class="blogicon-twitter lg"></i><br><span style="font-size: 0.3em;">Twitter</span></a>
<a class="f-facebook" href="フェイスブックURL" target="_blank"><i class="blogicon-facebook lg"></i><br><span style="font-size: 0.3em;">Facebook</span></a>
<a class="f-feedly" href="feedlyのURL" target="_blank"><i class="blogicon-rss lg"></i><br><span style="font-size: 0.3em;">feedly</span></a>
</div><div style="clear: both"></div>
</div>

CSS

/* プロフィール */
.p-box{
    box-shadow: 0 0 1px #dddddd;
    padding: 1me 1em 1em 1em;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0,0,0,.3);
}
.p-box a{
    color: #6490cd;
    text-decoration: none;
}
.p-box a:hover {
    opacity: 0.8;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
}
.p-title{
    padding: 1em 0 1em 0;
    background: #e4f0fc;
    color: #6490cd;
    font-size: 1.2em;
    font-weight: 700;
    text-align: center;
}
.p-name{
    font-size: 1.2em;
    text-align: center;
    font-weight: 700;
    margin-top: 0.6em;
}
.p-name:hover {
    opacity: 0.8;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
}
.profile img {
    display: block;
    border: solid 1px #E6E6E6;
    border-radius: 100%;
    margin: 0px auto 0px;
}
.follow {
    width: 100%;
    margin: 0 2%;
}
.follow a {
    width: 24%;
    font-size: 280%;
    padding: 0.6em 0 1em 0;
    float: left;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    line-height: 0.7em;
}
.follow a:hover {
    opacity: 0.8;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
}
.follow a.f-hatena{
    color: #808080;
}
.follow a.f-twitter{
    color: #44aeea;
}
.follow a.f-facebook{
    color: #6490cd;
}
.follow a.f-feedly{
    color: #85beab;
}

カスタマイズの手順

HTMLコードを貼る場所

  1. ダッシュボード
  2. デザイン
  3. スパナアイコン
  4. サイドバー
  5. モジュール追加
  6. HTML
  7. タイトル空欄でOK
  8. 上のHTMLコードをコピペ

CSSを貼る場所

ここ↓

f:id:SikisimaHisayuki:20171226114339j:plain

サクッと解説

僕が現在使っているテーマは、Minimalismなので、他のテーマを使っている人は適宜CSSなどを調整して下さい。

あと、「読者になるボタン」と「Feedly」のURLは説明すると長くなるので、自分でググって下さい。

以上

てなわけで、今日のところはこの辺で終わります。

追伸

画像(img)に影を付けて、角をちょっぴり丸くするカスタマイズもやってみたよ

www.sikisimablog.com