WPテーマ「STORK」カスタマイズ！LINE風プロフィールの作り方！

ここあです。

あなたはプロフィールをブログに設置していますか？

サイト訪問者がいろいろな記事を読んで

コンテンツ内容に共感してくれると…

「この記事ってどんな人が書いてるんだろう？」って

気になる方がたくさんいます。

ネットビジネスにおいて

プロフィールの作成は実は非常に重要なんです。

プロフィールを

しっかりと作り込むか作り込まないかで

サイトからの収益がかなり大きく変わります。

なので…

「プロフィールは適当に作ってるな…」と思う場合は

できるだけ早くプロフィールを作り込んでくださいね。

ブログの顔ともいうべきプロフィールは

時間をかけてでも丁寧に作らなければなりません。

もちろん、プロフィールの見た目だけでなく

プロフィール文もしかりです。

そこで今回は、サイト訪問者の方に

ちょっと親近感をもってもらえそうな

プロフィールの見た目をカスタマイズする方法。

LINE風プロフィールの作り方をご紹介します。

日本のLINEアクティブユーザーは現在7,300万人以上。

つまり、それだけ普段からLINEを見ている人が多いんですね。

だから、ブログのプロフィールがLINE風になっていると

サイト訪問者の方には多少なりとも親近感を持ってもらえるはず…

と、私は信じています（笑）

一見作るのが難しそうなLINE風プロフィールですが

HTML、CSSのそれぞれのコードをコピーすれば

簡単に設置できるのでぜひ気軽に試してみてください＾＾

「LINE風」プロフィールを作るためのコード

LINE風プロフィールを設置するには

2種類のコードが必要です。

以下のコードを所定の場所に設置しましょう。

コードの設置場所は後述します。

HTMLコード

<div class="sidebar-profile">
<div class="profile-center"><img src="（プロフィール画像のURL）" alt="画像の代替テキスト" width="100" height="100" class="profileimg" />
<span class="profile-name">（ニックネーム）</span></div><p class="profile-font">（自己紹介文）</p>
［btn class="rich_blue"］<a href="（プロフィールページのURL）">詳しいプロフィールを見る</a>［/btn］
<ul class="sns-follow"><li class="twitter-btn"><a href="https://twitter.com/（TwitterID:@除く）" target="blank"><i class="fa fa-twitter fa-2x">&nbsp;</i></a></li><li class="facebook-btn"><a href="（FacebookページのURL）" target="blank"><i class="fa fa-facebook fa-2x" aria-hidden="true">&nbsp;</i></a></li><li class="instagram-btn"><a href="https://www.instagram.com/（自分のID）/" target="blank"><i class="fa fa-instagram fa-2x" aria-hidden="true">&nbsp;</i></a></li><li class="youtube-btn"><a href="（自分のチャンネルのURL）" target="blank"><i class="fa fa-youtube-play fa-2x" aria-hidden="true">&nbsp;</i></a></li><li class="feed-btn"><a href="（feedlyのブログURL）" target="blank"><i class="fa fa-rss fa-2x" aria-hidden="true">&nbsp;</i></a></li>
</ul>
</div>

クリックでCSSコードを表示

.sidebar-profile {
width: 90%;
font-size: .9em;
background-image: url("背景画像のURL");
background-repeat: no-repeat;
background-size: 100% auto;
padding-top:45%;
padding-bottom: 20px;
margin: 1em 1em 1em 1em;
box-shadow: 0 2px 5px rgba(0,0,0,.13);
}
@media only screen and (min-width: 400px){
.sidebar-profile {
width: 320px;
padding-top:45%;
}
}.profile-center{
text-align: center;
}
.profileimg{
width: 30%;
border: solid 4px #fff;
border-radius: 100px;
background-color: #fff;
}
.profile-name{
font-size: 1.2em;
font-weight: bold;
}
.profile-font{
font-size: 1.1em;
}.sidebar-profile p{
padding: 0 2em;
text-align: justify;
}
ul.sns-follow {
text-align: center;
}

ul.sns-follow li{
display: inline-block;
height: 45px;
margin:0 2px;
vertical-align: middle !important;
margin-bottom: 0;
}

ul.sns-follow li a {
display: block;
width: 45px;
height: 45px;
border-radius: 50px;
color: #FFFFFF;
}

ul.sns-follow a:hover {
opacity: 0.6;
color: #FFFFFF;
}

ul.sns-follow li.twitter-btn a{
background: rgba(29,161,242,0.7);
line-height: 55px;
}

ul.sns-follow li.facebook-btn a{
background: rgba(59,89,153,0.7);
line-height: 55px;
}

ul.sns-follow li.instagram-btn a{
background: rgba(241,63,121,0.7);
line-height: 55px;
}

ul.sns-follow li.youtube-btn a{
background: rgba(205,32,31,0.7);
line-height: 55px;
}

ul.sns-follow li.feed-btn a{
background: rgba(108,198,85,0.7);
line-height: 55px;
}

上記2種類のコードがLINE風プロフィールを

設置するためのコードになります。

HTML・CSSコード設置場所

上記、HTMLコードとCSSコードは

以下の場所にコピペして設置してください。

HTMLコードの設置場所

まず最初にHTMLコードの設置の仕方を説明します。

ダッシュボードメニューから

外観 → ウィジェットをクリック。

次に、ウィジェットメニューから

カスタムHTMLを追加し

HTMLコードを全てコピペします。

テキストウィジェットでもOKですが、こちらの方が分かりやすいです。

HTMLコードを全てコピペします。

HTMLコードがコピーできたら

［btn class="rich_blue"］<a href="（プロフィールページのURL）">詳しいプロフィールを見る</a>［/btn］の部分の

［　］（全角かっこ）を半角の［　］に打ち変えてください。

打ち変える場所は［btn class="rich_blue"］の前後

［/btn］の前後の4カ所です。

ちなみに"rich_blue"の部分を

• "rich_yellow"や"rich_pink"
• "rich_orange"、"rich_green"

にするとボタンの色を変更できます。

カスタムHTMLの場所は、メインサイドバー

位置はお好みの位置に設定し、最後に

ウィジェットを保存します。

ウィジェットはPC：メインサイドバーに設定。順番はお好みで

最後にウィジェットを保存をクリックします。

CSSコードの設置場所

続いて、CSSコードの設置場所です。

CSSコードはダッシュボードメニューから

外観 → カスタマイズと進み

追加CSSの画面に移動します。

外観 → テーマの編集をクリックし

スタイルシートにコピーしてもOKですが…

追加CSSの方で作業する方が

ライブビューで編集できるので作業がやりやすいです。

CSSコードがコピペできたら

あとはあなたご自身で編集作業を進めてください。

ちなみに…

画像のURLはダッシュボードメニューから

メディア → ライブラリと画像一覧を表示させ

挿入したい画像をクリックすると表示される

以下、赤枠のURLをコピーして追加してください。

画像挿入のURL以外は特にややこしい部分は

ないと思います。

使わないボタンを消す方法

SNSフォローボタンが5つ表示されます。

上記コードが全て設定できたら

左のサンプルのような画面表示になります。
※画像、テキストはあなたが追加したものになります。

 

しかし、全てのSNSアカウントがない場合は

「不要なフォローボタンを消したい」

と思いますよね。

 

ということで、不要なSNSフォローボタンは

削除してしまいましょう。

HTMLコードを削除する場合

HTMLコードで不要な部分を削除しやすいように

全て記載しておきます。

以下、記載しているコードを全て削除してくださいね。

Twitterのボタンを消したい！

<li class="twitter-btn"><a href="https://twitter.com/（TwitterID:@除く）"
target="blank"><i class="fa fa-twitter fa-2x">&nbsp;</i></a></li>

Facebookのボタンを消したい！

<li class="facebook-btn"><a href="（FacebookページのURL）" target="blank">
<i class="fa fa-facebook fa-2x" aria-hidden="true">&nbsp;</i></a></li>

インスタグラムのボタンを消したい！

<li class="instagram-btn"><a href="https://www.instagram.com/（自分のID）/" target="blank">
<i class="fa fa-instagram fa-2x" aria-hidden="true">&nbsp;</i></a></li>

Youtubeのボタンを消したい！

<li class="youtube-btn"><a href="（自分のチャンネルのURL）" target="blank">
<i class="fa fa-youtube-play fa-2x" aria-hidden="true">&nbsp;</i></a></li>

Feedluのボタンを消したい！

<li class="feed-btn"><a href="（feedlyのブログURL）" target="blank">
<i class="fa fa-rss fa-2x" aria-hidden="true">&nbsp;</i></a></li>

詳しいプロフィールを見るのボタンを消したい！

［btn class="rich_blue"］<a href="（プロフィールページのURL）">詳しいプロフィールを見る</a>［/btn］

CSSコードを削除する場合

CSSコードも不要な部分を削除しやすいように全て記載しておきます。

こちらも、記載のコードをごっそり削除してください。

Twitterのボタンを消したい！


ul.sns-follow li.twitter-btn a{
background: rgba(29,161,242,0.7);
line-height: 55px;
}

Facebookのボタンを消したい！


ul.sns-follow li.facebook-btn a{
background: rgba(59,89,153,0.7);
line-height: 55px;
}

インスタグラムのボタンを消したい！


ul.sns-follow li.instagram-btn a{
background: rgba(241,63,121,0.7);
line-height: 55px;
}

Youtubeのボタンを消したい！


ul.sns-follow li.youtube-btn a{
background: rgba(205,32,31,0.7);
line-height: 55px;
}

Feedlyのボタンを消したい！


ul.sns-follow li.feed-btn a{
background: rgba(108,198,85,0.7);
line-height: 55px;
}

「LINE風プロフィール」カスタマイズの仕方

ここからは微調整したい時の調整方法です。

微調整する場合は、以下参考にしてください。

プロフィール画像とニックネームが横並びになる時の対処法

コードを追加して設定しようとしたものの

丸いプロフィール画像とニックネームが

なぜか横並びになるという場合があります。

そんな時の対処法も書いておきますので

「ん？」となった方は参考にしてください＾＾；

丸いプロフィール画像とニックネームが

横並びになる場合というのは

単純に追加したHTMLコードが

繋がっているから起こる現象です。

なので、丸いプロフィール画像の下に

ニックネームを配置したい場合は以下のコード

<span class="profile-name">（ニックネーム）</span>

ニックネーム部分の<span class="profile-name">の前で

改行を入れてください。

念のためHTMLコードにも改行を入れておきますので

上手くいかない場合はぜひ一度試してみてください。

それでいけるハズです。（2019年2月10日追記）

プロフィール画像の大きさ

※上記、30%の数値を変えることでサイズ調整できます。
数字を大きくすると画像が大きくなります。

プロフィール画像の背景色を変える

プロフィール画像の背景色はプロフィール画像が

切り抜きの状態になっている場合にのみ変更できます。

※切り抜き出ない場合は背景色が表示されないため。

※上記、カラーコード#fffを変更することで
プロフィール画像の背景色を変えることができます。

プロフィール画像の位置

↓ スマホ版の位置

↓ パソコン・タブレット版の位置

padding-top:45%;というコードで

両方ともプロフィールの一番上から何%下げるか

という設定にしてあります。

画像サイズを見ながら程よい位置に調整してください。

数字が大きくなるほど離れます。

文字の大きさ

↓ ニックネームの大きさを変える場合

ニックネームの大きさは通常のフォントサイズ

1.2倍の大きさにしています。

フォントサイズを1.2の数字の部分で調整してください。
※「em」とは1文字分というサイズの単位です。

↓ 自己紹介文の大きさを変える場合

紹介文のフォントサイズは通常の1.1倍の大きさです。

※こちらも1.1の部分で調整してください。

SNSのアイコンサイズを調整する

アイコンのサイズを大きくする場合は…

HTMLコードの各アイコンコード

fa-2xの部分で調整してください。

fa-2xの部分を…

• fa-3xにすると3倍
• fa-4xにすると4倍

にすることができます。

アイコンを大きくした場合は

背景に配置している円のオブジェクトと位置がズレるので

line-height: 55px;の部分で高さを調整してください。
※各アイコンで調整が必要になります。

SNSアイコン背景の丸いオブジェクトを調整する場合

こちらもアイコンサイズをさわらなければ

特に問題ありませんが、アイコンを調整した場合は

アイコンサイズに応じて調整してください。

※上記、45pxの数字で調整してください。
オブジェクトは円なので、数字は揃えましょう。

SNSアイコンの間を調整する場合

各SNSアイコンの間を調整したい場合は

※上記、2pxの数字で調整してください。
各オブジェクトに対し左右が広がるので
あまり大きな数字にはしないでください。

LINE風プロフィールの作り方まとめ

LINE風プロフィールを作成するのは

少しややこしいかもしれませんが

各コードをコピーしながら調整すれば

全然あなたにもできますので

「他のブロガーと差別化したい！」という場合は

がんばってチャレンジしてみてください。

コピーするだけである程度ちゃんと出来るようにしてあります。

あとはあなたの個別設定次第です＾＾；

最後までお読みいただきありがとうございました！