編集

ブログの装飾～囲み枠(BOX)追加

2024/06/03 ｜2024/06/15

ブログを書くのに囲み枠なんて事を考えた事もなく、、、

というか知らなかったしすぐ出来るとは思ってもみなかった、、、

と言う事で

今まで嫌々使ってたのを囲み枠に変更しました

CSSですぐに作れますよ

参照したサイト

色んな囲み枠を作って紹介されています

囲み枠

今まで囲み枠を使っておらず引用を使って形を整えてました

箇条書きを使いつつセンターにしたいって時はやりようがなかったんですよね

↓みたいな感じで引用使ってやってました

標高1,404.2m

佐々連尾山（さざれおやま）は、愛媛県四国中央市と高知県長岡郡本山町にまたがる山

白髪トンネル脇から登り始めるとアスレチック感があり

新居浜市の別子銅山に次ぐ産出量の佐々連鉱山が北側中腹にあったが山名の由緒はこれより前か後かは定かでない

大ブナの駄場、天空のわさび棚跡がオススメ！！でピークはどうでも良い

土佐峰はツツジで有名

鹿の角を初めて拾った縁起の良い山

↑引用枠変更しました

地図と説明の位置関係を綺麗に整えるのに引用を使って整えてました

標高とか確かに引用（調べて）している部分はあるんですが個人の感想がメインなんですよ

それを形式的とは言え引用ってのはなんかね。。。

これを囲み枠に変更

標高1,404.2m
佐々連尾山（さざれおやま）は、愛媛県四国中央市と高知県長岡郡本山町にまたがる山
白髪トンネル脇から登り始めるとアスレチック感があり
新居浜市の別子銅山に次ぐ産出量の佐々連鉱山が北側中腹にあったが山名の由緒はこれより前か後かは定かでない
大ブナの駄場、天空のわさび棚跡がオススメ！！でピークはどうでも良い
土佐峰はツツジで有名
鹿の角を初めて拾った縁起の良い山

黒板風の囲み枠

フォントはBloggerの中にあるフォントで手書き風を使って少しでも黒板感を、、、
※独自に追加したフォントではありません

チョーク風のフォント追加して『フォントの種類』からすぐに選べる事ができればいいんですがGoogle先生に聞いても誰もやってなかったので無理なんでしょう

フォントがコレで決まり！！になったらCSSで指定しようかな。。。

CSS、HTML

紹介するのはBlogger、テーマはF-lightでのやり方ですがCSSの追加、HTMLの記述でどのブログでも使えます

テーマの編集で

ユーザー カスタム CSS

を検索して、その下にCSSを追加してください

囲み枠のCSSは↓


/*== 囲み枠 ==*/
/* 黒板風 */
.kokuban {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #003300; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 10px solid #b2771f; /* 他の枠線 */
 border-bottom: 20px solid #6f4b3e; /* 下の枠線を太くして色を変更 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.kokuban::before,
.kokuban::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban::before {
 width: 20px;
 right: 10px;
 border: solid 3px #ff42a0; /*チョーク（ピンク） */
 border-radius: 3px 2px 0 2px;
}
.kokuban::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}

参照にしたものより枠を太くして背景（黒板の色）を変更

更に枠の下線を太くして色変更しました

HTMLは↓