CodePenをサイトに埋め込んだ時、画像が表示されない件について。

be-careful-with-codepen
be-careful-with-codepen

技術系のブログ書いている方(特にフロント側とか)は結構 CodePen を使ってらっしゃる方が多いと思うのですが、CodePen いじってる最中に少しめんどくさいことが起きたので備忘録として書こうと思います。

ファイル名に気をつけて

この記事を書いているときに、画像を表示させたくて CodePen を触っていたら codepen のサイトでは問題なく表示されているのに、いざ記事に埋め込んだら表示されない。アラート文読んでみたらクロスドメインが〜って出るから「当たり前だろそんなのiframeなんだから」と思いつつ原因を探してたら、どうやら画像ファイルの名前が問題だったみたいです。画像ファイル名に数字が含まれていると、埋め込んだ際にファイル名から数字がなくなった状態で表示されてしまうようです。例えば、

  • sushi01
  • 21sushi

とか。

なので、ファイル名には数字を入れないようにしましょう。屁理屈っぽいですが(そんなことありません!)、じゃあハイフンで区切って数字…!とかもダメでしたので、とにかく画像ファイル名に数字はダメらしいです。CodePen だけなのかな〜このバグ。それとも僕だけなのかな。

PC、スマホ、タブレット。各デバイスに合ったスタイルシートをCSSファイル1つで指定させたい時のメモ。

media-queries-css
media-queries-css

PCからスマートフォン、タブレット端末まで各デバイスに合ったスタイルシートをCSSファイル一枚で対応させたい時は Media Queries を使いましょう。こんな感じで指定してあげてください。それではどうぞ〜。

/* style */ にスタイルシートを記入してね。

スマートフォン

縦横

@media (max-width: 767px) {
	/* style */
}

縦向きのみ

@media (max-width: 320px) and (orientation: portrait) {
	/* style */
}

横向きのみ

@media (min-width: 321px) and (orientation: landscape) {
	/* style */
}

タブレット

縦横

@media (min-width: 768px) and (max-width: 1199px) {
	/* style */
}

縦向きのみ

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
	/* style */
}

横向きのみ

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
	/* style */
}

PC

@media (min-width: 1200px) {
	/* style */
}

スマホ以外全て対応

@media (min-width: 768px) {
	/* style */
}

IEでもMedia Queries使いたい!

実はIEではMedia Queries使えないんです。でも、javascriptが全て解決してくれます。

css3-mediaqueries-js

コレをこんな感じでhead内に書いておけば、IEでもMedia Queries使えるようになるので、是非試してみてください〜。

<!--[if lt IE 9]--> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<!--[endif]-->

おまけ

よく見かける @media only screen and (min-width: ~px) の「only screen and」は無くても機能します。少しでも文字数を削りたい!って方は是非削ってあげてください。

参考にしました

iPhone/iPad/iPad mini用メディアクエリ一覧

css3-mediaqueries-js

CakePHPをさくらインターネットで動かすと「500 Internal Server Error」が発生する件について

how-to-work-cakephp-on-sakura-internet
how-to-work-cakephp-on-sakura-internet

レンタルサーバーをさくらインターネットで契約して、CakePHPをダウンロードして、解凍して、サーバーにアップロードして、さあ始めるぞと意気込んでいたら「500 Internal Server Error」が返ってきました。とても悲しい。そこで次のように解決したのでメモ。

.htaccessファイルに「RewriteBase」を追記する

参考にしました、ありがとうございます。

[CakePHP] さくら で「500 Internal Server Error」

ドメイン設定でマルチドメインの設定でCakePHPを動かそうとすると「500 Internal Server Error」が返ってきてしまうみたいです。そこで、CakePHPの中にある三つの.htaccessファイルに「RewriteBase」を追記。

今回例に出すバージョンは2.4.10ですので多少内容が異なる部分もあるかもしれません…

home/(アカウント名)/www/hoge/.htaccess

&lt;IfModule mod_rewrite.c&gt;
   RewriteEngine on
   RewriteBase /
   RewriteRule    ^$ app/webroot/    [L]
   RewriteRule    (.*) app/webroot/$1 [L]
&lt;/IfModule&gt;

home/(アカウント名)/www/hoge/app/.htaccess

&lt;IfModule mod_rewrite.c&gt;
    RewriteEngine on
    RewriteBase /app
    RewriteRule    ^$    webroot/    [L]
    RewriteRule    (.*) webroot/$1    [L]
&lt;/IfModule&gt;

home/(アカウント名)/www/hoge/app/webroot/.htaccess

&lt;IfModule mod_rewrite.c&gt;
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
&lt;/IfModule&gt;

国外IPアドレスフィルタを無効に設定

国内にいらっしゃる方はRewriteBaseの追記のみで動くと思うのですが、国外にいらっしゃる方はこれも注意しないといけません。さくらインターネットでは海外からの不正なアクセスを防ぐために国外IPアドレスからの特定のアクセスを制限しているみたいです。詳しい設定方法は公式のサポートページでご確認の上、国外IPアドレスフィルタを有効から無効に設定してください。

おまけ

だいたいこれで動くと思うのですが、これでもダメであればパーミッション(=ファイルやディレクトリのアクセス権限)の設定を間違えているかもしれませんので確認しておきましょう。FTPソフト(僕はCyberduckを使っています)などを用いて、ディレクトリのパーミッションを755(もしくは705)に設定してください。

参考にしました

[CakePHP] さくら で「500 Internal Server Error」

結構簡単。CSSを使って、スマホでも埋め込み動画をはみ出すことなく綺麗に表示させる方法。

responsive-embed

埋め込み動画をレスポンシブ対応させようって話です。埋め込み動画を編集中もしくは閲覧している際に

  • pcでの表示は問題ないのにスマホだと右にはみ出てるし、画面をスクロールする度に左右に動いたりしてウザい
  • もしくは左右には動かないけど再生ボタンが画面の右端で切れていて再生できなくてウザい

こんな経験あると思います。せっかく見ようと思ったのに表示が崩れていると見る気失せちゃいますし、ただ貼付けるだけでは親切ではないです。CSS数行とちょっとした工夫で解決できますので、ご覧ください!

とは言っても簡単に…

iframe {
	width: 100%;
}

で解決なのでは。って記事もいくつか見かけましたが、これだと不完全なのでこんな感じで対応しましょう。

html

&lt;div class=&quot;movie&quot;&gt;
  &lt;iframe width=&quot;720&quot; height=&quot;405&quot; src=&quot;//www.youtube.com/embed/ppDibM77B9U&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;

css

.movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

こんな感じで表示されます。

See the Pen wsHIb by Shoya Jinda (@sjinda) on CodePen.

ポイントはiframeをdiv class=”movie”で括ることです。movieは例なので任意のclass名で構いません。

対応は画像だけで充分!

という方は

img {
	width: 100%;
}

で解決できます。
こんな感じで表示されます。

See the Pen Ffiaq by Shoya Jinda (@sjinda) on CodePen.


寿司美味そう…美味い寿司食いたい。