WordPressで目を引くSNS風プロフィールの作り方【コピペOK!】

WordpressやPhotoshopなどのTipsから、楽天・ヤフーショッピングで役立つノウハウなど幅広く更新するゆにメモ

         

Wordpress

WordPressで目を引くSNS風プロフィールの作り方【コピペOK!】

2018年09月23日 6:50　2019年01月13日

WordPressで目を引くSNS風プロフィールの作り方【コピペOK!】

おはようございます！社員Aです👩



WordPressでSNS風のプロフィールを簡単につくれる方法をご紹介します！

コピペOKなので、ブログなどで活用できます。

ぱっと目を引くSNS風プロフィールカード

当ブログでは、サイドバーにプロフィールカードを設置しています。

よく見るSNS風のプロフィールカードで、自己紹介はもちろんのこと、各SNSや仕事依頼への誘導も出来ますので、ブログからさらに仕事につなげたい方にもおすすめです。

コピペOKなので、初心者の方でも簡単に設置ができるようになっています。

 

プロフィールカードの設置方法

プロフィールカードをサイドバーに設置するには、2つのやり方があります。

  1. sidebar.phpを直接編集する
  2. 外観のウィジェットから追加する

WordPressを触りなれている方は①の「sidebar.phpを直接編集する」、あまり触りなれていない方や初心者の方は②の「外観のカスタマイズから追加する」方法がおすすめです。

 

事前準備

まずは、FontAwesomeを読み込んでおきましょう。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

 

①sidebar.phpを直接編集する場合

まずは、sidebar.phpを開き、プロフィールカードを設置したい位置に下記のソースコードを追加します。

<div class="box prof">
    <p class="icatch"><img src="ここに背景画像URLが入ります。" alt="背景画像"></p>
    <p class="circle_icon">
      <img src="ここにプロフィール画像URLが入ります。" alt="プロフィール画像">
    </p>
    <p class="name">ここに名前が入ります。</p>
    <p class="txt">
      ここにプロフィール説明文が入ります。
    </p>
    <!-- ▼SNSボタン（不要なSNSは消してください）▼ -->
    <ul class="icon">
      <li class="facebook"><a href="FacebookのURLが入ります。" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
      <li class="twitter"><a href="TwitterのURLが入ります。" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li class="insta"><a href="InstagramのURLが入ります。" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li class="feedly"><a href="FeedlyのURLが入ります。" target="_blank"><i class="fas fa-rss-square"></i></a></li>
      <li class="of_site"><a href="公式サイトのURLが入ります。" target="_blank"><i class="fas fa-desktop"></i></a></li>
    </ul>
    <!-- ▼ボタン▼ -->
    <p class="irai_btn"><a href="リンク先" target="_blank">ボタン文言が入ります。</a></p>
  </div>

それぞれ下記は自由に書き換えたり削除したりしてください。

  1. 背景画像URL
  2. プロフィール画像URL
  3. 名前
  4. プロフィール説明文
  5. SNSへのリンク（Facebook・Twitter・Instagram・Feedly・公式サイト）
  6. ボタン（外部リンクなど）

つづいて、style.cssへ下記を追加してください。

/* プロフィール */ 
.prof .icatch{
    margin:0;
}
.prof .circle_icon{
    width:100px;
    height:100px;
    border-radius:50%;
    overflow: hidden;
    border:4px solid #fff;
    margin:-50px auto 0 auto;
}
.prof .name{
    padding:0 15px;
    text-align: center;
    font-size:18px;
    font-weight:500;
    /*color:#249bd2;*/
    margin:14px 0;
}
.prof .icon{
    margin:14px 0 0 0;
    text-align: center;
    padding:0 15px;
}
.prof .icon li{
    display: inline-block;
    margin:0 2px;
    width:45px;
    height:45px;
    line-height:45px;
    text-align: center;
    font-size:22px;
    border-radius: 50%;
    background-color: #6cc655;
}
.prof .icon li a{
    display: block;
    color:#fff;
}
.prof .icon li.facebook{
    background:#3b5998;
}
.prof .icon li.twitter{
    background:#55acee;
}
.prof .icon li.of_site{
    background: #f0ad4e;
}
.prof .icon li.insta{
    background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
}
.prof .irai_btn{
    margin:20px auto 0 auto;
}
.prof .irai_btn a{
    display: block;
    width: 270px;
    height: 55px;
    line-height: 50px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4ba9d4;
    border-bottom: solid 5px #2c86af;
    border-radius: 5px;
    margin: 0 auto;
}
.prof .irai_btn a:active{
    margin-top: 6px;
    border-bottom: none;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
}
.prof .irai_btn a:hover {
    background-color: #f9c500;/*ボタン色*/
    border-bottom: solid 6px #f39800; /*下線色*/
}

これで、サイドバーにプロフィールカードが実装できたと思います！

色はデフォルトで青色にしていますが、CSSなどで自由に色を変えちゃってください。



 

②外観のウィジェットから追加する

外観のウィジェットから追加をするには、ダッシュボードから、外観 > ウィジェットへと進みます。

サイドバーにカスタムHTMLを追加し、下記のソースコードを追加します。

<div class="box prof">
    <p class="icatch"><img src="ここに背景画像URLが入ります。" alt="背景画像"></p>
    <p class="circle_icon">
      <img src="ここにプロフィール画像URLが入ります。" alt="プロフィール画像">
    </p>
    <p class="name">ここに名前が入ります。</p>
    <p class="txt">
      ここにプロフィール説明文が入ります。
    </p>
    <!-- ▼SNSボタン（不要なSNSは消してください）▼ -->
    <ul class="icon">
      <li class="facebook"><a href="FacebookのURLが入ります。" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
      <li class="twitter"><a href="TwitterのURLが入ります。" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li class="insta"><a href="InstagramのURLが入ります。" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li class="feedly"><a href="FeedlyのURLが入ります。" target="_blank"><i class="fas fa-rss-square"></i></a></li>
      <li class="of_site"><a href="公式サイトのURLが入ります。" target="_blank"><i class="fas fa-desktop"></i></a></li>
    </ul>
    <!-- ▼ボタン▼ -->
    <p class="irai_btn"><a href="リンク先" target="_blank">ボタン文言が入ります。</a></p>
  </div>

それぞれ下記は自由に書き換えたり削除したりしてください。

画像URLは、メディアに画像をアップロードすることで取得できます。

  1. 背景画像URL
  2. プロフィール画像URL
  3. 名前
  4. プロフィール説明文
  5. SNSへのリンク（Facebook・Twitter・Instagram・Feedly・公式サイト）
  6. ボタン（外部リンクなど）

続けて、外観 >テーマの編集へと進み、「style.css」を開きます。

最終行に、下記のCSSを追加します。

/* プロフィール */ 
.prof .icatch{
    margin:0;
}
.prof .circle_icon{
    width:100px;
    height:100px;
    border-radius:50%;
    overflow: hidden;
    border:4px solid #fff;
    margin:-50px auto 0 auto;
}
.prof .name{
    padding:0 15px;
    text-align: center;
    font-size:18px;
    font-weight:500;
    /*color:#249bd2;*/
    margin:14px 0;
}
.prof .icon{
    margin:14px 0 0 0;
    text-align: center;
    padding:0 15px;
}
.prof .icon li{
    display: inline-block;
    margin:0 2px;
    width:45px;
    height:45px;
    line-height:45px;
    text-align: center;
    font-size:22px;
    border-radius: 50%;
    background-color: #6cc655;
}
.prof .icon li a{
    display: block;
    color:#fff;
}
.prof .icon li.facebook{
    background:#3b5998;
}
.prof .icon li.twitter{
    background:#55acee;
}
.prof .icon li.of_site{
    background: #f0ad4e;
}
.prof .icon li.insta{
    background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000);
}
.prof .irai_btn{
    margin:20px auto 0 auto;
}
.prof .irai_btn a{
    display: block;
    width: 270px;
    height: 55px;
    line-height: 50px;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    background-color: #4ba9d4;
    border-bottom: solid 5px #2c86af;
    border-radius: 5px;
    margin: 0 auto;
}
.prof .irai_btn a:active{
    margin-top: 6px;
    border-bottom: none;
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
}
.prof .irai_btn a:hover {
    background-color: #f9c500;/*ボタン色*/
    border-bottom: solid 6px #f39800; /*下線色*/
}

これで、サイドバーにプロフィールカードが実装できたと思います！

今後プロフィール画像やSNSのリンクを編集したい場合も、先程と同様に、外観 > ウィジェットから変更できます！

 

まとめ

簡単に設置できて、目を引くプロフィールカードが実装できました！

そのまま使っていただいても良いですし、CSSをカスタマイズすることでよりオリジナル感を出せます。

SNSを沢山されている方も、こういうプロフィールカードでまとめた方が訪問者にもわかりやすく伝えることができます。

スマホからもキレイに見えますので、ぜひ試してみてください！

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺

WEB制作に関することなら
株式会社ユニバースへ！

ホームページデザイン、ECサイトデザインなどWEB制作に関して24時間WEBフォームよりお問い合わせを受け付けています！
運用に関するお悩みなどもお気軽にご相談ください！

24時間無料お問い合わせ

WordpressやPhotoshopなどのTipsから、楽天・ヤフーショッピングで役立つノウハウなど幅広く更新するゆにメモ

株式会社ユニバース

運営会社 株式会社ユニバース

福岡・博多のWEB制作会社　株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。

お仕事のご依頼はこちら

求人情報はこちら

スポンサーリンク
よく読まれている記事
歴代人気記事ランキング
スポンサーリンク
新着記事
AIを利用して簡単に画像を生成してみる

AIを利用して簡単に画像を生成してみる

2024年05月29日

【Photoshop】生成した影を合成しておしゃれな画像に！Photoshopの生成塗りつぶし活用術

【Photoshop】生成した影を合成しておしゃれな画像に！Photoshopの生成塗りつぶし活用術

2024年04月22日

最新CSSで実装の幅がアップ！”今”使えるCSS！

最新CSSで実装の幅がアップ！”今”使えるCSS！

2024年03月20日

最近よく聞くノーコードとは？WEB制作での活用方法とメリット・デメリットを紹介

最近よく聞くノーコードとは？WEB制作での活用方法とメリット・デメリットを紹介

2024年02月19日

AIで記事のライティングを行う方法をご紹介

AIで記事のライティングを行う方法をご紹介

2024年01月17日

創作酒房 凜と咲く花さんでの撮影の様子をご紹介します！

創作酒房 凜と咲く花さんでの撮影の様子をご紹介します！

2023年11月01日

検索
カテゴリ
月別アーカイブ
スポンサーリンク