フジブロっ!

HTML、CSSを独学で楽しく学ぶガテン系のブログ

【はてなブログ】コメントボタンのカスタマイズ

どうも!フジグチです!

今日は普段読ませて頂いているLSSさんのブログで「コメントを書く」ボタンのカスタマイズをしている記事を読みました。

little-strange.hatenablog.com

フジグチ
フジグチ
そこをカスタマイズするのか!

と衝撃?刺激?を受けたので当ブログでもカスタマイズしてみたいと思います。

コメントボタンのカスタマイズ

CSSを貼り付ける場所

【PC】
スパナマーク ⇒ デザインCSS ⇒ 枠内に貼り付け

【スマホ】
記事 ⇒ 記事上に<style>~</style>で囲んで入れる

「コメントを書く」ボタンをカスタマイズするCSS

「コメントを書く」ボタンのカスタマイズをする方法は

.leave-comment-titleというセレクタに値を付与していくことでカスタマイズ出来ます。

このようなデザインが▼

「コメントを書く」ボタンのカスタマイズ説明1

下記のようなコードを入れると▼

.leave-comment-title {
    background: #fffbd6;/*背景色*/
    border-radius: 4px;/*角丸*/
}

「コメントを書く」ボタンのカスタマイズ説明2
このようになります。

大幅に変えていないので少し分かりづらいですね。ごめんなさい。

ちなみにこれは当ブログのデザインに合わせてカスタマイズしていたものです。

ん?あれ?

フジグチ
フジグチ
そこをカスタマイズするのか!

と最初に衝撃を受けていたはずだったのですが、この記事を書くにあたり自分のブログで色々試していたところ、すでにCSSが記述してありました。

フジグチ
フジグチ
いつカスタマイズしたんだ!

と2度目の衝撃を受けたのですが、たぶん初めてコメントが来た時に舞い上がって慌てていじったんでしょうね。全然覚えていませんでした(笑)

それじゃあ今日のカスタマイズは終わり、、、

ではありません!

LSSさんの記事では「コメントを書く」の文字をカスタマイズするというものでしたので、文字の書き換えをやってみたいと思います。

「コメントを書く」ボタンを任意の文字列にするCSS

とは言ってみたものの、はてなブログでは構造部分のHTMLはいじる事が出来ないので、【書き換え】ることが出来ません。

JavaScriptの知識があれば書き換えることも出来るのかもしれないので、5年程待っていただければ、、、

というわけにもいかないので自分の分かるCSSの中で工夫して考えてみました。

文言を変えるCSS

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

このコードは当ブログのデザインに合わせて作ったものをそのまま載せています。

疑似要素を使う

::after を使って(::beforeでも可)もともとある「コメントを書く」のボックスの上に新たに任意の文字列を入力したボックスを重ねます。

「コメントを書く」ボタンのカスタマイズ説明3

疑似要素で新たな文言を入力したボックスを作る

「コメントを書く」ボタンのカスタマイズ説明4

重ねる

元々の「コメントを書く」ボックスに擬似要素を付けているのでクリックしてコメント入力ボックスを呼び出すことも可能です。

急に英語?と思うかもしれないですが、元々このネタはピコピコくんさんのこの記事で「コメントを書く」を「Add a comment」にしたいということで、それを読んだLSSさんが記事にして、それを読んだわたしがまた記事にしています。(笑)

esthersoftware.hatenablog.com

他の方のブログを読んでその困ったことを題材にして、すぐに記事に出来るというLSSさんの行動力と発想力に本日3度目の衝撃を受けまして、記事にしてみました。

勝手にネタを拝借してすみませんm(__)m

ちなみにピコピコくんさんの記事では「続きを読む」も変えたいようだったのですが、当ブログでは「続きを読む」を入れていないので、カスタマイズすることは出来ません。。。

でも気になりだしたら止まらない性格なので、調べてみました。

「続きを読む」のカスタマイズ

上述した「コメントを書く」文言を変えるCSSの.leave-comment-titleの部分を.entry-see-moreというセレクタに変えてbackground:~とかborder-radius:~とかを色々いじっていくと同じようにカスタマイズ出来ます。

まとめ

困ったり悩んだりしていることから新しい発想が生まれて、いい刺激になります。思いがけずカスタマイズが出来ていい勉強になりました。

コメントボタンが表示されない時は更新ボタンを押してみて下さい。

CSSで困っていることを募集とかしてみるのも面白いかもしれないですね。

最後までお読み頂きありがとうございました。

こちらもお読みください