こんにちは。Webディレクターのひよっこです。
先日からコーダーさんに依頼している業務があり、やり取りをさせていただいているのですが、
EC-CUBEだとこの仕様ができないなど多々あるので、その度に頭を悩ませてしまいます。
しかしコーダーさんは色々な提案をしてくださるので、やっぱりすごいなぁと感じました。
そういう知識も養っていくべきだなと思ったこの頃です…。
カテゴリー: プログラミング
メールアドレス暗号化ツール
こんにちは。Webディレクターのひよっこです。
先日下記サイトを教えていただきました。
https://www.luft.co.jp/cgi/coding.php
このサイトはメールアドレスを自動的に暗号化してくれるという、すごく便利なツールです！
暗号化することで、Web上に公開しているメールアドレスを保護してくれます。
こういった便利サイトは、見つけたらブックマークに入れておくと少しずつ業務がスムーズになりますね！
ページ内リンクの書き方
こんにちは。海より川派なWebディレクターのひよっこです。
今回はページ内リンクの書き方についてざっくり説明します。
まず「ここにジャンプしたい！」というタグにidを指定します。
次に<a href=”#id名”>の形でリンクを作ります。
これだけでジャンプボタンの完成です！リンクをクリックすれば、指定したidタグの位置までジャンプします。
id=”～”を指定してジャンプ先にするのはどのタグでも問題ありません。見出しタグでもpタグでもdivタグでもOKです！
詳しくは下記URLを参考にしてみてください～。
https://saruwakakun.com/html-css/reference/link_jump
（）の半角全角
こんにちは。Webディレクターのひよっこです。
今日は（）の半角全角についてです。
文言の修正をした後は必ず校正が必要ですが、思わず見逃してしまいがちなのが、（）が半角か全角かという点です。
テストサイトと本サイトを細かくカチカチ見比べると気づくんですが、普通に見ていると見逃してしまいます。
あくまで、変更前のサイトの書式に合わせる必要があるので見落とさないように気を付けたいです。
リンク
こんにちは。Webディレクターのひよっこです。
今日はリンクについてです。
リンクタグのa要素にtarget=””を追加すると、リンク先をどのウィンドウで開くかを選択できます。
一番よく使うのは_blankです。新規のウィンドウに表示させることができるため、元々のページと見比べたりできるためいちいちbackボタンを押したりといった手間の必要がなく便利ですよね。
たまに_blankつけなければいけない場面で忘れてしまうことがあるので個人的に注意です…
印刷ページ
こんにちは。Webディレクターのひよっこです。
今日は印刷ページについてです。
サイトのページを印刷しようとすると、左上あたりにページ名が表示されますよね。
あの文言を変えたい場合、どこを触ればいいのか今日しりました。
この部分とタブに表示されるページ名は共通しているため、印刷ページのページ名を変えたいなら、タブのページ名を変更すればいいとのことです。
今まで意識していなかったので言われて初めて、そういやどこだ…？となったのでしれてよかったです。
コメントアウト
こんにちは。Webディレクターのひよっこです。
今日はコメントアウトについてです。
HTMLの表記において、特定の部分を非表示にするコメントアウトですが、コメントアウトが含まれている箇所をさらにコメントアウトしようとするとうまく表示されないことがあります。
そんな時はstyleタグのコメントアウトを利用するのがいいんだそうです。
<style>/*
<div>
<!– コメント子供 –>
<p>コメントアウトした段落</p>
</div>
*/</style>
悩みが一つ解決しました！
キャッシュ
こんにちは。Webディレクターのひよっこです。
今日はキャッシュについてです。
サイトの更新をしたものの、なぜかそれが反映されないという個人的に結構修羅場に見舞われていました。
ctrl+F5でキャッシュクリアしても反映されない！やばい！と思っていたところ、もう一つキャッシュクリアの方法があったことを思い出しました。
F12でデベロッパーツールを開き、その状態で更新ボタンの上で右クリック。「キャッシュの消去とハードの再読み込み」という項目をクリックすると直りました！
ctrl+F5が効かなくても、こちらも試してみることをまなびました。
チェックのコツ
こんにちは。Webディレクターのひよっこです。
今日はチェックのコツについてです。
サイトの修正をしていただいた後はテストサイトと本サイトに不備がないかチェックを行う必要があります。
ただ、2画面表示しつつだと、たまに見逃してしまうこともあります…。
そこで今日教えて頂いたのが、タブを二つ開いて交互に切り替えて画面にぶれがあるかどうかで相違の有無を判断する方法です。
どちらか一方すこしでも文字が違っていたら、不自然に切り替わってるのが分かります。
このやり方めちゃくちゃ便利で今日試しながら感動しました。
これで少しでもチェック漏れを防ぎたいと思います！
先祖返り
こんにちは。Webディレクターのひよっこです。
今日は先祖返りについてです。
仕事をしている中で耳にする「先祖返り」なんとなく意味は分かるものの、具体的な事について知らないため調べました。
先祖返りとはサイト内の情報がいつのまにか以前の状態に戻ってしまっていることを指します。
例として、テキストや写真が昔のものに戻っていたり、修正したバグや不具合が再び発生するなどが挙げられます。
原因の多くが人為的なミスによるもので、旧ファイルで修正を行ってしまったり、最新ファイルがどれかわからないなどが挙げられるそうです。
ファイル名が統一されていないと最新のものがどれか分からなくなってしまうため、ファイル名に規則性を持たせることが大切です。
画像サイズの変更
こんにちは。WEBディレクターのひよっこです。
今日は画像サイズの変更についてです。
HTML上で画像のサイズを変更する際は、<img src=“画像パス” width=“数値” height=“数値”>のwidthとheightの数値を変更するのが正解です。
ただ、HTMLだけでなくCSSでも画像サイズを変更することができます。
むしろ、デザインなどの処理はHTMLファイルから切り離しておくべきという考え方があることからCSSの方に記述するのが一般的なんだとか。
HTMLで設定されたclass先にあるwidthとheightの数値を変更することで、画像サイズを変更できます。
HTMLにもCSSにもサイズの記述するのか？となんとなくもやもやしていたので少しだけ理解できました。
実機確認
こんにちは。Webディレクターのひよっこです。
今日は実機確認についてです。
PCでSP画面を確認する際はデベロッパーツールを活用すれば、簡単にチェックすることができます。
ただ、一時的にCSSが反映されているかなーと確認する程度にはいいのですが、やはり、実機での確認は必須になります。
PCで見たときには崩れていなかったような箇所が、実機で見たら全然崩れていることも稀にあるみたいです。
今までは、PCでチェックだけしてOK！と判断していたのですが、今後はきちんと実機でも確認せねば！と思いました。
CMS
こんにちは。WEBディレクターのひよっこです。
今日はCMSについてです。
よく耳にするCMS。お恥ずかしながら、意味をよく理解していませんでした…。
CMSとは「Contents Management System：コンテンツ・マネジメント・システム」の略でWebサイト内のテキストや画像、デザインレイアウトなどを一元的に管理するシステムのことをいうそうです。
つまり、Wordpressですよね。CMSの種類の一つがWordpressということが理解できていませんでした。反省です。
ちなみに、CMSのメリットとして他にはマルチデバイスへの対応が簡単であったり、サイト運用の分業がしやすいといったものがあるそうです。
ドラッグアンドドロップ
こんにちは。Webディレクターのひよっこです。
今日はWordpressのドラッグアンドドロップについてです。
WordPressには様々なプラグイン機能がありますが、「Intuitive Custom Post Order」というプラグインは組み込めば簡単にブログやお知らせなどの記事の順番を入れ替えることができます。
初めてこんな機能を入れることができるとしったのですが、便利ですよね。
カテゴリーを後から追加したりする際、順番を簡単にきれいに並び変えることができますから、私みたいな初心者でも簡単に編集できて便利でした。
画像の使い分け
こんにちは。WEBディレクターのひよっこです。
今日は画像の使い分けについてです。
画像ファイルの拡張子にはjpegやpngなどがありますが、それぞれにメリット・デメリットがあり、拡張子によって使い分けるのが望ましいようです。
jpegは色数が多い画像をきれいに表示することができる一方、編集、保存を行うたびに劣化してしまうため、何度も編集が必要な場合には不向きなんだそうです。
pngは色数を制限することができるため、色数の少ない画像を保存する際に適している一方、古いブラウザでは表示されない可能性があるんだそうです。
jpegとpng、何が違うのか知らなかったので、しれてよかったです！
パララックス効果
こんにちは。WEBディレクターのひよっこです。
今日はパララックス効果についてです。
社内のチャットを確認していると「パララックス効果」という言葉を見かけました。
「心理学にありそうな名前だなー」とか思いながら、全然想像がつかなかったので調べてみることに。
パララックスとは視差効果のことだそうです。じゃあ、視差効果って何かというと、立体感や奥行を演出することなんだそうです。
スクロールなどの動作に応じて、いくつかのレイヤーにある要素を異なるスピードで動かすことでそういった効果がうまれるんだそうです。
専門的なコードとか組み方とかはよくわからないのですが、こういう表現方法もあるのかと知れました。
再読み込み
こんにちは。WEBディレクターのひよっこです。
今日は再読み込みについてです。
はじめて知ったのですが、chromeの再読み込みには三種類あるのだとか。
1つめは一般的なF5キーで行える再読み込み。
2つ目は以前書いたキャッシュを削除したうえでの再読み込み。ctrl+F5でできます。
そして3つ目はキャッシュの削除とさらに、ハードの再読み込みもしてくれるものだそうです。
やり方はF12でデベロッパーツールを開き、ツールバーの再読み込みボタンの上で右クリック。
表示されるツールバーの中にある「このページを再読み込みします」ボタンをクリックするのだそうです。
サイトが崩れておかしい時はひとまず、このやり方を試してみます。
補完機能
こんいちは。WEBディレクターのひよっこです。
今日はHTMLエディタの補完機能についてです。
そもそも、HTMLエディタとは、Dream weaverのようなHTMLの編集に特化したテキストエディタのことだそうです。
HTMLを記述する際、開始タグと閉じたぐの両方を記述しなくてはいけません。ただ、すこしめんどくさいですし、閉じタグを書き忘れた、なんてミスを防ぐことができるのが自動補完機能です。
例えばpタグを入力する際には、<p></p>と記入しなくても、pを入力した後、tabキーを押すと、閉じタグまで自動で入力してくれるんです。
ついつい閉じタグを忘れてしまう私のような素人にはありがたい機能です。
メールアドレス暗号化
こんにちは。Webディレクターのひよっこです。
今日はメールアドレス暗号化についてです。
企業・団体のWebサイトにメールアドレスを掲載するリスクとして挙げられるのが、スパムメールです。
スパムメールを送付するような業者がメールアドレスを収集するために使っているのが、自動巡回プログラムだそうで、ネット上を巡回しメールアドレスを収集しているそうです。
このような、システムに収集されづらくするための方法が、メールアドレス暗号化です。巡回プログラムが認識しづらい形式に暗号化することで、スパムメールが送られてくる可能性を低くすることができます。
ファビコン
こんにちは。Webディレクターのひよっこです。
横文字の言葉にめっぽう弱いせいか、言葉から何か想像すらできず、検索を繰り返しております。その中で今日知った単語が「ファビコン」です。
ファビコン（favicon）とはフェイバリット・アイコン（favorite aicon）を縮約したものだそうで、ブラウザでWebページを開いたときに、アドレスバーやタブの左側に表示されるアイコンの事だそうです。
ちなみにファビコンの拡張子は「.ico」のため、pngなどで画像を作成してから変更する必要があるみたいです。
あの小さい画像を設置するのがこういう方法でできるとは知らなかったので、勉強になりました。