アメブロ カスタマイズレッスン

アメブロカスタマイズ/記事の枠を設置する

40代からのパソコンが苦手なお一人様起業の方のためのアメブロヘッダー・カスタマイズデザイン野口陽子です。

前回はブログヘッダーを設置しました。

 

各サイトで違いはあると思いますが、

大体こんな感じになっていると思います。

これでもいいと言えばいいのですが

全体を見たときにちょっと殺風景。

これに「記事枠」と「メッセージボード枠」を

一緒に設置します。

まずは「ブログ管理」→「デザインの設定」→「CSSの編集」で、

一番下までスクロールします。

 

このコードをコピーして貼り付けます。

.skin-bgMain {
border: 2px dotted #ff69b4;
}

 

オレンジのラインはカラーコードです。

コードを変更することでカラーを変えられます。

HTMLカラーコード

 

また、「2px」の数字を変えることで線の太さを変更できます。

「dotted」はドットのラインなので実線にしたいときは「solid」に変更します。

 

数値など変更するときはスペースに注意。

半角スペースで、これが一つないだけでも反映されなくなります。

 

 

こんな風に「記事枠」と「メッセージボード」の枠が設置できました。

これがあるだけでも全体の雰囲気が変わります。

メッセージボードの枠が反映されていないときは

「ブログ管理」→「設定・管理」→「メッセージボード」に移動して

何か文章を書いてから「表示を確認する」をクリックで確認してみてください。

メッセージボードが表示されていたら「公開」をクリックします。

 

これだけでもいのですが、もう一声!

 

もう一度「デザインの設定」→「CSS編集」で、

「(3-1-b)メイン背景 内側」

というところに

「border-bottom: 1px solid #e5e5e5;」

というのがあります。

この「e5e5e5」のカラーコードも変更します。

「border-bottom: 1px solid #ff69b4;」

 

記事タイトルの下のラインの色を変更できました。

同じ色にすることで統一感ができます。

カンタンな枠ですが、あるとないとじゃ大違い。

 

ここまで、やってみてくださいね。

 

メール講座

アメブロカスタマイズ ワードプレス

 

 

 

 

-アメブロ, カスタマイズレッスン
-, ,

Copyright© Design-feel.net , 2020 All Rights Reserved Powered by AFFINGER5.