読者です 読者をやめる 読者になる 読者になる

くうねるだす

信州大学4回生の自然派ブロガー。 おいしいものがすき。おさけも少々。

ブログデザインのカスタマイズでLIGっぽいオシャレなプロフィールを作る

ブログ ブログ-カスタマイズ
シェアする!
【スポンサーリンク】

はてなブログのプロフィールデザインをカスタマイズしてあの「LIG」風のプロフィールを作ってみた!

はてなブログのデフォルトのダサいプロフィールとは今日でお別れして、コピペ+αでサクッとブログをオシャレにしてみてはどうだろうか。
f:id:kuunerudasu:20160605213434p:plain

LIG風オシャレなプロフィール完成図

今回僕がインスパイアされたのはLIGのプロフィール欄。ありがとうございます。
ずっと前からパクろうと参考にしようと思っていてやっと実現できた。完成図はこんな感じになる。

カスタマイズ後のプロフィール(PC)

f:id:kuunerudasu:20160605213434p:plain

カスタマイズ後のプロフィール(スマホ)

f:id:kuunerudasu:20160605214615p:plain

それでは早速どうぞ!

はてなブログのデフォルトのプロフィール(スマホ)を非表示にする

まず、はてなブログのスマホ版にはデフォルトでプロフィールが表示されている。もちろんあってもいいが、今回プロフィールをつけるのであればデフォルトの方は消しておくべきだろう。

コ ードはこちら。これをダッシュボード>デザイン>スマートフォン>ヘッダ>タイトル下 にコピペして保存。

<style type="text/css">
       .hatena-module-title{
               display:none;
        }
       .profile-wrapper{
               display:none;
        }
</style>

Font Awesomeを導入する

今回、プロフィール下にSNSへのリンクをつけているが、このアイコンには「Font Awesome」というwebアイコンと、はてなブログのwebアイコンを併用しているため、以下のコードをダッシュボード>設定>詳細設定>headに要素を追加 にコピペして保存する。

すでにブログのカスタマイズで同じものが入っている場合はスキップしてOK。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

ここまでで下準備は完了だ。

HTMLコードをコピペする

ここからが本題、以下のHTMLコードをコピペする。コードは同じだが、貼り付ける場所がPCとスマホでそれぞれ違うので注意。

<div class="author-box">
<div class="author-heading">&nbsp&nbspこのブログを書いている人</div>

<div class="author-inner">
     
  <div class="author-left"><!--写真の変更-->
   <img class="author-photo" title="f:id:kuunerudasu:20160330211809p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kuunerudasu/20160330/20160330211809.png" alt="minamisouju"></div>

   <div class="author-right">
    <div class="writer-name"><!--名前の変更-->南 蒼樹</div>
   <div class="author-prof">
    <!--プロフ文の変更-->アウトドアもインドアもどっちも好きすぎて困ってます。海と山と部屋に出没する傾向あり。
    <!--詳細プロフィールリンクの変更--><a href="http://www.minamisouju.com/entry/profile">詳しいプロフィール</a></div>
    <div class="author-sns"><!--SNS変更-->
   <!--はてな--><a class="hatena" href="http://blog.hatena.ne.jp/kuunerudasu/kuunerudasu.hatenadiary.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/kuunerudasu/kuunerudasu.hatenadiary.jp/subscribe', '', 'width=500,height=400'); return false;"><i class="blogicon-hatenablog "></i></a>
   <!--ツイッター--><a class="twitter" href="https://twitter.com/intent/follow?screen_name=Sight50Sky" target="_blank"><i class="fa fa-twitter fa-fw"></i></a>
   <!--フェイスブック--><a class="facebook" href="https://www.facebook.com/minamisouju/?notif_t=page_fan#" onclick="window.open('https://www.facebook.com/minamisouju/?notif_t=page_fan#', '', 'width=500,height=400'); return false;"><i class="fa fa-facebook fa-fw"></i></a>
   <!--インスタ--><a class="instagram" href="https://www.instagram.com/sight50sky/?ref=badge" onclick="window.open('https://www.instagram.com/sight50sky/?ref=badge', '', 'width=500,height=400'); return false;"><i class="fa fa-instagram fa-fw"></i></a></div>
   </div>
</div>
<div class="autho-clear"></div>
</div>

貼る場所は
PC→ダッシュボード>デザイン>カスタマイズ>記事>記事下
スマホ→ダッシュボード>デザイン>スマートフォン>記事>記事下

名前・プロフィール文・詳細プロフィールリンク・写真・SNSの変更

上のコードを1文字も変えずに使うと、もれなく僕のプロフィールが表示されることになるはずで、名前・プロフィール文・写真SNS等の差し替えが必要になる。やや手間はかかるが全く難しいことはないのでひとつひとつ着実に進めて欲しい。

名前・プロフィール文・詳細プロフィールリンクの変更

名前とプロフ文は以下の部分を変更。

<div class="writer-name"><!--名前の変更-->南 蒼樹</div>
   <div class="author-prof">
    <!--プロフ文の変更-->アウトドアもインドアもどっちも好きすぎて困ってます。海と山と部屋に出没する傾向あり。

ここでプロフ文の文字数が僕のものをオーバーしすぎるとデザインが崩れるので、CSSをいじれる方以外は大体同じくらいの文字数になるように調整しておいて欲しい。

詳細プロフィールについては、ブログにプロフィール記事をアップしている方はその記事のURLをコピーしてきて、「詳細プロフィールリンクの変更」に続く「http://www.minamisouju.com/entry/profile」と差し替える。

プロフィール記事のない方は以下のコードを削除する。

<a href="http://www.minamisouju.com/entry/profile">詳しいプロフィール</a>

写真の変更

写真はこの部分を差し替える。

title="f:id:kuunerudasu:20160330211809p:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kuunerudasu/20160330/20160330211809.png" alt="minamisouju"

コードは各自の記事の編集画面から持ってくる必要がある。まず「記事を書く」で使いたい写真を選択。
f:id:kuunerudasu:20160605231451p:plain

次に、タブを「HTML編集」に動かして、下図の青くなっている部分(titleから始まる部分)をコピーしてきて差し替え。
f:id:kuunerudasu:20160605232111p:plain

SNSの変更

SNSははてな(読者登録)、ツイッター、フェイスブック、インスタの4つつけているが、無い人はその部分のコードを削除してOK。

はてなの差し替えはこの部分。

href="http://blog.hatena.ne.jp/kuunerudasu/kuunerudasu.hatenadiary.jp/subscribe" 

この「~kuunerudasu/kuunerudasu.hatenadiary.jp~」を「自分のはてなid/自分のブログのURL(http:// を抜いた部分)」に変更。2か所あるので注意!


ツイッターは

href="https://twitter.com/intent/follow?screen_name=Sight50Sky"

の「Sight50Sky」を自分のツイッターアカウント(@は不要)に変更。


フェイスブックは

href="https://www.facebook.com/minamisouju/?notif_t=page_fan#"

の「https:~fan#」の部分を自分のフェイスブック(もしくはブログのフェイスブックページ)のURLと差し替え。2か所あるので注意。


インスタは

href="https://www.instagram.com/sight50sky/?ref=badge"

の「sight50sky」の部分をインスタの自分のアカウントに。これも2か所。

CSSコードのコピペでデザインを整える

あとはCSSでデザインを整えてやれば完成だ。

カスタマイズコードCSS(PC)

.author-box{
	display:block;
    border:solid 1px #000;
}

.author-heading{
    display:block;
    height:50px;
    width:100%;
    background-color:#000;
    color:#fff;
    font-size:16px;
    line-height:50px;
}

.author-inner {
    width:100%;
    height:150px;
	margin:0 auto;

}

.author-left{
    float:left;
	width:25%;
	height:150px;
	margin-left:0px;
}

.author-right{
    float:left;
    width:75%;
    height:150px;
}

.author-photo{
	width:120px;
	height:120px;
	overflow:hidden;
	position:relative;
	border:solid 2px #bdbdbd;
	border-radius:50%;
	margin:15px 15px;
}

.writer-name {
    height:50px;
    line-height:50px;
    font-weight:bold;
    font-size:18px;
    padding-left:10px;
}

.author-prof{
    height:50px;
    font-size:15px;
    padding:0px 10px;
    line-height:1.5;
}

.author-sns{
    height:50px;
}


.author-sns a {
    display: block;
    width:30px;
    height:30px;
    float:left;
    margin:10px;
    border-radius:50%;
    line-height:30px;
    font-size:18px;
    text-align:center;
}

.author-sns .hatena {
    color: #ffffff;
    background: #3D3F44; 
    
}
.author-sns .twitter {
    color: #ffffff;
    background: #00aced; 
    line-height:32px;
}
.author-sns .instagram { 
    color: #ffffff;
    background:#0B4C5F;
    line-height:32px;
}
.author-sns .facebook{
    color:#ffffff;
    background:#305097;
    line-height:33px;
}

.author-sns a:hover{
    opacity: 0.5;
}

.author-clear{
    clear:both;
}

貼る場所は、ダッシュボード>デザイン>カスタマイズ>デザインCSS。

カスタマイズコードCSS(スマホ)

<style type="text/css">

.author-box{
    width:98%;
    height:200px;
	display:block;
    border:solid 1px #000;
}

.author-heading{
    display:block;
    height:40px;
    width:100%;
    background-color:#000;
    color:#fff;
    font-size:16px;
    line-height:40px;
}

.author-inner {
    width:98%;
    height:160px;
	margin:0 auto;
}

.author-left{
    float:left;
	width:24%;
	height:160px;
	text-align:center;
	margin-left:0px;
}

.author-right{
    float:left;
    width:74%;
    height:160px;
}

.author-photo{
	width:72px;
	height:72px;
	overflow:hidden;
	position:relative;
	border:solid 2px #bdbdbd;
	border-radius:50%;
	margin:30px 0px 55px 5px;
}

.writer-name {
    height:40px;
    padding-left:10px;
    line-height:40px;
    font-weight:bold;
    font-size:18px;
}

.author-prof{
    height:80px;
    padding:0px 10px;
    font-size:15px;
    line-height:1.3;
}

.author-sns{
    height:40px;
}


.author-sns a {
    display: block;
    width:30px;
    height:30px;
    float:left;
    margin:5px;
    border-radius:50%;
    line-height:30px;
    font-size:16px;
    text-align:center;
}

.author-sns .hatena {
    color: #ffffff;
    background: #3D3F44;
    margin-left:10px;
}
.author-sns .twitter {
    color: #ffffff;
    background: #00aced; 
    line-height:31px;
}
.author-sns .instagram { 
    color: #ffffff;
    background:#0B4C5F;
    line-height:31px;
}
.author-sns .facebook{
    color:#ffffff;
    background:#305097;
    line-height:31px;
}

.author-sns a:hover{
    opacity: 0.5;
}

.author-clear{
    clear:both;
}
</style>

貼る場所は、ダッシュボード>デザイン>スマートフォン>ヘッダ>タイトル下。これで完成!

まとめ

プロフィール欄のカスタマイズをちゃんとしている人はなかなか見かけないが、ブロガーにとって「自分に興味を持ってもらう」というのは非常に大切なことだ。

例えばあなたが面白い記事を読んだときにはどんな人が書いてるのか気になるだろうし、細部までデザインの行き届いたサイトの情報のほうが信頼できるような気がするだろう。

コピペ+αと言いつつ差し替えがたくさんあるカスタマイズになってしまったが、気に入ったらぜひ使って頂けると嬉しい。それではっ!

written by 南蒼樹(@Sight50Sky).