デザイン紹介‼

　やっほー。

　今日は、この前の記事で、図々しく催促したのに、本当に33個スターもらったから、宣言通りデザインCSS公開するよ～。

　…そこの君、「誰得w」って言わない！

　まずは、とりあえず、全部貼り付けるね。

/* <system section="theme" selected="26006613659732769"> */

@import url("https://blog.hatena.ne.jp/-/theme/26006613659732769.css");
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */
:root {
--theme-color: #d2f9b8;
--navigation-color: #3dffbe;
--navigation-hover-color: #b3ffe8;
--main-color: #5edc09;
--accent-color: #99adff
}
body {
background: #efffe5;
}
.entry-content {
font-family: 'ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important;
}
.leave-comment-title {
position: relative;
}
.leave-comment-title::after {
content: "チャットを送る";/*表示される文字*/
position: absolute;
top: 0;
left: -2px;
width: 110%;/*文字長さによって調整*/
height: 72%;/*好みで調整*/
text-align: center;/*文字中央寄せ*/
background: #99adff;/*背景色*/
padding: 8px 10px 4px;/*内余白*/
border-radius: 4px;/*角丸*/
-webkit-box-shadow: 1px 3px 10px #ddd;
box-shadow: 1px 3px 10px #ddd;/*ボックスの影*/
}
/*太文字strongをマーカー線引く*/
.entry-content strong {
background: linear-gradient(transparent 90%, #3dffbe 40%);
}
body{
font-family: 'Playfair Display','ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important; /*フォントの種類*/
}
#blog-title #blog-description ,
#title a{
font-family: 'Tangerine', cursive;
}
#blog-title a{
font-size:180%;
}
/* 読者になるボタンを大きくする */

.subscribe-button {
margin: 1em 0;
}
/* プロフィールの読者数表示を消す */
.subscription-count-box {
display:none!important ;
}
<div class="hatena-module hatena-module-profile">
<div class="hatena-module-title">
プロフィール
</div>
<div class="hatena-module-body">
<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button unsubscribing">
<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 class="subscription-count-box js-subscription-count-box" style="display: block;">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count">9</span>
</div>
</div>
</div>
</div>
.hatena-module{
padding-left: 0px;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.unsubscribing{
background-color: #eaf4fc;
border-radius: 2em;
box-shadow: 1px 3px 0px 1px #38b48b;
font-size: 120%;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.unsubscribing:hover{
box-shadow: 0 0 0px 0 #000;
margin: 3px 0px 0 1px;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.subscribing{
border-radius: 2em;
box-shadow: 1px 3px 0px 1px #948383;
font-size: 120%;
}
.hatena-module .hatena-follow-button.js-hatena-follow-button.subscribing:hover{
box-shadow: 0 0 0px 0 #000;
margin: 3px 0px 0 1px;
width: 105px;
}

　はい。なんか、すでに文字数が3000行きそうなんだけどw

　で、文字の色分けは今したんだけど、何のためのコードかで分けたから、1個1個説明するね。

赤色(テーマ附属のコード)
橙色(記事のフォント)
黄色(コメントのボタン)
薄緑色(マーカー)
黄緑色・緑色(全体のフォント・ブログ名のフォント)
水色・青色・紫色(読者になるボタン)
終わりに

赤色(テーマ附属のコード)

　まずは、赤色のやつ。これはね、ボクが使ってるカプチーノっていうテーマについてくるやつで、いろんな場所の色を変えられるんだよ。

/* <system section="theme" selected="26006613659732769"> */

@import url("https://blog.hatena.ne.jp/-/theme/26006613659732769.css");
/* </system> */

　シャープが付いてるやつは、カラーコードって言って、そこを変えると色違い作れるよ！

　カプチーノ以外でも使えるかどうかは知らないけど、大体は使えるやつだと思うから、気になったら使ってみて！

橙色(記事のフォント)

　次は、記事のフォント変えるやつ！これは、ゴシックとかいろんなやつに変えれるから、結構おすすめ！

.entry-content {
font-family: 'ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important;
}
.leave-comment-title {
position: relative;
}

　これは、'○○'のとこを変えればできるよ！

黄色(コメントのボタン)

　これはね、この前変えた、コメント送るとこのボタンのやつ。

.leave-comment-title::after {
content: "チャットを送る";/*表示される文字*/
position: absolute;
top: 0;
left: -2px;
width: 110%;/*文字長さによって調整*/
height: 72%;/*好みで調整*/
text-align: center;/*文字中央寄せ*/
background: #99adff;/*背景色*/
padding: 8px 10px 4px;/*内余白*/
border-radius: 4px;/*角丸*/
-webkit-box-shadow: 1px 3px 10px #ddd;
box-shadow: 1px 3px 10px #ddd;/*ボックスの影*/
}

　これも、文字と色変えれるよ～。

　あと、直接関係はないけど、メッセージを「チャットを送る」に変えたのは、遠慮無くガンガンチャットして欲しいから！

　記事に関係ない事を除いて、ふと思っただけのこととかでもいいし、一人何回まででもいいから、チャットしてみてね。ボクが喜ぶよw

薄緑色(マーカー)

　次は、この前付けたマーカー！

/*太文字strongをマーカー線引く*/
.entry-content strong {
background: linear-gradient(transparent 90%, #3dffbe 40%);
}

　これも色変えれるよ。

　あとさ、自分が紹介する側なんだけどさ、マーカーを半透明にする方法知ってる人いたら教えてw

黄緑色・緑色(全体のフォント・ブログ名のフォント)

　そして、つい最近記事のフォントを明朝体にしたにも関わらず、記事以外も変えるっていうねw

body{
font-family: 'Playfair Display','ヒラギノ明朝', '游明朝体', 'MS P明朝', serif !important; /*フォントの種類*/
}
#blog-title #blog-description ,
#title a{
font-family: 'Tangerine', cursive;
}
#blog-title a{
font-size:180%;
}

　これも、違うフォントに変えれるよ。

　あと、これでやると、ほんとにほぼ全部変わるからね。

　そんでもって、緑のは、ブログ名のフォント変えるやつ。このままだと、筆記体と明朝体になるよ。

水色・青色・紫色(読者になるボタン)

　これは、ちょうど今日変えたやつw

/* 読者になるボタンを大きくする */

　これも、色変えれて、おっきさとか多分いじれるよ。ボクは今試して無理だったけどw

　ちゃんとやり方調べればできる…と思うよ。

終わりに

　いまさらだけど、見出しと目次使うの久しぶりだねw

　まあ、それは良いとして、ところどころ抜き出してちょっといじればすぐにでも使えるCSS集はどうだった？

　もし、一部でも使ってみてくれたら、嬉しいな～。

　それと、最後に、はてなブログ公式さんが開発した、ログインしてる人限定も含んだ画期的な機能たちを紹介するよ！

　まず、はてなスター！これは、押すことによって、自分の足跡を記事に残したり、「この部分いいね～」みたいに引用して押すこともできるよ！

これ

　記事の最後にあるから、是非押してみてね～。

　因みに、連打とかできるよw（ボクがめっちゃ喜ぶよ）

　次は、ブックマーク！これは、あんまり使ってない人も多いんじゃないかな。

　これは、言うなれば、本の栞や付箋！「この記事、後でまた見返したいな～」とか、「この記事お気に入り！」っていうときに、気軽に挟めるやつだよ～。

　これもまた一番最後の方にあるから、この記事だけに限らず、また見たいって人はブックマークしてみて～。（これもボクがすっごく喜ぶよ！）

　最後に、読者登録！この記事を見てる人は、もちろんみんなしてる…よね？うん、してるね！

　…えっ⁉してないの？じゃあ、今すぐしないと！そうしないと、ボクが新しい記事を書いたときに、通知が来ないんだよ⁉

　うん、そうだよね、今すぐに読者登録したいよね‼そんなキミには、これ！

　これを押せばね、今すぐにボクのブログの読者になれるんだよ！（読者が増えたら、ボクは死ぬほど喜ぶよ！*1）

　じゃあ、7000文字を超えたところで、今回の記事は終わりにしようかな。…記事を極端に長くしすぎたねw

　じゃ、ばいばーい！

*1:死なないけど

雑記

稀に更新されます