今回はプロフィールのカスタムをして、誰よりも自己主張をしましょう！（なぞ）
とにかくプロフィールをカッコよくカスタムしていくぜ。レッツゴー！

完成図

先に完成図をです。といっても、この記事をアップしてるころにはサイドバーにあるはずですが。

マウスを載せたらメッセージが出現。

クリックでプロフィールページに飛ぶ仕様です。（ぬかりないぜ）

現状の確認

僕のデザインテーマは「Blank」というテーマで、人気のテーマランキングで1位のテーマです。ちなみにこのテーマを作った方は半月さんと言う方です。とても参考になる記事を書いているので是非。

では現状の確認。
このテーマを使っている方は、コピペするだけで簡単なので是非やってみてください！

これが今のサイドバーのプロフィール。みんな同じですよね？
なんの変哲もなく、何が悪いわけではないが、良くもないからカッコ良くします。

まずは画像作り

特にサイズは気にしないでOKですが、スマホの写真なら横での写真の方が良いと思います！

こちらが完成品。

これはPhotoshopで作ったんですが、自分の顔は恥ずかしいので、ポリゴンで誤魔化しました！（照れ屋）
ポリゴン部分はiPhoneのアプリです。先日記事にしたのでどうぞ。 

みんな好きな写真をアプリやPCで好きに作りましょう！

フォトライフに 画像をアップロード

アップロードのやり方

一番早いのは「記事を書く」で普段のブログを書くときのようにポイっと画像を落とせば、フォトライフに上がります。

URLをコピー

その画像のURLが必要なので、ポイっと落としたら「プレビュー」を見てみましょう。
すると、画像がありますよね？（あるはず）
そこで右クリック。

これMacの画像ですけど、Windowsでも同じ感じのがあると思います。
この中の「画像アドレスをコピー」でURLをゲットです！

HTML

「デザイン（PC）」「サイドバー」「モジュールを追加」「HTML」を選択！

<figure class="profile-image">
<img src="フォトライフからのリンク"  width="300px" />
<figcaption>
<a href="プロフィールページのリンク">
<p class="profile-title">あなたの名前</p>
<p>文章1行目 <br /> 
       文章2行目 <br /> 
       文章3行目</p>
</figcaption>
</figure>

 これの必要事項を入れてコピペ！！

注1 フォトライフからのリンクは、さっきのURLです。
注2 プロフィールページのリンクは、プロフィールページのURLです。（そのまま）
注3 2行目のWidth="300px"の部分で画像の横幅を指定しています。
「Blank」の方はそのまま。それ以外の方は、自分のサイドバーのサイズを調べて入れましょう！

CSS

「デザイン（PC）」「デザインCSS」を選択！

/*****プロフィール*****/
.profile-image{
    margin :0 ;
}
figure {
	position: relative;
	overflow: hidden;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
figcaption p {
	position: absolute;
	left: -100%;
	width: 260px;
	-webkit-transition: .3s;
	transition: .3s;
	color:#C7C7C7; 　/*文字色*/
	top: 75px;
}
figcaption .profile-title {
	top: 30px;
	font-size: 130%;
	border-bottom: #C7C7C7 solid 3px; /*下線の色、太さ*/
}
figure:hover figcaption {
	opacity: 1;
}
figure:hover figcaption p {
	left: 20px;
}
figure:hover figcaption .profile-title {
	-webkit-transition-delay: .2s; /*名前の出るタイミング*/
	transition-delay: .2s;  /*名前の出るタイミング（上と合わせてね）*/

} 
figure:hover figcaption p { 
-webkit-transition-delay: .5s;/*文章の出るタイミング*/
 transition-delay: .5s;/*文章の出るタイミング（上と合わせてね）*/
} 

 これを、コピペで貼ってください！

注 コピペ後に、はてなのデザインCSSだと「-webkit〜」の部分で「！マーク」が出るけど、気にしないで大丈夫です。

簡単なカスタム

これをさらに改造したい方は、僕がコメントを入れた箇所なら、安全にカスタムできます。
文字色と下線の色は、「HTMLカラーコード」
こちらのサイトで簡単に分かります。

名前と文章のタイミングは、数字を大きくすることで時間をズラすことができます。
これでは、名前の方が数字が小さいので、先にニョキッと出て来ます。

 

figure要素の解説（分からない人は飛ばしてください）

HTML5の要素なんですが、簡単に言うと「画像と画像の説明文ですよ！」って言うタグです。ギャラリー系のサイトなんかではよく使われています。
別に使わないでDivでもできますけど、カッコつけて使っています。

 

まとめ

どうです？できました？

はっきり言ってアクセス上がるとか、SEOがー…とか関係ないです。
せっかく人に見られるならカッコよくしたいっていうカスタム。
でもそれがアクセスにつながるかも！

あとは自分の顔のカスタムができれば良いんだけどな。（ちーん）

次回はついに『グローバルメニュー』やります。
こつこつコード書いてるんだけど、これまたカッコイイのが出来そうなんで
頑張っています！
僕コーダーじゃないので、めちゃくちゃ時間かかる。
プロの人、見てくれたらダメなところ言ってくださいねー！

おしまい。

※この記事を書きながら聞いた曲

ABC／GLEE

誰もが知ってるMJのカヴァー。いやカヴァーって言わないか。
ドラマだもんね。
GLEEで使われるってどれも良いし、超うまいし、アレンジも最高だけどさ、
やっぱり一番は楽しそうに見えるところだよね！

僕もこんな学園生活を送りたい。（無理です（大人です））

でも気持ちはこうありたい。（頑張ってください）