はてなブログの"サイドバーのプロフィール"のカスタム【ブログカスタムVol.9】

f:id:george-gogo:20160113233702p:plain

今回はプロフィールのカスタムをして、誰よりも自己主張をしましょう!(なぞ)
とにかくプロフィールをカッコよくスクリプトは使わず、CSSだけでカスタムしていくぜ。レッツゴー!

はてなブログのカスタム記事のまとめはこちら

完成図

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

f:id:george-gogo:20160116001219g:plain

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

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

現状の確認

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

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

f:id:george-gogo:20160115205621p:plain

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

まずは画像作り

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

こちらが完成品。

f:id:george-gogo:20160113233344j:plain

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

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

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

アップロードのやり方

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

URLをコピー

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

f:id:george-gogo:20160115214121p:plain

これ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で使われるってどれも良いし、超うまいし、アレンジも最高だけどさ、
やっぱり一番は楽しそうに見えるところだよね!

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

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