TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

ブログ運営と改善

TCD「Be」のプロフィールを「MAG」風にカスタマイズする方法

この記事は約 5 分で読めます。

ユウキです。

TCD「Be」のウィジェットに設置できるオリジナルのプロフィールは、スタイリッシュでお洒落なんですが、紹介文を書き込むには不向きなんですよね。

今回は「Be」のウィジェットに設置するプロフィールを「MAG」風にカスタマイズする方法について、HTML と CSS コードを紹介します。

コピペで簡単にカスタマイズできるのでお試しください。

ウィジェットを追加

カスタマイズ方法はウィジェットに【カスタム HTML】を追加します。

ウィジェットにカスタム HTML を追加する

HTML と CSS を追加

ウィジェットに追加した【カスタム HTML】に次の HTML コードをコピペします。

HTML
<div class="profile-area">
<div><img class="profile-img" src="ここに画像URL" alt="" /></div>
<h4 class="profile-autor">ここに名前</h4>
<div class="profile-nav-area">
<ul class="profile-nav-icon">
	<li class="nav-facebook"><a href="#"></a></li>
	<li class="nav-twitter"><a href="#"></a></li>
	<li class="nav-instagram"><a href="#"></a></li>
	<li class="nav-pinterest"><a href="#"></a></li>
	<li class="nav-youtube"><a href="#"></a></li>
	<li class="nav-mail"><a href="#"></a></li>
	<li class="nav-rss"><a href="#"></a></li>
</ul>
</div>
<p>ここに説明文</p>
<p>ここに説明文</p>
<p style="text-align: center;"><a class="btn" href="#">Portfolio</a></p>
</div>

不要な SNS アイコンは削除して、リンク先には任意の URL に書き換えて使ってください。

次に TCD テーマオプションの【カスタム CSS】に CSS コードをコピペします。

CSS
.textwidget .profile-area{
	margin-top:-1.2em;
	padding:1em;
	background:#fff;
}
.profile-img{
	margin: 0 auto;
	width: 80%;
	height: auto;
	border: solid 4px #333;
	border-radius: 50%;
}
.textwidget .profile-autor{
	padding:1em 0;
	font-size:18px;
	text-align:center;
}
.textwidget p{
	padding:0 0 1.5em;
}
.textwidget .btn{
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .5em;
	top: -2px;
	width: 60%;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	background: #4c4c4c;
	border-radius: 5px;
	box-shadow: 0 3px #000;
}
.textwidget .btn:hover {
	box-shadow: 0 1px #000;
	top: 1px;
}
.profile-nav-area{
	margin-bottom: 1.5em;
}
.profile-nav-icon{
	display: table;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}

.profile-nav-icon li{
	display: table-cell;
	vertical-align:middle;
}
.profile-nav-icon li > a:before{
	display: block;
	font-family: design_plus;
	font-size: 1em;
}
.nav-facebook > a:before{
	content: '\e902';
}
.nav-twitter > a:before{
	content: '\e904';
}
.nav-instagram > a:before{
	content: '\ea92';
}
.nav-pinterest > a:before{
	content: '\e905';
}
.nav-youtube > a:before{
	content: '\ea9e';
}
.nav-mail > a:before{
	content: '\f003';
}
.nav-rss > a:before{
	content: '\e90b';
}

TCD テーマオプションのカスタム CSS にコードを追加

これでウィジェットプロフィールの「MAG」風カスタマイズは完了です。

まとめ

TCD「Be」のデフォルトで使えるウィジェットプロフィールもスタイリッシュですが、より注目して欲しい場合など、意図に合わせて今回のカスタマイズを使うのがおすすめです。

この他にもカスタマイズについて紹介しているので、関連記事から確認してみてください。

それでは、今回はこの辺で。

ありがとうございました!

この記事のタイトルとURLをコピーする

関連記事

  1. TCD は SEO に弱いのか? H タグの使い方と修正方法

    ブログ運営と改善

    TCD は SEO に弱いのか? H タグの使い方と修正方法

    ユウキです。「 TCD のテーマって SEO 対策で不利って聞いた…

  2. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ブログ運営と改善

    WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ユウキです。WordPress のセキュリティ対策ってされています…

  3. 画像が重いなら EWWW Image Optimizer で解決

    ブログ運営と改善

    画像が重くて表示が遅いなら EWWW Image Optimizer で解決

    ユウキです。サイト表示速度が遅い場合、画像が重いことが原因の可能性…

  4. AddQuicktag の設定と表示されない場合の解決方法

    ブログ運営と改善

    AddQuicktag の設定と表示されない場合の解決方法

    ユウキです。今回は AddQuicktag の使い方について解説し…

  5. WordPress の head 内を整理してモバイル表示速度を改善する

    ブログ運営と改善

    WordPress の head 内を整理してモバイル表示速度を改善する

    ユウキです。今回は WordPress でつくった Web サイト…

  6. Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ブログ運営と改善

    Autoptimize で CSS を軽量化してモバイル表示速度を高速化

    ユウキです。今回は、Autoptimize を使ってコードの最適化…

WordPress構築サポート特典付き
特典付きリーダーのためのライティング講座
条件あり:フォローアップコンテンツ提供
特典付きネットビジネス大百科2
管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP