web制作の覚え書き

2016.09.26

httpアクセスをhttpsにリダイレクトする .htaccess

SSLを導入したらサイト全体をSSLにしちゃった方が何かと楽ですよね。
GoogleでもSSLサイトは評価の対象です。

HTTPS をランキングシグナルに使用します
https://webmaster-ja.googleblog.com/2014/08/https-as-ranking-signal.html

でもすでにインデックスされているページからのアクセスや名刺にURLが書いてあったりするとhttp://~からアクセスされます。

http://~でアクセスされたのを強制的にhttps://にリダイレクトするには。
.htaccessの設定で簡単にできます。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteEngine on

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

特定のページだけをSSLにしたい場合
hoge.html,hoge2.htmlだけをSSLリダイレクトしたい場合の例

RewriteEngine on
 
RewriteCond %{REQUEST_URI} .*/hoge.html$ [OR]
RewriteCond %{REQUEST_URI} .*/hoge2.html$
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
 
RewriteCond %{REQUEST_URI} !(.*/hoge.html$)
RewriteCond %{REQUEST_URI} !(.*/hoge2.html$)
RewriteCond %{HTTPS} on
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteEngine on

RewriteCond %{REQUEST_URI} .*/hoge.html$ [OR]

RewriteCond %{REQUEST_URI} .*/hoge2.html$

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_URI} !(.*/hoge.html$)

RewriteCond %{REQUEST_URI} !(.*/hoge2.html$)

RewriteCond %{HTTPS} on

RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R,L]

逆に特定のページだけを非SSLにしたい場合

RewriteEngine on

RewriteCond %{REQUEST_URI} ^/hoge.html$ [OR]
RewriteCond %{REQUEST_URI} ^/hoge2.html$
RewriteCond %{HTTPS} on
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_URI} !(^/hoge.html$)
RewriteCond %{REQUEST_URI} !(^/hoge2.html$)
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteEngine on

RewriteCond %{REQUEST_URI} ^/hoge.html$ [OR]

RewriteCond %{REQUEST_URI} ^/hoge2.html$

RewriteCond %{HTTPS} on

RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_URI} !(^/hoge.html$)

RewriteCond %{REQUEST_URI} !(^/hoge2.html$)

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

こちらのページを参考にさせていただきました。
.htaccessだけでSSL対応するには
http://www.meibinlab.jp/nishijima/archives/54

2016.09.25

Advanced Custome Fields の項目上限数

WordPressのカスタムフィールドを柔軟に追加できる高機能なプラグイン「Advanced Custom fields」
https://www.advancedcustomfields.com/

せっかく登録したのに、なぜか消えている・・・というショックな出来事が何回か続いたため調べてみました。

どうやら、php.iniの max_input_vars の設定によるもののようです。
Dos攻撃を防ぐ目的で、PHP5.3.9から導入されたもので、設定数以上の変数が送られてくるとその部分は削除されるようになっています。

そのため、Advanced Custom Fieldsである程度の数を設定すると消えてしまうということです。
Advanced Custom Fields自体に上限があるわけではなく、PHPの仕様によるのですね。

今回、XSERVERを利用していたのですが、64項目あたりでそれ以降が消えていました。

解決方法は、

max_input_varsの設定を変更する
フィールドグループを分割する

の2つの方法です。

max_input_varsはphp.iniが編集できるサーバーであれば設定変更は可能ですが、サーバーへの負荷にも関わることなので、後者のフィールドグループを分割するのがよいと思います。

2016.09.22

MAMP タイムゾーンを変更（メモ）

MAMPのタイムゾーンはデフォルトだと、Europe/Berlinとなっているので、日本に変更します。

php.iniを編集します。

場所は、

/Applications/MAMP/bin/php/php5.*/conf/php.ini

1	/Applications/MAMP/bin/php/php5.*/conf/php.ini

使用しているPHPのバージョンにより場所が違います。

552行目あたりの

date.timezone = "Europe/Berlin"

1	date.timezone = "Europe/Berlin"

を

date.timezone = "Asia/Tokyo"

1	date.timezone = "Asia/Tokyo"

に変更

MAMPを再起動して完了です

2016.08.26

CPIサーバーで301リダイレクトを設定する

CPIの共有レンタルサーバー「ACE01 2011」（ACE01 2015というプランもあります）での301リダイレクトしたい場合、.htaccessには以下のように記述します。

old.htmlからnew.htmlにリダイレクトしたい場合

Options +FollowSymLinks
RewriteEngine On
RewriteRule old.html$ new.html$1 [R=301,L]

Options +FollowSymLinks

RewriteEngine On

RewriteRule old.html$ new.html$1 [R=301,L]

または

Options +SymLinksIfOwnerMatch
RewriteEngine on
RewriteRule old.html$ new.html$1 [R=301,L]

Options +SymLinksIfOwnerMatch

RewriteEngine on

RewriteRule old.html$ new.html$1 [R=301,L]

ちなみにACE01 2015の場合は

Options +SymLinksIfOwnerMatch
RewriteEngine on
RewriteRule old.html$ new.html$1 [R=301,L]

Options +SymLinksIfOwnerMatch

RewriteEngine on

RewriteRule old.html$ new.html$1 [R=301,L]

※1行目のOptionsをしていしてないとエラーになります。
初期状態ではmod_rewriteは使えないようです。

詳細は
.htaccess の設定方法

リダイレクト設定がちゃんと動いているかどうか確認するには以下のツールが便利です。

リダイレクトチェック
http://ohotuku.jp/redirect_checker/

2016.08.10

今更学んだ「テキスト変換する前の文字が見えない」原因

お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。

フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?

原因は、CSSの設定でした。

「::selection」というセレクタで文字の色をホワイトにしていたから。

「::selection」というセレクタは変換前の文字だけでなく、テキスト選択した箇所のハイライトカラーも変更できるみたいです。

::-webkit-selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none; }

::-moz-selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none; }

::selection {
background : rgb(23,119,175);
color : rgb(250,250,250);
text-shadow : none; }

::-webkit-selection {

background : rgb(23,119,175);

color : rgb(250,250,250);

text-shadow : none; }

::-moz-selection {

background : rgb(23,119,175);

color : rgb(250,250,250);

text-shadow : none; }

::selection {

background : rgb(23,119,175);

color : rgb(250,250,250);

text-shadow : none; }

こんな感じでベンダープリフィックスを指定します。

対応するブラウザは

Google Chrome
Safari
Firefox
Opera
IE9+

設定する時は背景の色と同じ色を指定しないように気をつけましょ

2016.08.04

PDFを開くとき100％で開くようにする Adobe Acrobat

PDFを作成し、開いてみるとバカでかく開かれちゃうことありますね。

Acrobatで開き方を指定することができます。

Adobe Acrobat Pro DCの場合です。

編集するファイルを開き、ファイル>プロパティを選択。

Acrobatファイルプロパティ

開き方を選択。
レイアウトと倍率のところに、「倍率」があるのでこれを100％にする。

Acrobat文書のプロパティレイアウト

これ以外にも、ウィンドウの開き方やメニューバー、ツールバーの非表示など細かい設定ができます。

2016.07.25

Photoshop,Illustratorのスライスの一括削除

Photoshopでもillustratorでも結構スライス機能使います。

※PhotoshopCCの画像アセットって便利ですよね。
CS6では、Cut＆Slice meですね
http://www.cutandslice.me/

illustratorでも同じような機能でてこないかな

と本題
Photoshopでもillustratorでもスライスを一括で削除したいときのためのメモ

Photoshopでスライス一括削除

表示メニューから「スライスの消去」

photoshopスライス一括削除

Illustratorでスライスを一括削除

オブジェクトメニューから「スライス」→「すべて削除」

illustratorスライス一括削除

2016.07.24

WordPressインストール後にディレクトリ名を変更する

WordPressをインストールした後にディレクトリ名を変更したくなった時用のメモ。

例として
変更前URL　　ドメイン/wp/wp-login.php
変更後URL　　ドメイン/new/wp-login.php

変更前のWordpressURL（/wp/wp-login.php）でログイン
設定→一般から、WordPress アドレス (URL)とサイトアドレス (URL)を変更したいディレクトリ名に変更する
「変更を保存」するとページがNot Foundに。
これはこのまま置いておく。
ディレクトリ名を変更したい名前に変更
ここでは「wp」を「new」に変更
変更後のURLで改めてアクセスする
/new/wp-login.php
ログインすると、NotFoundのままだったりするけど、なんどがリロードしたら通常通りアクセスできるようになりました。
完了！

2016.07.20

ウェブページを見たまま印刷＆スクリーンショットの方法いくつか

ウェブページを印刷して！とか言われることってないですか？

たまにあるのです。
ノートPCやタブレットを持ち歩いて相手に見せればいいじゃんっていう話なんですが、どうしても紙にして持っていきたいということが。

そんな時にブラウザから普通に印刷しても期待通りに印刷されないことは多々あります。
印刷用に考慮されたページもありますがほんの一部ですよね。
また、印刷専用にレイアウトされていて、ブラウザでの見た目とは違ってる場合も。

ウェブページをブラウザで見えてるまま印刷したい！っていう時の方法について

１）Awesome Screenshotを使う（GoogleChromeのみ）

GoogleChromeの拡張機能「AwesomeScreenshot」をインストールします。
普通にスクリーンショットを取ります。

完了画面からプリントをクリックすると、取ったスクリーンショットをブラウザから印刷できます。

Awesomescreenshot印刷

２）Print What You Like を使う。

PrintWhatYouLikeは、ブックマークレットで利用できるツール。

http://www.printwhatyoulike.com/

Chromeなら拡張機能もあります。（私はいつもこれを使っています）
PrintWhatYouLike
https://chrome.google.com/webstore/detail/printwhatyoulike/npgfabafajliaooeicdoahbpoajfmbbe?hl=ja
印刷する内容を自由にセレクトすることができます。

印刷したいページを表示し、保存したブックマークレットをクリック。
すると、左サイドバーに操作ボタンが表示、印刷するページ上には
ツールバーが表示されます。

記事中にある広告などを印刷したくない場合は、広告を選んで
ツールバーの「Remove」をクリック

印刷内容をセレクトしたら左サイドバーの「Print」をクリック

新入社員が知っておくべきホームページを崩さず綺麗に印刷する裏ワザ
http://www.chrome-life.com/chrome/5033/

固定バーがあるページの印刷・スクリーンショット

最近のページではposition:fixed;で上部などに固定されたナビゲーションがあるウェブページは多いですよね。

でもそのようなページをスクリーンショットを撮ったり、印刷しようとすると
固定バーが何度も表示されたり、ずれたりしませんか。
これを回避する方法としてFirefox限定ですが、Firefoxのアドオン、「Pearl Crescent Page Saver」を使う。

残念ながら愛用しているAwesomeScreenshotは使えません。
Pearl Crescent Page Saverなら固定バーが繰り返さずキャプチャできるようです。
Pearl Crescent Page Saver
http://pearlcrescent.com/products/pagesaver/

2016.07.11

Open Office で2文字目も大文字に

普段、マックで作業している時に、ちょっとExcelが使いたいなんてことがあったときにはOpenOfficeを使っています。

作業するには問題なレベルなのですが、今回ちょっと戸惑ったので覚書として。
Webには関係ないですが。

アルファベットを入力するときに、なぜか2文字目が自動的に小文字になってしまうのです。

1文字目が勝手に大文字になるのは何度か遭遇したのですが、2文字目が小文字に変わってしまうのは初めて。

いつもは書式＞文字種の変換で、「大文字→小文字」「小文字→大文字」にして解決していたのですが、今回は何回やっても大文字になってくれないのです。

文字種の変換で大文字に変換

いつものように色々調べたところ、書式設定ではなく、「オートコレクト」の問題だったようです。

ツール＞オートコレクトオプションをクリック

s_オートコレクトオプション1

「2文字目を小文字する」のチェックをはずす！

2文字目を小文字にする

これで解決しました！

上記の設定には「URL識別」っていうのもあって、ここのチェックをはずすと
URLやメールアドレスに自動的にリンク貼られるのがなくなるみたいです。（なくなりました）
これも結構うっとうしかったので、よかったです^^

123 4 5 6

web制作の覚え書き

httpアクセスをhttpsにリダイレクトする .htaccess

Advanced Custome Fields の項目上限数

MAMP タイムゾーンを変更（メモ）

CPIサーバーで301リダイレクトを設定する

今更学んだ「テキスト変換する前の文字が見えない」原因

PDFを開くとき100％で開くようにする Adobe Acrobat

Photoshop,Illustratorのスライスの一括削除

Photoshopでスライス一括削除

Illustratorでスライスを一括削除

WordPressインストール後にディレクトリ名を変更する

ウェブページを見たまま印刷＆スクリーンショットの方法いくつか

１）Awesome Screenshotを使う（GoogleChromeのみ）

２）Print What You Like を使う。

固定バーがあるページの印刷・スクリーンショット

Open Office で2文字目も大文字に

最近の投稿

カテゴリー

メタ情報