今回は読者になるボタンをカスタマイズしました
やり過ぎ感あるかなー、と思いつつも、きっとこう言うの欲しい人いるよね？と思ってエントリー。
htmlとcssを両方いじる必要が出てきますので、その辺りをいじれる方向けです。
作業の前はメモ帳とかテキストエディタにバックアップを取って元に戻せるようにしておいてください。
参考にしたのはこちら。
こちらで紹介されているTwitter Button Conceptを参考に読者になるボタンのカバーをつけてみました。
挙動は大丈夫だと思いますがロゴの位置など調整不足です。ご了承ください。
CSS
まずはCSS、その貼り付け場所はこちら。
デザイン→カスタマイズ→デザインCSSです。
以下コードです。
CSSのコード
/* 読者ボタンカバー */ .cover_sec { box-sizing: border-box; } .cover_sec, .d_button, .d_cover, .d_innie, .d_spine, .d_outie, .d_shadow { transition: .6s; } .cover_sec, d_button { transition-timing-function: ease; } .cover_sec { display: inline-block; position: relative; align-self: center; padding: .375rem 1rem 0 1rem; width: 100px; background: #A9ADB6; border-radius: .25rem; perspective: 300; box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1); } .d_button { opacity: 0; } .d_cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: center bottom; transform-style: preserve-3d; font-size: 1.8em; color: white; text-align: center; pointer-events: none; z-index: 50; } .d_innie, .d_outie, .d_spine, .d_shadow { position: absolute; width: 100%; } .d_innie, .d_outie { height: 100%; background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%); border-radius: .25rem; } .d_innie:after, .d_outie:after { font-family: 'blogicon'; content: "\f000"; } .d_innie { background-color: #c2c2c2; text-shadow: 0 -2px 4px rgba(0,0,0,.2); } .d_spine { top: .25rem; background: #c3c3c3; height: .25rem; transform: rotateX(90deg); transform-origin: center top; } .d_shadow { top: 100%; left: 0; height: 3.5rem; transform-origin: center top; transform: rotateX(90deg); opacity: 0; z-index: 0; background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%); background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%); } .d_outie { background-color: #555; transform: translateZ(.25rem); text-shadow: 0 2px 4px rgba(0,0,0,.2); } .cover_sec:hover { background: #EBEFF2; } .cover_sec:hover .d_button { opacity: 1; } .cover_sec:hover .d_cover, .cover_sec:hover .d_innie, .cover_sec:hover .d_spine, .cover_sec:hover .d_outie, .cover_sec:hover .d_spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); } .cover_sec:hover .d_cover { transform: rotateX(-120deg); } .cover_sec:hover .d_innie { background-color: #c2c2c2; } .cover_sec:hover .d_spine { background-color: #000; } .cover_sec:hover .d_outie { background-color: #c4c4c4; color: rgba(255,255,255,0); } .cover_sec:hover .d_shadow { opacity: 1; transform: rotateX(45deg) scale(.95); } d_small { display: block; padding: 5rem; font: .8rem/1 sans-serif; color: #777; } d_small a { color: #222; text-decoration: none; border-bottom: 1px solid #ccc; } d_small a:hover { border-bottom-color: #222; } .hatena-follow-button-box {} .hatena-follow-button { color: #5d5d5d !important; padding: 4px 10px !important; background: none !important; border: 0px !important; } .hatena-follow-button-box .subscription-count { height: 26px; line-height: 26px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding:1px 10px 1px 10px; } .hatena-follow-button.subscribing, .hatena-follow-button.subscribing.hover, .hatena-follow-button.unsubscribing, .hatena-follow-button.unsubscribing.hover { color: #5d5d5d!important; font-weight: bold; width: 80px; } .hatena-follow-button-box .subscription-count-box { margin: 0 0 0 6px!important; top:-2px; }
htmlの張り方
ブラウザから現在の「プロフィール」部分のhtmlを抜き出して、適当なメモ帳に貼り付けて下さい。
必要な値はそこから取ると作業がしやすいかと思います。
htmlを参照するには、chromeだと「表示」→「開発/管理」→「ソースを表示」ですよ。
そしてサイドバーからモジュールの「プロフィール」を消して、モジュール「html」を代わりに入れます。
この一番下。「モジュールを追加をクリック」
この枠内に以下のhtmlをコピーして、任意の数値や文章を入力してカスタマイズして下さい。
タイトルには「プロフィール」と入力されると良いと思います。
html
<a href=“アバウトページのURLを貼る” class="profile-icon-link"> <img src=“ブログアイコン画像のURL” alt="id:idを入力" class="profile-icon" /> </a><span class="id"> <a href=“アバウトページのURLを貼る” class="hatena-id-link"><span data-load-nickname="1" data-user-name=“idを入力”>id:idを入力</span></a> </span>
<div class="hatena-follow-button-box btn-subscribe"> <div class="cover_sec subscription-count"> <div class="d_button"> <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> </div> <div class="d_cover"> <div class="d_innie"></div> <div class="d_spine"></div> <div class="d_outie"></div> </div> <div class="d_shadow"></div> </div>
<div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div>
これを貼って必要な場所にurlなどを入力してください。
ちょっとおしゃれなプロフィール欄との組み合わせ
また、下記のプロフィール欄のカスタマイズと合わせるのでしたら、上部のhtmlではなく、下記のhtmlを貼り付けてください。
mshitech.hatenablog.com<center><a href="アバウトページのURL" target="_blank"><b>id名前</b>（id:idをここに入力</a>）</center><div style="padding-bottom:10px;"> <div class="profile-circle"> <a href="アバウトページのURL" target="_blank"><div class="outside">about</div></a> </div> <div class="hatena-follow-button-box btn-subscribe"> <div class="cover_sec subscription-count"> <div class="d_button"> <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> </div> <div class="d_cover"> <div class="d_innie"></div> <div class="d_spine"></div> <div class="d_outie"></div> </div> <div class="d_shadow"></div> </div>
<div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div>
</div> <div align="center"><p align="left" style="width:95%; top: -5px;"><font size="2">サイトの説明</font></p></div>
以上です
一番下にあります。サイトの説明文を書いてください。
作業が完了したら、元々の「プロフィール」をサイドバーから消してくださいね。
まとめ
前回に続き少しわかりにくいかも知れませんが、作業としてはこんな感じ終了です。
読者になるボタンを作るのは楽しかったので、もう少しシンプルなやつも作ろうかなと思います。
まずはこれの調整からですけどね・・・
ではでは
