STINGER7/PLus:サイドバーに自己紹介・プロフィール・画像を表示しよう!part.1【WordPress超初心者向け】

      2016/11/23

eye_20160223

今日はブログのサイドバーに簡単な自己紹介やプロフィール画像を表示するカスタマイズをやっていきたいと思います。

個人ブログの場合、プロフィールがあると親近感がわき、ブログに興味を持ってもらいやすくなる、なんてことが良く言われていますね。

少しでも多くの人に記事を見てもらうため、僕も早速やっちゃいますよ!

【追記:2016.9.9】
※一部内容を修正。
こちらの記事の内容はSTINGER Plusでもそのまま使えます。

スポンサーリンク

プロフィールページを作ろう!

サイドバーに多くの文章を載せ過ぎるとゴチャゴチャして煩雑になってしまうので、詳細な自己紹介を単独のページとして作成しましょう!

一般的にプロフィールなどは「固定ページ」で作成します。

固定ページと投稿の違い

固定ページの作成方法は、普段の投稿ページとほとんど同じです。
ですが投稿ページと固定ページでは少し役割が違います。

◆投稿ページ
日々更新する記事。カテゴリーに属するもの。読者にとって価値のあるコンテンツ。

◆固定ページ
自己紹介、会社概要、お問い合わせなど、時系列から外れた単独のページ。

プロフィールなどはわざわざカテゴリーを分けて記事を追加していくようなものではないので、通常は「固定ページ」で作成します。

生い立ちとか細か過ぎる情報はいらないと思いますが、ある程度どんな人か分かるような自己紹介を考えてみましょう♪
完成したら次のステップ!

サイドバーに簡単なプロフィールを表示する

ウィジェットを使おう!

STINGER7(Plus)だとサイドバーは右側にありますね!
他のブログなんかでも同じようにしているのをよく見ると思いますが、ここにも画像と簡単な自己紹介を表示してみましょう!

管理画面から「外観」→「ウィジェット」と開くと「サイドバーウィジェット」というのがありますよね。これをカスタマイズしていきます。

初期状態だとこうなっていると思います。

20160223a

僕はまず「最近のコメント」「アーカイブ」「メタ情報」を削除しました。
「▼」のところをクリックするとパネルが開くので「削除」で消すことができます。

お次は左側にある「テキスト」というウィジェットを「サイドバーウィジェット」の中にドラッグ&ドロップで放り込みます。

20160223b

 

コードを入力しよう!

そして画像と文章を表示するためのコードを入力しましょう。
まずは簡単な内容のサンプルが以下のコードです。

1行目は画像を表示するコードなので、「画像URL」のところにご自分の画像のURLを入れてください。
画像URLは管理メニューの「メディア」から使う画像をアップして、アップした画像を選択すると右側にURLが出てくるのでそれをコピーして貼り付けます。

20160223c

 widthとheight  は画像の横と縦のサイズ(px)なので、使用する画像に合わせて変更してください。

 <center></center>  というのは中央に配置するコードです。

 <br>  は改行するためのコード。

最後の一行はプロフィール詳細ページへのリンクなので、「ページURL」のところに作成した自己紹介ページのURLを入れてください。

テキストウィジェットに実際に入力するとこんな感じ↓

20160223d2

入力したら「保存」を押しましょう。
そしてサイトを確認するとこのように表示されます。

20160223e2

おー!できましたね!
これでサイドバーが少し良い感じになりました♪

この状態からさらに見た目を良くする記事はこちら↓

STINGER7:サイドバーに自己紹介・プロフィール・画像を表示しよう!part.2【WordPress超初心者向け】
このブログで使わせて頂いているWordPressテーマ「STINGER7」でサイドバーにプロフィールを表示するカスタマイズ第二弾でございます。

【追記:2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

WordPressのカスタマイズをするなら、まずは本で基本を勉強することをオススメします。
HTML、CSSなどの基本的な部分を習得するだけでも、ネット上にある記事の理解度がかなり変わってきますよ。

初心者の方でも分かりやすいオススメの本をご紹介します。

スポンサーリンク

この記事をシェアする!

 - WordPress ,