AFFINGER Web WordPress

WordPressのサイドバーに簡単にプロフィールと画像を表示させる方法[ウィジット]

更新日:

TheAngryTeddy / Pixabay

こんにちわ、@yuki_PHZです。

WordPressのサイドバーにプロフィールと画像を表示させる方法を画像付きでご紹介します。

ウィジットでユーザープロフィールを載せたけど、写真が小さかったりレイアウトに不満があったりする場合があります。

そういう場合は、利用するウィジットを変えれば自分の思う通りのプロフィール欄にすることが可能です。

既存のレイアウトの不満点

私は、WordPressのテンプレートにAFFINGER4を利用しています。

サイドバーにAFFINGER4の標準機能のウィジットを利用して、サイト管理者としてユーザープロフィールを表示させていました。

上記画像内の「11_STINGERサイト管理者紹介」のウィジットを任意の表示場所にドラッグ&ドロップすれば、下記画像のようにユーザープロフィールに登録してある画像や情報が表示されます。

Twitterやインスタグラム のアイコンは、AFFINGER4のテンプレートの機能です。

私はサイドバーのプロフィール欄について、顔写真を大きく表示させたいと思います。

他のテンプレートなどでも、プロフィール表示専用のウィジットを用意されていることが多いと思いますが、そのデザインやレイアウトについて若干の不満点がある場合があると思います。

その場合は、これからご紹介する方法を試してみてください。

WordPressのサイドバーにプロフィールと画像を表示させる方法

「テキスト」ウィジットを任意の表示場所に移動させる

WordPressのメニューから、外観→ウィジットに進みます。

利用するのは、標準で用意されている’ウィジットの「テキスト」になります。

下記の画像の「テキスト」ウィジットを探してください。

「テキスト」ウィジットを任意の表示させたい場所に移動させます。

ドラッグ&ドロップでも出来ますし、下記画像のようにダブルクリックで表示させる場所を選択することも可能です。

今回は、サイドバーに表示させたいので、テンプレートで用意されている場所に移動させます。

ウィジットを並び替えて位置を決めます。AFFINGER4だと下記画像のようになります。

テキストに表示させたい画像と文章を入力する

ウィジットのテキストをクリックして、開いてみると下記画像のような編集画面が開きます。

テキストには、タイトルと本文を入力できる欄があるのと、記事の投稿でもあるような「メディアと追加」とビジュアル編集モードとテキスト編集モードが用意されています。

顔写真はメディアを追加から簡単に挿入できますし、ビジュアル編集モードのまま文章を入力しても良いです。

またテキスト編集モードも使えますので、HTMLタグを使い文書構造を自分で指定でき、CSSを追加で指定すれば完全にオリジナルのデザインレイアウトでプロフィール欄を作成することができます。

プロフィール欄の大まかなイメージとしては、次のような項目が必要となります。

  • タイトルを決める…「サイト管理者の紹介」
  • 顔写真を載せる…顔写真またはイラストなど
  • 名前を載せる…実名またはニックネームなど
  • プロフィールを載せる…自己紹介や経歴や実績など
  • SNSリンクを載せる…Twitter、Instagramなど
SNS公式アイコンダウンロード
Instagram https://en.instagram-brand.com/assets
Twitter  https://about.twitter.com/ja/company/brand-resources.html

表示の確認を行い保存する

ウィジットのテキストには下書きしてプレビューする機能はありませんので、実際にブログに表示させて確認してみます。

自分の思った通りの表示ができていれば、保存して終了です。

お疲れ様でした。

既存のテンプレートのデザインを生かしたい場合

今回の私の場合は、AFFINGER4のテンプレートで用意されていたCSSデザインには不満がないので同じにしたいです。

変更したいのは、顔写真の大きさと位置になります。

ソースコードについては、テンプレートによって違いますし、どのように表示させたいかはバラバラですので、ここでは大まかな流れを紹介したいと思います。

こちらの記事で詳しくまとめていますので、合わせてお読みください。

簡単にウェブサイトやブログのソースコードを見る方法[デペロッパーツール]

ソースを調べてコピーする

ブログを表示させて、ブラウザのデペロッパーツールを開きます。

Google Chromeであれば、メニューバーの’「表示」→「開発/管理」→「デペロッパーツール」です。

デペロッパーツールを開くと、ブラウザの下部にソースコードが表示されるウインドウが現れます。

デペロッパーツールの利用のコツは、矢印アイコンをクリックしてウェブサイト上のソースコードを調べたいところをマウスオーバーするソースコードのタグを選択してウェブサイト上のどのソースコードかハイライトさせる、ことです。

デペロッパーツールで調べたいソースコードを特定したら、コピーして別ファイルに保存します。

ソースコードを編集する

ソースコードを編集しやすいように各種HTMLエディタにコピペします。

ソースコードをテキスト編集モードの編集画面で編集することも可能ですが、窓が狭くタグのハイライトもないため行いづらいです。

そこで、Dreamweaverなどで編集しますが、CSSファイルはリンクされていませんから、表示の確認はWordPressのテキスト編集モードにコピペしてブラウザで確認します。

ブログ上で編集中のプロフィールが表示されますが、複雑な設定をしなくても編集確認できるので簡単なやり方です。

テキスト編集モードにコピペする

ソースコードはテキスト編集モードへコピペします。

ここではどのようにソースコードを編集したかは割愛します。

下記の画像のようにビジュアル編集モードに変更すれば、大まかな文書構造を確認することができます。

この編集モードではCSSが反映されませんので、ブラウザで確認します。

表示を確認する

ブラウザでブログを表示させてみます。

ウィジットで二つ並べてみました。下記の画像のようになりました。

上のプロフィール欄が、AFFINGER4の「11_STINGERサイト管理者紹介」ウィジットを利用したものです。

下のプロフィール欄が、WordPressのテキストウィジットを利用して表示させたものです。

無事、顔写真を大きくしレイアウトを変更することができました。

あとは、不要なウィジットを削除して完了となります。

お疲れ様でした。

 

まとめ

WordPressのテキストウィジットはHTMLタグが使えるので、工夫次第で色々と活用することができます。

今回のように元々のブログのソースコードを流用することで、CSSを追記や変更することなくデザインを使うこともできます。

是非、オリジナルのプロフィール欄の作成にチャレンジしてみてください!

スポンサーリンク

-AFFINGER, Web, WordPress
-

Copyright© WebLogz , 2019 All Rights Reserved.