kharukaのブログ~お金と技術とキャリア~

Edu Fin~金融×教育~若いうちからお金について学ぶってだいじ!学んだテクノロジーはみんなの財産。過去、現在、将来の人生についてのブログ

はてなブログ記事の「トップに戻る」(2019年2月16日更新)

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook

はてなブログ記事の「トップに戻る」

読みやすいブログ作成のため「トップに戻る」機能を追加してみました。

参考記事通りに本当にコピー&ペーストで実装出来るので簡単です。

私の「トップに戻る」ボタンの { } デザインCSS は以下の様にしています。ご参考までに。

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:7px;
    right:7px;
    padding:10px 12px;
    color: #353535; /* 文字色 */
    font-size:16px;
    text-decoration:none;
    background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
  );
  background-size: 4px 4px; 
  border: 3px solid #c9c19f; /* ボーダーの色 */
  border-radius: 50%; /* ボタンの丸み */
  opacity: 0.6; /* ボタンの透明度 */
  z-index: 99;
}

/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
    color: #ffffff; /* 文字色 */
    background:#c9c19f;/* 背景色 */
}

参考

はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook