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>
[設置上の注意]
※(  )のピンク色の文字部分はあなたの手で書き換えてください。
※プロフィール画像の写真は正方形が望ましいです。
[btn class="rich_blue"][/btn]の[ ]は半角[ ]に打ち変えてください。
表示上の都合により全角[ ]にしてあります。
ボタンの色はお好みで変更してください。(STORK公式ページへ)
※ピンク色の文字の部分は全てあなたの情報を入力してください。

 

クリックで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ですが、こちらの方が分かりやすいです。
カスタムHTMLHTMLコードを全てコピペします。

 

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の画面に移動します。

dropshadow

 

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

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

 

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

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

 

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

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

 

ちなみに…

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

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

 

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

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

メディアライブラリ

 

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

ないと思います。

 

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

LINE風プロフィール
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日追記)

 

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

CSSコードを編集


.profileimg{
width: 30%;
border-radius: 100px;
}

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

 

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

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

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

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

 

CSSコードを編集


.profileimg{
width: 30%;
border-radius: 100px;
background-color: #fff;

}

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

 

プロフィール画像の位置

↓ スマホ版の位置

CSSコードを編集


.sidebar-profile {
padding-top:45%;
}

 

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

CSSコードを編集


@media only screen and (min-width: 400px){
.sidebar-profile {
padding-top:45%;

}
}

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

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

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

 

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

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

 

文字の大きさ

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

CSSコードを編集


.profile-name{
font-size: 1.2em;
font-weight: bold;
}

 

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

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

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

 

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

CSSコードを編集


.profile-font{

font-size: 1.1em;
}

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

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

 

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

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

 

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

HTMLコードを編集

<i class="fa fa-twitter fa-2x">

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

 

fa-2xの部分を…

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

にすることができます。

 

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

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

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

 

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

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

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

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

 

CSSコードを編集


ul.sns-follow li a {
width: 45px;
height: 45px;
}

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

 

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

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

 

CSSコードを編集

ul.sns-follow li{</code
margin:0 2px;
}

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

 

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

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

 

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

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

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

 

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

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

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

 

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

あとはあなたの個別設定次第です^^;

 

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

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG