スポンサーリンク

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

2019年11月10日HTML・CSS

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

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

ですが私は

結耶
結耶

できればプラグインを使わずに「この記事を書いた人」を設置したいな~

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

この記事を書いた人
結耶
結耶(ゆうや)

2017年9月からブログとアフィリエイトを始めました。
知識ゼロから始めたので現在猛勉強中のひよっ子です。

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

スポンサーリンク
スポンサーリンク

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

今回紹介する「この記事を書いた人」では「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;    /*行間*/
}
きらり
きらり

結耶補足はないの?

結耶
結耶

んーHTMLもCSSも特に補足はないよ。コピペして使う場合はご自分のサイトに合わせて色や余白を調整してください。

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

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

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

結耶
結耶

アイコン画像は引き出しなどでも使います。アイコン画像などをフォルダを作って入れておけば解りやすくて呼び出しやすいと思います。

スポンサーリンク

記事に設置する

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

きらり
きらり

どうしたらいいの?

結耶
結耶

投稿用のテンプレートに入れたいところだけど…上手く入れないとサイトが表示されなくなってしまう可能性があるしね~。修正もテンプレートファイルをいじらなきゃいけないから怖いよね。

きらり
きらり

結耶はどこに入れてるの?

結耶
結耶

私は「記事下のウィジェットエリア」に入れてる。

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

「Luxeritas」をお使いの方

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

ショートコードを使う

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

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

結耶
結耶

テンプレートファイル(php)へのコードの追加方法は私ではわかりませんので検索してみてください。

きらり
きらり

まだまだ未熟者なのでごめんなさい~

ボタン付き

きらり
きらり

結耶が実際に記事下に設置してる「この記事を書いた人」にはフォローボタンがついてるよね?どうやるの?

結耶
結耶

じゃあ、フォローボタンのコードも書いておくね。

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

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にも追加します。

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タグを追加します。

きらり
きらり

これTwitterのフォローボタンになってるけど、アイコン変えてプロフィールページへのリンクにしてもいいよね~

結耶
結耶

もちろん(^^*)他のSNSでもサイトのトップページでもいいんだよ!ご自由にお使いください。

最後に

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

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

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

きらり
きらり

結耶~!ボクの「この記事を書いた人」も作って~!違うデザインで!

結耶
結耶

え~!きらりもいるの~?(記事書かないくせにぃ)

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。