css サイドバー左右を簡単に切り替える

ブログなどの2ペインレイアウトで、サイドバーを左右どちらに配置するかをcssで簡単に切り替える。

事例:実際の要素は [サイドバー] → [コンテンツ] の順に読み込まれる。また、サイドバーは [300px] コンテンツ部分は可変、サイドバーとコンテンツ部分の間には [40px] の余白を設定する。

<div id="side">
   .
   .
   .
</div>

<div id="content">
   .
   .
   .
</div>

左サイドバーの場合

left.gif

#side {
	float: left;
	margin-left: 0; /* 左サイドバー */
	width: 300px;
}
#content {
	float: left;
	margin-left: 40px; /* 左サイドバー */
	width: calc(100% - 340px);
}

右サイドバーの場合

right.gif

#side {
	float: left;
	margin-left: calc(100% - 300px); /* 右サイドバー */
	width: 300px;
}
#content {
	float: left;
	margin-left: -100%; /* 右サイドバー */
	width: calc(100% - 340px);
}

もし、実際の要素が [コンテンツ] → [サイドバー] の順に読み込まれる場合は、上記のcssを逆に考えればよい。

なお、要素の読み込み順番は、待ち合わせ処理 (例えばSNSなどの外部サイトへのアクセス) が長い方が後になるようにしたほうがよいだろう。

admin
カテゴリ:資料
タグ:CSS
2017/09/09 19:37 | Comment(0)

css レスポンシブアドセンスを横並び 幅が小さくなったら縦並びに

レスポンシブ対応のレイアウトを採用して、記事下にレスポンシブアドセンスを横並びに設置し、更に記事下の幅が小さくなったら縦並びにする。これを実現するためのcssを考えてみた。

例: ↓ は、記事下の幅が [924px] の場合。

2017-09-07_14h29_01.jpg

2017-09-07_14h47_01.jpg

<!-- アドセンス PC記事下 レスポンシブ -->

<div style="clear:both;overflow:hidden;">

<div style="float:left;margin-right:24px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 左 or 上 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

<div style="float:left;margin-right:0px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 右 or 下 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

</div>
  • 左右のアドセンスの間には [24px] の余白を持たせる。
  • 左右のアドセンスの幅は [(記事下の幅 100% - 24px) / 2] で横に2つ並べる。
  • 但し、アドセンスの幅が [336px] 未満にならないように制限する。これは [300px x 600px] など縦長のアドセンスにならないようにするため。
  • 記事下の幅が [336px + 24px + 336px] 未満になれば、アドセンスは縦に2つ並ぶことになる。

cssで決定された幅に最適なアドセンスが表示される。もっとも、小さなアドセンスが表示されることもある。その都度、アドセンス側で”効果”を重要視しているからである。

例えば [450px] [336px] が並ぶこともある。ただ、この場合でも Google Publisher Toolbar - Chrome 拡張機能 でアドセンスサイズを確認すれば [450px] [450px] が並んでいることが分かる。

つまり、いっぱいに表示されることもあれば、その枠内で小さく表示されることもあると云うワケだ。

因みに [336px] 固定にしたければ・・・

2017-09-07_16h57_18.jpg

<!-- アドセンス PC記事下 レスポンシブ -->

<div style="clear:both;overflow:hidden;">

<div style="float:left;margin-right:24px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">
<div style="width:336px;margin:0 auto;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 左 or 上 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</div>

<div style="float:left;margin-right:0px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">
<div style="width:336px;margin:0 auto;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 右 or 下 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</div>

</div>

↑ このようにすればよい。アドセンス枠の左右のマージンは、均等にすると見栄えがよくなる。

admin
カテゴリ:資料
2017/09/07 14:55 | Comment(0)

SNS サーバーを置いている国一覧

SNSを運用しているサーバーがどこの国にあるか?調べてみた。調査に利用したツールは・・・

サーバー情報を表示するChrome拡張機能「Yet another flags」: Jkun Blog

である。当然ながら、日本からアクセスした場合の国と云うことになる。

2017-07-21_17h25_26.jpg

  • Twitter:アメリカ サンフランシスコ
  • Facebook:アイルランド
  • Google+:アメリカ マウンテンビュー
  • Instagram:アメリカ メンローパーク
  • LINE:日本 東京
  • Linkedin:アイルランド
  • GREE:日本 東京
  • Beluga:日本 大阪
  • Tumblr:イギリス
  • Lang-8:アメリカ アッシュバーン

ざっとこんな感じである。

admin
カテゴリ:資料
2017/07/21 17:51 | Comment(0)

レノボノートパソコン「ACアダプタコード」リコールに該当していた!?

購入して今年の7月で5年になる「lenovo IdeaPad Z575 129996J」であるが、何気なく 価格.com - Lenovo IdeaPad Z575 129996J スペック・仕様 を見てみると・・・

「本製品の一部製品におきまして、ACアダプタへの差込みプラグの過熱により、発煙、発火、発熱によるやけどの可能性が判明いたしました。」

とある。

002.jpg

これはまずい!既に2年以上も経過している。早速、調べてみると・・・Lenovo サポート で詳細にアナウンスされている。

”ACアダプタ側プラグの刻印番号”、”部品番号(P/N)” も該当するではないか!恐る恐る”ラベルのコード”を確認してみると・・・該当していなかった!

筆者は、AC電源コードは常時接続しているが、特に発熱関係で異常を感じたことはない。ただ、関係リコールを見落としていたことは、少しばかりの反省材料ではある。

admin
カテゴリ:資料
2017/04/09 07:54 | Comment(4)

スッキリくっきりトレンドなフォント「Rounded M+」

先般、スッキリくっきりトレンドなフォント「Kazesawa」と「Source Code Pro」: Jkun Blog と云う記事を書いたが、2つのフォントで対応するのも少しばかりの抵抗があり、やはり1つのフォントで視認性を確保できないか探してみた。実は、「Kazesawa」は数字の”0”と英字の”O”との明確な判別が難しい状況にあった。このような状況を回避するために、探し当てたフォントが・・・

自家製 Rounded M+ とは | 自家製フォント工房

である。

「m」系のフォントを使用すれば、数字の”0”と英字の”O”との明確な判別が可能となる。

2017-03-22_15h08_28.png

↑ Windows 10 環境下での Chrome で当ブログを表示、拡張機能で表示フォントを「Rounded M+ 1m」に変更した事例である。 (Linux 環境下であればもっと劇的にきれいに表示される。)

とりあえず、Windows 10 のシステムフォントとしても利用することに、当面は不都合がないか様子を見る。

※更に進化した、Rounded Mgen+ (ラウンデッド ムゲンプラス) | 自家製フォント工房 もお見逃しなく。

admin
カテゴリ:資料
2017/03/22 15:17 | Comment(0)

スッキリくっきりトレンドなフォント「Kazesawa」と「Source Code Pro」

Windowsのフォントは汚い!と云うのは誰しも思うところである。少しでも、綺麗なフォントはないだろうか?と探しまわるユーザーも多いと推察する。

筆者は最近になって、スッキリくっきりトレンドなフォント「Kazesawa」と「Source Code Pro」を導入している。日本語フォントは、「Kazesawa」。コード表記用、所謂半角英数字は、「Source Code Pro」である。

↓ Linux Mint - Cinnamon 環境下の Chrome での当ブログの表示である。表示フォントは、「Source Code Pro」→「Kazesawa」と優先されるように拡張機能で設定してある。
[ ↓ クリックで原寸表示 ↓ ]

001.png

↓ Windows 10 環境下の Chrome での当ブログの表示はこちら。
[ ↓ クリックで原寸表示 ↓ ]

2017-03-20_06h27_58.png

やはり視認性に優れていることが伺える。Windows環境だと、線がほっそりして効果は少なからず薄れるが、それでも何もしないよりは、かなり綺麗に表示される。このへんはユーザーの好みかもしれない。

フォントのインストールに関しては、Ubuntu系Linuxディストリビューションであれば、SolydX に「Miguフォント」をインストール: Jkun Blog が参考になる。Windowsであれば、Windows 10 に「Noto Sans CJK」をインストールしてきれいな文字で・・・: Jkun Blog が参考になる。

フォントに関しては、これまで様々な記事を書いている (フォント: Jkun Blog) ので、参考になればと・・・。

admin
カテゴリ:資料
2017/03/19 09:22 | Comment(0)

無線ルーター「TL-WR841N」のログインパスワードを忘れてしまった場合の対処方法

300Mbps 無線LANルーター - TP-Link (TL-WR841N) 管理画面のログインパスワードを忘れてしまった場合の対処方法は以下のとおり。なお、ユーザー側で変更していない場合は、ユーザー名とパスワードは、両方とも「admin」である。

4733.bmp

まず、工場出荷時の状態に戻す。これにより、ユーザー名とパスワードは、両方とも「admin」に戻る。

  • ルーター本体とパソコン、或いはタブレット/スマホ、と 有線 or 無線 で接続しておく。
  • ルーター本体の電源が入っている状態で、背面パネルの「WPS/リセット」ボタンを約8秒間押し続ける。
  • 次にブラウザから「http://tplinkwifi.net/」を開いて、 [システムツール] → [規定の設定] → [復元] → ローディング進捗バーが完了するまで待つ。
  • これで工場出荷時の状態に戻り、ユーザー名とパスワードは、両方とも「admin」になる。
  • お忘れになった方はお試しください。

admin
カテゴリ:資料
2016/09/23 11:18 | Comment(0)

SEIYUドットコムでカード決済した場合の利用日について

ネットショップでカード決済した場合の、明細書に記載される利用日については、各ショップ様々である。注文確定日・キャンセル不可になった日・商品出荷日・商品到着日・商品到着日の翌日、と云うように。

screenshot-www.the-seiyu.com 2016-04-27 16-21-27.png

今回、「SEIYUドットコムでカード決済した場合の利用日」に関して、問い合わせフォームから質問してみた。回答は以下 (抜粋) のとおり。

SEIYUドットコムをクレジットカード決済にてご利用頂いた場合の、
カード明細へのご利用日記載につきましてですが、
【ネットスーパー】のお届けの場合は、お届け日となり、
【SEIYU倉庫館】の場合は、商品の出荷日にて記載がなされます。

商品の出荷時に出荷完了メールが送られてくるので、それで確認できると云うことになる。通常は、到着日の前日が出荷日となるはずである。

追記:指定到着日に関係なく、注文翌日には出荷された。

admin
カテゴリ:資料
2016/04/27 16:42 | Comment(0)

個体識別番号(契約者固有ID)の表示方法

携帯電話の個体識別番号 (契約者固有ID) の表示方法に関する覚書。

電話画面で [*#06#] (全角表示: *#06#) と5文字入力すると確認できる。

↓ Androidスマホで実際に表示させてみた。

Screenshot_2016-03-07-14-23-09.png

確認したからと云って何かあるワケではないが・・・。

admin
カテゴリ:資料
2016/03/07 14:40 | Comment(0)

「クロスオリジンリソースの共有ポリシーによってブロックされています」を回避する

Webフォントをサーバーに設置してみたが、フォントを認識しない現象に遭遇した。

試行錯誤を繰り返すも、原因を探らねば・・・と云うことで、Chromeの右クリック [検証] → [Console] でエラーがないか?調べてみた。すると、以下のエラーが発生していることを確認する。

Font from origin 'http://jkunblog.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.jkunblog.com' is therefore not allowed access.

↓ 機械翻訳すると・・・

原点からのフォントは「 http://jkunblog.com 「クロスオリジンリソースの共有ポリシーによって、読み込みからブロックされています:いいえ「アクセスが- Controlキーを許可 - オリジン'ヘッダが要求されたリソース上に存在します。 原点は「 http://s.jkunblog.com 「そのためのアクセスが許可されていません。

つまり、[http://s.jkunblog.com] から [http://jkunblog.com] にあるWebフォントへのアクセスはブロックされている・・・と云うことらしい。

これを回避するためには、[http://jkunblog.com] のフォントがアップロードされているディレクトリに、以下の内容の「.htaccess」ファイルを設定すればよい。

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://s.jkunblog.com"
  </IfModule>
</FilesMatch>

これで、アクセスが許可される。

admin
カテゴリ:資料
2016/01/27 19:57 | Comment(0)