おすすめテーマ

プロフィールトップ

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

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テーマ「スワロー」を使ったサイト事例。シンプルなブログの参考に

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

関連記事

  1. MAGフッター4

    【MAG使い方講座】グローバルメニューとフッター記事一覧を作成します

  2. N1

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

  3. chill

    WordPressテーマChillを使ったサイト事例。女性向けテーマ選…

  4. MAGメニュー3

    【MAG使い方講座】サイドバーにウィジェットを作成。プロフィールも作り…

  5. SANGOメニューボックス

    【SANGO使い方講座】サイドバーにメニューボックスを設置してみよう

  6. TCDのONE

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

コメント

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

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

CAPTCHA


PAGE TOP

おすすめテーマ

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

おすすめテーマ

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

ONEでCTA設置

おすすめテーマ

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

おすすめテーマ

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

おすすめテーマ

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

おすすめテーマ

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

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

おすすめテーマ

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

TCDテーマ「SKIN」

おすすめテーマ

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