てがろぐのHTML・CSSをカスタマイズする
先程「てがろぐを使い始めました！」という記事を書いたのですが、その中でHTMLとCSSのカスタマイズ方法についてはざっくりとした内容になっていました。
「詳しく解説するには知識不足だからなー」
と思っていたのですが、記事に残していないとどうやってカスタマイズしたか忘れそう…と思ったので、どのような構成になっているかメモ的な記事を書いていこうと思います。
HTML・CSSを独学で使っているので、用語の使い方とか間違っているところがあるかも…ご容赦ください🙇♀️
HTMLはCGI独特の書き方になっている
通常、HTMLのコードはこのような形になっています。
<html lang="ja">
<head> 文書のヘッダ情報
<title>ページタイトル</title>
</head>
<body>
<header> ヘッダー </header>
<main> メイン↓
<div>
<p> ～記事の内容～ </p>
</div>
</main>
<footer> フッター </footer>
</body>
</html>ざっくりとした構成を書いてみました。
ちなみにmainタグはページに1つまでですが、headerとfooterタグは1つ以上置いてもいいみたいなので、必ずしもこういう形になっているとは限りません。あしからず。
そしてここで「mainタグ」を使った説明をしていますが、私のサイトでは現在使用していません😅 HTML5で新しく追加された要素のようで、実は今回始めて知りましたｗ 今度サイト内のコード書き換えておこうかな…
で、てがろぐのHTMLファイル(skin-cover.html)はこんな感じになっています。
<html lang="ja">
<head> 文書のヘッダ情報
<title>[[FREE:TITLE:MAIN]][[FREE:TITLE:SUB]]</title>
</head>
<body>
<header> ヘッダー </header>
<main> メイン↓
<div>
[[TEGALOG]]
</div>
</main>
<footer> フッター </footer>
</body>
</html>かなり省略しました。通常のコードとの違いは専用コード[[FREE:TITLE:MAIN]]や[[TEGALOG]]などがあることです。
この専用コードにはCGI側で設定した項目やそれに伴うHTMLタグが出力されるので、実際公開したページのソースコードを覗くとこの様になっていると思います。
<html lang="ja">
<head> 文書のヘッダ情報
<title>～CGI管理画面で設定したメインタイトルの文字＆サブタイトルの文字～</title>
</head>
<body>
<header> ヘッダー </header>
<main> メイン↓
<div>
～内側スキン(skin-onelog.html)で設定したコード／記事その①～
</div>
<div>
～内側スキン(skin-onelog.html)で設定したコード／記事その②～
</div>
</main>
<footer> フッター </footer>
</body>
</html>[[TEGALOG]]の中にはskin-onelog.htmlで設定したコードが入り、その中の[[COMMENT]]や[[DATE:Y.G.N(w) h:m:s]]に本文の内容や投稿日時が挿入されていきます。
ここがちょっと分かりにくい所かも知れません。
ローカル(自分のパソコンの中)のhtmlファイルと、サーバーにアップして公開されたhtmlファイルのソースコードが違うので、何がどうなってるのか把握するのに時間がかかるんですね。
特にCGIが出力したコードの方には個々のカスタマイズがしやすくなるようにclassがたくさん割り当てられているので、初めて見た時は😧となるかも…(経験談)
構成を把握するために
てがろぐは基本の状態で既にたくさんの機能が使えるようになっているので、その分コードの量も多くなっています。その状態のままカスタマイズしようとするとかなり大変だと思います。
なのでまずはCGI側の設定で使う機能をできるだけ絞り、必要な専用コードを選別しておきます。
※どの機能にどの専用コードが割り当てられているかは、公式のカスタマイズ方法のページに詳しく載っています。
そしてローカルのskin-cover.htmlとskin-onelog.htmlのコードもできるだけシンプルにし、さらに専用コードの前後にコメントを入れておくことで、CGI出力後どのようなコードが挿入されているか確認がしやすくなります。
※公式のスタンダードスキンには専用コードの前後にコメントが記載されているので、それをそのまま利用するのがいいと思います。
あとはローカルのコードと公開後のコードを見比べて、どの専用コードからどのようなHTMLコードが出力されているか・割り当てられているclass名にどのようなパラメータが設定されているかの確認をします。
CSSのclassについてはスタンダードスキンのtegalog.cssをみると細かく解説してあるので分かりやすいかも。量が多くて圧倒されますけどもｗ 「ctrl＋F」の検索でうまく探してください😅
自作のCSSファイルで上書きする
基本のtegalog.cssを使用しつつ、部分的に色や余白の量を変えたい時は自作のCSSファイルを用意します。
用意したCSSファイルには設定したいパラメータを書いておき、skin-cover.htmlのheadタグ内に、
<link rel="stylesheet" href="tegalog.css">
<link rel="stylesheet" href="custom_tegalog.css"> ←自作ファイルこのように2行目に自作ファイルのタグを書けばOKです。
自作ファイルを後に読み込むことで、設定の上書きができます。
最後に
書いているうちにこの書き方で合っているのかだんだん不安になってきたんですが… 自分が分かればヨシ！(責任放棄)
とはいえ本当に自分なりの書き方で書いているので、参考程度に見てください。コードを弄る時はバックアップをお忘れなく！
