カテゴリー別アーカイブ: 知識・技術

CSSのfont-familyで記号が小さく表示される状況を解決する

Webの制作過程で表示が小さい記号文字の対処が必要になったので、HTMLソースのプロパティfont-familyで解決してみます。

 

はじめに

最初の手順としては、まずCSSファイルを特定記号〇や△などを表示指定する一番最後に読み込まれるセレクタの場所を特定します。

 

その次に、

font-familyプロパティを、font-family: “”メイリオ””, Meiryo, Osaka, “”MS Pゴシック””, “”MS PGothic””,’Century Gothic’, sans-serif;
などで指定をします。

 

最後の手順としては

対象ページで、キャッシュクリア後に特定の記号の大きさが通常サイズか確認することで今回は完了です。

 

この工程の流れで気を付けたい事が、font-familyを指定しても、CSSセレクタの優先順位や読み込まれる順番などにより正しく反映されない場合があるという点について注意する必要があります。

uncaught referenceerror function is not definedの対処方法(JQuery)

急に外部呼出しのjsファイル内の関数が読み込めなくなっていた。

ファイルの読み込み順をconsol.logでも確認するが読み込みのタイミングは順番通りで、なぜ参照できなくなったのかがわからなくなってしまった。

同一HTMLファイル内に関数を記述すると問題なく読み込まれるのになぜ?

外部jsファイルの実行も問題なく、JQueryの読み込み順番も一見問題ない。

プログラムの仕組みが良く理解できていないけど、やはり関数が読み込まれるようにするとかグローバル化しないといけないとの結論に達するが方法がわからない。

ちなみにhtaccessなどの制限も疑ってみるが、ローカルでもサーバー上でもファイル読み込みはされているので除外する。

JavaScriptなのですべてをローカル環境にして再度トライする。

外部jsファイルに記述したfunctionなども実行するがうまくいかなかったため、別の関数を新規に作成してテストするも同じく
uncaught referenceerror function is not defined

キャッシュなどは何度もクリアしながら、console.logも書き換えながら、最新ファイルを参照しているはずなのに。

どうやっても理由がわからなので初心に戻り、外部ファイルをすべて綺麗にして、グローバルスコープで別の関数を設置すると、うまくconsole.logが表示。

以前の関数をコピペすると動作できる。

・・・どうも記述部になんらかの欠陥があった模様。コメントアウトや記述などの編集も頻度があったので、なんとなく府に落ちないながらもトラブル回避。

cssセレクタなどでもごくまれに起こる、リドルクラッシュ(riddle crash)と全く似た現象かと。
ちなみにcssセレクタのリドルクラッシュは、正しい記述なのに値を変更したりすることで急に正常に反映されなくなり、同じセレクタ最初から記述しなおすと治る現象のこと。

ところが、再表示を試みたところ、やはり表示できない。他のブラウザでは表示できるから、ブラウザ特有のものであるかと考えるが、どうも狭い視野でしか思考が動かないので、その日は放置。

後日、やはり同じ現象が発生しているため、別種のブラウザで見てみるとどうやら表示されているので、ブラウザ限定の要因に絞り込みする。

再度テスト用のファイルを別途作成してトライするも、やっぱり同じエラーに悩まされる。

『あ!アドオンだ!』

GhosteryかAdblock Plus。怪しいのはどちらかだ。

結局、Adblock Plusが外部JSの読み込み制限をかけていたため、許可をするとすんなり表示。

冷静な思考を失うと、時間も労力も失う。

HTMLページをインデックス、発リンク、アーカイブさせない(noindex,nofollow,noarchive)

HTMLのヘッダ部分、メタタグでの記述。

robots=検索エンジン(Googleなど対応している検索エンジン全般)
に対して、

noindex=登録させない(インデクサに登録させない)

nofollow=発リンクを無効化(ページからのリンクジュースを付与しない)

noarchive=クローラがページを記憶しない(検索エンジンにキャッシュ情報を登録させない)

をまとめて記述することで、ページが検索結果やページキャッシュとしてインターネット上から検索できないようにしておくことができる。発リンクも無効にすることで被リンクなどからサイトをたどることを防ぐことができる。

<meta name=”robots” content=”noindex,nofollow,noarchive” />

基本的には検索エンジンを通して公開したくないページなどのheadタグ内に記述する。
ただし、インターネット上に公開されていないというわけではないので注意が必要。