未分類

SSLセキュアなページでこのページには安全でない他のリソースが含まれています。と出た場合の対処法

SSLを設定して、ページをアップしたに、このようなメッセージが表示されることが

「このページには安全でない他のリソースが含まれています。このリソースは送信中に他のユーザーから見られる可能性があります。また、悪意のあるユーザーによって改変されページの見た目が変わる可能性もあります。」

安全でないコンテンツ

SSLのページなのに、http://からはじまるセキュアでない通信を行っているもの(たいてはimgタグやjavascriptなどのリンク)があるとこのように表示されてしまいます。

折角SSLを設置したのにこれではもったいないし、見てくれたユーザーさんにも不安を与えてしまうのでちゃんと対処した方が良いですね。

でもソースを見ただけではすぐに原因がわからない場合も多いです。
そんな時にはGoogle Chromeデベロッパーツールですぐに確認できます♪

デベロッパーツールを開いた後、コンソールを選択すると以下のようにメッセージが表示されるのでhttpsでリクエストしたけどセキュアじゃない画像があるからhttpsで設定しなおした方が良いみたいなメッセージ?
ここを修正すれば解決だと思います。

安全でないコンテンツ確認

この場合はjqueryでスライドしている画像がhttp://~で設定されているのが原因でした。

ここをhttpsに設定しなおせばよいですね

そうすればGoogleさんのように鍵のマークが表示され暗号化されています。と表示されます。

google SSL

OSX Yosemite にSass,Compassのインストールとエラー対処

長年愛用してきたmacbookpro(2008 early)に別れを告げるべく、ついに新型MJLT2J/Aを購入しました。
appleサイトでは、15.4インチ 2.5GHzは、282,800円(税別) 2015年10月20日現在。
Applecare protectionを付けたら、税込35万近くなります–;

この辺に円安の影響がでてるんでしょうか。痛いですね~
これを購入しようかと思いましたが、結局秋葉原のWinkさんで購入しました。

APPLE Mac ノート
MacBook Pro Retinaディスプレイ 2500/15.4 MJLT2J/A MJLT2J/A
https://www.winkdigital.com/item/index.jsp?pid=156292&stid=1

ヤマトの3年間延長保証もつけてみました。
過去に壊れた経験があるので。
そのときはヨドバシの延長保証で10万近くのものカバーしてもらいました。
アップル製品iphone以外は延長保証は3年までしかつけられないようです。
ここは残念だけど

昨日、無事商品が届き、現在セットアップ中^^

OSの起動の速さにびっくりしてます。
多分、電源押してから、1分かかってないんじゃないかと。
今までのmacbookproも愛着がありますが、新しいモデルってスゴイですね。

で、いろいろアプリをインストールしたりしていて、sass,compassをインストールするところでちょっとつまづき。

osxには、rubyはすでにインストールされていますので
一応、updateを。

環境によってはsudoつけないとパーミッションエラーになります。

Sassをインストール

バージョン確認

 

続いて同様に

すると、

 

のようなエラーメッセージが。
調べると、Command Line Developer Toolsをインストールする必要があるみたいでした。

すでにXcodeをインストールしていたので、Xcodeを起動し
Open Developer Tool->More Developer Tools

xcode

するとAppleDeveloperサイトのDownloads for Apple Developerページが開くので(要AppleIDログイン)
Command Line Toolsをインストール

command line toolインストール

スクリーンショット 2015-10-21 7.13.30

 

こちらのサイトを参考にさせていただきました

http://koukitips.net/mac_terminal_sass_compass/

MavericksでCommand Line Tools for Xcodeをインストールする
http://qiita.com/3yatsu/items/47470091277d46f3fde2

robots.txtとクロール最適化 まとめ

robots.txtの役割

クローラーにインデックスしてほしくないページやディレクトリを知らせるためのもの。サイトマップ(sitemap.xml)を知らせる

クローラーがアクセスしてきた時に最初にrobots.txtを探し、見つかれば
その記述に設定されているそうです。(※例外もあり)

記述方法

1)制限したいクローラーを記述

すべてのクローラーが対象

Googlebotが対象

2)制限対象のディレクトリ又はファイル名

Disallow: ファイルorディレクトリ

backupというディレクトリを指定

wp-adminディレクトリ

.phpファイルを拒否

特に制限しない場合

3)サイトマップのURL

sitemap.xmlのURLを1行あけて記述

サンプル

User-Agent: *
Disallow: /

http://example.com/sitemap.xml

robots.txtの注意事項

いくつかのサイトにも記載されていましたが、

robots.txtは全てのWebクローラーに対して厳密に動作するわけではありません。

robots.txtに強制力はなく、お願いする程度の効果しか無いということ。

また、robots.txtはだれでもURLを直接たたけば閲覧可能なので、見られたく無いディレクトリが一目瞭然になります。
なので、プログラムの管理ページや個人情報を管理しているフォルダなどにはユーザー認証、SSL暗号化などの対策が必須です。

 

参考サイト

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

PHPエラー ereg_replaceをpreg_replaceに

phpはよく分かってないノンプログラマーです。
それでもちょっと新着情報を管理するPHPをちょっとカスタマイズしたくなって挑戦したら、以下のようなエラー?が

Deprecated: Function ereg_replace() is deprecated in XXXX on line 67

原因はこの部分。

早速ググってみたところ、PHP5.3以降ではereg_replaceは非推奨の関数だからそうです。

ereg_replace() の代替できる関数は preg_replace()のようなので以下のように変更。

preg_replace()にしてみたら、今度は違うエラーが。

Warning: preg_replace(): Unknown modifier ‘+’ in XXXX on line 67

/ のを\/に変えるのと、一番最初と最後に\を追加

これでエラーは表示されなくなりました。
よかった^^

こちら参考にさせていただきました。ありがとうございます。

七ヶ国語できるITエンジニアを目指す
ereg_replaceをpreg_replaceに書き換えた

wordpress カテゴリー別の記事一覧を表示する

トップページの新着記事とか、サイドバーとか、いろんなところで使うことが多いです。しかしながら、全く覚えられないのでまた忘れてしまった時に彷徨わないようメモ。

■特定のカテゴリーの記事一覧を表示

カテゴリーID 5の記事を10件表示する

 

 

get_postsで

[解決済み] [閉] 特定のカテゴリーの記事一覧を表示したい。 (6 件の投稿)
http://ja.forums.wordpress.org/topic/154?replies=6

あらかじめ表示させたいカテゴリが決まっている場合はこれでOKですね。
でも、今後増えるカテゴリーについても自動で表示させたい場合は、ちょっとこれだと難しいです。

■カテゴリ毎の記事一覧を表示

カテゴリが増えても表示させる

こちらを参考にさせていただきました

 

カテゴリ毎の記事一覧を表示する方法[WordPress]
http://kotori-blog.com/wordpress/category_list/

[解決済み] [閉] カテゴリごとの記事の一覧をトップページに羅列したい (5 件の投稿)
https://ja.forums.wordpress.org/topic/3160

いつも迷うfont familyの指定。CSS font familyフォント指定の基礎知識

新たにホームページを制作するときに毎回悩むfont family の指定。
自分の理解が足りていないのが原因なのですが。
改めて調べてみてまとめます。

font familyの記述方法

※フォントファミリ名にスペース、全角を含むフォントファミリは、「’」か「”」で囲む。
例えば、Times New Roman,Luchida Grandeなどは、

Airal,Verdanaなどは

 日本語フォントの場合、日本語と英語(アルファベット)を併記するのはなぜ?

今まで特に気にせず使っていたのですが(バカ)、ヒラギノ角ゴなど日本語フォントをfont-family に指定するとき、日本語と英語で両方記載するのはなぜなのか?

firefoxの古いバージョンでは日本語でフォントファミリを指定すると解釈されないためだそうです。現在のモダンブラウザであれば英語表記だけで問題ないようです。

遊書体(ゴシック、明朝)について

Windows8.1やOSX Mervericks から標準フォントとしてインストールされている。読みやすくてきれいなフォントなので、インストールされているPC用に指定してもよいかも。

メイリオ、ヒラギノ角ゴなどの記述の優先順位は?

Windows,OSXそれぞれ環境によって、インストールされているフォントは変わってきますが、
OS Xで、メイリオ、MS Pゴシックが表示されてしまう場合
-> Office for Macをインストールしている場合

Windowsでヒラギノ角ゴが表示されてしまう場合
-> 主にクリエイティブ系の方々の場合

どちらがにしたらよいか、メイリオの可読性を考えると前者のほうがよろしいのではという意見とMacまでメイリオに侵食されたくないような意見も
どちらにしたらいいかは、状況によって判断。(苦しいな)

※MS Pゴシックは特に指定しなくとも、最終的には表示されるのであえて指定する必要がないと意見も。納得。

スマートフォン、タブレット環境でのフォント指定。

iOSにはヒラギノ書体が使えます。
Androidは、Roboto(Android4以降)、Droid Sansを指定できます。

Mac,Windows両方に標準でインストールされているフォントは?

ゴシック:
Arial,Arial Black, Comic Sans MS,Courier,Courier New,Impact,Trebuchet MS,Verdana
明朝体:
Georgia,Times New Roman

windowでもOSXでも同じ表示ウェブサイトを表示させてたい場合は、上記フォントが
オススメですね。(欧文に限る^^;)
最新OSだけを考慮するなら遊書体の指定も

IEでのHelveticaバグ

Helveticaを先頭に記述しているとIE9,IE10で表示されないバグというのがあるとのこと。

解決方法は、Helveticaを先頭にしないことだそうです。

Helveticaを使いたいときは要注意ですね。

 

参考にさせていただいたとともに、勉強になりましたサイトさま

font-familyについてのお勉強 – フォント指定のベストプラクティスを追及
http://a-messenger-from-sunday.com/article/studying_font-family/

CSSでのフォント指定について考える(2014年)
http://www.dtp-transit.jp/misc/web/post_1881.html

CSSのfont-family指定に関する考察 2014年版
http://www.6666666.jp/design/20140428/

CSSで半角英数字+日本語のフォントを設定する方法
http://fridayeight.jp/2012/07/17/1111/

とほほのwww入門 フォントの一覧
http://www.tohoho-web.com/how2/fontfamily.htm

 

使いやすいと思われるフォント指定

ゴシック体

明朝体

 

 

クロスブラウザ(IE8以下でも)opacity,RGBaに対応する

IE8以下では透明の要素(opacity,rgba)には対応していませんが、
IE8以下でも対応させるには

 

例えば背景だけを透過させてテキストは透過させたくない場合は、opacityではなくRGBaを設定します。

GradientType

グラデーションの方向を指定
0は縦方向、1は横方向のグラデーションになります。

StartColorStr

グラデーションの開始の色を指定。
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

EndColorStr

グラデーションの終わりの色を指定
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

 

参考サイト

RGBa Browser Support
http://css-tricks.com/rgba-browser-support/

IE8とIE9できれいに透過を適応させるCSS
http://news.ko-zu.com/bgiecss/

Google AJAX APIを使ってjqueryを読み込む

jqueryを読み込むのに、わざわざjqueryのサイトから最新ファイルをダウンロードしなくても、
Google AJAX Libraries API などを使えばカンタンです。

今はGoogle Developerにjquery だけでなくjquery ui , MooTools , prototypeなどもあります。

https://developers.google.com/speed/libraries/?hl=ja

1.x系の最新バージョンを自動的に読み込むには