経理ん部

23歳経理マンの雑記。

プロフィールをちょっとお洒落にカスタマイズ

 通常のプロフィールを、HTMLで編集し変更しました。現在は下記のような状態です。(01/18現在)

当ブログは、テーマblank レスポンシブ設定で運営しております。

f:id:keiryocup:20160118231440p:plain

 

 

コピペコード

 HTMLの記述は下記のようになっています。

 


<span class="id">
<a href=“あなたのサイトのURL/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name=“あなたのはてなID">id:あなたのはてなID</span></a>
</span>
 
<div class="hatena-module hatena-module-html">
<div class="hatena-module-title”>プロフィールのタイトル</div>

<div class="hatena-module-body">
<p><img src="はてなフォトライフの2HTMLのURLを貼り付ける(下記参照)" alt=“あなたのブログ名" /></p>

<p>プロフィールの説明</p>
<a href="詳しいプロフィールページのURL" class="entry-title" target="_blank">詳しいプロフィールはこちらから</a>

  こちらサイドバーのHTML欄にコピペしていただき、各項目をご自身のサイトの物に反映していただければ完了です。

 

 

アイコン画像の設定方法

  ここではてなフォトライフのHTMLを作成することができます。下記のブログ様をご参照ください。

blog.hikehack.com

 

 上記のHTML作成ツールを使って、はてなフォトの画像ページで作成を行うと

 
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/keiryocup/20160114/20160114181201.jpg" alt="20160114181201" title="20160114181201" class="hatena-fotolife" itemprop="image"></span></p>

 このように表示がされます。その中色が変わっている部分を抜粋すると

http://cdn-ak.f.st-hatena.com/images/fotolife/k/keiryocup/20160114/20160114181201.jpg

 こんな感じ。この部分を使用します。

 

この設定で起こる可能性のある不具合

 最初は、上記HTMLに合わせて、下記の読者になるボタンを設定するHTMLを追加していました。 

<iframe src="http://blog.hatena.ne.jp/あなたのはてなID/あなたのはてなブログ独自ドメイン/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="120" height="28"></iframe>
  しかし、他との設定との影響なのか、サイドバー表示が崩れるようになったため削除しました。そのため、サイドバーに別途はてなブログのフォローボタンを設定しました。

 

 サイドバーにフォローボタンを設定した方法は、ゆきひー様の記事を参考にさせて頂きました。

www.yukihy.com

 

 

その他のカスタマイズ

www.keirinbu.com

 

www.keirinbu.com