ワードプレスのブログで「目次」の作り方を覚えた日!!

記事
コラム

ワードプレスのブログが本当に使いやすい!!

 皆さまおはようございます。
昨年の秋にカラダを壊してからずっと家庭安静を続けているしげおです。
 カラダを壊すまでは、社会人として働きながら副業で物販をしておりました。メルカリやヤフオクで商品を販売していたのですが、カラダが思うように動かせなくなってからは物販は、今の所すっかり引退・・・・・・。

 ブログの更新で時々得られるアフィリエイトの報酬代が、今の僕のお小遣いと言ってもいいぐらいです^^

 さて、今日の記事ですが、昨年からボクはワードプレスをメインに、アメブロでもブログを更新しているのですが、昨日でしたっけ?
 やっと、「目次」の作り方のHTMLを覚えました。
確か、専門学生時代にHTMLについて習ってて、Webクリエイターのスタンダードの資格も持ってるハズなんだけど、しばらく使ってなかったスキルだったので、完全に忘れていたのであります・・・・・・。

 なので、ボクがワードプレスのブログで使っている「目次」のHTML要素を今日は、ご紹介させて頂きますので、どうぞ、最後までお付き合い下さい。

ブログ運営「目次」を作ってページを見やすくしよう♪

 まず、ワードプレスの編集画面で「カスタムHTML」のブロック要素を選択します。僕はいつも、ワードプレスの記事は、ブロック形式で書いております^^
カスタムHTML.png
 すると恐らくこんな感じでHTMLを編集するためのブロック要素が作られるかと思います☆彡そこに、以下のHTML要素を加えます♪

<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">
<b>目次</b><br>
<a href="#1">見出し1へ</a><br>
<a href="#2">見出し2へ</a><br>
<a href="#3">見出し3へ</a><br>
<a href="#4">見出し4へ</a><br>
<a href="#5">見出し5へ</a><br>
</div>

 普通、a要素に加えるリンク先と言うと、ホームページのアドレス等が、思い浮かびますが、今や目次と見出しをつなぎ合わせるのが当たり前になってるんですねぇ~♪

 もう、この要素だけで完成なのですが、これだけでは正しく飛びませんので、<H2>の要素の中に以下のタグを追加します。

<h2 id="1">見出し1へ</h2>

 これでご利用のウェブサイトでプレビューか公開を押すと、恐らく上手く目次から見出し1の部分へ上手くジャンプする事が出来ると思いますよ♪
ぜひ、コピペで使っていただけたらと思います。

デザインやカラー等が気に入らなければご自由にお使いくださいませ☆彡

HTMLとCSS編集の機能を覚えるとブログ運営が楽しくなる!!

 僕は平成元年生まれでして、我が家にネットが初めて繋がったのは小学校の4年生か5年生くらいの時でして、当時のコンピューターはテレビのモニターみたいに分厚く、Windowsも95と凄い懐かしのパソコンを使ってました。

 フロッピーディスクに昔はデータを読み込ませてたんですけど、あの頃が懐かしいです(;'∀')

 そして、本格的にSNSを使いだしたのが、中学を卒業し、高校を降りる頃でした。高校の時は寮生活でしたので、いわゆるガラケーの持ち込みが禁止でしたから、ブログの運営でお小遣いを稼ぐ事も当時は出来なかったんです!!
 やがて、高校を降りて短大に入ると、今や農業すらIT化が進んでる現実を知らされるのです。
 ボクの家はみかん農家ですが、昔はネットを使って商品を売ると言う知識すら、誰も持っていませんでした。

それが今やネットで商品を売るのは当たり前の時代に!!

 ボクもワードプレスやアメブロでブログを更新した時は、記事の下の方に楽天さんやA8.netさんの広告を貼りつけたりして、時々アフィリエイトの報酬代を頂くまでになりました。

 20代前半の頃はただ普通にブログだけを更新してて、つまらない日々を送ってたのですが、それが今や、ブログに貼り付けてある広告が売れたら、それが自分のお小遣いになるまで成長しました。

 これはホント、専門学校に通ってHTMLを学ばなきゃ分からなかった話です。以上、少し昔話をしてしまいましたが、Webクリエイターのスタンダードの資格を持つブロガー、しげおのひとことでした☆彡
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す