<スポンサーリンク>

【FC2ブログで使える】シンプル目次とかわいい見出し&囲み枠、マーカーペン

2018年12月02日
ご紹介
今回は私がこのブログで使用させていただいている目次や見出し、囲み枠、マーカーペンなどをご紹介します。

ピンクの背景にたくさんの文房具とスケッチブック

■目次
・はじめに
・目次と見出しは特に重要
・見出しについて
・使用している見出しデザイン
・目次について
・使用している目次デザイン
・囲み枠について
・使用している囲み枠デザイン
・マーカーについて
・使用しているマーカーデザイン
・使用するうえで注意点
・おまけ:吹き出しを付けてみよう
・まとめ



開運音楽無料配信中。詳しくはこちら


はじめに


ブログを書く上で、目次や見出しは非常に重要です。
また、より見やすくするためにマーカーペンを引いたり囲み枠などを使ったりするのも、とても重要だと思っています。

ただ私も使用させていただいているFC2ブログでは、設定にひと手間加えないと使うことが出来ません。
私もブログを書き始めた初期のころは、それらの設定方法が分かりませんでした。


ですが、慣れればわりと簡単ですし、一度設定してしまえばずっと使えるものなので、私はこれらを使うことを強くおススメします。




目次と見出しは特に重要


目次と見出しは特に重要です。
何に重要かというと、主にSEO対策です。

POINTSEOとはGoogleなどの検索結果です。
検索サーチで何かを調べた時に上位表示されるサイトがよりアクセス数に繋がります。

ですが正直、趣味でブログを書いている人は関係ないですよね…
でも、せっかくブログを書いているなら、より多くの人に見てもらえた方が嬉しくないですか?

まぁ私もSEOに関してそんなに知識はないので、検索流入のためにというよりは見てくれる人の為に、より見やすいブログを心がけています。


知らないからやらない。
じゃ、ちょっともったいないかなって思ったので、今日は目次や見出し、囲み枠、マーカーペンなどをご紹介させていただきます。


これらは数多くのサイトで紹介されていますので、今回はあくまで私が使用させていただいているものに限定させていただきます。




<スポンサーリンク>

あなたのWEBサイトをレベルアップさせるには【ドメイン】!
     
■ドメイン取るならお名前.com■


見出しについて


見出しとは↑の事です。
英語表記の新聞がたくさん重なっている

基本的には項目ごとに使用します。
見出しは使う際に基本的なルールなどもあるので、最初はちょっと難しいかもしれません。
正直私も最初はちんぷんかんぷんでした^^;

ただ見出しは一番重要です。
見やすさももちろんですが、先ほども言った通りSEO対策ですね。


なのでまずは見出しから設定することをおススメします。




使用している見出しデザイン


私が使用させていただいている見出しは第0版様のこちらのものです。

参考サイト

CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版

ブログをお持ちの方必見! スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。 ※アイキャッチ画像では10個になってますが、徐々に増えて現在17個あります。...



これは以前の記事でもご紹介させていただきました。
関連記事

昨日の出来事&ランキングのデメリット&かわいい見出しタグ紹介

今日はちょっといつもと違って日記っぽく書こうかなって思います^^スピ系ブログだけど雑記ブログになりつつありますwそしてたまには日記っぽいのもあってもいいのかなぁ…なんて思いまして。でもSEOとか結構気にしてるので、後で消すかもです^^;ではさっそく昨日起きた出来事からお話をします。目次  ・書いてた記事が消えた話  ・最近のブログの傾向  ・ランキングサイトの必要性とデメリット  ・かわいい見出しタグ...


ガーリーでとっても可愛い見出しがご用意されています(#^.^#)
見出しの基本的な使い方については、こちらのサイトが分かりやすいかと思います(デザインも数多くご用意されています)

参考サイト

【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?

h1やh2などの見出しタグの「意味」と「正しい使い方」を分かりやすくまとめました。


いろいろ設定してきた中で、見出しが一番ややこしくて難しかったので、これさえ出来ればあとは何でも簡単に出来ると思います^^


<スポンサーリンク>

特許申請の次世代マットレス【ビブラート1】


目次について


目次は見出しの次に重要です。

私は人のブログで目次を使用したことはないですし、正直いらないのでは?と思ったのですが、これも主にSEOには重要な事なのです。
それに自分が使わないからといって、他の人は使うかもしれませんしね^^;


なくても良いかもしれませんが、あるとないじゃ大きく違ってきます。



使用している目次デザイン


私が使用している目次はFC2ブログの目次と見出しを作る方法!テンプレと背景色のカスタマイズもという記事を参考にさせていただきました。

FC2ブログで使える目次を探していたら見つけたのですが、非常にシンプルで使いやすいです。
そのままコピペすればすぐ使えるようになっていますし、FC2での使い方も丁寧に説明してくださっているので、とても分かりやすいです。

注意!目次は見出しを設定していないと使えません。
なのでまずは見出しの方を先に設定しましょう。



囲み枠について


ブログを書くうえで囲み枠も非常に役立ちます。
これはもう見やすさだけの問題ですが、これもあるととても便利です。

囲み枠にはいろいろなデザインがあって、使い勝手がとても良いです。
私は用途に合わせて何種類か使っています。



使用している囲み枠デザイン


私が使用している囲み枠はPurple Life様のものです。

参考サイト

【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える

飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)


シンプルなものから、少し手を加えたものまで数多く用意されています。
いろいろな種類がありますし、何個でも使えるので非常に便利です。



<スポンサーリンク>

ズキズキする…そんな時は「ズキガード」


マーカーについて


蛍光のマーカーペンが色とりどりに並べてある

マーカーも文章のアクセントとして非常に役立ちます。

私は強調文としてマーカーを引いていますが、これも用途に合わせて使い分けています。
強調したい単語
強調したい文章
注意をうながしたい文章
安心させたい文章

最近はこんな感じで色分けをしております。

注意!強調文に太字を使う時は「strongタグ」ではなく「bタグ」を使っています。
「strongタグ」は最も重要である事をあらわすタグであるため、多用するとSEOへ良くない影響が出ると言われています。



使用しているマーカーデザイン


すみません…使用しているマーカーデザインのサイト様がどれか分からなくなってしまいました><

ただマーカーはわりとどのサイト様でも用意している為、先ほどご紹介させていただいたサイト様からも使う事が出来ます。
基本的には同じデザインですし、こちらからも是非お使いになってみてください。

参考サイト

【CSS】テキストを彩る蛍光ペン風やガーリーなマーカー12種類×7色【コピペでOK】 | 第0版

見出しと強調部分だけの流し読みで、話を大まかにわかるようにするのがブログの基本です。 強調部分とは、こんな感じの太字やマーカーで装飾された部分のこと。 強調部分は太字だけでも伝わり...


参考サイト

「蛍光ペン」っぽいアンダーラインマーカーで文字を装飾する

「明るい色」「パステル系の淡い色」「モノトーン」「ダーク」のアンダーラインマーカー(蛍光ペン)を作りました。記事を差別化したりテーマやスキンに合わせて使い分けてみてはいかがですか?スタイルシートにコピペするだけで簡単に使えます。



使用するうえで注意点


基本的にはレスポンシブデザインを使用する事をおススメします。

FC2ブログの初期設定ではテンプレートがPC用とスマホ用に分かれています。
なのでそのままの設定ではPCとスマホ、両方のデザイン設定をする必要があります。

ですがレスポンシブデザインのテンプレートでは、スマホでもそのままPCと同じようにカスタマイズしてくれるので、非常に便利ですし、見た目もとても良いです。

POINTレスポンシブデザインのテンプレートを使用する時は、「環境設定」→「ブログの設定」→「スマホ版の表示設定」→「無効」に変えてください。
そうしないとスマホではスマホ用に設定したテンプレートで表示されてしまいます。


最近ではレスポンシブデザインのテンプレートが数多く用意されてますし、使わないのはもったいないですよ><




おまけ:吹き出しを付けてみよう


私もよく使わせていただいている吹き出しですが、これもあるととても便利です。


一言何か付け加える時に便利ですね♪



私が使用させていただいているのは、テンプレートでもお世話になっているAkira様が紹介していたものです。
レスポンシブデザインの使い方や、いろいろなカスタマイズ方法を載せてくださっているので、いつも参考にさせていただいています^^
参考サイト

チャット風吹き出しデザイン雛形

モバイルチャット風の吹き出しの雛形ですー (´・ω・`)やり方は色々あるのですが吹き出しの横幅が常に100%に ならない ようにレスポンシブテキスト内容の位置合わせが可能こんなところに気をつけて組みました。1 に関しては、常に横100%(あるいはそれに近い分量)取っていると記事幅が広い時、吹き出しの中身が少ない時なんかに見た目がちょっと鬱陶しいというか。ですから①が主な目的になっ...


<スポンサーリンク>

NYでも話題 ファイナンシャルジム「bookee」


まとめ


大きな本を開き勉強する眼鏡をかけた男性のモノクロイラスト

いろいろとご紹介させていただきましたが、一度カスタマイズし出すと止まらなくなりますよね。
私も最近になって色を増やしたので、もしかしたら前の方がシンプルで見やすかった、と思う方もいるかもしれません^^;

自分の好きなものより、第一に見てくれる人が見やすいブログを心がけるように気を付けます><

いっぺんにいろいろやると大変だと思うので、少しずつ付け加えていくことをおススメします。
ですが慣れれば意外と簡単ですし、自分のブログが色づいていくのは楽しいですよ。


無料ブログでもカスタマイズはいっぱい出来ます。
興味のあるかたは是非試してみてください♪





イラストグッズ販売中。詳しくはこちら


関連記事
きの
Posted by きの
自分を好きになり楽に楽しく生きる為に、私自身が体験した事、効果のあったものをみなさんにご紹介していきます。
今生きる事に苦しんでいる人たちを、少しでも救う事が出来れば幸いです。


<スポンサーリンク>