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

ぱるろぐ

ブログカスタマイズ

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

投稿日:2018年2月22日 更新日:



WordPressでブログを運営していると、サイドバーに自分のプロフィールが欲しいな〜って思いませんか?

私はつい最近まで「WordPressでサイドバーにLINE風プロフィールを表示させる方法」という記事で紹介しているプロフィールを設定していました。

しかし最近もっとシンプルなものに変えたくなったので、今回はTwitter風のプロフィールの作り方をご紹介していきます。

コピペだけで簡単に設定できるので、ぜひ試してみてください♪

\趣味ブログをはじめるなら/

クロネのブログ講座

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

Twitter風プロフィール

HTMLはこちら↓

<div class="sidebar-profile-tw">
<div><img class="profileimg" src="プロフィール画像のURL" width="50" height="50" />
<span class="profile-name">名前</span><br />
<a class="tw-link" href="https://twitter.com/TwitterID(@除く)" target="_blank" rel="noopener">@TwitterID</a><br />
自己紹介文<br />
<br />
<i class="fa fa-link" aria-hidden="true"></i> <a href="プロフィールページのURL">詳しいプロフィール</a></div>
</div>

CSSはこちら↓

/* プロフィールの枠・背景画像 */
.sidebar-profile-tw {
width: 90%;
border: 1px solid #666;
background-image: url(背景画像のURL※横方向に繰り返し表示されます);
background-repeat: repeat no-repeat;
background-size: auto 25%;
padding: 20px;
margin: 10px;
}
/* プロフィール画像 */
.sidebar-profile-tw .profileimg {
width: 30%;
border-radius: 200px;
border: 4px solid #FFF;
margin: 0px;
}
/* 名前 */
.profile-name {
font-size: 120%;
font-weight: bold;
}
/* リンクの下線を消す */
.sidebar-profile-tw a{
text-decoration: none;
}
/* Twitterリンクの文字色・サイズ */
.tw-link{
color: #777;
font-size: 90%;
}

コピペする場所

HTMLの場合

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

STORKの例はこんな感じ。

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

CSSの場所

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

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

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

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

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

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

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

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

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

リンクを追加する方法

<i class="fa fa-link" aria-hidden="true"></i> <a href="プロフィールページのURL">詳しいプロフィール</a><br /></div>
</a></div>の間に挿入していきます。

まず<br />で改行します。次にfontawesomeでお好きなアイコンを選び、その横にリンクを設定してみてください。

私の例はこんな感じ↓

<i class="fa fa-link" aria-hidden="true"></i> <a href="https://palulog.com/profile">詳しいプロフィール</a><br />
<i class="fa fa-paint-brush" aria-hidden="true"></i> <a href="https://palulog.com/illust-contact">イラストのお仕事承ります</a><br />
<i class="fa fa-gift" aria-hidden="true"></i> <a href="http://www.amazon.co.jp/registry/wishlist/HEU10F506J1X/ref=cm_sw_r_tw_ws_x_gZdaAbNC57PQ8">ぱるのほしい物リスト</a>

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

紹介したコードを貼った後に、青文字の箇所を編集すれば簡単にTwitter風プロフィールが設定できます。

あなたもぜひ素敵なプロフィールを作ってみてください♪

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2018 All Rights Reserved Powered by AFFINGER5.