OZ's Tips

webデザインに四苦八苦する初心者の奮闘記(の予定)

3月25日 研修二十七日目

お恥ずかしい

ブログの更新のことを忘れてました

最後にやらかした orz

 

スマホ対応していないサイトは4/21からグーグルで順位が下がるという記事をみました(公式発表)

web-tan.forum.impressrd.jp

レスポンシブルデザインについては、研修期間中にブートストラップでサイトを構築しましたが、これからはこれが主流になりそう?

スマートフォンタブレットと様々な端末でサイズが異なるので
レスポンシブルデザイン対応が一番現実的なのかなと

せっかく取得したURLもきちんと活かしたいですしね
スマホ用にまたサイト作ったらURLが分散してもったいなさそうなイメージがあります(実際どうなんだろう?)

また、同記事で「タイトルタグを意識してつける」「フッターの不自然なリンク(制作会社等)の危険性」などの記載がありました

ユーザーによりよい閲覧環境になりつつあるのは喜ばしいですね

 

その分、作り手側、情報発信元はさらに構造をしっかりと構築してよりよいデザインにする必要がありますががが

3月19日 研修十五日目

Contact Form 7のフォーム

プラグインをインストール

プラグインを有効にした後に、固定ページを追加すると【お問い合わせフォーム】の文字が

クリックすると、そのままフォームのタグが挿入されました

 

お問い合わせフォームの作成、10分で終了

すごい

 

このフォームをベースにして、いろいろカスタムができると

 

共有SSLをどう使うか

Contact Form 7を使って、フォームの作成

WordPress HTTPSプラグインを利用し(未インストール)SSL対応とする

 

お問い合わせフォームをSSL対応させるのは結構一般的な流れらしい

ただし、共有SSLについての脆弱性については様々な意見を拝見しました

 

なるほどと思ったのが、下記のサイトの記事(2012年の記事で少し昔の記事ですが)

www.imamura.biz

 

何のためにSSLを設置するのか、何のためにお問い合わせフォームを設置するのか

また、問い合わせフォームに入力する情報は何かということを考えて設置しなければと思いました

 

表示設定の謎

ワードプレスをいじってる際に、【表示設定】なるものを発見

そこにフロントページと投稿ページについての項目あり

同じように疑問に思った方がいたので、メモ

wp.8jimeyo.info

 

固定ページとブログページだけじゃなくてそれぞれカテゴライズされるっぽい?

プラグインmemo

WP Multibyte Patch

日本語版WPにデフォルトでインストールされているプラグイン

機能としては下記の通り

  • 検索の全角スペースを半角スペースと同じように認識させている
  • メールの文字列の最適化
  • ピンバック、トラックバックの最適化
  • マルチバイト文字が含まれるファイル名のアップロードに対応させる
  • 投稿画面の文字数カウントを正常化

WEBマーケティングなるもの

現在訓練校に通っていて、現在就職活動中

希望は、またEC関連の職業につきたい

 

そのためにはWEBでのマーケットについてもっと自分で触らなきゃなあと思ってちょこちょこネットの記事をあさってます

 

インプレスさんのこのサイトをブクマしてます

web-tan.forum.impressrd.jp

 

本当はアナリティクス触って生のデータを分析したほうが楽しいんだろうけど、いじれるサイトがここくらいしかないのでデータ取得にも四苦八苦

なにか検証のためにサイト作ろうかなと思いました

 

ちなみにこの記事が面白かった

web-tan.forum.impressrd.jp

 

3月18日 研修十四日目

SSLとは、【Secure Sockets Layer】のこと

インターネット上で通信を暗号化する技術。

通信の傍受を防ぐための手段。 入力したデータを『暗号化』して通信するため、「クレジットカードの番号」や「住所・電話番号」などの個人情報を安全に受信元へ届けることができる

また、SSLは実在性認証も行っているので、架空ショップや悪意あるサイトの判断ができる (※実在性認証は企業認証SSL・EV SSLで提供される)

確認の仕方はURLに表示される鍵マークをクリックすれば認証情報が確認できる(サーバー証明書

共有SSLと独自SSL

共有SSLとは、共有で使うSSL
レンタルサーバー会社で取得代行したSSLサーバー証明書複数のユーザで使う


通信の暗号化としては、独自SSLと何も変わらないが、
レンタルサーバー会社が取得したものなので、サーバー会社のドメインの「SSLサーバー証明書」となる

仮にECサイトで、商品を見ている場合は用意した独自ドメイン「http//○○○.com」だけど、

個人情報やクレジットカードの情報を打ち込む購入ページでは、「https//□□□-△△△.○○○.jp」と
レンタルサーバーで取得したドメインとなる

例)
エックスサーバー「https//ドメイン名.ssl-xserver.jp/」
ファイヤーバードでは「https//独自ドメイン.ssl-netowl.jp/sample/index.cgi
さくらサーバー「https//secureユーザID.sakura.ne.jp/独自ドメイン


SSLとしては暗号化される、安全なページになるが、
ユーザーからみるとドメインが変わるのは不親切
フィッシング詐欺と、誤解を招く事も?)


共有SSLは、更新手続きも必要なし、コストもかからないが、
上記の理由にから信頼性と安心感を与えるSSLが、デメリットになる場合もある


ECサイトや、重要な個人情報を扱うwebサイトでは、
独自SSLを使うのが多く、ほとんどが独自ドメインSSL証明書になる傾向に

ワードプレスでのお問い合わせフォーム


ワードプレスのお問い合わせフォームは「Contact From 7」で設置できる
プラグインをインストールすると管理画面の操作だけで
ドロップダウンメニューや添付ファイルのデザインなど、様々なカスタマイズが可能

できること

  • スパムメール防止
  • 透かし文字表示
  • 確認画面の表示
  • 郵便番号入力からの自動入力(Ajaxzip3が必要、ちなみにワードプレスの中にjQueryが入ってる)
  • その他諸々

今日はここまで

ワードプレスSSLが適用できるってことはワードプレスでカート機能も付けられるのかな?

実際に明日プラグインいれて、問い合わせフォームを作って確認したいと思います

3月17日 研修十三日目

昨日に引き続き、ワードプレスの設定

想像していたよりもいろんなことができるので、ちょっと楽しくなってきました

 

jetpackプラグインもいれて、CSS編集ができるようになりました

webnonotes.com

 

また、固定ページ・ブログページを構成やダッシュボードを色々いじっていたのですが、画像アップロード時に4つほどフォームがあり、「?」となりました

 

訓練校の授業では「altを入れるように」とは教えてもらったのですが、「どれがalt?」状態

 

blog.serverkurabe.com

 

上記ページをみて、確認

 

  • タイトル:img属性のtitle要素。画像の補助説明を書く。ツールチップに表示。
  • 代替テキスト:img属性のalt要素。画像が表示されないとき用のテキストを設定。
  • キャプション:WordPress独自の項目。画像の直後に画像の説明文を表示。
  • 説明:HTMLには書き出されない。管理画面で画像を探すときに使える

どうやら、タイトルと代替えテキスト(alt)の入力が必須で、残り二つは適時って感じなんですね

 

 

ちなみに、ユーザー登録の種類について

  • 管理者:WordPress の全ての操作が可能。
  • 編集者:コメントやリンクの管理などコンテンツに関する全ての操作が可能。
  • 投稿者:記事の投稿や編集、公開が可能。
  • 寄稿者:記事の下書きと編集のみ可能。
  • 購読者:閲覧のみ可能。会員制サイトを作りたい時などに使う可能性がある。

前職でワードプレスいじってたけど、自分はどうやら「寄稿者」の分類だと判明しました(公開するのは違う部署の方だった)

覚えておきたいWordPressのユーザー権限の種類と登録・管理方法

3月16日 研修十二日目

企業研修も折り返し地点

半分も頑張っていきます!

 

ECサイトの構築がほぼひと段落したので、他チームのお手伝い

ワードプレスは少し触ったことがあるけど、ほぼブログの投稿だったので、イチから設定。

 

いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方

いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方

 

 

ほぼ一か月ぶりにXAMMP触りました・・・

三月十三日 研修10日目

体調不良でダウンしておりました…

健康管理も仕事のうちなので情けない限り

寝れないってことはないのですが、いろんな事象に対して焦りがあるかも?

一つ一つのことについて、きちんと対応できるよう精進しなければ

 

ECサイトのTOPページは無事完了!

(Nくんがフォルダを整理して納品してくれるとのこと)

 

次の依頼があったFAQページの作成

bootstrapを使った簡単?なHTMLページの作成

 

header部のテキストの位置をいじるのにどのクラスで設定するか確認してました

classに「text-center」を設定するだけでいいんですね…

用意されたCSSを使ってページを作る、フレームワークの醍醐味?ですが、ようやく楽しさを実感しました


BootStrapに標準装備されてるのについつい再実装しがちな機能とかまとめ。 - NOT SO BAD