アメブロで文章の一部を枠で囲みたい。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ファイルを編集できるテーマは4つしかありません。

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

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

アメブロのCSSが直接編集できないテーマで、記事内の文章の一部をCSSを使った枠で囲む方法

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

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

CSSを貼り付ける準備~divタグを入力する~

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

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

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

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

divタグにstyle設定を追加し、その中にCSSコードを貼り付ける

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

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

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

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

サルカワさんの【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30から「破線のボックス」のCSSコードをお借りします。

  padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
サルワカ | サルでも分かる図解説明マガジン
サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ!

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

CSSがうまく動作しているかを通常表示に切り替えて確認

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

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

アメブロで直接CSSを編集できないテーマで、記事内の文章の一部を枠で囲む方法、のまとめ。

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

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

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

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

【アメブロカスタマイズ】プラグインを使わずに記事下に定型文を表示させる
アメブロで記事を投稿するたびに記事の最後にバナーを入れたり案内文を入れたりすることがありますね。これらを「決まった文章」という意味で「定型文...

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

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

 
リンクユニット
Simple author Box

ホームページ開設・運用、リニューアルのご相談や、SNS・ブログの運用サポート、市民活動団体のIT活用提案・サポート、Webライティングを行っています。
また、県内各所にてパソコン操作講習会やSNS活用セミナーなどの講師もしています。

まずはお気軽にご相談ください。相談する

スポンサーリンク
関連コンテンツ

記事が気に入ったらシェアお願いします

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

フォローはこちら

この記事をお届けした
だぶるしーどの最新ニュース情報を、
いいねしてチェックしよう!