これからの教養を考える としちるのブログ

ブログカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

f:id:toshitiru:20161224042548p:plain

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

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

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

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

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

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

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

http://www.turetiru.com/entry/hatenablog_followbutton/

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

プロフィールボックスの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;
}

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

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

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

それでは~!



ブログ管理人

としちる

日本サッカー協会に入るため筑波大学体育専門学群を目指すも、受験前に父親が逃亡し、やむなく部活を辞める。教材費と受験費を稼ぐためにバイトしながらの宅浪生活を2年間送った後、国際総合学類に入学。タイにて日本語指導と留学も経験。帰国後、「人から始まる学問の見える化」を旗印とした『入門学術メディア Share Study』を創設。運営サイトは4つ、記事執筆数は250以上、イベント運営に携わった数は50以上(17年8月現在)。最近、VALUも動かしてます。

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

Twitter で

「教養」をテーマにフリーランス系アカデミアンとして活動するとしちるのLINE@を始めました。ブログやTwitterではなかなか語れないことやLINE@登録者限定の資料も公開していく予定でっす!つれづれちるままに基本不定期更新で、執筆した記事をまとめて配信。確実に購読して、よりよく生きたい方どうぞ登録してやってくださいーッ!

-ブログカスタマイズ

Copyright© TIRU LABO , 2017 All Rights Reserved.