おすすめテーマ

プロフィールトップ

【スワロー使い方講座】サイドバーにプロフィールを設定します

OPENCAGEの「スワロー」でブログを作る講座の2回目です。

前回は基本設定や人気記事ランキングを作成しました。

今回は、サイドバーにプロフィールを設定したいと思います。

ブログを読みに来てくれた方が興味を持ってくれると、プロフィールを見てくれます。

プロフィールが充実していると、ブログのファンになってくれるかもしれませんよね。

コピペで簡単に作成できるので、プロフィールが欲しい方は挑戦してみてください。

前回の記事はこちら↓

★ブログにおすすめのテーマ一覧↓
ブログにおすすめのWordPressテーマ。初心者から本格的に始めたい人まで>>

プロフィールを作る

プロフィールは、サイドバーのウィジェットを使って作成することにします。

完成予定は、こんな感じです↓
プロフィール完成

プロフィール画像を中央寄せで配置して、その下に説明文を書きます。

これだけでも良いと思いますが、今回はSNSボタンも作ってみたいと思います。

 

ウィジェットの準備

ワードプレス管理画面の、

外観→ウィジェット

の順にクリックしていきます。

そうすると、左の列に「カスタムHTML」ウィジェットというものがありますよね。

このウィジェットを使ってプロフィールを作ります。

では、「カスタムHTML」を、【PC用】サイドバーにドラッグしてください↓
プロフィール2

ドラッグしたら、そのウィジェットをクリックして詳細を表示させます。

プロフィール欄

ここまででウィジェットの準備はできました。

 

ウィジェットの設定

カスタムHTMLの中には、「タイトル」と「内容」の2つの欄がありますよね。

まず、タイトルには「プロフィール」と記入しましょう。

ここに書くだけで、トップページにプロフィールの見出しができあがっています。

そして次に、内容の欄を記入していきます。

内容欄には、画像、紹介文、SNSボタンを表示させるコードを書かなければいけませんが…

ここはコピペで簡単に済ませましょう。

ただし、以下のコピペはフォントオーサムを使用しています。

フォントオーサムを使うと、アイコンを使えるようになります。

事前にこちらのサイトを見て導入をしておきます。

下の点線と点線の間のコードをコピーして、カスタムHTMLウィジェットの「内容」にペーストしてください。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<div style=”text-align:center”>
<img src=”★画像のURL★” align=”center” width=”200″ height=”200″>
</div>

<p>有料ワードプレスのテーマを紹介しています。今回はOPENCAGEのスワローを使ったブログの作り方の説明です^^</p>

<div style=”text-align:center”>
<a href=”★twitterのURL★” target=”_blank” rel=”nofollow” ><i class=”fa fa-twitter fa-2x”></i></a>
&nbsp;
<a href=”★facebookのURL★” target=”_blank” rel=”nofollow”><i class=”fa fa-facebook fa-2x”></i></a>
&nbsp;
<a href=”★instagramのURL★” target=”_blank” rel=”nofollow”><i class=”fa fa-instagram fa-2x” ></i></a>
&nbsp;
<a href=”★feedlyのURL★” target=”_blank” rel=”nofollow”><i class=”fa fa-rss fa-2x”></i></a>
</div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

すると、こんな感じになっているはずです↓
プルフィールコピペ

あとは、このコードを自分用に書き直していきます。

まずは、プロフィール画像部分を表示させてみましょう。

プロフィール画像を、ワードプレス管理画面の「メディア」からアップロードしてください。

メディア→新規追加

とクリックすると、メディアのアップロード画面になります。

この画面から画像をアップロードすると、アップロードした画像の一覧が表示されますね。
アップロード画面

アップロードしたプロフィール画像をクリックすると、詳細画面になります↓
プロフィール画像URL

画面右側に画像のURLが書いてあるので、これをコピーします。

これを、上のコードの「★画像のURL★」の部分にペーストしてください。

これで画像が表示されます。(ちゃんと★も消してくださいね)

画像のサイズは縦200px、横200pxとしましたが、変えたい場合は上のコードの数値を変更すれば変えることができますよ。

続いて、紹介文を書き変えてみましょう。紹介文は、ウィジェットの中のPタグに挟まれた部分ですね。

<p> 紹介文 </p>

「紹介文」の部分を、自分用の文章に書き変えればOKです。

最後に、SNSボタンを設定しましょう。

ツイッターやフェイスブックのURLをコピーしておいて、「★twitterのURL★」や「★facebookのURL★」の部分に貼り付けるだけです。

ちなみにURLは、ツイッターのホーム画面を表示したときのアドレスバーに出ています↓
ツイッターURL

ボタンは4つほどあるので、必要なボタンのURLを貼り付けてください。

 

スワロー講座ここまでのまとめ

カスタムHTMLウィジェットを使って、画像、紹介文、SNSボタンを配置する方法を説明してみました。

ここまでで、こんな感じになっています↓
プロフィール完成

今回のプロフィールは、ワードプレスに標準で付いている「カスタムHTML」ウィジェットを使っています。

プロフィール専用のウィジェットがあるテーマもありますが、スワローでもこのウィジェットを使えば、このくらいのプロフィールはできるということですね。

これで、だいぶブログらしい外観ができあがってきました。

次回の記事は、スワローのカルーセルスライダーを設定してみたいと思います。

★スワローの使用サイト例です↓
WordPressテーマ「スワロー」を使ったサイト事例。シンプルなブログの参考に

★OPENCAGEの最新テーマ↓
ブログ向けテーマSTORKの最新版。STORK19は初心者に優しく価格も安いテーマ>>

スワローの詳細はこちら>>

関連記事

  1. ワードプレステーマ「stork19」

    ブログ向けテーマSTORKの最新版。STORK19は初心者に優しく価格…

  2. ハミングバード

    WordPressテーマ「ハミングバード」を使ったサイト事例。個人ブロ…

  3. TCDのONE

    TCDの「ONE」は、魅力的なワンカラムと高機能CTA搭載のテーマ

  4. Minimal WPのWordPressテーマを5段階評価してみた【シ…

  5. N1

    HYBRID THEMEのWordPressテーマを5段階評価してみた…

  6. DOLCE & VIVACEのWordPressテーマを5段…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

おすすめテーマ

2019年、WordPressテーマの目的別おすすめベスト3を発表!

目的別テーマのおすすめベスト3

おすすめテーマ

WordPressでネットショップが作れるおすすめテーマ【Welcart・Woo…

おすすめテーマ

美容室・サロン向けの高級感あるWordPressテーマを比較してみました

TCDテーマ「SKIN」

おすすめテーマ

ブログにおすすめのWordPressテーマ。クオリティーの高い有料テーマに厳選し…

ONEでCTA設置

おすすめテーマ

トップページに動画再生可能な、おすすめのWordPressテーマを集めました

おすすめテーマ

アフィリエイトにおすすめのWordPressテーマ。すべて複数サイトで使い回しO…

おすすめテーマ

企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】

おすすめテーマ

女性向けの美しい(かわいい)WordPressテーマを集めました