【コピペOK】WordPressでこの記事を書いた人をデザインする

「この記事を書いた人」の項目は、ウェブページの管理人情報を簡潔に示すことに長けています。
ユーザーがお問い合わせフォームやTwitter(X)、Instagram、Noteなど登録しているSNSへアクセスしやすくなります。

さらに、素性を示すとGoogleから信頼性の高いサイトとして評価されて、
掲載順位が上位に表示される期待が高まります。

しかし、WordPressでブログを運営している方は、サイドバーの運営者情報が本文に挿入され見映えが悪いことがあります。

本記事では、HTMLとCSSを使って、自作で「この記事を書いた人」を作成していきます。

本記事は次の人におすすめ

WordPressでこの記事を書いた人を掲載したい
HTMLとCSSが使えるようになりたい

デザイン
HTML
- 解説
CSS
- 解説
実装
よくある失敗
- 画像の背景が透明ではない
- 画像に影がある
まとめ

デザイン

「この記事を書いた人」をFigmaを使って作成しました。
Figmaは、主にWebデザインに使用されますが、ゲームUI作成にも使える優れたサービスです。

構成は示した通りに、枠線内に右と左を分けて、それぞれ3:7とします。
右には、吹き出し項目、自分の名前とアイコンを中央に縦に並べます。
左には、簡潔に自分の経歴を示して、自分が登録しているSNSの画像と名称を載せます。

SNSのロゴ画像は、公式が配布しているものを使用してください。
誰かが二次配布している画像は使用しないようにしてください。

また、画像を加工してはいけない、比率を変えてはいけない、色を変えてはいけないなど。
それぞれのロゴで禁止事項が異なるので、必ず利用規約は確認してください。

公式ロゴ配布

HTML

<div class="profile-section">
  <div class="profile-container">
    <div class="profile-left">
      <div class="balloon">
        <p>この記事を書いた人</p>
      </div>
      <img class="profile-image" src="URL" alt="プロフィール">
      <p class="profile-name">アリッシア</p>
    </div>
    <div class="profile-right">
      <div class="information">
        <p>アリッシアの朝
          <br>"改行"
          <br><a href="https://alicia-ing.com/profile/">詳しいプロフィールはこちら</a>
        </p>
      </div>
      <div class="profile-sns-buttons">
        <div class="profile-sns-button">
          <a href="https://alicia-ing.com/contact/"><img class="contact-icon" src="URL" alt="Contact icon"></a>
          <p>contact</p>
        </div>
        <div class="profile-sns-button">
          <a href="https://twitter.com/Alyssia_ing"><img class="twitter-icon" src="URL" alt="Twitter icon"></a>
          <p>Twitter</p>
        </div>
        <div class="profile-sns-button">
          <img class="instagram-icon" src="URL" alt="Instagram icon">
          <p>Instagram</p>
        </div>
        <div class="profile-sns-button">
          <a href="https://note.com/alicia_ing/"><img class="note-icon" src="URL" alt="Note icon"></a>
          <p>Note</p>
        </div>
      </div>
    </div>
  </div>
</div>

解説

.profile-section：プロフィールセクション全体を定義します。
.profile-container：プロフィール情報を包含するコンテナです。

プロフィール左側

.profile-left：プロフィール画像や名前などの左側のコンテナを定義します。
.balloon：”この記事を書いた人”というテキストを含む吹き出しを表します。
.profile-image：プロフィール画像を定義します。
.profile-name：プロフィールの名前を定義します。

プロフィール右側

.profile-right：プロフィール情報の右側のコンテナを定義します。
.information：追加のプロフィール情報を保持するコンテナです。
.profile-sns-buttons：SNSのボタン全体を包含するコンテナです。
.profile-sns-button：各SNSのボタンを包含するコンテナです。
.contact-icon：連絡先ページへのリンクのアイコンを定義します。
.twitter-icon：Twitterプロフィールへのリンクのアイコンを定義します。
.instagram-icon：Instagramへのリンクアイコンを定義します。
.note-icon：Noteプロフィールへのリンクのアイコンを定義します。

CSS

.profile-section {
    max-width: 1000px;
    margin: auto;
    border: solid 2px #333;
    padding: 10px;
}

.profile-container {
    display: flex;
    justify-content: space-between;
}

.profile-left {
    flex: 3;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-right: 2px dashed black;
}

.profile-right {
    flex: 7;
    padding: 1em;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* display: flex; */
}

.information p {
    margin: auto;
}

.balloon {
    position: relative;
    display: inline-block;
    margin: 1em 0;
    padding: 10px;
    background: #75def0;
}

/* 矢印 */
.balloon:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #75def0;
}

.balloon p {
    margin: auto;
    padding: auto;
}

.profile-image {
    max-width: 100%;
    height: auto;
}

.profile-name {
    color: blue;
    font-size: 20px;
    font-family: "Meiryo", sans-serif;
}

.profile-sns-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    background: gainsboro;
    margin: auto;
    padding: 5px;
}

.profile-sns-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-sns-button a {
    height: 70px;
    text-decoration: none;
}

.profile-sns-button img {
    max-width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.profile-sns-button:hover img {
    transform: scale(1.1);
}

.profile-sns-button p {
    margin: 0;
    text-align: center;
}

@media screen and (max-width: 500px) {
    .profile-section {
        display: none;
    }
}

解説

.profile-section：プロフィールセクション全体のスタイルを指定します。
幅の最大値(max-width)、マージン、囲い、パディングを設定します。
また、@media screenによって、スクリーン幅が500px以下の場合に非表示にします。

.profile-container：プロフィール情報を保持するコンテナのスタイルを定義します。
このコンテナ内の要素をフレックスボックスとして直下の要素を並列にします。
さらに要素間のスペースを均等に配置します。

プロフィール左側

.profile-left：プロフィール情報の左側のコンテナのスタイルを指定します。
フレックスアイテムとして中央寄せにし、縦方向に要素を中央寄せに並べます。
また、左側に破線の境界線を持ちます。

.balloon：吹き出しのスタイルを指定します。
背景色、マージン、パディングを設定し、吹き出しの形状を定義します。
.balloon:before：吹き出しの矢印のスタイルを指定します。
矢印の位置や形状、色を定義します。

.profile-image：プロフィール画像のスタイルを指定します。
画像の最大幅を100%にし、高さを自動に設定します。

.profile-name：プロフィール名のスタイルを指定します。
文字色、フォントサイズ、フォント型を設定します。

プロフィール右側

.profile-right：プロフィール情報の右側のコンテナのスタイルを指定します。
フレックスアイテムとして中央寄せにし、縦方向に要素を中央寄せに並べます。

.information p：追加のプロフィール情報の段落要素のスタイルを指定します。
マージンを自動に設定します。

.profile-sns-buttons：ソーシャルメディアボタンのコンテナのスタイルを指定します。
フレックスボックスとして要素を配置し、背景色やマージン、パディングを設定します。

.profile-sns-button：各ソーシャルメディアボタンのスタイルを指定します。
フレックスアイテムとして中央寄せにし、ボタンの高さやアイコンのスタイルを設定します。
.profile-sns-button a：各ソーシャルメディアボタンのリンクのスタイルを指定します。
テキスト装飾をなくし、リンクの高さを設定します。
.profile-sns-button img：ソーシャルメディアアイコンのスタイルを指定します。
画像の最大幅を100%にし、高さを自動に設定します。ホバー時にアイコンのサイズを拡大します。
.profile-sns-button p：ソーシャルメディアボタンのテキストのスタイルを指定します。
マージンを0にし、テキストを中央寄せにします。

Webデザインを学びたい

HTMLやCSSなどはマークアップ言語と呼ばれてプログラミングと異なります。
プログラミングは指示通りに処理がされると完成ですが、
フロントエンドは、Webデザインも重要になります。

デザインの幅を広げたいけれど、コーディングに悩んでいませんか？
美しいデザインを実現するためには、常に新しいスキルを身につけることが重要です。

Udemyは動画でHTMLやCSSの基礎から最新のデザインテクニックを実践形式で学べます。
購入した講座は再生・停止・スキップなどが可能なオンデマンド形式なので、
講座中に独自でアレンジして試行錯誤ができます。

Udemyの特徴

プロのエンジニアによる講習が受けられる
自分のペースで学習を進められる
オンデマンド形式だから何度でも視聴可能
不満足なコースは視聴していても返金可能（返金ポリシー）

HTML/CSS/JavaScriptに興味がある人はUdemy学習を取り入れましょう。
数多くある講座の中から特におすすめな講座を３つ紹介します。

ビックセール開催中（10月11日まで）
対象のコースが1500円から（最大95%OFF）

最大94%OFF

終了まで

時間

：

分

：

秒

【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版）

HTML、CSS、JavaScriptの学習ができて、フレームワークの扱い方、セキュリティー、その他プログラミング言語を学ぶために必要な考え方など幅広く情報を網羅している。

【PHP, MYSQL, Apache】ガチで学びたい人のためのWEB開発の基礎(バックエンド編)

WEBシステムの仕組みと挙動、システム構築などWEBシステムの基礎の学習が可能。

【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）

JSとCSSに焦点を当てた講座。基礎レベルから実務レベルまで網羅していて、最終的にアニメーションやコードの最適化、安定化について学ぶ。

実装

この記事を書いた人

アリッシア

大学4年間で何か胸を張れるスキルを身に着けたくて当サイト運営を始めました。
現在、大学院に進学するか就職するか迷いながら勉強しています。
詳しいプロフィールはこちら

各投稿ページ内にカスタムHTMLとカスタムCSSがありますが、
投稿記事に添付すると、レイアウトが崩れてしまいます。

したがって、WordpressでHTMLを表示させるにはカスタムHTML、
CSSを有効にするにはテーマファイルエディターを使用します。

カスタムHTMLは、「外観>ウィジェット」から、作成できます。
投稿下に配置すると、本文最後にこの記事を書いた人を表示できます。

投稿下は、最後まで読んだユーザーにしか見られないというデメリットがありますが、
読者は、執筆者の情報ではなく内容を知りたいです。
本文中や冒頭に載せると読者視点だと目障りになので、ページ離脱率が高くなる恐れがあります。

CSSは、サイト全体で有効にするために「外観>テーマファイルエディター」のCSSファイルに添付してください。
サイトテーマがcocoonの場合は、cocoon child>stylesheet（style.css）に添付します。

テーマファイルエディターは、編集を誤るとサイトのレイアウトが崩れる恐れがあります。
消してしまった場合に備えて、編集前のCSS情報は保存しておいてください。

以上の手続きを踏むと、この記事を書いた人が作成されます。

よくある失敗

本記事と同じように作成したのに、レイアウトに違和感がある場合は次のようなミスが考えられます。

画像の背景が透明ではない

画像拡張子が.png出ない可能性がある。

画像の拡張子には、主に「jpeg」、「png」、「gif」、「webp」があります。

拡張子	特徴
jpeg	データの圧縮
png	背景透明
gif	アニメーション
webp	JPEGやPNGよりも高い圧縮効率と品質でブラウザで使用

画像形式をjpegやgifにすると、背景透明にできません。