【追記あり 重要】テンプレートアップデート後のカスタマイズについて

2022.8.16
Twitterに関する内容を記し忘れましたので章を追加しました。

全テンプレートをIE非対応に

個人的な事情でIEの対応がまだ必要という方は アップデートを行うとIE閲覧時にレイアウトが著しく崩れます ので、現状のソースコードをそのまま維持するようにしてください。IE対応に関するご質問は受け付けていませんので自己責任の元で管理をお願いします。

テンプレート修正(バージョンアップ)についての詳細については以下の記事を参照してください。

【追記あり】テンプレート過去作一斉修正(予定)

えっと、『いつまでに』と言えなくてすみません。余暇を見つけて少しづつ進めます。本記事は『何故修正するのか』そして『記事を書く際あるいはテンプレートカスタマイズの際に注意すべき点』さらに『カスタマイズのコツ』について。...

vanillaice000.blog.fc2.com

カスタマイズの仕方が大きく変わります

テンプレートのカスマイズにも色々あるんですが、今回のアップデートの主旨の一つは できるだけスタイルシートの編集だけで済むようにする ことです。例えば

• 背景画像の変更や設置
• No image画像の変更
• 色彩の調整
• カラムの調整(左右入れ替えや幅変更など)
• 表記文字の変更

No imageの代替画像はこれまで主にHTML側で指定URL変更を行いましたが、これらを可能な限りCSSでの操作に変更しています。また、カラム入れ替えについてもHTMLの構造(記述順)を変更せずに済むようにしてあります。

注) 比較的新しいテンプレートでは既に導入していますので目にしている方もいらっしゃるかと思います。これまでは『背景関連』『文字色』『フォント』といったまとまりで記していましたが、部位別『ナビゲーション』『フッター』などでまとめた方がわかりやすかもしれないと感じたの揃えることにします。

表示文字の変更 については、例えば『No image』を『画像準備中』などに変更したい、『You may also like』を『こちらの記事もどうぞ』に変えたい、などといった場合もHTMLではなくCSSで操作可能です。但し 見出し(h要素)のように重要な意味を持つ文字列・文言は従来通りHTMLで表記を行う ようにしています。HTMLは『意味・定義』を司りますので、重要な文言はきちんとHTMLで表記するのが望ましい。

HTMLのカスタマイズは 致命的なエラーを生じさせる可能性が常にある ので、できるだけ触らない方が良いんですね。

一方CSS(スタイルシート)というのは『意味・定義』とは無関係で『装飾』を担っているだけで、もちろんミスがあれば視覚的な問題は生じるけれども、文書構造を著しく破壊してしまうといったものではないので、できるだけHTMLを操作せずに済むようにと今回の変更を行いました。

次章からは具体的なやり方についてざっと説明します。

セレクタ探索の必要を最小限にしました

従来のカスタマイズは以下のような流れです(CSSとスタイルシートは同義だと思って読み進めてください)

1. 変更したい部位のHTML部位を見つける --- HTML
2. 対象部位のセレクタを見つける --- HTML
3. スタイルシート内に対象セレクタに関するルールセットがあるか探す --- CSS

こういった手順を踏むので結構な面倒くささ ^^;
アップデート後は

スタイルシートの上の方に上記のような内容が記してあります。あくまでも ユーザーによるカスタマイズが予想される箇所 についての記述ですから、もしかすると事足りないこともあるかもしれませんが、概ねこの部位の操作だけでできるのではないかと思います。

操作の仕方は例えば

--order: 0;/* メインカラムとサイドカラムの入れ替えは 0 を 1 に変更 */

という一行があるとします。/* から */ に囲まれているものが専門用語で言う コメントアウト で、ここでは注釈の役割です。この場合は『メインカラムとサイドカラムの入れ替え』に関する内容ですね。

テンプレートのデフォルトが上記だとして、この左右のカラムを入れ替えたい場合は --order: 0; の緑の部位(『値』と言います)を 0 から 1 に変更してくださいね、というガイダンスです。

セレクタを探す必要もないですし、値を変更するだけなので簡単です。

操作するのはコロンの右側のみ

上記の成り立ちを説明すると

--カスタムプロパティ名: 値;

というものです。操作して良いのは 値 のみ です。コロン左側のカスタムプロパティ名は変更しないよう注意してください。名称は、どの部位に関係しているのか察しが付くようにしてありますが、必ず行末のコメント内容(サンプルの場合は『ブログ背景色』)を参照するようにしてください。

値変更と行削除の場合があります

通常は値の変更で操作します。

--color-link: rgb(157,92,98);/* リンク(濃桃) */

--color-link: rgb(122,159,189);/* リンク(濃桃), 水色に変更 */

変更内容をメモ書きしておきたいときは 既存コメントアウト内に記す ようにしてください。コメントアウトのミスは後続の内容に悪影響を及ぼします(ミス発生点以降のスタイル指定が反映されなくなります)ので注意。コメントアウトの仕方をよく理解している場合はその限りではありません。

ガイダンスが『変更』ではなく 『行削除』 という場合もあります。行を削除する際には 前後の内容を巻き込み削除しない よう注意してください。

基本の操作については以上です。

横幅調整に注意

ほとんどのテンプレートに於いて、いわゆる『ブログ全体の横幅』に関する記述は 2つ あります。

  --width-whole_pct: 92%;/* 全体最大横幅, 変更非推奨 */
  --width-whole: 1300px;/* 全体最大横幅 */

カスタムプロパティ名はどのテンプレートもほぼ同じです。「記事の横幅が広すぎるなぁ」と感じたときなど横幅を操作することがあると思います。その際には %単位ではなくpx単位の方を操作する ようにしてください。--width-whole は max-width の指定であり、--width-whole_pct の方は width の指定です。ここ結構間違える方が多いんですが、width と max-width は正しく操作しないと以下のようなことが起こります。

デフォルト width: 92%; max-width: 1300px;

カスタマイズ① width: 92%; max-width: 1000px;

カスタマイズ② width: 60%; max-width: 1300px;

カスタマイズ②の方はパーセンテージを操作してしまったためにスマートフォンで閲覧困難な状態に陥っています。以下はほぼ同じ意味です。

width: 100%; max-width: 1200px;

width: 1200px; max-width: 100%;

値とその単位が入れ替わっていますが、上は
『横幅は100%、ただし最大でも1200pxまで』
下は
『横幅は1200px、ただし最大でも100%まで』

%という単位は相対単位なので必ず参照するものがあります。この場合参照するのは デバイスの横幅 または 表示領域の横幅 なので、カスタマイズミスの②の方は『横幅は1300px、ただしスマートフォン横幅の60%まで』ということで小さく縮こまって表示されているわけです。

多くの方がカスタマイズの際にパソコンでの見た目を頼りにしています。スマートフォンでの見た目確認を怠らないよう上手にカスタマイズを行ってくださいね。

記号入力のミスや全角スペース不正利用に注意

HTML, CSSに於いて絶対利用してはいけないのが 全角スペース です。インデントなどを扱う際には必ず 半角スペース を利用します。文章(例: 当ブログへようこそ！) などは指しません。あくまでも『HTMLタグ』や『CSSプロパティ』などのことです。

htmlの絶対的NGそれは「全角の利用」

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...

vanillaice000.blog.fc2.com

また、カスタムプロパティというのは簡単な代わりに 記号の抜け落ちやスペル間違い等のミスを犯すと全てが台無しになる ことがあります。ミス以降のスタイルが全て消失(パースエラー)するなど。操作の際は重々注意するようにしましょう。

Twitter関連の変更について

ロゴ・サービス名変更の対応を同時に行っています。ロゴは正規のものが発表されていますが今後 URLが変更になる可能性があります。現時点ではページリンク・シェアリンクともにまだ『twitter』の文字列が残っており、これが変更される可能性を否定できません。未明なので何らかの動きがあり次第再度対応を行う形を取りたいと思います。

さいごに

基本を理解すれば容易に扱えるかと思います。カスタマイズファーストに方針変更したため、旧来よりもスタイルシートの記述量が増え、ファイルサイズも大きくなっています。また、本来は必要のない指定もカスタマイズに対応するために記載していたりなど。この辺りは仕方がないのでご容赦ください。

テンプレート修正は継続中ですが、限られた時間に急いでやっていますのでミスがあるのではないかと心配です ^^;
お気づきの方はお知らせ頂けると助かります。

また、9月初旬まで本来の環境下にないためログインできるか微妙なところで、ご質問への回答が遅くなりそうなので前もってお知らせとお詫びを申し上げます。