自立して稼いで生活する人社系研究者を目指す学生のブログ

TIRU LABO

ブログカスタマイズ

【コピペでおけ!】記事下にて読者にアピールするのに必須のプロフィールボックスを設置する方法!

投稿日:2016年12月24日 更新日:

メリー・クリスマスイブ!

ということで、ちょっとしたプレゼントをお届け!

コピペで簡単にできるプロフィールボックスです!

スポンサードリンク

プロフィールボックスの役割

ども!息絶えるまで恥を撒き散らしながらかけてるとしちる@ture_tiru)です。

退き時なんて言うな素人!Mr.Children『ランニングハイ』を勝手に語る

最近、いろいろやってるとブログのカスタマイズだなんだと聞かれることが増えてきました。実際、今も3件(ヘッダー画像、Webサイト制作2件)を請け負ってます。

そうなってくると、ちゃんと「僕はこんなことができますぞ!」なんてアピールした方が良さそうだと思ってきました。

理由はどうであれ、ブログを運営しながら自分のブランディングをしていきたいと思う方も多いのではないでしょうか?

そこで、今回は自分がカスタマイズしたプロフィールボックスをコピペで簡単に作れるように紹介してみようと思った次第です。

現在(2016/12/24)の完成図はこんな感じ!

f:id:toshitiru:20161224042548p:plain

悪くはないのではないでしょうか!

プロフィールボックスを作る上で用意するもの

やはりきちんとプロフィールボックスを作るなら、目立つ写真なりイラストなり、アイコンがあるといいですよね!

よくココナラで依頼している人もいます。

それと、プロフィールボックスにはやはり「詳しいプロフィール記事」「おすすめの記事」なんかも最低限あった方がいいでしょう。もちろん、なくてもいいですし自分がアピールしたい記事を入れればいいので必ずではないですが、まず初めにあるといいのはそれら二つの記事ではないでしょうか?

それと、後述しますがボックス下にSNSといったフォローボタンを置いておくといいですね!今回、試しに自分で作ってみたのですがちょっと微妙だなと思うのでまたトライします。

このフォローボタンの設置方法は下記の記事にて!

【はてなブログ用】コピペで出来ちゃうなめらかな動きのあるフォローボタンの作り方

それでは、コピペ用のコードです。

プロフィールボックスのHTML

※ 抜けてた<ul>タグの挿入とセンタータグをdivで囲む方式にしました!

<div class="profile-box">
<div class="profile-content" style="text-align:center;><div class="profile-img"><img src="画像のURL" alt="画像の名前" width="210" height="140"></div>
<div style="text-align:center;><strong>ニックネーム</strong></div>
<p>紹介文</p><ul>
<li>a style="line-height: 1.5;" href="記事のURL">アピールしたい記事1</a></span></li>
<li><span style="text-decoration: underline;"><a style="line-height: 1.5;" href="記事のURL">アピールしたい記事2</a></span></li></ul>

諸注意

  • 画像のサイズは写真に合わせてお好きなサイズをお選びください。
  • リンクに下線をしていますが、これは当ブログのテーマでリンクに下線が貼られないためです。
  • 初期は<center>で囲みましたが、ジョンさん(id:ddss-msv)の指摘によりHTML5の最新の方式に合わせた用に変更しました。
  • 変更があればこちらに追記していきます。

プロフィールボックスのCSS

/*プロフィールボックス*/
.profile-box {
border: 2px solid #2196F3; /*枠の色*/
border-radius: 4px;
margin: 2em 0;
padding: 2em 2em 0;
position: relative;
}
.profile-box::before {
background-color: #fff;
color: #2196F3; /*ボックス名の色*/
content: "ブログ運営者のプロフィール"; /*ボックス左上の文字*/
font-weight: bold; /*フォントの太さ*/
font-size: 140%; /*フォントの大きさ*/
left: 1.2em;
padding: 0 .5em;
position: absolute;
top: -1em;
}
スポンサードリンク

プロフィールボックスのみならこれでおけ!

これを記事下のところのお好きなところにコピペすれば、プロフィールボックスを設けることができます!

ブログに慣れてきたら設けてみましょう。

それでは~!

ブログ管理人

としちる

知識と知識が繋がった瞬間がたまらなく好きな凝り性。冊子制作で学んだ取材・記事執筆やデザイン制作のスキルをWeb上にて、学問的なものを発信することに役立てられればと思い活動している。

この記事が気に入ったら
いいね!しよう

Twitter で

-ブログカスタマイズ

Copyright© TIRU LABO , 2017 AllRights Reserved.