memo

WEBデザイン勉強中。勉強したことを忘れない様、メモ書きしてます。

URL正規化まとめ

ずっとwordpressの構築ばっかりしてたのですが、久しぶりにhtmlでサイトを制作し、.htaccessを自分で記述しなくちゃいけない場面があったので、自分用にメモ。

トップページのURLにindex.htmlがつかない方法

http:XXXXX.jp/index.html→このindex.htmlをつかないようにする

.htaccess」で下記の指定をする。

RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://www.example.jp/$1 [R=301,L]


下層ページのURLに拡張子htmlがつかない方法

http:XXXXX.jp/about.html→このhtmlをつかないようにする

.htaccess」で下記の指定をする。

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html


http→httpsにリダイレクト

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

wwwありなしの設定

*wwwありに統一

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^seopack\.jp$
RewriteRule ^(.*)$ http://www.seopack.jp/$1 [R=301,L]

* wwwなしに統一

Options +FollowSymLinks
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.seopack\.jp$
RewriteRule ^(.*)$ http://seopack.jp/$1 [R=301,L]

ストレンジャー・シングス面白かった!

ずーっと気になっていたストレンジャー・シングスを観ました!
そのためにNetflix契約しちゃいましたよー。契約しちゃうと休日は一日中、観続けることになりそうで、ずっと避けてきたのですが、ついに。
でもでも!やっぱりストレンジャー・シングスすごく面白いです!終始ハラハラしながらも続きが気になって、気がついたらあっという間にシーズン1観終わってました。シーズン1が8話しかないのも手出しやすくて良いですね。海外ドラマって結構話数が多いので、気合い入れないと観れないですし。途中で中弛みすることもなくすごく気持ちよく見れたドラマでした。

ストレンジャー・シングス 未知の世界』とは

2016年にNetflixで配信されたアメリカのSFホラードラマ。舞台は80年代のアメリカ、インディアナ州の田舎町ホーキンス。80年代が舞台だけあって、この年代の作品のオマージュがたくさん出てきます。「E.T.」「グーニーズ」「スタンド・バイ・ミー」などなど。この辺もちゃんと意識してもう一回観返したいですね。
このドラマはアメリカで大ヒットし、シーズン2は配信開始されて24時間以内に全9話を一気観した人が36万人もいたとか。そんなにも多くの方が狂ったように観るドラマ、気になりますよね。

あらすじ

友人マイクの家で遊んだ帰り道に、ウィルが突然行方不明に。警察、ウィルの母親ジョイス、友人のマイク・ダスティン・ルーカスがそれぞれ懸命に捜索するが、これといった手がかりが見つからない。そんな中、マイクたちは不思議な少女イレブンと出逢う。彼女は超能力が使えることができ、ウィルの居場所を知ってそうで、、、

感想

評価が高いだけあって、1話目からがっつり引き込まれました。すごい面白かったです!最初「ホラー」ってあるから「怖いのかな。。」と思って、ちょっとビビってたんですが、ホラー苦手でも観ることができる怖さでした。ストーリーも面白いし、キャストもいいので、観ていてずっと引き込まれっぱなし。

最初から謎の現象が起きるんですよ。「なにこれ、何が起きてるの?」「この子何者?」みたいな。気になるし、張り巡らされてた伏線が絶妙なペースでどんどん繋がっていき、謎が解けていくので、ずっと見逃せない。私、家で観る映画やドラマは、ながら観しちゃうこと多いんですが、がっつり画面と向き合って観続けてました。

あとキャストも魅力的な人たちばかりなんです。子どもたちの演技もすごいし、可愛いし。ウィルのお母さんジョイスも緊迫感すごい伝わるし狂ってる感じと正気の狭間をうまいこと演じてるのすごすぎますし。警察署長のホッパーもめっちゃいい仕事していくんですよ。結構謎解きにも貢献していたり、この人も闇を抱えてる感じで魅力的ですし。

とにかくおもしろいんですよー!あんまり言うとネタバレしちゃいそうで、控えますが観て損ないです。80年代の世界観だけでも魅力的!おすすめのドラマです。

【Illustrator】アピアランスで袋文字

①文字を入力

テキストツールで文字を入力

f:id:asatsuya:20180827162619p:plain

線と塗りをなしにする

f:id:asatsuya:20180827162726p:plain

アピアランスで線と塗を指定する

ウィンドウ→アピアランスを出す。

f:id:asatsuya:20180827163040p:plain

左下のアイコン押下、新規アピアランスを追加。

f:id:asatsuya:20180827163353p:plain

塗りを好きな色に変更

f:id:asatsuya:20180827163450p:plain

塗りを線の上に持ってくる

f:id:asatsuya:20180827163528p:plain

線の太さを変更。
「線」をクリックして角の形状をラウンド結合にすると角が丸くなる。

f:id:asatsuya:20180827163711p:plain

③完成!

f:id:asatsuya:20180827164206p:plain

おまけ

さらに浮き出るようにする場合は「線」項目をクリックした状態で
効果→パスの変形→変形

f:id:asatsuya:20180827163836p:plain

水平方向、垂直方向でプレビューしながら調整する

f:id:asatsuya:20180827163936p:plain

f:id:asatsuya:20180827164240p:plain

修正可能な線路の作り方【アピアランス】

①黒い線を作る

ペンツールで線をひく

f:id:asatsuya:20180824132441p:plain

ウインドウ→アピアランスを出し、線の太さを変更する。

f:id:asatsuya:20180824133059p:plain

線:太さを変更する。
塗り:なしにする。

f:id:asatsuya:20180824133228p:plain

②白の破線部分を作る。

左下の四角のアイコンを押下して新規線を追加。

f:id:asatsuya:20180824134109p:plain

上に線が重なった状態になるので、横の黒い線を出すために、先程作った線よりも小さい線にする。

f:id:asatsuya:20180824134344p:plain

「線」の文字部分をクリックして「破線」にチェック。線分、間隔を調整する。

f:id:asatsuya:20180824134519p:plain

③完成!

f:id:asatsuya:20180824134852p:plain

この方法で作成していると追加やカーブの線がしやすくなる。

f:id:asatsuya:20180824135008p:plain

追加でペンツールを使うときは、追加したい線の先端からペンツールでクリックして追加する。

 

 

 

簡単にストライプ素材を作成する「Stripe Generator(ストライプジェネレーター)」

photoshopで作成しようとすると結構大変なシームレスなストライプ画像がさくっとつくれちゃう「Stripe Generator」。

web上でさくっと作成して簡単に素材をダウンロードできて、とても便利。

また色や太さやストライプの向きも選択できるので、自分の好きなストライプを作成することができます。

 

www.stripegenerator.com

 

Stripe Generatorの使い方

f:id:asatsuya:20180823153952p:plain

左側の設定項目でストライプの幅や色を設定する

  • stripe size
    ストライプの幅
  • spacing
    余白の幅
  • stripe color(s)
    ストライプの色。[add color]で色を追加でき、[remove]で追加した色を削除できます。
  • background style
    背景のスタイル。グラデーションにもできる。
  • shadow
    シャドウ
  • background color(s)
    背景色。グラデーションの場合は2色選択できる。
  • stripe orientation
    ストライプの角度。

f:id:asatsuya:20180823155810p:plain

右のプレビューに矢印のアイコンが出るので、クリックするとデザインが反映されます。

ダウンロード

f:id:asatsuya:20180823155724p:plain

wordpressでファビコンを設定する方法

備忘録用に記述。

そもそもファビコンとは

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。

Favicon - Wikipedia

f:id:asatsuya:20180821163131p:plain

ブラウザのタブなどに表示されるアイコンのこと。

wordpressはファビコンの設定が簡単にできます。

wordpressでのファビコンの設定の仕方

①画像を用意。

wordpressでは512×512pxの画像を推奨してますが、私はそこまで大きくない100pxくらいの正方形の画像を用意しています。

wordpressの管理画面から「外観」→「カスタマイズ」設定画面を表示。

f:id:asatsuya:20180822144843p:plain

3.カスタマイズメニューの「サイト基本情報」をクリック。

f:id:asatsuya:20180822144902p:plain

 

4.サイトアイコンの「画像を選択」か「画像の変更」ボタンをクリックして、ロゴのファイルをアップロード。右上の青の「保存して公開」ボタンを押下。

f:id:asatsuya:20180822144917p:plain

f:id:asatsuya:20180822144956p:plain

今回はロゴではなく、テスト用に普通の画像を上げてます。

【Dreamweaver】画像関連のタグ

∇【基本の画像配置】img

Dreamweaverで画像配置する前にサイトの管理で登録したファイルの中に画像の入っているファイルを貼り付ける。Dreamweaverファイルパネルで画像ファイルを確認してから、コードを入力していく。

<img src="画像が入ってるファイルの名前 /画像の名前.gif" />

 

∇【幅、高さ】width、height

<img src="画像が入ってるファイルの名前 /画像の名前.gif"  width="166" height="48" />

読み込むための枠を作ってあげる。画像の高さ、幅を指定していると画像の読み込みがスムーズになる。

 

∇【代替】alt

<img src="画像が入ってるファイルの名前 /画像の名前.gif"  width="166" height="48" alt="画像の名前" />

画像が読み込めなかった時の代わりのテキストを入力。alt属性の値は画像が何かを設定するのではなく、画像の中の言葉を設定する。この画像がこのWebページにどうゆう役割をもっているかによってalt属性の値は変わってくる。代わりの情報がなくても値がないalt属性を書く。

 

∇【タイトル】title

<img src="画像が入ってるファイルの名前 /画像の名前.gif"  width="166" height="48" alt="画像の名前 "title="画像の名前" />

画像にタイトル属性を設定することが出来る。ブラウザ上で表示し、画像をマウスオーバーした時に画像の名前のチップがでてくる。