えむしとえむふじんがあらわれた

オタクな夫婦が書く日常とか思った事なんかのアレコレに思い出話とか。三人の子持ちです。

スポンサーリンク

【カスタマイズ】プロフィール欄のカスタマイズ!

\フォロー!/
\シェア!/

f:id:mshimfujin:20160724195409j:plain

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

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

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

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

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

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

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

成る程!と思ったのはプロフィールをカスタマイズって考えるんじゃなくて
全部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>

少しわかりにくいかも知れませんが、作業としてはこんな感じ終了です。
わかりにくかったかなぁ…なかなかうまく説明できなくてごめんなさい。

ではでは…

CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。

スポンサーリンク


2週間無料です!
まずはお試しあれ〜!

ベネッセコーポレーション 進研ゼミ・こどもちゃれんじ

その他
PVアクセスランキング にほんブログ村