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

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の例

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

CSSの場所

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

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

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

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

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

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

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

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

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

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

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

HTMLの編集

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

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

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

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

CSSの編集

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

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

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

カスタマイズ解説

横幅を変更したい場合

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

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

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

プロフィール画像の位置

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

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

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

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

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

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

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

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

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

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

FontAwesomeの使い方

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

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

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

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

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

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

/*下線削除*/
ul.sns-follow li.hatena-btn a{
   text-decoration: none;
}

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

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

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

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

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

/*SNSアイコンリスト*/
ul.sns-follow li a {
   width: 45px;
   height: 45px;
}

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

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

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

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

/*ストーク(STORK)用*/
.textwidget ul {
   border: 0px !important;
}

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

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

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

スポンサーリンク

為になったらぽちっとシェア!

10 件のコメント

  • コピペさせていただきました!感謝です!コードをクリックで表示切替できたり、よくあるカスタムが載っていたり、ご説明もわかりやすい!デザインもかわいいし、ちょー最高!

  • >とーりすがりさん
    使ってくださり嬉しいです!コードがすごく長いので、表示切り替えさせてみました。わかりやすいと言っていただき、描いてよかったなと思います♪嬉しいコメントありがとうございました!!

  • LINE風プロフィール参考にさせていただきました!ひとつ質問なのですが、SNSボタンを横一列に揃えたいのですが、縦になってしまう場合の改善方法を教えて欲しいのですが、よろしいでしょうか?

  • >でんよしさん
    ありがとうございます!
    もしかしてテキストウィジェットで設定していますか?カスタムHTLMに貼り付ければ解決するかと思います!これで解決できなければまたコメントいただきたいです><

  • いつも参考にさせていただいてます。
    ブログの背景を設定すると、プロフィールが崩れてしまうのですがどうすればいいでしょうか。

  • >ゆーとさん
    コメントありがとうございます!
    それは背景が透けてしまうということでしょうか。
    background-image: の前の行に「background: #FFF;」を追加してみたらどうなりますか?

  • いつも素敵なブログを参考にさせていただいてます^^
    質問なのですが、
    クリックでHTMLを表示、クリックでCSSを表示
    の所をクリックしても表示がされないのですが、
    私だけでしょうか?
    もしよければ、コードを使わせていただきたいです。
    よろしくお願いいたします。

  • >saさん
    ご指摘ありがとうございます!
    修正しましたのでご確認ください。

  • コメントを残す

    メールアドレスが公開されることはありません。