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

どうも！フジグチです！

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

little-strange.hatenablog.com

そこをカスタマイズするのか！

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

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

「コメントを書く」ボタンをカスタマイズするCSS
「コメントを書く」ボタンを任意の文字列にするCSS
- 文言を変えるCSS
- 疑似要素を使う
「続きを読む」のカスタマイズ
まとめ

CSSを貼り付ける場所

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

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

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

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

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

このようなデザインが▼

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

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

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

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

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

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

ん？あれ？

そこをカスタマイズするのか！

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

いつカスタマイズしたんだ！

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

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

ではありません！

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

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

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

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

というわけにもいかないので自分の分かる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;/*ボックスの影*/
}