サイト管理者紹介の作り方

アフィリエイト
この記事は約4分で読めます。

こんにちは、オノユウ(@yumaonodera_)です。

サイト管理者紹介を作りたい人「テーマの機能でサイト管理者紹介を表示しているけど、正直言ってあまりイケてない……おしゃれなサイト管理者紹介を自作したい。」

こういった方向けの記事。

本記事では、HTMLとCSSでサイト管理者紹介を作る方法について解説します。

完成イメージ

PC表示

スマホ表示

それではさっそく作っていきましょう。

ブログ管理者表示の作り方

手順は下記の2つです。

  • ウィジェットを作成し、HTMLをコピペする
  • CSSでデザインをカスタマイズする

ウィジェットを作成し、HTMLをコピペする

まず、カスタマイザーを開いてください。

カスタムHTMLを開いたら、下記のソースコードをコピペしてください。

<div class="admin-box">
サイト管理者画像
<p class="admin-name">サイト管理者名</p>
<hr>
<p class="profile">プロフィール文</p>
<ul>
<li><a href="リンクURL">リンク文</a></li>
<li><a href="リンクURL">リンク文</a></li>
<li><a href="リンクURL">リンク文</a></li>
</ul>
</div>

コピーした内容は、自分用にカスタマイズしてください。

  1. 「サイト管理者画像」に自分の写真のURLを貼り付ける
  2. 「サイト管理者名」に自分のペンネームを書く
  3. 「プロフィール文」に自分の紹介文を書く
  4. 「リンクURL」と「リンク文」を編集する

サイト管理者画像のURLはどこで確認できるかですが、メディアライブラリから確認できます。

プロフィール用の画像を選択したら、URLをコピーし、先ほどのHTMLの画像URLに設定すればOKです。

CSSでデザインをカスタマイズする

次はCSSで見た目を整えていきましょう。

まず、追加CSSを開いてください。

追加CSSを開いたら、下記のソースコードをコピペしてください。

/* サイト管理者表示 */
.admin-box {
padding: 30px;
border: 1px solid #1e73be;
}

.admin-box img {
box-sizing: border-box;
display: block;
width: 130px;
height: 130px;
border: 2px solid lightgray;
border-radius: 50%;
margin: 0 auto 30px;
}

.admin-box .admin-name {
text-align: center;
font-size: 20px;
}

.admin-box hr {
box-sizing: border-box;
width: 30%;
border: 1px solid #1e73be;
margin: 0 auto;
}

.admin-box .profile {
font-size: 13px;
margin: 30px 0;
}

.admin-box ul {
text-align: right;
}

.admin-box li {
line-height: 30px;
}

サイト管理者の枠線を変更したい場合は、「.admin-box」の「border」の値を変えてください。

サイト管理者名の下線部を変更したい場合は、「.admin-box hr」の「border」の値を変えてください。

border: 線の太さ 線の種類 線の色;

まとめ

今回はサイト管理者紹介の作り方について解説しました。

テーマを導入しても、「デフォルトのデザインだとなんかパッとしない」ということもあるでしょう。

そういったときに、HTMLやCSSを知っていると自分でカスタマイズできるので、学んでおくのも良いかと思います。

というわけで、今回は以上となります。

プログラミングについては他にも色々書いているので、よかったら下記リンクもどうぞ。

コメント

タイトルとURLをコピーしました