アメブロで文章の一部を枠で囲みたい。CSSを直接編集できないテーマで囲み枠を指定する方法

アメブロで文章の一部を枠で囲む方法を知りたいと相談がありました。

ブログ記事内の文章の一部を枠で囲んだものをよく見かけるようになりましたが、この枠は図形を貼り付けているものではなく、「CSS」という言語を使って文章の一部を囲むという指定をしています。

CSSとは

CSSとは、ざっくり言うとスタイルを指定する言語。ブログもそうなのですが、Web上で表示されているものはHTMLという言語と画像で構成したファイルをブラウザで解釈し、表示させているのですが、このHTMLだけでは実装できないスタイルをCSSという言語で指定して飾り付けている、というものです。

ちなみに、CSSを使うにはHTMLファイルに直接コードを書く方法とHTMLファイルとは別にCSSを書いたファイルを別に作り、HTMLファイルへ読み込む方法があります。

HTMLファイルとは別にCSSファイルを作り、HTMLファイルへ読みこませる方法が一般的です。そのほうがHTMLファイルが複雑にならないので読み込む速度が速くなるといわれています。

記事内の文章の一部を枠で囲みたいならCSSを使えばいいのですが、CSSを一から学ばないといけないのかというとそうではありません。

「CSS　枠」とググってもらえればいくらでもCSSコードを手に入れることができます。

ただ、ブログサービスによってはCSSを編集できないテーマがあります。実は、たくさんあるアメブロのテーマの中で直接CSSファイルを編集できるテーマは４つしかありません。

となると、アメブロのテーマのほとんどがCSSの囲み枠を指定することはできないのかというとそうではありません。

アメブロのテーマでCSSファイルを直接編集できないものを使っている人でも以下の方法を使えば、記事内の文章の一部を枠で囲むことができます。

まずは通常の記事投稿の方法で枠で囲みたい文章や画像を挿入しておきます。

次に、記事を投稿する下のほうにあるタブ「HTML表示」をクリックして画面を切り替えます。

CSSを貼り付ける準備をするため、<div>で囲みます。

枠で囲みたい文章の1行目の先頭にカーソルを表示し、Enterキーを使って改行してから<div＞と入力すると自動的に</div＞と空行が表示されました。

先ほど入力した文章を範囲選択して切り取ります。キーボードのCtrlキーを押しながらXキーを押せば切り取れます。

<div>と</div＞の間にある空行の部分にカーソルを表示させ、先ほど切り取った文章を貼り付けます。

これで文章をひとつのかたまりとして指定することができたので、CSSを貼り付けるためにスタイルを設定するよとdivタグに指定を追加します。

<div＞の「＞」の前にカーソルを表示させ、半角スペースを入れたあと「style=””」と入力します。

これでひとつのかたまりとして指定したところにCSSのコードを貼り付ける準備ができました。

さあ、いよいよCSSの指定！とその前に、CSSをどこかで見つけなければいけませんね。

　　padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/

お借りしたCSSをコピーし、先ほど追加した「””」の間に貼り付けます。

貼り付けが完了したら、投稿の下にある「通常表示」タブで切り替えます。

先ほど入力した文章が破線で囲まれていたら成功です。

アメブロの投稿記事内に文章をひとかたまりにしてCSSを使った枠で囲う方法について書いてみました。

アメブロのテーマの中で直接CSSを編集ができるテーマは４つありますが、なかなかシンプルなので使う人が少ないかもしれません。

となると、上に示した手順を使えば投稿記事内の一部の文章をCSSを使って枠で囲えるようになるので、直接CSSを編集できないテーマでも応用可能かと思います。

別の記事にも書きましたが、CSSを指定した文章を定型文として使い回す方法と合わせて使ってもらえると、本文と定型文が分別しやすくなるんじゃないかと思います。

また、「CSS 枠」でググって見つけたCSSのコードのほとんどは、CSSファイルに直接書き込む（貼り付ける）方法しか掲載されてはいません。そのCSSコードを直接貼り付けてもうまく枠で囲むことはできません。

上に書いたように枠で囲みたい文章をdivタグで囲んでdivにstyleを追加する方法でやってみてくださいね。