「この記事を書いた人」を作ってみた！

2019年11月10日2021年7月17日HTML・CSS

よく他の人のブログで「この記事を書いた人」というプロフィールを見かけますよね。

WordPressを使っている人は「この記事を書いた人」というプロフィールを表示できる『Fancier Author Box』プラグインがあります。
プラグインを使えば簡単に表示できるのできます。

ですが私は

と思いHTMLとCSSを使って「この記事を書いた人」を作ることにしました。

これが私が作ったものです。
今回はこの「この記事を書いた人」のコードを紹介します。

「この記事を書いた人」を作ってみた！

今回紹介する「この記事を書いた人」では「Font Awesome」アイコンフォントを使っています。

HTML

<div class="profile-box">
  <div class="profile-box_title">この記事を書いた人</div>
    <img src="アイコンのURL" alt="代替テキスト">
  <div class="profile-box_name">名前</div>
    <p>ここにプロフィール</p>
</div>

CSS

/*--------------------
  この記事を書いた人
---------------------*/
/*ボックス全体*/
.profile-box {
    margin:3em 1em 2em;
    padding:10px 10px 15px;
    position:relative;
    border:2px solid #ff6893;    /*枠線の太さ 線種 色*/
    font-size:14px;
}

.profile-box:before , .profile-box:after {
    clear:both;
    content:"";
    display:block;
}

/*「この記事を書いた人」のタイトル*/
.profile-box .profile-box_title {
    position:absolute;
    top:-30px;
    left:-2px;
    padding:0 10px;
    background:#ff6893;    /*背景色*/
    color:#fff;            /*文字の色*/
    font-weight:bold;
    border:2px solid #ff6893;    /*枠線の太さ 線種 色*/
    display:inline-block;
}

.profile-box_title:before {
    font-family:"Font Awesome 5 Free";
    content:"f007";
    font-weight:900;
    margin-right:7px;
}

/*アイコン画像*/
.profile-box img {
    display:block;
    width:80px;
    height:80px;
    float:left;
    margin:0 20px 7px 10px;    /*画像周りの余白*/
}

/*名前(ニックネーム)*/
.profile-box .profile-box_name {
   margin:0 0 7px;
   padding:0;
   font-size:19px;       /*文字サイズ*/
   font-weight:bolder;
}

/*プロフィール*/
.profile-box p {
    margin:0;
    padding:0;
    font-size:14px;
    line-height:21px;    /*行間*/
}

【参考】アイコン画像の保存先

WordPressでアイコン画像をメディアライブラリに登録してたくさんの画像の中から探して呼び出すのは面倒ですよね。

私の場合はサーバーにフォルダを作って自分のアイコン画像などをFTPツールでアップロードしてそこから呼び出して使っています。

記事に設置する

上のHTMLを記事に導入するのですが、毎回記事を描く度にHTMLを挿入するのは面倒ですし、アイコンやプロフィールの内容を変更するのに記事をひとつひとつ修正するのは途方もない作業になってしまいます。

使うテーマによってウィジェットを設置できるエリアは違いますが、「記事下」のウィジェットエリアに設置すれば内容を変更する場合でもウィジェットの中で修正するだけで済むので楽だと思います。

「Luxeritas」をお使いの方

WordPressテーマ「Luxeritas」には『アドセンス(Luxeritasオリジナル)』というウィジェットがあります。
このウィジェットを使うと表示する箇所を選択できるので便利です。

ショートコードを使う

WordPressのプラグインの中にはショートコードを生成できるプラグインがあります。ショートコードで挿入すればプラグインに登録したHTMLコードを修正するだけなので管理が楽です。

プラグインで生成したショートコードを投稿用のテンプレートに入れれば何もしなくても表示されるのですが、先ほど書いたように上手く挿入しないとサイトが表示されなくなる可能性があります。

2020年9月16日 追記

再利用ブロックを使う

WordPressの新エディタ(ブロックエディタ)には『再利用ブロック』という機能があります。
作成した『この記事を書いた人』を再利用ブロックに登録すれば簡単に記事中に挿入することができます。

またプラグイン(Block Widget)やお使いのテーマによっては再利用ブロックをウィジェットとして表示することもできます。

※Luxeritasをお使いの方は下の記事の中で再利用ブロックをウィジェットで表示する方法も紹介しています。

ボタン付き

上記のCSSに以下を追加してください。

.profile-box_image {
    float:left;
    margin:5px 20px 3px 0;
    padding:0;
    width:100px;
    text-align:center;
}

/*フォローボタン*/
.profile-box a {
    padding:2px 10px;
    border:1px solid #000;    /*枠線の太さ 線種 色*/
    border-radius:30px;
    color:#000;               /*文字の色*/
    font-weight:bold;
    margin:0;
}

.profile-box_image i {
    color:#1da1f2;             /*アイコンの色*/
}

/*マウスが乗ったとき*/
.profile-box_image a:hover , .profile-box_image i:hover{
    background:#1da1f2;       /*背景色*/
    color:#fff;               /*文字の色*/
}

HTMLにも追加します。

<div class="profile-box">
  <div class="profile-box_title">この記事を書いた人</div>
    <div class="profile-box_image">
      <img src="アイコンのURL" alt="代替テキスト">
      <a href="TwitterのプロフィールのURL" target="_blank"> <i class="fab fa-twitter"></i> フォローする</a>
    </div>
  <div class="profile-box_name">名前</div>
    <p>ここにプロフィール</p>
</div>

画像のコードの前に<div class="profile-box_image">を追加して、画像の後にaタグを追加します。

最後に

プロフィールページを作ってもなかなか見てくれる人はいません。

生地下などに簡単なプロフィールを書いておけば見てもらえ、「こんな人が書いているんだ～」と読んでくれるユーザーも安心します。

プラグインを使うのもいいですが、HTMLとCSSで作る方がデザインを変えたり、修正しやすいと思います。