BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» はてなブログカスタマイズ ブログ文章に枠を付ける方法

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

はてなブログカスタマイズ ブログ文章に枠を付ける方法

   投稿日: 2017/12/07    投稿者:webコラム

453d7a5ca290114278d5c6151abb50a3_s.jpg

 こんにちは! ライターのモモタロウです。

今回は、はてなブログカスタマイズ ブログ文章に枠を付ける方法をお伝えします。

ブログ文章に枠を付けるには?


今回は3種類の枠線をご紹介します。

まず、はてなブログにログインします。

20171103-1.jpg
その後、「ダッシュボード」→「デザイン」をクリックします。


左上のメニューバーの「スパナ」ボタンをクリックします。


「{}デザインCSS」の編集枠に以下のコードを編集します。

.box1 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box1 p {
    margin: 0;
    padding: 0;
}
20171103-3.jpg

上の画像の四角で囲った分です。

「変更を保存する」ボタンをクリックします。

次に、

「記事を書く」をクリックします。「HTML編集」をクリックし、以下のコードを入力します。

<div class="box1">
    <p>ここに文章</p>
</div>


20171103-4.jpg
上の画像の通りです。

まずはシンプルに実線で文章を囲むだけのコードです。

ブログを確認すると・・・

20171103-5.jpg


次に、「上下に線を入れる」にしてみよう。


「CSS編集」には、
.box4{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.box4 p {
    margin: 0;
    padding: 0;
}


記事を書くで「HTML編集」には、

<div class="box4">
    <p>ここに文章</p>
</div>
と入力します。

ブログを確認すると・・・

20171103-6.jpg



もう一つだけ、紹介します。

「枠の途中にタイトルを入れる」


CSS編集には、

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0;
    padding: 0;
}

以上を入力します。

「記事を書く」の「HTML編集」には、 
<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>

と入力します。

ブログを確認すると・・・

20171103-7.jpg

まとめ

如何でしたか?
はてなブログをカスタマイズして、特色のあるブログに仕上げていこう。

カテゴリ:

TOPへ