ブログ雑感

やっとできたよ！　bloggerで記事内に囲み線を作る方法！

こんにちは、あり紗です。
今回は備忘録的な投稿です。

このブログは天下のGoogle様が運営しているbloggerです。
海外では人気があるそうですが、日本で使ってる人はほんとに少ない…。
つまり、日本語で使い方解説してくれてる記事がほんとーーーーーに！　少ない！　つらい！
だったらなんでそんなの選んだのん、という感じなんですが、

無料なのに強制広告がなく、
しかもカスタマイズの自由度が高から。

ということが（数少ない）blogger推しの人々から強調されていたから。
ええ、「カスタマイズの自由度」というのをですね、
ここまでの自由度だとは思いませんでした。
PowerPointとかでお絵かきするくらいのイメージしてたんです、愚か者のわたくしは。
制限なしの自由はかえって不自由だと思い知る…。


前置きはともかく、囲い線（囲み線？）を作るときの方法です。
↓こういうやつ

こういう、文章を囲う線の作り方！

これは作業が２段階必要です。

１．CSSを編集する

「テーマ」を選ぶと、こんな画面がでてきます。
テンプレートを変更したりするところです。

この中のオレンジの部分「カスタマイズ」を選択。
するとカスタマイズ画面に進むので、
「上級者向け」から「CSS を追加」を選択。
この「CSS を追加」ですが、本文、ブログタイトル、タブ、…と続いている選択項目の一番下にあります。

で、このCSSに、今後使いたい囲み線のCSSコードを書いて保存。

なお、私はサルワカ様の
 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30: 
を参考にさせていただいております。
ほんとうにありがたいことです…。


２．HTMLに書き込む

そしていよいよ記事に反映させます。
投稿ページの作成モードで記事を書いたら、HTMLを表示。

表示させたい囲み線のHTMLを、任意の場所に貼り付け。
そのHTMLコードの中にある「ここに文章」を、囲い線の中に入れ込みたい部分に書き換える。


以上！！


プレビューを表示し、

「できた♪　できたよーーーー♪」

と、テンション高く喜びましょう。
そして公開しましょう。

まとめ～bloggerで記事内に囲み線を作る方法～ ・作業は２段階必要
・まずCSSを編集し、その後各記事のHTMLを編集する
・どんなデザインを表示できるのか忘れないように、どこかにメモをとっておく

以上、最後までお読み頂き、ありがとうございました。
よいbloggerライフを！

記事一覧

もうひとつオマケにいかがですか？　「ご飯の用意ができました」記事一覧ページはこちらからどうぞ♬