お家で「好き」を仕事にしたい！ぱるのブログ

ぱるろぐ

ブログカスタマイズ

WordPressでサイドバーにLINE風プロフィールを表示させる方法

投稿日：2017年9月30日 更新日：



WordPressでブログを書いているみなさん！サイドバーにプロフィールは設定していますか？

「プラグインは重くなるから嫌だな……」と思ったので、自作のLINE風のプロフィールを作ってみました！

コピペだけで設置できるので、ぜひ参考にしてみてください♪

LINE風プロフィールを表示させるコード

LINE風プロフィール

クリックでHTMLを表示

<div class="sidebar-profile">
<div class="profile-center"><img src="プロフィール画像のURL" width="100" height="100" class="profileimg" /><br/>
<span class="profile-name">名前</span></div>
<p>自己紹介文</p>
<div class="profile-center more"><a href="プロフィールページのURL">詳しいプロフィールを見る</a></div>
<ul class="sns-follow">
<!-- Twitterのボタン -->
<li class="twitter-btn"><a href="https://twitter.com/自分のID(@除く)" target="blank"><i class="fa fa-twitter fa-2x"></i></a></li>
<!-- Facebookのボタン -->
<li class="facebook-btn"><a href="FacebookページのURL" target="blank"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li>
<!-- Instagramのボタン -->
<li class="instagram-btn"><a href="https://www.instagram.com/自分のID/" target="blank"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
<!-- YouTubeのボタン -->
<li class="youtube-btn"><a href="自分のチャンネルのURL" target="blank"><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i></a></li>
<!-- はてなブックマークのボタン -->
<li class="hatena-btn"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=ブログのURL" target="blank"><span class="fa-2x">B!</span></a></li>
<!-- Feedlyのボタン -->
<li class="feed-btn"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2FブログのURL" target="blank"><i class="fa fa-rss fa-2x" aria-hidden="true"></i></a></li>
<!-- ここまで -->
</ul>
</div>

クリックでCSSを表示

/*LINE風プロフィール*/
.sidebar-profile {
width: 90%;
font-size: .9em;
background-image: url("背景画像のURL");
background-repeat: no-repeat;
background-size: 100% auto;
padding: 33% .5em 2em .5em;
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: 33% .5em 2em .5em;
}
}
.profile-center{
text-align: center;
}
/*プロフィール画像を丸くする*/
.profileimg{
width: 40%;
border-radius: 100px;
}
/*名前*/
.profile-name{
font-size: 1.2em;
font-weight: bold;
}
/*「詳しいプロフィールを見る」まわり*/
.profile-center.more{
margin: 1em 1em 2em;
}
.profile-center.more:before{
font-family:"FontAwesome";
content:"\f138";
color: #c4e4f5;
padding-right: 1em;
}
/*SNSアイコンリスト*/
ul.sns-follow {
text-align: center;
}
ul.sns-follow li{
display: inline-block;
height: 45px;
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;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
}
/*Twitterボタン*/
ul.sns-follow li.twitter-btn a{
background: rgba(29,161,242,0.7);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
line-height: 55px;
}
/*Facebookボタン*/
ul.sns-follow li.facebook-btn a{
background: rgba(59,89,153,0.7);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
line-height: 55px;
}
/*Instagramボタン*/
ul.sns-follow li.instagram-btn a{
background: rgba(241,63,121,0.7);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
line-height: 55px;
}
/*YouTubeボタン*/
ul.sns-follow li.youtube-btn a{
background: rgba(205,32,31,0.7);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
line-height: 55px;
}
/*はてなブックマークボタン*/
ul.sns-follow li.hatena-btn a{
background: rgba(0,143,222,0.7);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
padding-top: 5px;
font-weight: bold;
}
/*Feedlyボタン*/
ul.sns-follow li.feed-btn a{
background: rgba(108,198,85,0.7);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
line-height: 55px;
}

コピペする場所

HTMLの場合

  1. WordPreesのメニューから「外観」を選択。
  2. その中の「ヴィジェット」を開く。
  3. 「テキスト」「カスタムHTML」のような自由入力欄があるところにコピペする。

STORKの例

[aside type="warning"]ビジュアル/テキストが変えられる欄があるヴィジェットもありますが、再編集ができない可能性があるので上の画像のようにテキストオンリーのヴィジェットにコピペしてください。[/aside]

CSSの場所

下記の2パターンの方法があります。

  1. 親テーマ/子テーマのスタイルシート (style.css)
  2. 外観→カスタマイズで一番下にある追加CSS

WordPressでCSSを追加する3つの方法と各メリット・デメリット

1.親テーマ/子テーマのスタイルシート (style.css)

WordPreesの管理画面からも編集可能です。

外観→テーマ編集にあります。

2.外観→カスタマイズで一番下にある追加CSS

カスタマイズがすぐに反映されるメリットがあります。

ただ、この後子テーマをアップロードすると消えてしまうといった報告が見られたので、編集後はバックアップを取るようにしてください。

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

プロフィールをコピペで簡単に設定しよう

HTMLの編集

(例)Twitterのボタンを消したい場合

[box class="blue_box"]
<!-- Twitterのボタン -->
<li class="twitter-btn"><a href="https://twitter.com/自分のID(@除く)" target="blank"><i class="fa fa-twitter fa-2x"></i></a></li>
<!-- Facebookのボタン -->[/box]

<!-- Twitterのボタン -->から<!-- Facebookのボタン -->の手前まで削除します。

Feedlyボタンを削除する場合は、<!-- ここまで -->まで削除してください。

CSSの編集

[box class="blue_box"]
/*Twitterボタン*/
ul.sns-follow li.twitter-btn a{
   background: rgba(29,161,242,0.7);
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
   line-height: 55px;
}
/*Facebookボタン*/[/box]

/*Twitterボタン*/から /*Facebookボタン*/の手前まで削除します。

Feedlyボタンを削除する場合は、最後まで削除してください。

カスタマイズ解説

横幅を変更したい場合

[box class="blue_box"]/*LINE風プロフィール*/
.sidebar-profile {
   width: 90%;
}
/*横幅が400px以上ある端末でのサイズ*/
@media only screen and (min-width: 400px){
.sidebar-profile {
   width: 320px;
}
}[/box]

横幅を画面の90%に指定してあります。いっぱいに広げたい場合は100%に、逆に狭くしたい場合は80%など調整してください。

横幅が400px以上あるサイズ端末（主にタブレットやパソコン）でのサイズは320pxに指定してあります。変える場合はここを調整してください。

プロフィール画像の位置

[box class="blue_box"]/*LINE風プロフィール*/
.sidebar-profile {
   padding: 33% .5em 2em .5em;
}
/*横幅が400px以上ある端末でのサイズ*/
@media only screen and (min-width: 400px){
.sidebar-profile {
   padding: 33% .5em 2em .5em;
}
}[/box]

上がスマホで見たとき、下がタブレットやパソコンから見たときのプロフィールの位置です。

上から何%下に表示させるかを指定してあります。

背景画像が大きいときは数字を大きく、逆に背景画像が小さくプロフィール画像が離れているときは数字を小さくしてください。

ちなみに私の背景画像のサイズは350×200です。

「詳しいプロフィールを見る」のアイコンと色を変更する

[box class="blue_box"]/*「詳しいプロフィールを見る」まわり*/
.profile-center.more:before{
   font-family:"FontAwesome";
   content:"\f138";
   color: #c4e4f5;
}[/box]

アイコンの色はカラーコードを変更すればOKです。

アイコンを変更したい場合は、FontAwesomeからお好きなアイコンを選びます。

下記のようにして取得したアルファベット+数字をf138に上書きしてください。

FontAwesomeの使い方

はてなブックマークの表示

はてなブックマークだけはアイコンがないので「B!」という文字であらわしています。

[box class="blue_box"]/*はてなブックマークボタン*/
ul.sns-follow li.hatena-btn a{
   padding-top: 5px;
}[/box]

上から何ピクセル下に表示させるのかを指定しています。

もし下に表示されている場合は、数字を調整してください。

また、下線が表示されてしう場合は、下記コードを追記してください。

[box class="blue_box"]/*下線削除*/
ul.sns-follow li.hatena-btn a{
   text-decoration: none;
}[/box]

アイコンを大きく/小さくしたい場合

HTMLにあるfa-2xをfa-3x、fa-4xと変更すると大きくなります。

また、fa-lgに変更すると一回り小さく、削除するとさらに小さくなります。

※ただしアイコンの表示位置がずれるので、line-height: 55px;（はてなの場合はpadding-top: 5px;の数字を調整してください。

まわりの〇を大きく/小さくしたい場合

[box class="blue_box"]
/*SNSアイコンリスト*/
ul.sns-follow li a {
   width: 45px;
   height: 45px;
}[/box]

数字を大きくすると大きく、小さくすると小さくなります。

※ただしアイコンの表示位置がずれるので、line-height: 55px;（はてなの場合はpadding-top: 5px;の数字を調整してください。

ストーク(STORK)でボタンの周りに枠線が表示されてしまう場合

CSSに下記コードを追加してください。

[box class="blue_box"]
/*ストーク(STORK)用*/
.textwidget ul {
   border: 0px !important;
}[/box]

おわりに：コピペで簡単にLINE風プロフィールが作れる

青文字の箇所を編集してコピペするだけで、簡単にプロフィールがつくれます。

「WorPressでサイドバーにTwitter風プロフィールを表示させる方法」も作りました！こちらも参考にしてみてください♪

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2024 All Rights Reserved.