ブログカスタマイズの雑談BLOG

Seesaaブログの記事ページには、記事部分の下に「関連記事（関連する記事）」があり、その下に「コメント欄」があります。


コメント欄には「コメントを書く」という案内リンクがあり、私は以前の記事＜■【Seesaaブログ新デザインシステム】記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る＞で、このリンク部分をボタン表示に変更しました。



この「コメントを書く」ボタンをクリックして開いたページが、「コメント記入ページ」です。
コメント記入ページは、コメントを書きたい場合にのみ表示されるページです。
閲覧者はコメントを書き込んだら「書き込む」ボタンをクリックして、内容を送信します。
今回はこの「書き込む」ボタンのスタイルを編集したいと思います。



現時点のテンプレート



編集後のイメージ



デフォルトのボタンは水色なんですが、私のブログは紺色っぽい青色を基調にしてデザインしているので、水色だと浮くんですよね。
なのでボタンの背景色を変更して、ボタンの角を丸くしたいと思います。



以下、やり方を書いていきますが、注意していただきたいのは、ここでボタンのスタイルを変更すると、Seesaaブログ全体のボタンのスタイルも同じように変更されるということです。


この記事で説明するのは、あくまでもコメント記入欄の「書き込む」ボタンのカスタマイズです。でも、この「書き込む」ボタンをカスタマイズすると、ブログのすべての送信ボタンが同じように変更されてしまいます。
「え〜！？」って感じなんですけど、実は何の問題もないのです（笑）



Seesaaブログのテンプレートでボタン表示が指定されているのは、このコメント欄の「書き込む」ボタンと、ブログにパスをかけている場合の「認証する」ボタンだけです。
ここで「書き込む」ボタンを変更したからといって、同じように変わってしまうのは「認証する」ボタンだけですから、気にしなくていいのではないでしょうか。
「認証する」ボタンとか、私は必要ないからどうでもいい部分です。
（「何の問題もない」と言い切った理由が「どうでもいい」だというｗ）



では、「書き込む」ボタン、つまりSeesaaブログの送信ボタンのスタイルを編集しますが、その前に、コメント記入ページに関する記事を紹介しておきます。

コメント記入欄の「書き込む」ボタンを編集する

CSS（スタイルシート）を編集します。
管理画面の「スタイルシート編集」画面で「input--submit」というclassを探します。



下記に「元コード」と「編集後」のコードを掲載しています。
CSSの該当部分に「編集後」のコードをコピペもしくは該当箇所を直接変更して、「保存」してください。説明するために文字色を変更している部分がありますが、気にせずにコピペをどうぞ。


＜元コード＞


＜編集後＞


●ちょっとボタンの横幅が広すぎたので「width」を30%から20%に変更しました。
●ボタンの角を丸くしました。
●ボタンの色はこのブログの基本色にしている紺色っぽい青色に変更し、マウスを乗せた時には灰色になるようにしました。（カラーコードは好きなように変えてください）

コード編集後のCSSと実際のページ

ボタンの表記を「投稿する」に変更する

上記の編集後のコードに「/* 投稿するボタン */」とコメントアウトしていますが、これは、私がこのボタンの表記を「書き込む」ではなく「投稿する」に変更したいからです。
別に「書き込む」のままでかまいませんが、なんとなく私は「書き込む」よりも「投稿する」の方が好きなので、表記を変更します。（変更しない方は以下の編集をする必要はありません）



HTMLを編集します。
管理画面の「HTML編集」画面を開き、「書き込む」というワードで検索すると1ヶ所がヒットしますので、この部分を編集します。





この「書き込む」という言葉を「投稿する」に変更して保存します。
作業はこれだけなので、簡単に変更できます。




次の記事の紹介

次の記事では、Seesaaブログのタグ一覧ページの記事を線で囲む方法を説明します。