ブログの作り方

プロフィールトップ

スワローでブログを作る手順2。カスタムHTMLでプロフィールを作成

OPENCAGEの「スワロー」でブログを作る手順2です。

最終的に、以下の4つの設定をしていきます。

  1. 基本設定
  2. ウィジェットに「人気記事」を表示
  3. ウィジェットに「プロフィール」を表示
  4. カルーセルスライダーの設定

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

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

★前回の記事はこちらです↓
スワローでブログを作る手順1。基本設定と人気記事を作成>>

★スワローはブログ部門の1位にさせていただきました↓
2018年、WordPressテーマの部門別お勧めベスト3を発表!>>

プロフィールを作る

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

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

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

これだけでも良いと思いますが、今回は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」ウィジェットを使っています。

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

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

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

★スワローでブログを作る手順3の記事はこちら↓
スワローでブログを作る手順3。スライダーを設置してみよう>>

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

関連記事

  1. スワローでブログ作成1

    スワローでブログを作る手順1。基本設定と人気記事を作成

  2. MAGのブログのイメージ

    TCDの「MAG」でブログを作る手順。簡単に美しいブログが完成します

  3. BRIDGEの注意点

    TCDのテーマ「BRIDGE」の設定をするときに気をつけたこと

  4. SANGOメニューボックス

    「SANGO」のテーマでメニューボックスを設置してみよう

  5. MAGテーマオプション1

    TCDテーマ「MAG」の広告設置方法。TCDテーマオプション編

  6. スワローでブログ作成

    スワローでブログを作る手順3。スライダーを設置してみよう

コメント

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

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

CAPTCHA


PAGE TOP

メーカー別おすすめ

多機能かつ洗練されたWordPressテーマ「DigiPress」を5段階評価し…

fresco

メーカー別おすすめ

デザインの美しさは最上級!「TCD」のWordPressテーマを5段階評価してみ…

TCDのSwitch

メーカー別おすすめ

マテリアルデザインのWordPressテーマ「SANGO」を5段階評価してみた

SANGOテーマ

メーカー別おすすめ

Web集客に特化した「EMANON」のWordPressテーマを5段階評価してみ…

EMANON

メーカー別おすすめ

ブログに特化した「OPEN CAGE」のWordPressテーマを5段階評価して…

スワロー

メーカー別おすすめ

美しい日本語にこだわった「isotype」のWordPressテーマを5段階評価…

MONOSTYLE

メーカー別おすすめ

アフィリエイト専用のWordPressテーマ「AFFINGER」を5段階評価して…

wing-affinger5

メーカー別おすすめ

検索上位表示と収益化「Diver」のWordPressテーマを5段階評価してみた…

Diverのテーマ