あめつくのブログ

  • このエントリーをはてなブックマークに追加

アメブロカスタマイズ 「自分のコメント欄」と「読者のコメント欄」の位置を別々にする(css)

広告

ここでは「 『自分のコメント欄』と『読者のコメント欄』の位置を別々にする方法」を説明します。

【変更前】

【変更後】

なお、cssを編集するにはブログデザインを「CSS編集用デザイン」にする必要があります。ブログのデザインをCSS編集用デザインにする方法は、「アメブロのcssを編集するための設定」を参考にしてください。

広告

「自分のコメント欄」と「読者のコメント欄」の位置を別々にする方法

マイページ右上の「アメーバのサービス一覧」をクリックします。
サービス一覧(PC編)

[デザインの変更]をクリックします。
デザインの変更(PC編)

[cssの編集]をクリックします。

cssの編集画面が表示されます。ここから、コメント欄の位置を別々にするためのcssの編集に入ります。

下の赤枠の内容をコピーします。これが、「自分のコメント欄」と「読者のコメント欄」の位置を別々にするcssです。

上の赤文字の数値を変えると、読者のコメント欄の右側の余白のサイズを変更できます。数値を大きくすると余白がおおきくなり、数値を小さくすうと余白がちいさくなります。

同様に、下の赤文字の数値を変えると、自分のコメント欄の左側の余白のサイズを変更できます。

.blogComment{
margin-left:0;
margin-right:20%;
}
.ownerComment{
margin-left:20%;
margin-right:0;
}

コピーした内容はcssの一番下の部分に貼り付けます。
貼り付けが終わったら、[保存]ボタンをクリックして追加したcssを保存します。

保存できたらブログを表示し、ブラウザの更新ボタンをクリックします。(古いデータが残っていると変更したcssが反映されませんので、ブラウザの更新ボタンをクリックして最新の状態に更新します。)

これで、「自分のコメント欄」と「読者のコメント欄」の位置を別々にすることが出来ます!

ここまでの内容を動画でも確認できます。
よかったら、参考にしてください!

 

なお、コメント欄の背景色を変更するには、「 「自分のコメント欄」と「読者のコメント欄」の背景色を別々にする(css)」を参考にしてください。

コメント欄の角丸にするには、「コメント欄の枠を角丸にする(css)」を参考にしてください。

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

カテゴリー