【カスタマイズ】プロフィール欄のカスタマイズ！ - えむしとえむふじんがあらわれた

f:id:mshimfujin:20160724195409j:plain

こんにちは、えむしです。

今回はプロフィール欄のカスタマイズを紹介したいと思います。

お昼に投稿するつもりがすっかり深夜の投稿に…

クルクル動く新しいカスタマイズ法をこちらで公開しました。 mshitech.hatenablog.com

以下、旧記事です。 akiueo.hatenablog.com blog.sukecom.net

今回はこの辺りを参考にさせていただきました。

スッキリさせたかったんですよ、プロフィール。

成る程！と思ったのはプロフィールをカスタマイズって考えるんじゃなくて
全部htmlで書いちゃえばいいって事だったんですね。

例によって、素人なもので、何か間違いなど有りましたらコメント欄にてご指摘お願いします…。

完成図
まずはCSSに貼り付け！
htmlを細工します

完成図

こんな感じに仕上げるのが目標です。
今回は、ブラウザからhtmlの中身が覗ける事が前提です。
その辺りがクリアできる方向けの説明になっちゃいます。

まずはCSSに貼り付け！

貼り付け場所はこちら。
デザイン→カスタマイズ→デザインCSSです。

/*プロフィールのcss*/
.picedge{
 border:1px solid #dcdcdc;/* 外枠の色 */
 border-radius: 50%; /* 外枠の丸み */
 padding:5px;/* 余白 */   
 background-color:#ffffff;/* 余白部分の色 */  
  }

使用する画像は正方形の物を用意して下さい。

こんな風にエッジを効かせたい場合はborder-radiusの一行を丸々削除、四角い画像の角だけを少し丸めたいって方は"50%"の代わりに6pxとか5px位を入れられるといい感じに角丸の画像になると思います。

htmlを細工します

ブラウザから現在の「プロフィール」部分のhtmlを抜き出して、適当なメモ帳に貼り付けて下さい。

必要な値はそこから取ると作業がしやすいかと思います。

htmlを参照するには、chromeだと「表示」→「開発/管理」→「ソースを表示」です。

そしてサイドバーからモジュールの「プロフィール」を消して、モジュール「html」を代わりに入れます。

その「html」の中にある以下のhtmlをコピーして、任意の数値や文章を入力してカスタマイズして下さい。

<center><a href="http://profile.hatena.ne.jp/ここにidを入力/" target="_blank"><b>表示させたいお名前</b>（id:idをここに載せます。</a>）</center>

<div style="margin:10px 0" align="center">
<a href="各々のblogのURL/about" target="_blank">
<img class="picedge" src="プロフィールのアイコンにしたい画像のURLをここにはります。" width="50%"></a>
</div>

      <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">

  <a href="#" class="hatena-follow-button js-hatena-follow-button">
    <span class="subscribing">
      <span class="foreground">読者です</span>
      <span class="background">読者をやめる</span>
    </span>
    <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
      <span class="foreground">読者になる</span>
      <span class="background">読者になる</span>
    </span>
  </a>
  <div class="subscription-count-box js-subscription-count-box">
    <i></i>
    <u></u>
    <span class="subscription-count js-subscription-count">
    </span>
  </div>
</div>

    <div class="profile-description">
<p>ここに説明文を挿入</p>
    </div>