ブログの作り方

プロフィールトップ

スワローでブログを作る手順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. MAGテーマオプション1

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

  2. Diverの入力補助機能

    Diverの入力補助が超多機能。ボタンやバッジ作成機能を紹介します

  3. MAGの広告スペース

    TCDテーマ「MAG」の広告設置方法。広告ウィジェット編

  4. Diverでブログを作ろう

    Diverでブログを作る手順2。ランキングやタブウィジェットの使い方

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

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

  6. Diverでブログを作る

    Diverでブログを作る手順1。プロフィールや記事スライダーを設定しよ…

コメント

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

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

CAPTCHA


PAGE TOP

メーカー別おすすめ

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

wing-affinger5

メーカー別おすすめ

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

TCDのRUMBLE

メーカー別おすすめ

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

MONOSTYLE

メーカー別おすすめ

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

EMANON

メーカー別おすすめ

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

Diverのテーマ

メーカー別おすすめ

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

SANGOテーマ

メーカー別おすすめ

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

スワロー

メーカー別おすすめ

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

fresco