ナイチンゲールにはなれない!

看護師おかえりなさいのBLOG

HTMLコードでプロフィールをサイドバーに表示する方法

HTMLコードでプロフィールをサイドバーに表示する方法

おかえりなさい @okaerinasainet です。

今回ご紹介するWordPressのカスタマイズは、とてもシンプルな方法です。

WordPressにはたくさんのプラグインが公開されていて、その気になればプラグインを使用してありとあらゆることが可能であると言っても過言ではありません。

それくらいプラグインが充実しているのがWordPressが魅力的なところですが、プラグインを入れ過ぎると動作が遅くなりがちです。

プラグインを使う事はとても楽しい作業ですが、今回はあえてシンプルにコードのみでサイドバーや投稿本文内に筆者のプロフィールを表示させてみましょう。

HTMLコード(テーブルタグ)で筆者のプロフィールを表示させる

HTMLコードはWordPressのウィジェットに書き込むことで動作するコードです。

テーブルタグはテキストに枠線を追加して、2列にしたり2行にしたりとするコードです。

今回は単純にプロフィール欄を2行で作成してみます。

今回使用するコードへは画像のURLを指定する必要があります。

画像のURLへはメディアにアップロードしている画像ファイルのURLを指定します。

URLの取得する箇所はこちらです。

WordPressのダッシュボード画面の「メディア」➡「ライブラリー」にて過去にアップロードしている画像を選択。

メディアファイルより選択

ファイルを選択したら次のような画面になるので、画像のURLをコピーしておきます。

メディアを編集 ‹ アクセストリガー — WordPress

ファイルのURLというのが画像のURLです。

このように事前にメディアにアップロードした画像を使うか、もしくはすぐに見つけられないのでもう一度アップロードしたいという時は次のような手順で行います。

WordPressのダッシュボード画面から「メディア」➡「新規追加」にて任意のファイルをアップロードしてください。

アップロードが完了したら、画像のURLを取得するのは先ほどの手順と同じです。

ファイルのアップロード

今回使うHTMLコードです。

そのコードは次のようになります。

プロフィールは参考までに2行に改行していますが、

を追加していけばさらにプロフィールを改行できます。

hspace=”5″>としているところは画像の左右の余白です。値を変更すれば余白を変更できます。

シンプルに表示するならこんな感じになります。

おかえりなさい と言います。 暮らしに役立つ話からWordPressのカスタマイズまで自由に記事を書いています!

もし上のように2列ではなく、2行にしたいのでれば次のコードを使用します。

その場合はこうなります。

おかえりなさい と言います。 暮らしに役立つ話からWordPressのカスタマイズまで自由に記事を書いています!

このように非常にシンプルな表示ですが、サイドバーなどにさりげなくフォローボタンなどと一緒に表示させておくことで、筆者の情報を訪問したユーザーにアピールできます。

また筆者の情報に関心を持った方からフォローしていただけるかもしれません。

以上、「HTMLコードでプロフィールをサイドバーに表示する方法」のご紹介でした!


コメントフォーム

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top