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

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

ここあです。

 

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

 

訪問者によっては

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

気してくれる方もいます。

 

なので…

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

丁寧に作りたいものです。

 

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

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

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

 

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

コードをコピーすれば簡単に設置できるので

ぜひ試してみてください^^

 

「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-2x」を「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風プロフィールを作成するのは

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

 

合わせて読みたい!

 

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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