171116 アイコン制作
前々回の記事で、タイトルバーに画像表示の仕方を紹介しましたが、各ブラウザではどのように表示されるのでしょうか。
グーグルクロームでは、
171116-00.jpg
ファイヤフォックスでは、
171116-01.jpg
オペラでは、
171116-04.jpg
サファリでは、
171116-02.jpg
インターネットエクスプローラーでは、
171116-03.jpg
インターネットエクスプローラーでは、アドレスバーとタブと両方表示されました。
この画像は、ファビコンと呼ばれると紹介しましたが、似たようなものに「アイコン」があります。
今回下記のサイトでアイコンを作ってみました。
https://ao-system.net/favicon/
このサイトでは、16×16のファビコン、36×36、48×48の三つの大きさの画像を一つのファイルとして格納でき、「マルチアイコン」と呼ぶようです。
拡張子は「ico」になります。16×16のファビコンだけでしたら、「png」や、「jpg」でもよいのですが、アイコンとするならば、「ico」でないといけないとのことです。
そこで、「中間西校区まちづくり協議会」のホームページのアイコンを作ってみることに・・・
この三つの画像は、それぞれ違う画像も指定できるそうで、
16×16のアイコン
171116-16
32×32のアイコン
171116-32
48×48のアイコン
171116-48
16×16以外には文字を入れています。
当ブログをブックマークすると、
171116-05.jpg
デスクトップにショートカットしてみました。
(48×48の画像が表示されています。)
171116-06.jpg
ショートカットの画像を変更するには、
ショートカットの画像を右クリック、プロパティをクリック。
171116-07.jpg
「アイコンの変更」をクリック。
171116-08.jpg
「参照」をクリックして、自分のPCの中にある拡張子「ico」のアイコン画像を選択します。
171116-09.jpg
現在、当ブログのファビコン画像は、「jpg」から今回制作したマルチアイコン画像に変更しました。
ブログランキングに参加しています。応援よろしく です。
Comment(0) Trackback(0)『未分類』 pagetop ↑
171111 HTML文法チェック
前々回の記事で、HTMLソースの文法をチェックするサイトを紹介しましたが、当ブログもチェックしてみました。
結果は、29点。「がんばりましょう」
ソースのline1、1行目からエラーです。
解説21をクリックすると、
「XHTMLではXML宣言をすることが強く求められています。」と出て、下に例えが示されています。
現在ソースの1行目で「DOCTYPE宣言」を行っていますが、それより先に「XML宣言」をしなくてはいけないみたいです。
解説の通りに最上段に書き加えました。
次に22行から26行に最大のエラー値「9」のエラーが出ています。
ソースを確認すると、
<meta>タグに対し、終了タグの</>が記述されていません。
正しくは、下の画像の様にスラッシュで閉じます・・・
この<meta>タグは、テンプレートには出てきません。FC2の環境設定でこのタグを無効にします。
171111-07.jpg
171111-08.jpg
「メタタグの設定」で無効をクリック。
171111-09.jpg
本来なら、HTML形式のテンプレートなら、そのまま、XHTML形式のテンプレートには、自動で閉じのスラッシュを入れなければいけないところを未対応のようです。
ちなみにこのOGP設定については下記のサイトをご覧ください。
https://ferret-plus.com/610
他のエラーとして、
171111-12.jpg
これは、トップページに5記事掲載されますが、一番上にある記事にはid属性で構わないのですが、上から2番目以降の記事に対しては、id属性は1回しか使えないためエラーとなりました。
ここは、テンプレートの作者の方には申し訳ありませんが、class属性に修正しました。class属性であれば一つのHTMLに何回出てきてもOKです。
結果・・・
171111-10.jpg
文法をチェックするサイトは他にもありますが、文法が違っているから、必ずしもホームページやブログが表示されないということは、ないみたいです。
ブログランキングに参加しています。応援よろしく です。
Comment(0) Trackback(0)『未分類』 pagetop ↑
171103 タイトルバーに画像表示
11月5日、6日追記しました。
タイトルバーに画像を表示させる方法の紹介です。
普段はFC2のマークが表示されます。
FC2ブログの場合・・・
FC2の管理画面から、テンプレートの設定を開いて、
HTML編集の、ソースの中から、
矢印の<title><%blog_name></title>を捜します。
画像をクリックで大きな画像を表示します。
<title><%blog_name></title>の下に
<link rel="shortcut icon" href="https://blog-imgs-102.fc2.com/o/n/t/onta0001/keita.jpg" />
を書き加えます。
<link rel="shortcut icon" href="https://blog-imgs-102.fc2.com/o/n/t/onta0001/keita.jpg" />
赤い部分に、表示したい画像を自分のアルバムにアップロードして、その画像のURLを書き込んで、テンプレートを更新すればOKです。(他の部分はそのままで)
更新する前には、必ず「プレビュー」で確認してください。
自分のアルバムにアップしている画像のURLは、「アルバムの管理」から、
編集をクリック。当ブログの場合アルバムは一つだけです。
「画像をアップロードする場合はこちら」をクリック。
11月6日追記
直接、「ファイルアップロード」をクリックの方が早いです。
アップロードの画面の下の方に・・・
ファイル一覧がありますので、赤い部分がURLになります。
画像の大きさは横40PX、縦46PXにしていますが、正方形(16×16)でないといけない様で、大きい画像は縮小されるとのこと、また、画像の拡張子は当ブログはJPGを使用してますが、推奨はPNG、GIFの様です。
11月5日追記
この画像はファビコンと呼ばれ、PNG.GIFで保存して、さらにファビコン用の拡張子icoに変換しないといけない様です。詳しくは下記のサイトを参照してください。
http://www.tagindex.com/hp_guide/img/favicon.html
また、ウィキペディアによると、
「ファイル名の決まりは特にない。また、ファイル形式の決まりもなく、ウェブブラウザが認識する形式であればどのような形式を用いても良い。ただし、Internet Explorerは10以下ではICO形式しか認識しない。IE11ではPNG、GIF(アニメーション非対応)に対応した。」
と、あります。
みなさんが行う場合は自己責任でお願いします。更新する前にプレビューで確認ができます。テンプレートの複製もしていてください。
ブログランキングに参加しています。応援よろしく です。
Comment(2) Trackback(0)『未分類』 pagetop ↑
171028 ホームページもSSL化。
このブログのSSL化も一段落したところで、私が事務局を務めます、「中間西校区まちづくり協議会」のホームページもSSL化に対応しました。
ブログと違って、ランキングバナー等はないので、ずいぶんと楽です。
ホームページは「さくらインターネット」のレンタルサーバーを借りていて、無料の共通SSLを使用しました。
ランキングバナーがないとは言え、またもホームページ上で公開している画像のURLが問題です。
画像のURLは「http」から始まる絶対パスでソースを書いているので、トップページ、サブページ全ての画像のソースを「http」を「https」に書き換えてOK。
次に問題になったのが「カウンター」。無料で登録不要のSSL化対応のカウンターは少なく、有るもので我慢。
SSL化が済んだところで、トップページのアドレスが、ブログでも同じことですが二つになります。
htttps://nakamanishikouku.sakura.ne.jpと、
htttp://nakamanishikouku.sakura.ne.jp
「中間西校区」で検索すると・・・
せっかくSSL化したのに検索でヒットしたのはSSL化していないトップページ・・・(今後改善されるとは思いますが)
ブログの様に、「アドレスが変わりました~」と、新しいURLへ自動リンクするようなことは、できないのでしょうか・・・
しかし、それができました。参考にさくらインターネットのサポート情報をリンクしておきます。
現に、
http://nakamanishikouku.sakura.ne.jp をクリックしてみると、
無事、SSL化したトップページが表示されます。
最後に、自分で書いたHTMLソースをチェックします。
Another HTML-lint gateway というサイトでチェックができます。
サイトへ行って・・・
下の方の「チェック方式」で、URLを記入、「チェック」をクリック。
結果は、大きなエラーもなく今のところ、「よくできました」をキープしています。
このサイトは、ホームページを制作、管理するには大変重宝します。
ブログランキングに参加しています。応援よろしく です。
Comment(0) Trackback(0)『未分類』 pagetop ↑
171024 SSL化その3
ブログが完全にSSL化できたかは、ブラウザがグーグルクロームでしたら、アドレスバーの右端にエラーのアイコンで確認ができます。
この場合二つ出ています。右側のアイコンにカソールを持って行くと、
「このページは承認されていないソースからの・・・・」と出ています。
キーボードの「F12」を押して確認します。この様な画面なり、メニューの左から2番目、 ここにエラーの内容が表示されます。
一番上をコピペして翻訳サイトで翻訳します。
すると、FC2のアクセス解析がSSL化されていないことで、エラーになっているようですので、新しくFC2アクセス解析のタグを取得します。
管理画面「マイページ」から、アクセス解析へ。
左下、設定から解析用HTMLタグをクリック。
タグをコピペして、HTMLタグを取得。
管理画面に戻って、左下、設定から「テンプレートの設定」をクリック。
対象のテンプレートの「編集」をクリック。
HTML編集から
を見つけ、新しいタグと貼り換えます。
新しいタグは、
ここで、新しいタグの中に「https」が表れませんが大丈夫です。「http」を付けた絶対パスから、付かない相対パスに変更になっただけです。
テンプレートですが、HTMLの編集を行いますので、必ずコピーをとっておいてください。
テンプレートの設定からSSL化するテンプレートの「複製」をクリック。
すると、その下に複製が登録されます。この場合だとテンプレート名の最後に、数字の「1」が 追加されたテンプレートが追加されます。
以上は、グーグルクロームでの場合です。「インターネットエクスプローラー」など他のブラウザでは、エラーのアイコンが表示されなかったり、見え方が違ったりしますのでご注意ください。
FC2のアクセス解析で説明しましたが、他にグーグル、忍者などのタグでもエラーがでるようです。
ブログランキングに参加しています。応援よろしく です。
Comment(6) Trackback(0)『未分類』 pagetop ↑
プロフィール

遠太

Author:遠太
九州は福岡県中間市で環境保全や
地域に関するボランティア活動中
できる時にできる範囲で。
そこには、ノルマも強制も義務も
ありません。

ホームページ
中間西校区まちづくり協議会ホームページ
遠賀川ボランティア清掃の会へジャンプ 遠賀川ボランティア清掃の会へジャンプ
今後の清掃予定
11月24日(金)9:00~
 中島清掃
 中島入口駐車場集合
11月26日(日)9:00~
 宮林公園清掃
12月10日(日)9:00~
 グリーンクリーンなかま
 JR中間駅集合
素材をお借りしています。素材をお借りしています
ランキング参加
FC2ランキング にほんブログ村 環境ブログ 環境ボランティアへ
にほんブログ村 家族ブログ 仲良し家族へ にほんブログ村 地域生活(街) 九州ブログ 北九州情報へ
カテゴリ
リンク

pagetop ↑