バナー広告

 

今回はシーサーブログの目次と見出しの作り方をお伝えします。難しく感じるかもしれませんが仕組みが分かればとっても簡単です。

コピペで簡単に目次と見出しを作れます!

また後半では目次の背景色を変えたり見出しをかっこよく装飾したりなどのカスタマイズ方法も図解で詳しく解説しますので是非最後までご覧ください。

 

Seesaaブログの目次と見出しを同時に作る手順

それでは早速始めていきましょう。とっても簡単なのでご安心ください。

まずはSeeaaブログにログインします。

 

シーサーブログ新規投稿

今回は失敗しても良いように新しい記事に目次と見出しを作っていきます。「新規投稿」をクリック。

 

リッチテキスト切り替え

シーサーブログは「通常エディタ」と「リッチテキスト」で記事を編集することができます。まずは「通常エディタ」を使います。上記のように画面に「リッチテキスト」と表示されていたら通常エディタの状態です。

 

タイトル決定

まずは記事タイトルをつけてください。練習なので適当でOKです。

 

【目次と見出し用のコード】

こちらを全てコピーしてください。

 

シーサーブログ貼り付けコード

シーサーブログの記事内に貼り付けます。

 

シーサープレビュー

どのように表示されるか見てみましょう。「プレビュー」をクリック。

 

目次表示チェック

このように表示されていたらOKです。各見出しの名前を変更して文章を書いていけば立派な記事の完成です。一緒にやっていきましょう。

 

一旦保存

記事は「リッチテキスト」を使って編集していくのが簡単です。ただし「通常エディタ」から「リッチテキスト」に切り替える際に自動で保存されません。ですので「非公開」にして「保存」をしておきましょう。

 

リッチテキストエディタ切り替え

保存できたら「リッチテキスト」に切り替えます。

 

注意書きOK

注意書きが表示されますが「OK」をクリック。

 

テキスト変更

このようにテキストを順番に変えていきましょう。

 

【テキスト変更の際の注意点】

リンク元とリンク先の文章を変更したい場合は全部消すとリンクまで消えてしまいます。ですので元のテキストを消さずに、続きで文章を書いていきましょう。書き終わったらいらないテキストを消します。

 

元のテキストを残す

元のテキストを残したまま書いて、最後に消すことによりリンクが消えません。

 

全て入力

このように本文も入力していきます。すべて入力できたら「プレビュー」を見てみましょう。

 

テーブルプレビュー

目次をクリックしてジャンプするかどうか確認しましょう。でも見出しと本文のサイズが同じでちょっと見にくいですね・・・

そこで見出しをかっこよく装飾する方法をお伝えします。これもコピペだけなのでとっても簡単ですよ。

見出しをかっこよく装飾する方法

では見出しをかっこよく装飾して見やすくする方法をお伝えします。

 

seesaaデザインクリック

 

ちなみに私はブログアフィリエイトで人生が激変しました。もし現状が不安な方はぜひ私の稼いでいる秘密をご覧ください。

後藤の稼いでいる金額や裏ワザ的なノウハウもお伝えしております。

後藤の稼いでいる方法と秘密を見る

 

 

サイドメニューから「デザイン」をクリック。

 

シーサーブログCSS

「デザイン設定(CSS/HTML編集)」をクリック。

 

テンプレートタイトルクリック

お使いのデザインのタイトルをクリック。

 

css編集画面

するとこのような画面が表示されるので見出しの装飾用コードを貼り付けます。

 

【見出しの装飾用コード】

上記を全てコピーして下さい。

 

CSS表示移動

右側のスイッチをクリックしながら一番下まで移動させましょう。

 

最下部にコード貼り付け

一番下のスペースに先ほどコピーしたコードを貼り付けます。

 

表示確認

どのように表示されるか見てみましょう。「記事ページ」に切り替えて「プレビュー」をクリック。

 

見出しサイズ変更

このように見出しの左側に縦ラインが入り文字が大きくなりました。かなり見やすくなりましたね。縦ラインの色変更とサイズの変更もできます。

見出しの縦ラインの色を変更する方法

シーサーカラーコード

「#」の後に続く6桁の英数字が色を指定するカラーコードです。こちらを変更しましょう。下記にてよく使うカラーコードをまとめておきました。

 

【見出しに使えるカラーコード】

オレンジ系 ff8c00
ブルー系 00bfff
グリーン系 228b22
ピンク系 ff1493
グレイ系 808080

上記をコピーしてお使い下さい。やってみますね。

 

からコードコピーピンク

使いたいカラーコードをコピーします。

 

カラーコード貼り付けピンク

カラーコードを変更します。プレビューを確認しましょう。

 

【おすすめコンテンツ】中断バナー

 

 

変更チェック

このように変更されていたら成功です。

 

見出しの文字のサイズを変更する方法

見出しの文字サイズの変更もできます。

 

文字サイズ変更

「font-siz」の部分が文字サイズを指定しています。18を24に変えてみます。

プレビューを確認しましょう。

 

フォントサイズ24に設定

文字が大きくなっていたら成功です。

見出し装飾を失敗した場合

間違って元からあった英数字を消してしまったり、コードがぐちゃぐちゃになってしまっても慌てる事はありません。

 

最初に戻る

「初期値に戻す」にチェックを入れて「保存」をクリックすれば一番初めの状態にいつでも戻すことができます。もう一度先ほどお伝えした装飾コードを貼り付けて再チャレンジしましょう。

目次をカスタマイズする方法

次は目次をカスタマイズしてみます。現状のままだとちょっと地味すぎですね^^

まずは目次の背景色を変更していきます。

目次の背景色を変える方法

シーサー目次背景色

「background」の横にある「#ffffff」が背景色を指定するコードです。こちらを変更することにより背景色を変えることができます。

背景色は薄い色がお薦めです。

 

【背景色に使えるカラーコード】

薄いイエロー ffff99
薄い水色 f0ffff
薄いグリーン ccffcc
薄いピンク ffeff9
薄いグレイ f5f5f5

こちらをコピーしてお使い下さい。一度やってみます。

 

背景色カラーコピー

使いたい色のカラーコードをコピーします。

 

背景色貼り付け

カラーコードを書き換えます。プレビューを見てみましょう。

 

背景色薄い青

目次の背景色が変わっていたら成功です。水色だと中の文字が目立ちませんでした^^

背景色の変更ができたら「保存」をしておきましょう。

目次のタイトルの色とサイズの変更

次は目次タイトルの色とサイズを変更します。

 

タイトル変更リッチテキスト

 

実は私が稼げるようになった理由は美しいデザインや画像、文章力などの小手先のスキルを諦めて「最短で稼ぐためのノウハウに集中して取り組んだから」です。

最短で稼ぐためのノウハウを見てみる

 

文字を編集する場合は「リッチテキスト」に切り替えます。

 

目次サイズと色変更

「目次」をドラッグ(クリックしながらなぞる)した状態で「文字色変更」と「文字サイズ変更」を行ってみましょう。

 

目次タイトル変更完了

今回は文字色をオレンジ、サイズを18pxにしてみました。お好きなように変更してください。

目次を追加&削除する方法

今回は目次が5つの場合のサンプルをお渡ししましたが、これを減らしたり増やすことが可能です。

やり方はとっても簡単。

 

お渡ししたサンプルはリンク元(目次)とリンク先(見出し)の2つがセットでなりたっています。リンク元をクリックするとリンク先までジャンプするという仕組みです。

リンク元とリンク先の関係

 

「#1」の場合は「1」にジャンプします。サンプルでは「#1」から「#5」までお渡ししていますので同じように「#6」以降を作っていけば目次を増やすことが可能です。

 

リンク元の追加用コード

 

リンク先の追加用コード

 

上記コードを二つシーサーブログの通常エディタにコピペします。更に目次を増やしたい場合は数字を変更するだけです。

目次と見出しを追加する方法

リンク元(目次)の追加

シーサーブログ目次追加

リンク元の追加コードをコピーして最後の</div>の直前に貼り付けます。

 

リンク先(見出し)の追加

見出しの追加コピペ

リンク先のコピーコードをコピーしてお好きな場所に貼り付けてください。ブログを確認してみましょう。

 

ジャンプの確認

ちょっと小さくて見にくいと思いますが見出し6が出来ています。目次をクリックしてジャンプするか確認しておきましょう。

目次の数を減らす方法

目次の数を減らすのもとても簡単です。先ほど増やした時と逆のことをするだけです。

 

目次を消す方法

</div>直前の「<a」から「<br />」を選択してキーボードの「delete」をクリック。

見出し6を消した場合はリンク先の見出し6も消しておきましょう。

 最後に30万稼ぐためのアドバイス

今回はSeesaaブログに目次と見出しを作ってカスタマイズする方法をお伝えしました。ワードプレスなどには目次を自動で作るプラグインがあるのですがシーサーブログのような無料ブログにはまだそういった機能が少ないですね。

でも今回お伝えした方法を使えば簡単に目次と見出しを作ってリンクさせることが可能です。慣れてしまえば簡単なので是非何度もチャレンジして下さいね^^

目次と見出しをつけて読者さんにとって見やすいブログになったとしても、それだけでは稼いでいくことはできません。稼ぐためにはアクセスとコンテンツ力が必要です。

下記にてアクセスとコンテンツ力を高めるためのとっておきのノウハウをまとめておきましたので是非ごゆっくりとご覧ください。

 

★アクセスをガンガン集めるノウハウ

堅実に30万稼ぐためのブログアフィリエイトの始め方

稼げるキーワードが探せるお宝キーワード発掘法

ブログ開始3カ月から半年過ぎてもアクセスも収入も上がらない時の改善策

 

★コンテンツ力を高めるために絶対学びたいスキル

反則スレスレの鬼稼げる記事の書き方とコツ

売れる!説得力のある文章が書けるコピーライティング術

 

最後までありがとうございました。

 

【追伸】
ここ3日間ランニングを休んでいます。。。こうやって少しずつ少しずつ遠ざかっていく、これはブログ運営と似ていますね。。。気を引き締めなくちゃ!!

 

記事を読んだらコチラをクリック
▼  ▼  ▼

バナー広告