WordPressでブログを運営していると、サイドバーに自分のプロフィールが欲しいな〜って思いませんか？
私はつい最近まで「WordPressでサイドバーにLINE風プロフィールを表示させる方法」という記事で紹介しているプロフィールを設定していました。
しかし最近もっとシンプルなものに変えたくなったので、今回はTwitter風のプロフィールの作り方をご紹介していきます。
コピペだけで簡単に設定できるので、ぜひ試してみてください♪
LINE風プロフィールを表示させるコード
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の場合
- WordPreesのメニューから「外観」を選択。
- その中の「ヴィジェット」を開く。
- 「カスタムHTML」のような自由入力欄があるところにコピペする。
STORKの例はこんな感じ。
ビジュアル/テキストが変えられる欄があるヴィジェットもありますが、再編集ができない可能性があるので、上の画像のようにテキストオンリーのヴィジェットにコピペしてください。
CSSの場所
下記の2パターンの方法があります。
- 親テーマ/子テーマのスタイルシート (style.css)
- 外観→カスタマイズで一番下にある追加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風プロフィールが設定できます。
あなたもぜひ素敵なプロフィールを作ってみてください♪