Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】記事ページのコメント欄に上余白を設…

【Seesaaブログ新デザインシステム】記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る

Seesaaブログ新デザインシステムの記事ページのコメント欄に上余白を設定し、「コメントを書く」ボタンを作る
■Seesaaブログの「コメント欄」を編集
■上余白と「コメントを書く」を編集
■CSSの「.module--comments .module__heading」「.module--comments .comments__leave」を編集  

ここまで記事ページの下部に表示される「関連記事(関連する記事)」部分を編集してきましたが、「関連記事」の下には「コメント欄」がありますので、今回はこの「コメント欄」を編集したいと思います。
まずは余白について、です。



私は、メインコンテンツのパーツ同士の余白を100pxに設定しようと思っています。
パーツの上に余白100pxを付けることでパーツ同士の間隔を調整するつもりです。
なので、「関連記事」全体を編集した際には、関連記事の下に余白を設定しませんでした。
(関連記事の下のパーツである「コメント欄」の上に余白100pxを設定するから関連記事では下余白を設定しない、と書いていたはずです)






実際に「記事ページ」を見てみると、関連記事全体の設定で「margin-bottom: 0px;」つまり下余白を「0px」にしたことにより、コメント欄との間に余白がありません。


編集前のコメント欄の画像


くっ付いたままの状態ではおかしいので、まずはコメント欄の上に余白100pxを設定したいと思います。関連記事に合わせてタイトルも左寄せにします。
そして、コメント欄に設定されている「コメントを書く」という案内リンクをボタンに変更したいと思います。





コメント欄の上余白とコメント欄タイトルを編集する


コメント欄とその上に配置されるパーツ「関連記事」との間を広く(100px)設定します。
あと、タイトル表示を現在の真ん中配置から左寄せに変更します。


コメント欄のタイトル部分の画像



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「.module--comments .module__heading」を探します。



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


<元コード>
.module--comments .module__heading {
margin-bottom: 10px;
}


<編集後>
/*** 個別記事の下(コメント欄)
*****************************************************/

.module--comments .module__heading {
margin-top: 100px;
text-align: left;
padding: 3px 15px;

}


●コメントアウトで見出しを付けています。

●この「.module--comments .module__heading」で、コメント欄の上にある「関連記事」との間隔を設定します。このブログでは基本的に、メインコンテンツのパーツ同士の余白は100pxに設定しようと思っていますので「margin-top: 100px;」と記述します。(もちろん、好きなように数値を変更してください)

●あ、実は「関連記事」にはサムネイル画像の下に20pxの余白が入っていますので、ここで100pxを設定しても見た目は100px以上の余白があるように見えると思います。気になる方は100pxではなく90pxとかにしてみてはどうでしょう?(私は面倒なのでしませんw)



●「.module--comments .module__heading」
「.module--comments .module__heading」という記述には2つのclassが同時設定されています。「module--comments」と「module__heading」です。
このうち「module__heading」は、既にサイドバータイトルとしてCSSで設定していました。

<サイドバータイトルで設定している「module__heading」>
/*** サイドバータイトル ***/
.module__heading {
font-size: 16px;
background-color:#4E667D;
color:#fff;
text-align:center;
margin-bottom: 15px;
padding:3px 0px;
border-radius: 3px;
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


この「module__heading」の設定が生きていることに気を付けてください。
「module__heading」が生きていますので、「module__heading」の設定から変更する部分だけをここでは記述しています。(重複して指示を出す必要はありません)
つまり、サイドバーのタイトル表示と基本は同じなんだけど、この関連記事のタイトルは文字は左寄せ(text-align: left;)にして、内側に余白を追加した(padding: 3px 15px;)、という記述内容になります。


ちなみに、元コードで指示されていた「margin-bottom: 10px;」ですが、編集後のコード記述では削除されています。
これは、「module__heading」の中に既に「margin-bottom: 15px;」が記述されているからです。
サイドバーのタイトル表示とは違う部分だけを改めて指示しているので、重なってしまった「margin-bottom」は、削除してもかまわないのです。



コード編集後のCSS


コード編集後のコメント欄のスタイルシート



コメント欄の「コメントを書く」をボタンにする


コメント欄には「コメントを書く」というリンク文字があり、ここをクリックするとコメント記入欄になります。
それにしても「続きを読む」と同じぐらいそっけない文字リンクです。
なので、この「コメントを書く」をボタンにしてしまいます


デフォルトの場合
現時点のコメント欄


編集後のイメージ
編集後のコメント欄

編集後のコメント欄の画像



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面で「.module--comments .comments__leave」を探します。
このclassが「コメントを書く」の記述になります。
なので、元コードには「text-align: right;」(文字は右寄せ)と設定されています。


このclass部分にわかりやすいように見出しを付け、その下に新しく作ったclassを記述します。
なぜ追加するのかというと、ボタンにしたいと思っているわけですから、「a」と「a:hover」が必要になるからです。(「a」はリンク設定、「a:hover」はマウスを乗せた時の設定です)



CSSの該当部分に「編集後」のコードをコピペするか直接記述し、変更内容を「保存」します。


<元コード>
.module--comments .comments__leave {
text-align: right;
}


<編集後>
/****** コメントを書くボタン ******/
.module--comments .comments__leave {
text-align: right;
}

.module--comments .comments__leave a {
float: right;
border: 1px solid #909090;
/* 外枠 */
padding: 3px 10px 3px 10px;
text-decoration: none;
background: #909090;
/* ボタン全体背景色 */
color:#fff; /* 文字色(白) */
border-radius: 3px;
-webkit-border-radius: 3px;
/* Safari,Google Chrome用 */
-moz-border-radius: 3px;
}


.module--comments .comments__leave a:hover {
border: 1px solid #bbb;
/* 外枠 */
background: #ccc; /* ボタン全体背景色 */
color: #fff; /* 文字色(白) */
}


●コメントアウトで見出しを付けています。
●ボタンは通常が濃い灰色、マウスをのせると薄い灰色になるようにしていますので、カラーコードを変更してお好きな色に設定してください。



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


コメントを書くボタン部分のスタイルシート

通常時のコメントを書くボタン

マウスを乗せた時のコメントを書くボタン




次の記事の紹介

「コメントを書く」ボタンを作ったので、次の記事では実際にコメントをもらった時の表示を編集したいと思います。


【Seesaaブログ新デザインシステム】記事ページのコメント欄の表示設定を編集する
記事ページの一番下に「コメント欄」があります。もらったコメントがある場合のみ、「コメント欄」タイトルの下に各コメントが表示されることになりますので‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。