はてなブログ

【はてなブログ】コメントを書くボタンを大きく分かりやすくする方法

f:id:langnerdmom:20210326204504j:plain:w300

こんにちは!

書きたいことが溜まりすぎ、出産前後のやらなきゃいけないこと溜め過ぎ。

何からしたら良いのか分からないので、ひとつずつ出来ることからやっていこうと思います。

今日は、はてなブログのコメントを書くボタンが小さい!という不満を解決した方法をご紹介します

コメントを書くボタンを大きくカスタマイズ

はてなブログ』の可愛いテーマ「Milky Diary」なんですが、コメントを書く欄が小さいな〜。

大きくするにはなにかいい方法はないかな?

と、調べてみたら見つけました!

参考記事はてなブログ【カスタマイズ】効果が高いのに誰もやらないヤツ5選 – でょおのぼっちブログ

\カスタマイズ前/

f:id:langnerdmom:20210326170136j:plain:w250

\完成図/

f:id:langnerdmom:20210326170344j:plain:w250

カスタマイズをする時は、バックアップを取って自己責任でお願いします。

Font Awesomeを使うパターン

参考記事では🗨吹き出しのマークを使うのにFont Awesome5を読み込んでいます。

まだFont Awesomeを使っていない方は読み込みましょう。

Font Awesomeを読み込まないパターンも後で紹介します。

読み込まない場合は、はてなブログのアイコンフォントを使うところまで読み飛ばしてください。

Font Awesome5を読み込む

下記のコードを「設定」→「詳細設定」→「headに要素を追加」に貼り付けます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

f:id:langnerdmom:20210326171719j:plain:w250

「設定」をクリック

f:id:langnerdmom:20210326171743j:plain:w250

「詳細設定」を選択

f:id:langnerdmom:20210326171810j:plain:w250

「headに要素を追加」に先程のコードを貼り付けます。

f:id:langnerdmom:20210326172153j:plain:w250

一番下にある「変更する」もお忘れなく!

デザインCSSにコードをコピペ

「デザイン」→「カスタマイズ」→「デザインCSS」に下のコードを貼り付けます。

.leave-comment-title {
display:inline-block;
width:100%;
text-align:center;
padding:1em 0;
border:thin solid #bbb;/*枠の色*/
border-radius:3px;
transition: 0.3s ;
font-size:120%;
}
.leave-comment-title:before {
font-family: "Font Awesome 5 Free";
content: "\f075";
padding-right:0.2em;
  color: #ee8ea0;
}
.leave-comment-title:hover {
color:#fff;
background-color:#D5B9E8;/*マウスオーバー時の色*/
}

このコードをまるっと貼り付けるだけです

f:id:langnerdmom:20210326172816j:plain:w250

「🎨デザイン」を選択

f:id:langnerdmom:20210326172844j:plain:w250

「カスタマイズ」を選ぶ

f:id:langnerdmom:20210326172905j:plain:w250

「{}デザインCSS」に先程のコードを貼り付けて保存。

それだけです!とっても簡単ですよね♪

吹き出しのマークを変えたい場合は、content: “\f075”;f075の部分を任意のものに変えてくださいね。

Font Awesomeのアイコンは『Font Awesome』を参考にしてください。

はてなブログのアイコンを使う場合

Font Awesomeを読み込むとページの表示が遅くなるという情報を読んだので、はてなブログのフォントアイコンを使ったパターンもご紹介します。

\完成図/

f:id:langnerdmom:20210326175844j:plain:w250

はてなブログのアイコンフォント」に吹き出しのマークが無いので、鉛筆のマークに変更しています。

はてなブログのフォントアイコンを使う場合、「headに要素を追加」は、必要ありませんよ

.leave-comment-title {
display:inline-block;
width:100%;
text-align:center;
padding:1em 0;
border:thin solid #bbb;/*枠の色*/
border-radius:3px;
transition: 0.3s ;
font-size:120%;
}
.leave-comment-title:before {
font-family: "blogicon";
content: "\f024";
padding-right:0.2em;
  color: #ee8ea0;
}
.leave-comment-title:hover {
color:#fff;
background-color:#D5B9E8;/*マウスオーバー時の色*/
}

上記コードをデザインCSSに貼り付けるだけ♪

違うアイコンを使いたい場合は、「はてなブログアイコン素材一覧127種と使い方 – かまさんちのブログ」を参考にcontent: “\f024”;f024を好きなものに変えてください。

まとめ

いかがでしたでしょうか?

今使っているはてなブログのテーマは、始めからコメントのボタンが大きいので、このカスタマイズは外しています。

違うテーマを使いたくなった時のために忘備録として残しておきます

忙しいワーママに

忙しいワーママでも「はてなブログPro」でなら、簡単なのに本格的なブログが始められる


一緒に始めてみませんか?

記事数が増えたら「はてなブログ【カスタマイズ】効果が高いのに誰もやらないヤツ5選 – でょおのぼっちブログ」で紹介されている、フッターのカスタマイズもしたい!

やりたいことリストが増えるばかりで、実行していかないとですね