【アメブロカスタマイズ】CSSが編集できないテーマでもできる、囲み枠の付け方

アメブロでブログを更新している人から、「文が目立つように枠で囲みたいんだけどどうすればいいの」とご質問がありました。

文章や画像を囲む枠線はCSSで指定している

囲み枠と呼ぶことが多い、投稿記事内の文章の一部を線で囲んでいるのを見かけたことがあると思います。文章の一部を線で囲む（以下、囲み枠）には、CSS（スタイルシート）と呼ばれる言語を使い、指定した部分にこのCSSを読み込んでいる状態です。

CSS（スタイルシート）とは、ブラウザ上に表示される文章や画像、ページ全体などに対して行うスタイル指定のことをいいます。

ホームページというのはHTMLという言語で作成されていますが、HTMLだけでは表現できない部分にCSSを指定することで様々な表現手法を取り入れることができるようになりました。

CSSを指定するには、

という3つの方法があります。

さて、話を元に戻しますが、無料ブログサービスはこのHTMLとCSSがあらかじめ設定されている「テーマ」（ブログサービスによってはテンプレートといったりデザインといったりします）を選択してブログを開設します。

アメブロも同じようにHTMLとCSSがあらかじめ設定されているテーマの中から使いたいものを選んでブログを開設します。

ただし、アメブロのテーマにはCSSファイルを直接編集できないものが含まれています。

もし、今開設しているアメブロのテーマがCSSファイルを直接編集できないものだとしたら、CSSを使って囲み枠を設定できない？となるのですが、投稿記事の該当する部分に直接CSSを書けば囲み枠は使えるようになります。

アメブロのテーマのうち、CSSファイルが直接編集できないテーマで、記事内の文章の一部に囲み枠を指定するには、枠で囲みたい文章を先に入力しておいてから次の操作を行います。

アメブロの投稿画面の下にある「通常表示」というタブの横に「HTML表示」というタブがありますね。「HTML表示」というタブをクリックします。

HTML表示に切り替えると先ほど入力した文字の両端に<P>と</p>が表示されています。これが先ほどから何度も登場している「HTML」言語のひとつ、Pタグといいます。

では、CSSを指定するため上の文章をブロック要素とします。そのために使うのがDIVタグです。<div>と</div>で囲み枠で表示したい部分を挟みます。

<div>という文字を半角英数字（英字は小文字）で入力すると、自動的に</div>（閉じタグ）が入力されます。

<div>と</div>の間に空行がありますので、その中に先ほど入力しておいた文章を切り取って貼り付けておきます。

これでCSSを貼り付けるための準備が整いました。次はいよいよCSSを指定します。

CSSをブロック要素に指定するためにstyleを指定します。

先ほど入力した<div>の「v」の右側でクリックし、

style=””

と入力します。

styleの前には半角スペースを入力します

あとは、「””」の間にCSSコードを入力します。

といってもCSSのことがよく分からないという人もいると思いますので、サルカワさんの【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30から「破線のボックス」のCSSコードをお借りしてきました。

下のキャプチャ画像の選択部分をコピーします。

次に、アメブロに戻り、先ほどの「””」の間にコピーしたコードを貼り付けます。

「HTML表示」から「通常表示」に切り替えてみると、先ほどの文章を囲み枠で囲むことができました。

サルカワさんの【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30には他にもたくさんの囲み枠のデザインがありますのでいろいろ試してみるといいと思います。

少しだけCSSについて説明すると

Web上で使用する色はWEB色見本原色大辞典を参考にされるといいと思います。

アメブロのテーマのうち、CSSファイルが直接編集できないテーマで囲み枠を設定する方法をご紹介しました。

本来であれば、CSSファイルを直接編集できるテーマを選んでもらったほうがいろいろと設定しやすく、使い回ししやすいのですが、CSSファイルを直接編集できるテーマを選ぶと他の部分もそれなりに編集していかないと見栄えが良くなりません。

なので、今回は上の方法をご紹介しました。もし、毎回この操作が面倒だというのであれば定型文を使い回す方法と合わせて使ってもらうというのも手間を省く一つの手かもしれません。

また、CSSがよく分からないという場合は、「CSS　枠」で検索してみるとたくさんのコードが見つかるのでそれをコピペして使ってもらえばと思います。