mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

MENU

シンプルなプロフィールにLINE風な吹き出しを取り入れる

ブログの見た目に飽きてきますよね。ワンポイント入れると特徴的になるというか、個性が出て良いと思います。

ただあまりやりすぎるとごちゃごちゃするのでワンポイントちょっと何か足してあげると良いと思います。

プロフィールを少し可愛らしく

限定されるのですが、僕の所はプロフィールにアイコンと説明文だけでIDとPROの表記を外してます。なのでちょっと右側さみしいんですよね。



ここに少しだけ足したら今よりほんの少し個性が出て良いと思います。



まあ世のブログオシャレ大魔神にはかないませんよ。ただ、殺風景もシンプルで良いのですが、ワンポイントをシンプルに足すのも良いんじゃないかと思います。

はてなブログのプロフィール、自己紹介の自由に書き込める所で作成します。


<!--吹き出しはじまり-->
<div class="prof1">
<div class="proficon">
<img src="画像URL">
</div><div class="chatting">
<div class="hukidashi">
<p><!--ここに表示させたいテキスト--></p>
</div>
</div>
</div>
<!--吹き出しおわり-->

<style>
.prof1 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.prof1 .proficon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.prof1 .proficon img {
    width: 70px;
    height: auto;
    border: solid 3px #f1b50c;
    border-radius: 50%;
}

.prof1 .chatting {
  width: 100%;
}

.hukidashi {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #d7ebfe;
}

.hukidashi:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #d7ebfe;
}

.hukidashi p {
  margin: 0;
  padding: 0;
}
</style>


4段目の<img src="画像URL">の所はデベロッパーツールでプロフィールのaboutからimgまでをコピーして貼り付けるだけです。aboutリンクが不要の場合は画像を表示させるだけでも良いです。


注意事項

はてなブログのプロフィールの自己紹介に書き込む所は「見たまま編集」と同じようにEnterで改行すると反映されてしまうので、文字を書く所は余計なスペースや改行をすると文字の始まりが一段ずれたりします。

<!--吹き出しはじまり-->から<!--吹き出しおわり-->までの改行を消して一列にする必要があります。




おまけ

僕が好きなのはマウスを重ねた時の変化系ですね。300*250サイズの画像にテキストを入れてサイドバーに置くとちょっと目立ったコンテンツになると思います。





<div class="imgWrap">
<a href="リンク先URL"><img src="画像URL"></a>
</div>

<style>
.imgWrap {
 overflow: hidden;	/*拡大時にはみ出た部分を隠す*/
 width: 300px;	  /*画像の幅*/
 height: 250px;  /*画像の高さ*/
 }
.imgWrap img {
 display: block;
 transition-duration: 0.3s;  /*変化に掛かる時間*/
 }
.imgWrap img:hover {
 transform: scale(1.1);  /*画像の拡大率*/
 transition-duration: 0.3s;  /*変化に掛かる時間*/
 }
</style>

テストをする時はCode PenのHTMLやCSSに入れると良いですよ。記事内やサイドバーでテストしてうっかり公開してしまう事もないです。