~アメブロの記事の書き方~

【アメブロ初心者必見】きれいな囲い枠を作る方法を解説していきます。

Ameblo

今回はきれいな囲い枠を作る方法をまとめていきたいと思います。

囲い枠を作るためには、プログラミングを学ばなければなりません。しかし、プログラミング、、、、ってすごい難しそう、、、と思うのでコピペだけでできるきれいな枠組みを作る方法を教えていきますのでさっそく見ていきましょう。

実線だけで囲む

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;">サンプル</div>

 

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #ff9900;">サンプル</div>

 

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #3366ff;">サンプル</div>

 

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #ff00ff;">サンプル</div>

角に丸みをつけた枠組み

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 3px #000000;
    border-radius: 10px;">サンプル</div>

 

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 3px #ff9900;
    border-radius: 10px;">サンプル</div>
サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 3px #3366ff;
    border-radius: 10px;">サンプル</div>

 

サンプル
<div style="padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 3px #ff00ff;
    border-radius: 10px;">サンプル</div>

見出し付きのの枠組み

サンプル①

サンプル

<div style="border: 2px solid #0094D6;">

<p style="background: #0094D6;
  color: #FFF;
  text-align: center;
  margin: 0;">
サンプル①
</p>サンプル</div>

丸みのある見出し付き枠組み

サンプル①

サンプル

<div style="border: 2px solid #0094D6;border-radius: 10px;">

<p style="background: #0094D6;
  color: #FFF;
  text-align: center;
  margin: 0;">
サンプル①
</p>サンプル</div>

見出しに下線がある枠組み

サンプル①

サンプル

<div style="border: 2px solid #0094D6;">
<p style="color: #0094d6; text-align: center; margin: .2em auto; width: calc(100% - 2em); border-bottom: 2px solid #0094D6;">サンプル①</p>
サンプル</div>

まとめ

ということで今回はアメブロ初心者の方に向けて枠組みのコピペ集を作成しました。よかったらこれを参考にしてもらえれば幸いです。ということでここまでよんでいただきありがとうございました。

Ameblo
スポンサーリンク



ライフスタイルコーチ│八木のBLOG
タイトルとURLをコピーしました