<!-- シェアボタン -->
<div class="share-button-area">
    <ul>
        <li class="share-button twitter">
            <a href="#" onclick="shareTwitter();">
                <span class="icon-text">Twitter</span>
            </a>
        </li>
        <li class="share-button hatena">
            <a href="#" onclick="shareHatena();">
                <span class="icon-text">B!</span>
            </a>
        </li>
        <li class="share-button pocket">
            <a href="#" onclick="sharePocket();">
                <span class="icon-text">Pocket</span>
            </a>
        </li>
        <li class="share-button send_coffee">
            <a href="/socialtipping">
                <span class="icon-text">この記事に投げ銭！</span>
            </a>
        </li>
    </ul>
</div>
<style>
.share-button-area {
    text-align: center;
    margin: 3em 0;
}

.share-button-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.share-button-area li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19%;
    height: 4em;
    background-color: #313131;
    transition: transform 0.2s;
}

.share-button.hatena {
    width: 14%;
}

.share-button.send_coffee {
    width: 48%;
}

.share-button-area li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-button-area .icon-text {
    font-family: helvetica neue, helvetica, arial, sans-serif;
    font-weight: bold;
    font-size: 0.95em;
}

.share-button.hatena .icon-text {
    font-family: Verdana;
}

.share-button.twitter {
    background-color: #55acee;
}

.share-button.hatena {
    background-color: #008fde;
}

.share-button.pocket {
    background-color: #ea5a6c;
}

.share-button-area li:hover {
    transform: translateY(-0.2em);
}
</style>
<script>
function shareTwitter() {
    window.open('http://twitter.com/share?text=' + encodeURIComponent('Link:' + document.title.replace('- Goodegg.jp', '│ Goodegg jp')) + '&url=' + encodeURIComponent(location.href), 'sharewindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=');
}

function shareHatena() {
    window.open('http://b.hatena.ne.jp/entry/' + encodeURIComponent(location.href), 'sharewindow', 'width=950, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=');
}

function sharePocket() {
    window.open('https://getpocket.com/edit?url=' + encodeURIComponent(location.href), 'sharewindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=');
}
</script>
Markup

:root {
    --theme-color: #fad238;
    --content-width: 800px;
}
.header {
  background-color:var(--theme-color); /* ヘッダーの背景色を指定 */
  position: relative; /* スクロール追従させない */
}
/* フッターの左右余白を塗りつぶす */
.container {
    padding: 0;
    max-width: 100%;
}
.page {
  padding-top: 0; /* ヘッダーの分コンテンツがかぶらないようにしている幅をなくす */
  font-family: "Noto Sans JP", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.contents {
    max-width: var(--content-width);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
    margin: 0 auto;
}
.footer{
  background-color:var(--theme-color); /* フッター塗りつぶし */　
}
.footer__contentsWrapper{
  margin: auto;
  padding: 1rem;
  max-width: var(--content-width);
  text-align:right; /* フッターは右寄せｘ */
}
.footer .notion-asset-wrapper-image {
  width: 800px !important;
}
.coverImage {
  height: auto;
  max-width: 800px;
}
.notion-asset-wrapper img {
    border-radius: 8px;
}
.notion {
    font-size:1.1em !important;
}
.contents .notion-text span {
    line-height: 1.7em !important;
}
.notion-collection-card-body .notion-page-title-text {
    font-size:1.4em !important;
    line-height: 1.6em !important;
}
.notion-list-item-title .notion-page-title-text {
    font-size:0.9em !important;
    line-height: 1.0em !important;
}
.notion-table-of-contents-item{
    font-size:0.92em !important;
}
.notion-page-title-icon{
  display: none !important;
}
.notion-collection-card-property{
    font-size:0.85em !important;
}
.notion-h1{
  position: relative;
  padding: 1.5rem 1.5rem calc(1.5rem + 10px);
  border: 2px solid #000;
  margin-top: 0.9em !important;
  margin-bottom: 0.6em !important;
}

.notion-h1::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #000;
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.notion-h2::before{
  border-top: 0px;
  border-bottom: 0px;
}
.notion-h2{
  text-align: left !important;
  position: relative;
  padding: 1.5rem 1rem;
  margin-top: 0.6em !important;
  margin-bottom: 0.6em !important;
    
}
.notion-h2::after{
 position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-top: 0px;
  border-bottom: 0px;
}
.notion-h3{
  padding: 1rem 2rem;
  border-bottom: 3px dotted #000;
  background: #f4f4f4;
  margin-top: 0.6em !important;
  margin-bottom: 0.6em !important;
    
}
.contents .notion-text{
    margin: 1em 0  1.5em 0;
}
.contents .notion-text span{
    line-height: 1.6em;
}
@media (max-width: 640px) {
  .notion-bookmark-image {
    display: block;
  }
}
 /* ページのアイコンとDBのもっと見るを非表示に */
.pageIconSpacer,
.pageIcon-cover,
.notion-db-more{
    display: none !important;
}
 /* グレーボタンを真っ黒に */
.wraptas-button-gray_background {
    background-color: #000000 !important;
}
 /* Youtube埋め込み用 */
.youtube {
width: 100%;
aspect-ratio: 16/9;
}
 /* flickr埋め込み用 */
.flickr{
  font-size:12px;font-size:1.2rem;
  text-align:center;
  margin-top:4px;
  margin-bottom:4px;
}
.flickr img{
  max-width:100%;
  width:auto;
  max-height:500px;/*縦位置画像の最大の高さ*/
  height:auto;
  margin-left:auto;
  margin-right:auto;
}
CSS