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

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

 

ここあです。

 

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

 

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

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

 

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

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

 

ネットビジネスにおいて

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

 

プロフィールを

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

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

 

なので…

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

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

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

 

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

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

と、私は信じています(笑)

 

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

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

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

 

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

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

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

 

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

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

<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公式ページへ)
※ピンク色の文字の部分は全てあなたの情報を入力してください。

 

/*LINE風プロフィール*/
.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);
}

/*横幅が400px以上ある端末でのサイズ*/
@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;
}

/*名前*/
.profile-name{
font-size: 1.2em;
font-weight: bold;
}

/*自己紹介文*/
.profile-font{

font-size: 1.1em;
}

.sidebar-profile p{
padding: 0 2em;
text-align: justify;
}

/*SNSアイコンリスト*/
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;
}

/*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;
}

/*Instagramボタン*/
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;
}

※ピンク色の文字の部分は全てあなたの情報を入力してください。

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

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

 

HTML・CSSコード設置場所

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

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

 

HTMLコードの設置場所

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

 

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

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

ダッシュボードメニュー

 

 

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

カスタムHTMLを追加し

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

ウィジェットメニュー

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

カスタムHTML

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

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のボタンを消したい!

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

 

Facebookのボタンを消したい!

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

 

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

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

 

Youtubeのボタンを消したい!

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

 

Feedluのボタンを消したい!

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

 

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

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

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

 

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

CSSコードを編集

/*プロフィール画像を丸くする*/
.profileimg{
width: 30%;
border-radius: 100px;
}

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

 

プロフィール画像の位置

↓ スマホ版の位置

CSSコードを編集

/*LINE風プロフィール*/
.sidebar-profile {
padding-top:45%;
}

 

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

CSSコードを編集

/*横幅が400px以上ある端末でのサイズ*/
@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コードを編集

/*SNSアイコンリスト*/
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風プロフィールを作成するのは

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

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

 

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

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

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

 

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

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

 

設定でよく分からないことがあれば

気軽にご相談くださいね!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。