ブログカスタマイズ

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

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

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

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

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

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

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

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

最近、いろいろやってるとブログのカスタマイズだなんだと聞かれることが増えてきました。実際、今も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;
}

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

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

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

それでは~!


ブログ管理人
としちる

ミスチルと青い鳥が好き。大学生活前半は冊子制作に打ち込むも紆余曲折あって研究者を目指すことに。夢はアカデミーを作ること。研究の狭き道でも生きていくこととやりたいことを両立させるために、サイト運営やライティング、Webデザインといったメディア系スキル・ビジネスのイロハも学んでる。つれづれ“ちる”ままに、時に激しく主にダラダラがモットー。

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

Twitter で

-ブログカスタマイズ

Copyright© TIRU LABO , 2017 AllRights Reserved.