俺流!バラとラン栽培

バラとランと WordPress に魅せられて!

タグ: IE 11

Internet Explorer 11 のお気に入りをバックアップ

20150321_IE11私個人、通常は「Internet Explorer 11」を利用してネットを彷徨っています。その他にも Google Chrome や FireFox も利用はしていますが、やっぱり使い慣れた「Internet Explorer」が最も使用頻度が多い。

会社で支給されている PC のブラウザも「Internet Explorer」ってのも関係していると思いますが。

本ブログを開始して、いろいろと記録に残していますが、投稿記事にして記録できないような内容は、「Internet Explorer」に「お気に入り」として保存しているのですが、そろそろその量が多くなってきたので、どこかにバックアップしておきたい、と考えるようになってきました。

完全に自分用の備忘録ですが、以下にその手順を引用しておきます。

お気に入りは数か月ごとにバックアップすることをお勧めします。また、新しいバージョンの Internet Explorer をダウンロードする前にもバックアップをお勧めします。バックアップ コピーを使って、お気に入りを別のブラウザーにエクスポートすることもできます。

お気に入りをバックアップするには;

  1. タスク バーの [Internet Explorer] アイコンをクリックして、Internet Explorer を開きます。
  2. [お気に入り] ボタン [☆] をクリックします。
  3. [お気に入りに追加] の横にある下矢印をクリックし、[インポートとエクスポート] をクリックします。
  4. [ファイルにエクスポートする] をクリックし、[次へ] をクリックします。
  5. エクスポートする項目として [お気に入り] (および必要に応じてその他の設定) をオンにして、[次へ] をクリックします。
  6. [参照] をクリックし、お気に入りをエクスポートする先のファイルまたはドライブを選んで、ブックマーク ファイルの名前を入力します。完了したら、[保存] をクリックします。たとえば、[参照] をクリックし、”ドキュメント” を選んで、「bookmarks」というファイル名を入力します。この場合、”ドキュメント” フォルダーにブックマークが保存されます。
  7. [エクスポート] をクリックし、[完了] をクリックします。

出典:「お気に入りを使って Web サイトを保存する – Windows ヘルプ」より

この手法を用いることで、Google Chrome や FireFox へ「お気に入り」をインポートすることもできるようになりました!ただ、同期はできないようですので、細目にバックアップをしておく必要がありそうです。

【問題解決】アイコンフォント、Genericons が IE 11 で表示されない!

どうしてでしょう・・・本ブログで採用されている(もともとは、テーマ「Frontier」で採用しています)アイコンフォント(Genericons)が「Internet Explorer 11」で表示されなくなりました!本ブログでは、「Frontier」をベースにした「子テーマ」を設定しています。

解決策!?

一旦、WorsPress からログアウトして、「Internet Explorer 11」を閉じます。その後、通常に「Internet Explorer 11」を起ち上げてページを確認すると、全く問題なく表示されました!何か原因だったのかは不明ですが、取り急ぎ、下記の問題は解消されました。

「子テーマ」では、全くの標準的な style.css と functions.php の 2 つのファイルで運用していて、特別な変更や修正をしていないのですが・・・ちょっと問題点を詳細に確認すると・・・

Google Chrome で本ブログを表示した場合
20150306_Problem_Web Font1

上の画像の「赤丸」を付けた「下矢印」が表示されるのが本来の狙ったデザインなのですが・・・どうやらアイコンフォント(Genericons)が適用されているようです。Chrome や FireFox では全く問題なく表示されますが・・・

しかし・・・

Internet Explorer 11 で本サイトを表示した場合
20150306_Problem_Web Font2

上の写真のように「下矢印」が表示されません。何を変更したわけでもなく、いつから表示されなくなったのかも記憶がありません。気が付かなければ、気にならなかったのかもしれませんが。「Internet Explorer 11」の設定をいろいろと確認しましたが、間違っていないように感じられます。

そこで、style.css や functions.php に不都合があるのではと考えて、オリジナルのテーマ「Frontier」のサイトを確認してみると、あら不思議!下の画像のように、きちっとメニューには「下矢印」が表示されている!

Internet Explorer 11 で「Frontier」のサイトを表示した場合
20150306_Problem_Web Font3

何が原因なのでしょう・・・まだまだ試行錯誤が続く・・・

Internet Explorer 11、table (表)でシャドウを表示する方法

通常、私個人ではネットを徘徊するためには「Internet Explorer」と「Google Chrome」を利用しています。まかりなりにもブログを運営していて、更にはスタイルシートを改良しているわけですから、人気のブラウザでの閲覧は当たり前かな、なんて生意気に。

本ブログでは、表と引用を多用していますので、少なくとも表と引用句、即ち、HTML の「table タグ」と「blockquate タグ」には、いろいろと目立たせるための装飾を施したいと考えています。

まずは、シャドウでも付けて簡単に・・・と思ったのですが、「Internet Explorer 11」で確認してみるとシャドウが登場しない!ところが「Google Chrome」では綺麗に登場しているシャドウが!どうして?

解決策が見つかったので、下記に示しておきます。

PAK86_codeing_700x200

先ずは、オリジナルのテーマ「Frontier」にある table タグに関する CSS ファイルを確認しました。なんてことはない、単純でシンプル。このスタイルを「子テーマ」にある style.css に変更を加えれば良い。

単純に表にシャドウを出したいだけなので、「box-shadow」を以下のように追加(5 行目)しました。オリジナルだと小さな表も投稿記事いっぱいに広がってしまうので、「width: 98%;」を「width: auto;」へも変更しました(2 行目)。他の部分はそのまま。

上記だけで、「Google Chrome」では表にシャドウが登場してくれます。なかなか良い感じなんて自己満足して、「Internet Explorer 11」で確認してみると・・・あれっ、シャドウが見えない!最初は、「Internet Explorer 11」の設定が悪いのでは、と考えていろいろと確認しましたが、スタイルに関する設定なんてあったかな~ってふっと気が付いて・・・

そこで見つけたのが「IE9でドロップシャドウ(box-shadow)が効かない | ダリの雑記:WEBプログラム版」という投稿記事。どうやら table に border-collapse の設定に左右されるようです。ちょっと引用しておきます。

table のスタイルを「border-collapse:collapse;」にしているとダメみたい。その部分の table のみスタイルを「border-collapse: separate;」とし、解決しました。
出典:「IE9でドロップシャドウ(box-shadow)が効かない | ダリの雑記:WEBプログラム版」

そこで、上記に従って「border-collapse: separate;」に変更すると見事にシャドウが登場してくれました。しかし・・・今度は、表の全ての線で変な隙間が登場して、ちょっとうるさい!更にネットを調べると、「CSS3 – IE9でtableをbox-shadowで装飾する – Qiita」という投稿記事を発見!

そこで、リンク先に説明されているように「border-collapse: separate; border-spacing: 0;」と変更しました(下記、3 行目)。結局は、下記のような CSS コードへ修正しました!

上記で見事解決しました!「Internet Explorer 11」でも表にしっかりとシャドウが登場してくれました!嬉しいですね~問題解決の喜びを感じつつも「基本が解ってないな~」と反省もしかり。

「俺流!バラとラン栽培」Copyright © 2015-2016 by Zero Cool. All rights researved. Frontier Theme