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

スポンサードリンク



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

完成図

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

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

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

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

現状の確認

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

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

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

まずは画像作り

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

こちらが完成品。

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

アップロードのやり方

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

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がー…とか関係ないです。
せっかく人に見られるならカッコよくしたいっていうカスタム。
でもそれがアクセスにつながるかも!

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

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

おしまい。

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

東京生まれ東京育ち。フレンチのコックからIT業界に飛び込み、アプリ制作会社を友人と経営してたけど、結婚して会社を抜けて北海道に移住。現在は北海道でサラリーマンをやりながら、野望に向かって切磋琢磨。