監修者枠の装飾

デザイン見本

伊藤悦子

人と動物の共生と幸せを追求しているライターです。犬や猫・モルモット・セキセイインコなど、さまざまな動物と暮らしてきました。現在は茶トラ猫2匹と同居中です。執筆した記事一覧


  • 麻布大学卒(獣医畜産系)
  • ペット栄養管理士
  • 家畜人工授精師
  • 動物医療発明研究会会員

URL:ブログ ポートフォリオ

CSSの設定

  • エリア全体を「author」というクラスを付けたdivで囲みます。
  • 枠の左ボーダーカラーは個別に設定しています。(基本色の設定ではありません。)
  • 写真と名前部分は「title」というクラスを付けたdivで囲みます。
  • 写真はさらに「portrait」というクラスを付けたspanで囲みます。
  • 点線部分は「dot」というクラスを付けたHRです。(フロートのクリアも兼ねているので必要です。)
  • プロフィール部分はpタグに「detail」というクラスを付けます。
  • 経歴のリスト部分はULを使い「list」というクラスを付けます。
  • URL部分はpタグに「info」というクラスを付けます。

HTMLサンプル

<div class="author"><div class="title"><span class="portrait"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/torus1/20190114/20190114225722.jpg" width="100"></span>伊藤悦子</div><hr class="dot"><p class="detail">人と動物の共生と幸せを追求しているライターです。犬や猫・モルモット・セキセイインコなど、さまざまな動物と暮らしてきました。現在は茶トラ猫2匹と同居中です。<a href="https://www.degu-lifestyle.com/archive/category/%E5%9F%B7%E7%AD%86%E8%80%85%3A%E4%BC%8A%E8%97%A4%E6%82%A6%E5%AD%90" target="_blank" rel="noopener noreferrer">執筆した記事一覧</a></p><hr class="dot"><ul class="list"> <li>麻布大学卒(獣医畜産系)</li> <li>ペット栄養管理士</li> <li>家畜人工授精師</li> <li>動物医療発明研究会会員</li></ul><hr class="dot"><p class="info">URL:<a href="http://etsugon.hatenablog.com/" target="_blank" rel="noopener noreferrer">ブログ</a> <a href="https://suetsuko.wordpress.com/" target="_blank" rel="noopener noreferrer">ポートフォリオ</a></p></div>