あめつくのブログ

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

アメブロカスタマイズ ブログタイトル+説明文に枠線を引く(css)

広告

ここでは、アメブロのcssを編集して「ブログタイトル+説明文に枠線を引く方法」を説明します。

【変更前】

【変更後】

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

広告

アメブロのブログタイトル+説明文に枠線を引く方法

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

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

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

cssの編集画面が表示されます。ここから、ブログタイトル+説明文に枠線を引くためのcssの編集に入ります。

まず、下の赤枠の内容をコピーします。これがブログタイトル+説明文に枠線を引くためのcssです。

赤文字の部分(左)を変更すると枠線の太さを変更できます。数値を大きくするほど枠線が太くなります。赤文字の部分(中央)を変更すると枠線の種類を変更できます。solid/double/dashed/dotted/noneがよく利用されます。「枠線の種類」を参考にしてください。赤文字の部分(右)を変更すると枠線の色を変更できます。色の変更方法は「アメブロ cssで色を指定する方法」を参考にしてください。

.skinHeaderArea {
border:1px solid #FF6600;
margin-bottom:30px;/*枠下のスペース。「30」を「0」にするとスペースがなくなります。*/
}
.skinBlogHeadingGroupArea{
padding-left:20px;/*「枠の左側」と「ブログタイトル・説明文」のあいだのスペース。「20」を「0」にするとスペースがなくなります。*/
}

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

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

以上、「ブログタイトル+説明文に枠線を引く方法」でした!!

広告

関連記事

コメント

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

  • コメント (0)

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

カテゴリー