はてなブログの「Minimalism」で、記事中にタイトル付きのボックスを入れるカスタマイズ方法

はてなブログのデザイン「Minimalism」を使用しているこのブログ。

最近、ブログのデザインを集中的にカスタマイズしています。

今回は、記事中にタイトル付きのボックスを入れる方法について、ググって実践してみました。 

タイトル付きのボックスについて

ブログ記事を書いていて、大事なポイントや要点なんかを書くときに、今までは、単に箇条書きスタイルで書いていたのですが。 

色んな方のブログを見ると、囲みデザインで見やすくしている記事をよく見かけます。

私もそれができるようになりたいなーと思い、今回、その方法を実践してみました。

これまで、色々とはてなブログのカスタマイズをしてきた中で、「サルワカ」というサイトのことを覚えてまして。

こちらのサイトに行き、サイト内検索で、タイトル付きのボックスデザインのページを見つけたので、↓

saruwakakun.com

この中から、使ってみたいデザインのCSSコードを参考にさせていただき、カラーの設定だけ変えてみる感じで、カスタマイズしてみました。 

結果、こんな感じになりました！↓

タイトル付きボックスを使うには

① CSSでボックスのデザイン設定

② HTMLで記事内にボックスを作成

記事にタイトル付きのボックスを入れる方法 

では、設定方法です！

① CSSでデザインの設定をする 

今回は、上記の参考サイトの「27. ラベルをつけたようなデザイン」を使わせていただこうと思います。

まず、そのデザインの下にある「＋コードを表示」をタップし、CSSと書かれてある部分の、以下のコードをコピーします。

CSS

.box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27 p { margin: 0; padding: 0; }

それを、ブログ編集画面→デザイン→工具マーク→「｛｝デザインCSS」の1番下に貼り付けます。

次に、上記コードの中にある、赤字の6桁の数字のカラーコード「#62c1ce」を、お好みの色のカラーコードに変更します。

ちなみに、私のブログは、「#ffb6c1」というピンク系のカラーコードです。 

カラーコードは、こちらから見つけられます。↓

WEB色見本 原色大辞典 - HTMLカラーコード

最後に「変更を保存する」をクリック。 

これで、デザインの設定は完了です！

② 記事作成時にhtmlでボックスを作る

 記事を書いている時に、このタイトル付きボックスを使いたいなーとなったら。

まず、上記の参考サイトにある「HTML」の方の、以下のタグをコピーします。

 （このタグは、メモ帳などに貼り付けて保管しておくと、次回以降使う時に便利です。） 

HTML<div class="box27"> <span class="box-title">ここにタイトル</span> <p>ここに文章</p> </div>

 

そして、はてなブログの記事作成画面を「HTML編集」に切り替えて、ボックスを入れたい部分に、コピーしたタグを貼り付けます。

そして、「プレビュー」に切り替えて、確認してみます。

すると、このように、CSSで設定したデザインで表示されます。↓

 

 

あとは、編集画面を「HTML編集」画面に戻して。

「ここにタイトル」と「ここに文章」という文字を消して、文字を入力していきます。

 

※「編集見たまま」モードで文字を消したり入力すると、貼り付けたタグの一部を消してしまう可能性があって、デザインが崩れることがあります。

 

これで、記事の中に、タイトル付きのボックスを作成できました！(´ｰ｀)

以上です！

kayoko＠おうちcafe

はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集　↓

www.kayoko-cafe.com