FC2ブログで-区切り線-を挿入する方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログで-区切り線-を挿入する方法

FC2ブログで-区切り線-を挿入する方法

FC2ブログで段落と段落の間に区切り線を挿入する方法

読みやすくしちゃって、ごめんあっさっせ~!

ご存知の方もいらっしゃると思いますが、FC2ブログの記事を書くエディタには、区切り線(横罫線)を挿入する機能がついています。

残念ながら地味なので、あまり使っていらっしゃらないかもしれませんが、実はこの区切り線を使うと、文章と文章の間に簡単に区切りを入れることができるので、とても便利なのです。

どうしても文字ばかりが続いてしまうと、読む人にとってもしんどいですから、区切り線を入れて可読性を高めることは、きっと好まれるに違いありません。(これはきっと、もてちゃってしょうがない)

そしてさらに、CSSで画像を指定しておくことで、とても良い感じに仕上げることができます。良かったら、挑戦してみてくださいね。


「区切り線(横罫線)」とは?

「区切り線」は、文章と文章などを区切るための線です。横罫線、水平線などとも呼びます。

区切り線が表示される

CSS(スタイルシート)を使って「区切り線」に画像を指定すると、少し良い感じになります。

画像の区切り線

FC2ブログで区切り線を挿入する方法

それでは、区切り線を入れてみましょう。

1:「高機能テキストエディタ」モード

(01)

「高機能テキストエディタ」モードに、切り替えます。

「高機能テキストエディタ」モードに切り替える

「高機能テキストエディタ」モードにしなくても「区切り線」は挿入できますが、分かり良いでしょうから切り替えておきます。

2:「区切り線(横罫線)」の挿入

(02)

区切り線が分かりやすくなるように、まず適当な文章を書きます。

適当な文章を書き、[Enter]キーを打鍵してください。

適当な文章を書き、[Enter]キーを打鍵

(03)

[区切り線(水平線)]ボタンを、クリックしましょう。

[区切り線(水平線)]ボタンを、クリック

ちなみに、「高機能テキストエディタ」モードで表示している場合は、もうひとつ「区切り線(横罫線)」ボタンが設置されています。

・・・が、こちらは話がややこしくなるので、使わない方向でよろしくお願いします。(HTMLタグは同じ<hr>ですが、styleが指定されている)

FC2ブログ「高機能テキストエディタ」モードの「区切り線(横罫線)」ボタン

(04)

そうすると、区切り線が挿入されます。

区切り線が挿入される

(05)

作業に慣れるために、もう一度やっておきましょうか。

さらに続けて、適当な文章を書き、[Enter]キーを打鍵してください。

続けて適当な文章を書き、[Enter]キーを打鍵

(06)

[区切り線(水平線)]ボタンを、クリックしましょう。

[区切り線(水平線)]ボタンを、クリック

3:表示の確認

(07)

[プレビュー]ボタン(もしくは[記事を保存]ボタン)をクリックして、実際にブログで表示状態を確認してみましょう。

文章のあとに、区切り線が表示されるはずです。(地味ですけどね)

区切り線が表示される

また、お使いになっているテンプレートによっては、すでに区切り線(<hr>タグ)に対して、何か指定されており、おしゃれな感じになっている場合もあるかもしれません。

おしゃれな感じになっていれば、それで良いと思いますが、地味なのがいやな場合は、引き続きCSSの指定を行ってみましょう。

※:お使いになっているテンプレートによっては、うまくいかないこともあります。


区切り線にCSSで画像を指定する方法

1:区切り線に使う画像をサーバへアップ

(01)

まず、次のような「区切り線に使用したい画像」を用意し、ファイルアップロードにて FC2ブログのサーバへ画像をアップしておいてください。

区切り線に使用したい画像

また、画像をアップしたときに、次の2つの情報を書きとめておいてください。(URLはコピーして、メモ帳などのテキストエディタに貼り付けておけばOK)

  • 画像のURL
    (例:http://blog-imgs-99.fc2.com/h/o/g/hoge/kugiri.gif)
  • 画像の高さ
    (例:50px)

ちなみに、画像の高さは、次の箇所で知ることができます。単位はピクセル(px)です。

画像の高さの確認箇所

ファイルアップロード方法が分からない場合は、記事『FC2ブログの記事で画像を使ってみる』をご覧ください。

2:CSS(スタイルシート)の編集

(02)

FC2ブログ管理者ページの左側にあるメニュー「環境設定」の「テンプレートの設定」をクリックしましょう。([環境設定]-[テンプレートの設定])

「環境設定」の「テンプレートの設定」をクリック

「ちゃんとCSSを勉強してから、テンプレートを変更した方がいいかも」と思った人は、CSS入門をご覧ください。

(03)

少し下に画面をスクロールすると、CSS(スタイルシート)を編集できる箇所があります。ここで編集を行う前に、次のことを行ってください。

  • CSSのコードをすべてコピーし、メモ帳などのテキストエディタに貼り付けて保存しておきましょう。
  • 「hr」というキーワードで検索をかけて、すでにCSSに区切り線(<hr>タグ)に関する指定があるかチェックしておきましょう。
CSSのコードのバックアップ、<hr>タグを検索

バックアップは、必ず行ってください。(バックアップを取っておけば、失敗しても元に戻せます)

(04)

すでにCSSに区切り線(<hr>タグ)に関する指定がある場合は、その既存の指定を編集してお使いください。

区切り線(<hr>タグ)に関する指定が検索に引っかからなかった場合は、CSSのコードを追加するために下へスクロールさせてください。(一番下へ追加します)

下へスクロールさせる

(05)

追加(編集)するコードは、次のようになります。前述(01)で書きとめておいた「URL」と「高さ」を適宜修正してください。

例えば、次のようになります。書き換える箇所は、次の2つだけでOKです。(OK牧場です)

  • あなたがアップした画像のURL
    (例:http://blog-imgs-99.fc2.com/h/o/g/hoge/kugiri.gif)
  • あなたがアップした画像の高さ
    (例:50px)

(06)

CSSのコードが準備できたら、次のように貼り付けて、[更新]ボタン(もしくは[プレビュー]ボタン)をクリックしてみましょう。

CSSのコードを貼り付けて、[更新]ボタンをクリック

3:表示確認

(07)

表示を確認してみてください。地味な区切り線が、次のように画像による区切り線に変わっていれば成功です。

ちょっと文章が少ないとクドイ印象を与えてしまいますが、うまく長文を区切るような場合は、とても見栄えが良くなるはずです。

画像の区切り線

このようにCSSで指定しておけば、毎回同じ画像を使って区切り線にしたいような場合に利用できるわけです。

残念ながら失敗してしまった人は、次のどちらかの方法で戻しましょう。

  • 前述(06)で貼り付けたCSSコードを削除して、「更新」し直す。
  • 前述(03)でバックアップしておいたCSSコードを使って、丸ごと入れ替えて「更新」する。
前の記事へ
次の記事へ

次回予告

お疲れさまでした。次回は、今後の検索エンジンのことを、ぴゃーっと書いてみようと思っています。(『なぜ検索エンジンは、主役の座を追われるのか?』)


関連記事

FC2ブログの作り方をご紹介している記事です。

作成日:2010/03/19 更新日:2010/03/19

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

区切り線、いいなぁ

KumaCrowさん、こんばんは。
おひさしビリー・ジョエルですぅ。


段落でもなく行あけでもない区切り線。
これをセンス良くさり気なく使えたらいいな、と思っていました。
たまに

-----

を使うんですが、これじゃあまりに殺風景ですよねぇ。


アメブロでは記事編集画面に区切り線を使うボタンがないので、
きっと毎回画像をそこに配置する感じになるのかな。


話は変わるようですが、
なんだか最近、ブログを「知り合い対象」に書いてるかもな・・・とちょっぴり反省気味なんです。
文章もダラダラしてるかな、と思うんです。
自分で思ってるなら解消しなきゃ!ってことですよねぇ。
なにか自分でも「変えよう!」という意識を持つためにも区切り線を使ってみようかなと思いました。
内容や季節に合わせていくつか用意しておくと自分も楽しいかも・・・。



それにしても、ブログで見本に使っていらっしゃる文章がいつも素敵です。
今回は別れたのに復縁バージョンなんですね。
ケンジがせっかく素直に言ってくれてるんだから、「わたし」も素直に受け入れたらいいのに・・・。

CSSって むじゅかすいー(TT)

おひさしぷりんす♪
区切り線・・・たまに使いますがこういうワザもあるんですねえ^^;
私の想像では、携帯絵文字を連続して挿入して入れるとかー
☆を並べるくらいでし(T▽T)
でも 長文や 画像が少ない文章だとアクセントになって
ピリッとしそうですね♪
そういえば 区切り線の上を触ると太さが替えられるみたいですが、なんだか微妙になっちゃって・・・
うまくいきませぬ(TT)
慣れかしらん・・・?

おーねすてぃー

Missdiamondさん、こんにちは!( ・∀・)ノぐもに
コメントありがとうございます。

お久しブリジッド・バルドーですぅ。

話の転換などにも、区切り線は良いですよねー。
センス良くさり気ないとなおさらー。(´▽`)♪さらさらー

毎回画像配置にすれば、それはそれで、
その度ごとに違う画像が使えるメリットがあります。

環境によっても、方法は違ってくるのかと思いますが、

たとえ「-----」であっても、
大切なのは、心遣いなのかもしれませぬ。(´ー`)ぬーん


話は変わって、あーそうですよねー。
私も波があります。

自分のためだけに書くこともあれば、
誰かを思い浮かべて書いたり、広く一般向けに書いたり。

「知り合い対象」に向けて書くのも良いと思います。
常にMissdiamondさんらしさが出ていて、いいんじゃないかしら。

そこは崩れていないような気がします。

そしてさらに、「変えよう!」という、
前向きな姿勢もすばらしいことだわ。ヾ(*´∀`*)ノ


それにしてものブログの見本は、
今回は、ちょっとギャル風に書いてみました。

若さゆえに、気まぐれで、自分勝手なケンジ。

それに振り回されて、イライラしているのだけれど、
「好き」という気持ちをおさえることができないわたし。

・・・みたいな。(´Д`;)

「好き」という気持ちを素直に受け入れてしまうことが、
何だか悔しいわたし。

・・・みたいな。(;´Д`)

細かいところまでご覧いただきまして、
ありがとうございます。(*´∀`)人(´∀`*)まーたねーん

ダイヤモンドだね

ありんこさん、こんにちは!( ・∀・)ノぐもに
コメントありがとうございます。

お久しプリンセス・プリンセス。

区切り線・・・こういうワザもあるんすよー。(´▽`)♪
毎回同じでいいような人には向いています。

あら、区切り線の太さって、触ると変えられるんですか?
知らなかった。どの辺のお話しなのかしら。

sizeの値を変えるようなパラメタがあるのかな、どこかに。

たしかに、区切り線を太くすると、
区切り線に見えないかもしれませんね。(´Д`;)

それが大事

むぅ~・・・ページを見やすくするのって大事ですよね(-_-;)

私は日々のテキストだけで精一杯と妥協していますが、
もう少し利用者が見やすくなる工夫が必要ですね・・・

最近画像を添付するだけでも面倒と感じるので、
そういう意識から変えていかねば(>_<)

ちらり寿司

fuminchuさん、こんちあ!( ・∀・)ノへろー
コメントありがとうございます。

そ、そうですねー。(´Д`;)

今回の方法は一度設定しちゃえば、

あとは、区切り線ボタンを押すだけで、
そこそこ、おされ感が出せて良いのではないかしら。

ダメかしら。ちらり。(;´Д`)ぱんつちらり

こんばんわ

まだまだ、知らないことがたくさんあって、ちょくちょくお邪魔しています。今回の区切り線も教えてもらわないと、まったく気がつかなかったことだと思います。
次回も期待しております。

こんばんは

少し前に お邪魔させて戴こうと致しましたら、自身のPCにおいて、 WOT の「警告」が出てしまい、アクセスを控えておりました。
なにかの間違えだと思いましたが ・・・・・
本日、伺いましたら、何のことはない、普通に大丈夫でした。
なにはともあれ、良かった~ッ!!
また、いろいろお教えください。
では、失礼致します。

FC2ブログのネタ

甘えん坊太郎さん、こんにちは!( ・∀・)ノぐもにさんで
コメントありがとうございます。

ほぼ主要なことは書いてしまった感はあるのですが、
思い出したらまた書いていこうと思います。

よろしくお願いします。

セキュリティ向上

Asunarowoodsさん、こんにちは!( ・∀・)ノはぴほりで
コメントありがとうございます。

WOT!!!
それは、まずいですね。

いまだGumblerの脅威が去ったわけではないし、
気をつけなければいけませんな~。

とりあえずは、大丈夫みたいですが、
いっそう気を引き締めて運営にあたりたいと思います。

ご連絡ありがとうございました。

ヒマラヤほどのっ消しゴムひとぉつっ

KumaCrowさん、こんばんは☆ミ ←なんか若い子の間で流行ってるみたいなので使ってみましたぁ。


いろいろお忙しいことと思います。

それなのに少し前の記事に再びコメすることをお許しくださいませ。


アタクシ、勘違いしておりました。
「アメブロは水平線を入れるボタンが無いので、水平線を自動では入れられない」と
いま思うとなぜそのように思い込んだのかわからない思い込みを
しておりました。

水平線はどのブログでも表示できますもの。ねぇ。


CSSに「水平線はこの画像を使う」の記述をして、毎回手入力ではありますが
<hr size="1" /> を記述すればいいんですよね。
勘違いしてコメントして恥ずかしいです。

なんと記事を読んで一ヶ月が経とうとしている今日このことに気づきました。
脳の柔軟性がないためか、はたまた元から融通が利かないのか。



勘違いしたためにいろんなかわいいライン画像を借りて、賑やかにはなったのでそれはそれで
まっいっか♪とは思ってます。



では、またおじゃましまーす。

たのほしひいこおとほぉ

Missdiamondさん、こんばんにゃー!(ФωФ)キランッ
コメントありがとうございます。

☆ミ ←若い子の間で流行っているのすか。
それは、まけじと使わざるをえまいて!(よぼよぼ)

あ、私も深く考えずに伺っていました。(´Д`;)えへへ
そうねー、手入力よねー。

でもたしかに、画像を挿入してしまう方が、
手軽で楽だし、いろいろな画像が使えて良いような気もします。

勘違いしたままでも、あるいは、
ぱぱでも良かったかもしれません。結果オーライです。ヾ(*´∀`*)ノ

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/634-7a20a489

(区切り線について追記あります) 難しい

ブログの見た目のことです。 最近また独りよがりなブログになってました。 自分だけのためなら日記に鉛筆で書いとけ! 読んでくれる人は知り合いばかりじゃない! ということをいつも忘れないでいたいものだ。 よくわからないんだけど 検索...
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて