こくごな生活

国語や法律のソフトな考察を中心とした日常雑記録

プログラミングの「ど素人」が はてなブログの目次をカスタマイズしてみた

スポンサーリンク

こんにちは。

 

今回は、プログラミングのことが全く分からない僕が、はてなブログの目次のカスタマイズに挑戦したお話です。

 

僕はプログラミング系の知識が全くないので、いつもブログは「見たままモード」を使ってワードと同じ感覚で記事を書いています。

記事を見やすくするために目次を入れることも多いのですが、はてなの場合、目次のアイコンを押せば自動的に挿入してくれるので、大抵その方法に頼ってしまってます。

f:id:bigwestern:20200502210737j:plain

 

しかしデフォルトの目次設定だと、ちょっと見栄えがしないんですね。

ちなみに実際の見た目は、こんな感じになります。

f:id:bigwestern:20200502205045j:plain


上記の画像を見てもらうとわかるんですが、各項目のナンバリングの前に中黒などの余計な要素が入ってしまっています。僕は記事の見出しに数字を入れることが多いので、これではカッコ悪い。

 

また、せっかくなので目次に該当するところに「CONTENTS」みたいな表題を入れたいところです。

 

そんなわけで、はてなブログの目次をカスタマイズしてみようと、いろいろサイトを漁ってみたのですが、どうもプログラミングど素人にはピンとこない内容のものが多い。

 

そこで今回は、

  • プログラミング初心者の僕が
  • 目次の表題挿入・中黒消去をした

ときの模様を記して、僕のようなブログ・カスタマイズ素人の皆さんと情報共有をしたいと思います。

 

ちなみに今回の完成品はこんな感じです。

f:id:bigwestern:20200503010243j:plain

僕と似たような境遇の方で、目次をカスタマイズしたいと思う人は、参考にしてみてください。

では僕と一緒に「なんちゃってプログラミング入門学習」を味わってみましょう。

 

f:id:bigwestern:20180728142310p:plain

 

 

1 CSSって何なんだ?

⑴ デザインCSSの存在を知る

ネットで調べてみると、はてなブログで目次をカスタマイズするには、設定画面の中にあるデザインCSSを開いて、デザイン変更のためのコードを挿入する必要があるようです。

f:id:bigwestern:20200502211656j:plain

デザインCSSとは、どうやらCSSというプログラムを打ち込む場所のようですが、そもそもCSSってなんなんでしょうか?

ちょっと調べてみましょう。

 

f:id:bigwestern:20200328140153p:plain

どうやらCSSというのは、HTMLというプログラムに対し、デザインに関する情報を与えるプログラムのようですね。つまり、

  • HTMLが文字などの役割を意味づけるコード
  • CSSはデザインに関するコード

を扱うわけ。

 

⑵ はてなブログのHTML編集で試してみる

試しにHTML編集モードを開いて、ブログ記事上の文字に関するプログラムを見てみましょう。

 

本文に「こんにちは。」と打ち込んで、HTML編集モードを見てみると、こんな画面が出てきました。

f:id:bigwestern:20200502233230j:plain

 この<p></p>というのがタグというもので、HTMLにおいて「これは文章(paragraph)だよという意味付けをするらしいですね。

この部分に文字のスタイルなどの情報を与える作業が、CSSの編集というわけ。

 

ちなみにこの部分を赤い文字にしたいときには、こんなコードを加えるようです。

f:id:bigwestern:20200502233926j:plain

先頭の<p>に style="color : red"を加えます(ほかにもやり方があるみたいですが)。

こうすると「この文章のスタイルは赤色だぞ」と、ブラウザに指令がでます。

 

試しにプレビュー画面を見てみましょう。

f:id:bigwestern:20200502234446j:plain

ちょっと見づらいですけど、ちゃんと赤色になっていました。

 

こんな作業をして「ふ~ん、CSSってこんな感じなんだ」という感覚を掴んでいきました。今回の僕は完全に生徒の側ですね。

 

2 デザインCSSの役割

このように書くと、「じゃあHTML編集に全部CSSのコードを書けばいいじゃん。」と思うかもしれませんが、どうやらそう単純ではないようです。

 

CSSの情報によっては沢山のコードを挿入する必要があり煩雑になったり、記事の本文に変なコードが交じるとトラブルのもとなったりします。

 

あくまで初心者の推測ですけど、デザインCSSの趣旨は、そんな不都合が生じないために、CSSの編集をする場所を別枠に設けたという点にあるのでしょう。

実際のプログラミングでもCSSは別のファイルで編集することが多いみたいですから、当たらずとも遠からずだと思ってます。

 

3 デザインCSSにコードを入れてみる

では、デザインCSSに目次のカスタマイズに必要なコードを入れてみましょう。

 

カスタマイズのためのサンプルコードはググれば結構みつかります。

今回は、主に以下のサイトのお世話になりました。

soujinista.hatenablog.com

www.kurasitotonoe.com

 

上記のブログに記されているコードは、僕の求めているカスタマイズそのものズバリではないので、コピペして貼り付けるだけではうまくいきません。

それでも自分なりに調べていくうちに、こんなコードができあがりました(初心者なので間違えている可能性アリ。もしご指摘があればコメントをください)。

 

.entry-content .table-of-contents li,
.entery-content .table-of-contents ul{
list-style-type:none
}

 

.table-of-contents:before {
content: "CONTENTS";

font-size: 110%;

font-weight:bold;
color:#008080;
}

 まず前段ですが、どうやらプログラム上、目次の部分は

.entry-content .table-of-contents li,
.entery-content .table-of-contents ul

というコードで表されているようです。

 

これに「リストには中黒がいらないよ」という指令を与えるために

{list-style-type:none}

というコードを入れるようです。たしかにnoneは「無」ということですからね。

 

後段は、目次のタイトル「CONTENTS」を挿入するためのコードです。

.table-of-contents:before {~}

table-of-contentsはブログの目次に相当する部分。そして以下のサイトによると、その項目の直前に~を挿入しなさいということらしい。

saruwakakun.com

 

{ }の中に、挿入すべき内容を入れていきます。

content: "~"の部分に挿入したい文字を入れるので、今回はCONTENTSと入力。

 

ちなみに、font-sizeは文字の大きさ、及びfont-weightは文字の太さです。

これはサンプルコードのままで不都合はないので、コピペして使わせてもらいました。


colorの後ろにある#008080という数字は、カラーコードのようです。

この辺はさっぱり知識がなかったので、以下のサイトを参考にして緑っぽい色のカラーコードにしておきました。

www.netyasun.com

 

そんな試行錯誤をして完成したコードをデザインCSSに挿入してみると、目次がこのようになってくれました。

f:id:bigwestern:20200503010243j:plain

まあ、当初の目的を達成できたので、これで良しとしましょうか。

 

4 まとめ

以上、プログラミングの「ど素人」が、はてなブログの目次をカスタマイズすることに試行錯誤した模様を書いてみました。

 

ここまでいきつくのに半日以上も悪戦苦闘したにもかかわらず、偉そうな講義口調の文章になってしまった点、講師業の悪癖が出たかもしれませんw 申し訳ありませんでした。

 

ただ、この記事が僕みたいにブログのカスタマイズをしたことがない人への情報・感情共有になってくれれば幸いです。

 

最後に、今回の参照サイトで情報をくださったみなさまには、この場を借りて御礼申し上げます。ありがとうございました。

 

それでは、また。

プライバシーポリシーについて

スポンサーリンク