Cocoon instabio(インスタバイオ）のようなプロフカードを作る

Cocoon
2021.12.09
この記事は約13分で読めます。

WorldPressでlinktreeのようなプロフカード作りたい

プロフカード
プロフカード

ネット上の名刺のようなプロフィールカード，今は外部サイトで簡単にそういうものが作れます、便利ですよね！
ワタシも複数のリンクを一つのURLにできるinstabio(インスタバイオ）を利用していました。

instabioはインスタグラムのプロフにURLを貼れるのですがツイッターではなぜがリンクぎれ状態になったり，内容を修正する際にログインて編集する作業も面倒になってきました。
それにURLは外部サイトだけに好きなアドレスにするには有料なります。

ライフワークとして必要だけど，デザインも無料ではイマイチ。

ということで，手持ちのWorldPressで instabio(インスタバイオ） やLinktreeのようなSNSプロフィールリンクを作ってみようと思い3日ほど調べてみました。
素人なりに考え調べてみた結果、１日ほどで完成しました。

実際のプロフカードを見る
着物リメイク作家 QOOPYのプロフカード・着物リメイク作家福岡市
worldPressをカスタマイズして作った着物リメイク作家QOOPYのプロフカードです。
kimonoremake.net

参考したサイト
プロフィールカードを参考にしました

コピペで簡単実装できるプロフィールカード！【HTML/CSS】 - OBL LIFE オブリライフ
ブログを書いていると、どんな人が書いてるかを知ってもらうのは重要な要素だと思います。素性の知らない人が書いているより、簡単なプロフィールがあると記事もより楽しんでもらえるはずです。 シンプルでわかりやすいプロフィールカー
obl-life.com

固定ページを白紙にするため参考にしました

WPとCocoonでLP（ランディングページ）を作ってみました
モノづくり会社においてもSNSマーケティングに取り組んでいる会社もあるようです。Webマーケティングの１つにLP（ランディングページ）というものがあり、ネット上のチラシらしいのでKindle本を例にLPを作ってみました。
pdcatovision.com

ではさっそく作っていきます。

WorldPressの固定ページを白紙にする

まずは白紙するための作業です。

  • 新規に固定ページを作成
  • 読む時間を表示しないにチェックいれる
  • 目次を表示しないにチェック入れる
  • 広告を除外する（cocoon設定　広告除外記事固定ページのIDを入力）
  • 1カラムにする（サイドバーを消す）

あとは真っ白になるようにCSSでコーティングします。

※実際にこのサイトでやってみました！
固定ページのカスタムCSSに書き込んでいきます。
（１ページのみ適用）

/*———————————
固定ページのヘッダーをエリアを非表示にする
——————————–*/
#header{display:none;}　
#notice-area {display: none;}　
.breadcrumb {display: none;}　

/*———————————
固定ページのタイトルを非表示にする
——————————–*/
.entry-title {display:none;}

/*———————————
固定ページの日付を非表示にする
——————————–*/
.post－6303 .date-tags {display: none;}

/*———————————
メニューバーを非表示にする
——————————–*/
#navi{display:none;}

/*———————————
投稿者の表示を非表示にする
——————————–*/
.article-footer{display: none;}

/*———————————
フッターを非表示にする
——————————–*/
.page-id-6303 .footer{ display:none;}

/*———————————
モバイルメニューの非表示
——————————–*/
.mobile-header-menu-buttons {display: none;}

これで、白紙になります。プレビューでチェックしましょう。
ワタシの場合はWebサイトの一部のみを白紙したかったので、
通知エリアとパンくずリストも display: none; で消しました。
もし、消しきれないか箇所があればclass名を調べて display: none; で消しましょう。

固定ページのidはプレビューで表示される番号です。そこを書き換えてください。

白紙にする前
白紙にする前
白紙にした後
白紙にした後

このサイトの固定ページカスタムCSSに書き込むと上記のようになりました！

プロフカードをCSSとhtmlでコーティングする

さて、いよいよブログカードのコーティングしていきます。
背景もグラデーション付けてみたかったので、好きな色を選んでコーティングしました。

ワタシの場合は上から下へのグラデーションです。

body 
{ 
background: -moz-linear-gradient(top, #f49999, #FFF);
background: -webkit-linear-gradient(top, #f49999, #FFF); 
background: linear-gradient(to bottom, #f49999, #FFF); 
}
.main 
{ 
background: -moz-linear-gradient(top, #f49999, #FFF);   
background: -webkit-linear-gradient(top, #f49999, #FFF);   
background: linear-gradient(to bottom,#f49999, #FFF); 
}

プロフカードのCSS

.profile-card1　
{  
width: 100%; max-width:400px; 
position: relative;
background: #555555; /*背景の色*/
margin-right: auto;
margin-left: auto; 
box-shadow: 0px 1px 3px rgba(0,0,0,.18); 
overflow: hidden;
}

.profile-card1:before
{ 
width:300%; 
height:255px; 
content:""; 
transform:skew(15deg,10deg); 
background: #aeab92; /*斜め背景の色*/ 
position:  absolute; 
top:-15%; left:-10%; z-index: 0;
}

.profile-card1:after
{
width:200%; 
height:230px; 
content:""; 
transform:skew(15deg,10deg); 
background: #aeab92; /*斜め背景の色*/ 
position:  absolute; 
bottom:-15%; 
left:-10%; 
z-index: 0;
}

.profile-card1__inner
{ 
position: relative;  
z-index: 1;
}

.profile1-thumb　
{  
overflow: hidden;  
width: 110px;  
height: 110px;  
border: #fff 3px solid;  
border-radius: 55px;  
margin-left: auto;  
margin-right: auto;  
margin-top: 20px;  
background: #fff;
}

.profile1-thumb img　
{  
display: block;   
width: 100%;   
height: auto;
}

.profile1-content　
{ 
margin: 0 0 49px; 
 padding: 0 15px;
}

.profile1-content li 
{
list-style: none;  
text-align: center ; 
border : solid 1px #ccc ;
margin: 30px; padding: 10px;
}

.profile1-content span
{ 
display: block;
}

.profile1-name
{  
margin:10px 0  0 0; 
font-size: 18px;  
color: #fff; 
font-weight: bold;  
text-align: center;
}

.profile1-intro
{  
font-size: 16px; color: #fff; 
}

.profile1-sns　
{ 
text-align: center ;color: #fff; 
}

プロフカードのHTML　
投稿をコードエディターモードに変えてhtmlを入れていきます

<div class="profile-card1">

<div class="profile-card1__inner">

<div class="profile1-thumb">

    <img src="/wp-content/uploads/2021/12/VfBlR1Tz_400x400.jpg" alt="アイコン">

</div>
<div class="profile1-content">

        <span class="profile1-name">着物リメイク作家QOOPY</span>
<span class="profile1-intro">

My work remakes a kimono and an obi of the Japanese traditional culture, and there is it.

If you are interested, please view 【Website】QOOPY'S Note.

日本伝統文化の着物と帯をリメイクしています。
興味のある方は <i class="fas fa-home"></i> Website の QOOPY'SNoteをご覧ください。

 	<li><a href="https://kimonoremake.net/" target="_blank" rel="noopener"><i class="fas fa-home"></i> Website</a></li>

 	<li><a href="https://shop.kimonoremake.net/" target="_blank" rel="noopener"><i class="fas fa-shopping-cart"></i> Shop</a></li>

 	<li><a href="https://web.kimonoremake.net/" target="_blank" rel="noopener"><i class="fas fa-laptop-code"></i> WebDiary</a></li>

 	<li><a href="https://katami.kimonoremake.net/" target="_blank" rel="noopener"><i class="fas fa-heart"></i> Katami Kimonoremake</a></li>

 	<li><a href="mailto:メールアドレス?subject=着物リメイク作家QOOPYへのお問合せ&amp;body=お問合せ区分やお名前ご連絡先ををご記入ください（オーダー制作・教室・見積もりなど・その他）"><i class="far fa-envelope"></i> Contact</a></li>
</span></div>

<div class="profile1-sns">

/*SNSボタンのhtmlを入れます（次の項目へ）*/


</div>
</div>
</div>
</div>
ブログカードをCSSとhtmlでコーティング
SNSボタンを設置する

SNSボタンは既存のプロフィールから持ってきます。
まずはhtml

/*<div class="profile1-sns">*/

<div class="author-box">

<div class="author-follows">

<!-- SNSボタン -->

<div class="sns-follow bc-brand-color fbc-show sf-profile">

<div class="sns-follow-buttons sns-buttons">

<a rel="nofollow noopener" target="_blank" href="https://twitter.com/QOOPY777" class="follow-button twitter-button twitter-follow-button-sq" title="Twitterをフォロー"><span class="icon-twitter-logo"></span></a>

<a rel="nofollow noopener" target="_blank" href="https://www.instagram.com/kimonoremake.qoopy" class="follow-button instagram-button instagram-follow-button-sq" title="Instagramをフォロー"><span class="icon-instagram-logo"></span></a>

<a rel="nofollow noopener" target="_blank" href="https://lin.ee/Vn4AzJA" class="follow-button line-button line-follow-button-sq" title="LINE@をフォロー"><span class="icon-line-logo"></span></a>

<a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/channel/UCE2FHf7R9PDdkR4BUr0_StA" class="follow-button youtube-button youtube-follow-button-sq" title="YouTubeをフォロー"><span class="icon-youtube-logo"></span></a>

<a rel="nofollow noopener" target="_blank" href="https://www.linkedin.com/in/qoopy-kimonoremake-2817051b8/" class="follow-button linkedin-button linkedin-follow-button-sq" title="LinkedInをフォロー"><span class="icon-linkedin-logo"></span></a>

/*</div>*/

</div>
</div>
</div>
</div>
プロフィールカードの完成
プロフィールカードの完成


このサイトでカスタマイズして追加したCSSはこちら

.no-sidebar 
.content 
.main {  border: none;}

.author-box  {padding: 0; border: none;}

このサイトはサイドバーがあるので、線がでてしまう
また既存のプロフィールボックスの線がでてしまうので
それらを border: none; で追加しました。
既存のSNSボタンになります。
ワタシの場合はボタンの装飾しています。
好きなボタンにカスタマイズしても楽しいですね！

出来上がったサンプルプロフカードはコチラ

QOOPY
QOOPY

コードをコピペした際に上記のようにならないときは、；などの半角記号を確認してね！
もしくは念のためクラス名も確認してください。

最後に

いかがでしょうか？
手持ちのWordPressを使ってWebサイトの一部をプロフカードにカスタマイズする方法でした。
そんなに難しくなく instabio(インスタバイオ） やLinktreeのようなプロフカードができました。
さっそくＱＲコードを作って名刺や年賀状に張り付けたいと思います。

みなさまのお役に立てれば幸いです。

コメント

タイトルとURLをコピーしました