Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

デフォルトテンプレートの機能で不要なものは「削除」あるいは「コメント化」してくださいね

というお願いを平素からしております
その「コメント化」について
そもそもコメントってなんなの から始まり 実際のやり方などを記しておきます


コメントとは

一般的には「コメント」または「コメントアウト」と呼ばれます
ソースコード内の一部を実行・処理させないようにするために使われます

htmlのコメントアウトは「描画させない」
CSSのコメントアウトは「スタイリングさせない」
Java scriptのコメントアウトは「実行させない」

という感じですかね
どんなときに使うかというと
例えば私がいつもしているように
カスタマイズのためのガイドをつける だとか
修正点や追加点を明示するためのインフォメーション的なものであったりだとか
自分が忘れてしまわないための覚書であったりだとか
つまりは簡単な 説明文 として利用できます

テンプレートで必須なのは
・html
・CSS
・Java script
この3つの言語ですけれども それぞれにコメントアウトの書き方ルールが異なります



htmlのコメントアウト


<!-- コメント内容 -->


こちらがhtmlソース内での書き方です
FC2独自変数とよく似ています(ってゆーか同じ)ので注意が必要です
コメントアウトはコーダーがある程度自由に書くことができますが
FC2変数は一文字でも変えてしまうとページが崩壊します

私たち日本人の使用言語は「日本語」も使用可能
記号も使用可能

<!-- 


 -->

に挟まれた内容が「説明文」とみなされて 実行されなくなります
私がお願いしている「コメント化」を例にしますと

<li><a href="<%url>?sp">MOBILE</a><!-- 注)スマホ版非表示の方この行削除 -->


緑の部分がコメントアウトにあたります
削除するのがなんとなく不安だな という時もあるかと思います
今は良くても後々戻したくなるかもしれない… とかね
その場合には削除ではなくコメントアウトしてください

<!-- <li><a href="<%url>?sp">MOBILE</a>注)スマホ版非表示の方この行削除 -->


既にコメントがついている場合には 新しくコメントで囲うのではなく
囲う範囲を修正してください
気が変わって やっぱりモバイル版リンク必要だわ となった際には元に戻せばOKです



CSSのコメントアウト

/* コメント内容 */


CSSソース内でのコメントアウトは上記の記述です
htmlでの記述とは異なります
htmlコメントアウトをCSSソース内で見かけることがよくありますので注意
ルールに則って正しい書き方をしないと機能しないだけでなく おかしな文字列が表示されてしまうことも

こちらもhtmlと同様
/* 


 */

に挟まれた内容が説明文扱いになります

例)

a {
text-decoration: none;
color: rgb(179,179,179); /* 注)基本リンク色 Gray70 */
}


緑の部分がコメント
コメントが付いている行が無効化 というわけではないですよ
コメントが後ろについてるから color の設定が無効 ということではありません
あくまでもコメントを示す記号に挟まれた内容が実行されない = 表に出てこない(描画されない) という意味です
ですから仮に上記サンプルでカラー指定を無効化するならばこうです ↓

a {
text-decoration: none;
/* color: rgb(179,179,179); 注)基本リンク色 Gray70 */
}




Java scriptのコメントアウト

// コメント内容


こちらちょっと注意が必要です(後述)

例)

<script>
$(function() {
var maxHeight = 0; // maxHeightの値より大きい場合はdivの高さを全部合わせる
$(".element-item").each(function(){
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
// 高さを取得する
$(".element-item").height(maxHeight);
});
</script>


緑の部分がコメントアウト
行の横に書いても良いですし
1行をコメントアウト用に改行してもOKです
後者はコメントアウトがあるときのみです
基本的にはコード内改行(= 空白行作成)は行わないでください

で 若干注意が要るのですが
ソースをコンパイル(圧縮)する方もいらっしゃるかもしれません
FC2内でできるコンパイルはそんなにガッツリしたものではなく
せいぜい改行を全て取り払うだとか そういった感じになるかと思いますが
htmlソース全体をコンパイルすると仮定しますと
このJSのコメントアウトが悪影響を及ぼします
この方式で書かれているコメントアウトが存在すると その部分が実行されなくなってしまいます

圧縮することを前提にされる方はJS専用のコメントアウトは使わずに
htmlと同じコメントを利用してください
まあ いらっしゃるとは思わないけど一応お伝えしておきますね



まとめ

コメントアウトの仕方を覚えておくと 方針変更時の対処が柔軟になりますのでおすすめです
いずれにしてもカスタマイズされる際には複製を必ずお取りくださいね
関連記事

Comments 12

There are no comments yet.
咲夜  
できました!

わざわざ書いてくださって感激ですT^T
とてもわかりやすくてすぐできました。
本当にありがとうございました(=^ェ^=)

2016/07/04 (Mon) 17:17 | EDIT | REPLY |   
hige  
色々教えてください。

Akira 先生。

>PCご臨終で失ったデータの復旧作業中(ぷ

ってプロフィール(今時はプロファイルって言うのか)欄に記述されているのが目からうろこ。でもAbout me 欄が別にあるので、表現の仕方は、おぉ!、勉強になります。

 Akira さんのテンプレートやそのソースを見させて戴いていると色々勉強になります。私は、Akira さんのテンプレートだけではなくて、ネット上の情報を、もう、パクルばっかりなスタンスなのでこれこれを教えてくださいとなかなか素直に言えなくなってきました。
 ネット上の情報は無料なので本を買わないと得られなかった技術情報なんかをみつけたりすると、なんか無料で知ってしまっていいのって思われたりして。こういった方面の環境はすごく変わってきてるんですねぇ。

 本題
 Java script の件なんですが、

 <script src="http://blog-imgs-93.fc2.com/b/l/g/blgid1974/xxxxxx.js"></script>
 
 なんて感じで、fc2 画像アップロード機能をつかってアップロードされたJava script ファイルの機能を利用する、という手法をやっと勉強したのです。
 でも
 <script> ・・・・・・・・・・・ </script>
 と、HTML の中に直接書いても良いんでしょうか?

 もう一つ。
 Java script のコメント文(今はコメントアウトとも言うんですね)はどれだけ書いても支障は無いんでしょうか。Akira 先生の.js ファイルは冗長な文が全くないのです。

2016/07/04 (Mon) 18:08 | EDIT | REPLY |   
Akira  
To 咲夜さん

ご報告ありがとうございます。
できたようで安心しました。
お疲れ様でした

2016/07/05 (Tue) 17:05 | EDIT | REPLY |   
Akira  
To higeさん

「プロフィール」というのは英語ではなくフランス語ですー。
そもそもが英米圏の方はプロフィールではなく正しくは「プロゥファイル」と発音します。
なのでプロファイルもちょっとおかしい(笑)
アクセントの位置も「ロ」のところです。
豆知識 (o'д`o)ゝ

JSファイルや関連コードの記述はhtmlソース内で合ってます。
CSSソース内へ記載しても動作しません。
具体的な記述の箇所についてはまちまちです。

① <head>〜</head>内
② 実行したいhtml内容の近接
③ </body>の直前

このぐらいですかね。
JSというのはhtml内に記述があると、html解釈を一旦中断してJS解釈・描画に集中します。
なので<head>内に書くとページの描画(ファーストビュー)が遅くなります。
あまりにも複雑な内容は</body>の直前が望ましいと思います。
あとは記述ルールというよりも
このファイルを先に読み込まないとこのコードは実行できませんよ
とかいった関連づけがありますが、それは各コード内容によりけり。

------

コメントに制限はありませんが、あまりたくさんつけるのもどうかと思います(笑)

2016/07/05 (Tue) 17:13 | EDIT | REPLY |   
hige  
js ファイル

回答戴いた件のお礼が遅くなって申し訳ありません。
js ファイルの記述の件、回答をありがとうございました。
もう一つ教えてください。

>html解釈を一旦中断してJS解釈・描画に集中します

これはjs ファイルを外部ファイルとしたときも同じなんでしょうか。

2016/07/08 (Fri) 13:14 | EDIT | REPLY |   
Akira  
To higeさん

外部ファイル化しても同じですー。
htmlソースの上から順に解釈を行います。

外部ファイル化については「外部ファイルの方が読み込みが速い」わけではないです。
理屈としてはこんな ↓

・解釈(読み込み)自体はhtmlの順。上にあるものが先、下にあるものが後。
・「速い」とされるのは、ブラウザのキャッシュが効いている場合。

キャッシュがあるから速く感じますが、実際は外部ファイルにしたから速くなった、という理屈ではありません。
ですから「イコール」なわけではなく「ニアリィイコール」って感じですかね。
二次的要因というやつです。
初回アクセス時は特に速くありません(笑)

外部ファイルにする = httpリクエストが増える
ということなので、場合によっては初回アクセス時は逆に遅くなることも。
ですから簡素な内容であれば私はhtml内に直接書いてます。

htmlの記述順というのは大変重要なんですね。
例えば左にサイドメニューがあるタイプのテンプレだとして。
左にあるものから先に記述する、というのが基本ですが、
サイドメニューがメインの内容よりも先に書かれているというのはSEO的にはアウトです。
何故なら検索エンジンは上にあるものを重要視するからです。
3カラムの場合も同じで、
左サイド → メイン → 右サイド
という書き方はNG。
メイン → 左サイド → 右サイド
これが正しい。
音声読み上げをイメージしてもらうとわかりやすいかも。
音声読み上げはhtmlの順ですので、サイドメニューから読み上げされていてはいつまで経っても肝心な本文に辿りつけないですよね。
業を煮やして次のページに進んでもまたサイドメニューから読み始める…。
検索ロボットからしてみても同じです。
これはもうダメなパターンよね (´・ω・`)
FC2の熟練テンプレーターさんはその辺りも上手くソース書かれてますよ

2016/07/09 (Sat) 01:02 | EDIT | REPLY |   
hige  
大変勉強になりました。

 色々勉強になりました。
 短いJSならhtml内に書いてしまう方が見透しが良さそうですね。
 一度試してみます。
 また記述の順序など、htmlを眺めるときに気をつけて見てみようと思います。

 あんまり色々聞くと教えて君になってしまうので辞めときますが、もう一つだけ質問です。
 Akira さんはcssでGooglefontsのフォント指定をされておられる時、SansSerifを一緒に指定されてますが、これは何かの保険でしょうか。

 お暇なときにでも教えて戴ければ幸いです。

2016/07/09 (Sat) 11:50 | EDIT | REPLY |   
Akira  
To higeさん

えっとね。
「フォールバック」ってわかりますか (´・ω・`)
fall back(動) = 後退する, 退く, 逆戻りする etc.
fallback(形) = 予備の

CSSに於けるフォールバックも上記と同じ意味です。
フォントというのはデバイスやOSに左右されるというのが基本ですよね。
Windowsにのみインストールされている標準フォント、Macのみにインストールされている標準フォント、ユーザーが任意でインストールしたフォント。
Windowsのみ標準のフォントを指定してしまうとMacユーザーには反映されない、とかそのあたりのことですが、
higeさんはよくご存知でらっしゃるかと思います。

Google fontsの意義というのは、デバイス間格差を無くせるところですよね。
でも仮になんらかの事由でGoogleからフォントが引っ張れなかった場合。
例えばサーバーエラーとか。
そういった時の代替フォント指定はやはり必要だと思います。
これが「フォールバック」
指定フォントが見つからない場合の「予備」フォントです。

フォントには「総称ファミリー(generic-family)」
というのがあってですね、

・serif --- ゴシックフォント
・sans-serif --- 明朝フォント
・cursive --- 筆記体・草書体フォント
・monospace --- 等幅フォント
・fantasy --- 装飾フォント

--------- 7/28 追記

上記、ゴシックと明朝がテレコでした。
サンセリフがゴシックです

--------- 以下本文

こうしておくと、ユーザー個人環境で合致するものを自動的に表示してくれます。
例えば、sans-serif であれば
WindowsはArial(Macには無い)
MacはHelvetica(Windowsには無い)
みたいな感じです (´・ω・`)
ArialやHelveticaはgeneric-familyではなくfamily-nameと言います。
要するに具体的フォント名ってことです。

ちなみに「サン セリフ」ってフランス語ですが
「サン」--- 英語の none
「セリフ」 --- ひげ ウロコ
サンセリフ --- ヒゲ無し
アルファベットにチョンって線がついてるのありますよね
あれが「セリフ」です。
現在設定中のテンプレ(右にヘッダーがあるもの)だと、
このコメント欄の英数字はsans-serif。
サイドメニュー内の英数字はserifです。

2016/07/09 (Sat) 20:59 | EDIT | REPLY |   
hige  
Fontのお話

詳細な解説、ありがとうございました。
非常によくわかりました。
特にgeneric-familyとfamily-nameのことは初めて聞きました。
またフォールバックについても注意して指定していこうと思います。

2016/07/11 (Mon) 16:59 | EDIT | REPLY |   
Akira  
To higeさん

font-familyへの指定がgenericであるのか、family nameであるのかは重要点ですので、頭に置いておくと良いと思います。
フォールバックについてはフォント関連では必須ですが、旧ブラウザ向けのフォールバックというのもあります。
こっちはなるべくやりたくない… ( ̄∀ ̄;)
ie8以下向けとかホント勘弁して欲しいです (;_;)

2016/07/11 (Mon) 21:31 | EDIT | REPLY |   
hige  
generic-family の件

今日色々やっていて気づいたのですが、
教えていただいた「総称ファミリー(generic-family)」の件。
・serif --- ゴシックフォント
・sans-serif --- 明朝フォント
とありますが、これ、もしかして逆ですよね・・・・

2016/07/28 (Thu) 09:09 | EDIT | REPLY |   
Akira  
higeさん

あ。ホント。
逆ですね。失礼しました。
なにせチョンチョンの無い方がサンセリフです。

2016/07/28 (Thu) 10:39 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い