wpの不正アクセスをブロックする

WpのCrazy Boneのプラグインをインストールしていれば、
いだれがログインアクセスしたのかを判別することが可能です。

ログイン履歴をチェックすると、時々、
不正アクセスの履歴が残っていたりすることがあります。

主な不正アクセスはロシアやアメリカ、ウクライナなどが多くあります。

不正アクセスを発見した場合、
特定のIPアドレスをブロックできる「WP-Ban」というプラグインを入れるとよいでしょう。

使い方は簡単で、特定のIPアドレスなどの場合は、
プラグインをWordPressにインストールして、ブロックしたいIPアドレスを入力するだけです。

同じ国で、複数のIPアドレスから攻撃を受けている場合,
設定のBanned Host Namesに
中国ならcn
ロシアならrnと入力して登録すればOKです。

日本のサイトなど海外からの閲覧など特にないような場合などは、国ごと登録してしまうのも一つの手かもしれません。

不正ログインをされないようにWPのログインIDやパスワードなど簡単なものにしないように気を付けていきたいですね。

CSSで円を波打たせる

CSSのアニメーションを使って、うねうね動く円を作成することができます。
滅多に使用することはないとは思いますが、独特な雰囲気のサイトややわらかい雰囲気のサイトなどに使用できるのではないでしょうか。

作り方は、border-radiusをキーフレームを使用して動かしてくだけです。

SVGやJQueryを使用するほうが、より細かく設定が可能ですが、調整が難しい場合が多いので、CSSで実現可能なところはkeyframeアニメーションを使用するほうがよいでしょう

WordPressインストール後のディレクトリ変更

WordPressをインストールした後、
サイトのURLの変更や、インストール先ディレクトリ変更を行いたいという場合が、時々あるかもしれません。

WordPressでは後からディレクトリの変更やURLの変更が可能です、

ドメイン直下にインストールしてしまった場合、WordPress以外のファイルでサーバー内のファイル構成が乱雑になりがちです。
WordPressではWpやSystemなどの名前のサブディレクトリを作成して、インストールし、TOPページのみドメイン直下に配置する構成が好ましいでしょう。

●WordPressをサブディレクトリへ移動
■手順■
1,WordPressの格納場所、サブディレクトリを作成します。
xxx.com/public_html(ルートディレクトリ)/system

2,ダッシュボードの設定画面で、「WordPressのアドレス(URL)」をサブディレクトリに合わせる
3,WordPressファイルを、先ほど作成した、サブディレクトリに移動
4,index.phpと.htaccessファイルをコピーし、index.phpを修正する

5,パーマリンク設定の更新をします。

●WordPressのサイトURLとインストール先ディレクトリ変更

インストール先ディレクトリとサイトURLを変更します。

「http://example.com/wp」にインストールしたけれども、「http://example.com/system」にしたい場合などです。

WordPressの設定ページで、「WordPressのアドレス(URL)」と「サイトのアドレス(URL)」を両方とも、
新しいアドレスに変更する(http://xxx.com/wp -> http://xxx.com/system)
変更後ログアウトし、サーバー上のディレクトリ名を変更します(wp > system)
再度ログインしてパーマリンク設定を更新すれば完了です。

@mixin

Sassの@mixinという機能を活用すれば、今まで面倒くさかった記述も、効率的にコーディングが可能です。

@mixin に任意で名前を指定してスタイルを指定することでひとまとまりの定義とすることができます。

使用するときには、@includeで呼び出します。

また変数を使って

変数$sizeに格納されたpxの値がwidthとheightに適用されます。

上記を活用して、指定の多いポジションの指定などを@mixinを使用すると

位置の指定が@include position(10px, 50px, 50px, 0);の一行だけで済むので、メンテナンス性や作業効率にもつながります。

インスタグラム APIの機能の提供終了

2018年の4月にInstagramのAPIの機能が一部廃止されており、
2020年までに、すべての機能が停止する予定だということです。

Instagram APIの代わりに
Instagram Graph APIを使用を推奨されていますが、
ビジネスアカウント専用のAPIのため、
Facebookの認証を受けたビジネス用アカウントでしか使用できず、一般ユーザー向けには提供されていません。

インスタグラムは個人利用だけでなく、
ショッピングサイトでも商品画像の紹介でも多く利用されており、
多くの企業にとっても必要なものとなっています。

投稿画像の閲覧数から人気商品を分析など、Instagram APIを利用したツールを利用していたので、
Instagram Graph APIを利用したものに移行するなど対策が必要になってきています。

IE8,9にFlexboxを対応させる

Flexboxは様々なレイアウトを、従来の方法よりずっと簡単に実装できる優れたプロパティです。
最近ではfloatではなくFlexboxを使ってレイアウトを組んでいる人も多いのではないでしょうか。

そんな便利なFlexboxですが、IE8や9に対応していないため、古いブラウザーをサポートした案件では使用することができません。
flexboxを使用すれば簡単なレイアウトでも諦めるしかない、なんて場面もあるかもしれません。

ですが、旧式のブラウザーでもFlexboxを使用する方法があります。

flexibility.js

上記からダウンロードし、flexibility.jsを読み込ませるだけです。

CSSには適応させたいクラスに対して、ベンダープレフィックスのようにプロパティの前に-js-と追記するだけでOKです。

古いブラウザーに対応させるためのスクリプトは大変便利です。
後は、動作確認と読み込み速度など気を付けて使用していきたいですね。

XAMPPで指定したディレクトリをサーバールートにする

XAMPPのローカルホストのパスは,
XAMPPを設定を変更せずにインストールした場合、

C:\xampp\htdocsがサーバールートとして設定されていますが、
それ以外の場所を指定したい場合の設定方法です。

■設定用のファイル
C:\xampp\apache\conf\extra\httpd-vhosts.conf
上記のファイルにアクセスして

その中に記述してある
##NameVirtualHost *:80
のコメントアウトの##を削除して、


DocumentRoot “C:\Users\user\Documents\index”
ServerName localhost_documents

例)C:\Users\user\Documents\index

設定したい場所を指定します。(例ではドキュメントのindexフォルダー)
ServerNameには任意のドメイン名を設定します。

記述が完了したら
アクセス権限を付与するため
下記を記述します。


Options Indexes
AllowOverride All
Require all granted

最後に
C:\Windows\System32\Drivers\etcの中にある
hostsファイルを開いて、設定したドメイン名を追記します。

127.0.0.1 localhost_documents

font-size: 62.5%;

スマートフォンやタブレットなどのレスポンシブ対応でユーザーの端末に合わせて相対的にフォントサイズを変更する必要があります。
{font-size: 62.5%;}です。

font-sizeのサイズ指定には、pxやem、%があります。
デザイン的な特例がない限り、読ませるためのテキストは基準となるfont-sizeに対してこれらの単位で指定することになります。

ブラウザのfont-sizeのデ基準値は16pxサイズです。
基準値16pxの62.5%、となるのでhtmlのフォントサイズが10pxとなります。

フォントサイズを10pxとすることで18px= 1.8remと計算が楽になります。
フォントサイズをremで指定するのは親要素のフォントサイズに影響されることなく、サイズを変更することができます。

また、クライアントからもう少しサイトの文字サイズをあげてほしいといった要望があったとき、
htmlのフォントサイズを62.5%の数値を大きくすることでサイト全体のフォントサイズを相対的に上げることができ、
大幅な修正をすることがなくなるためです。

ユーザーのサイト閲覧の幅が広がった現在では、pxや%を指定するよりも便利な指定方法ではないでしょうか

navタグ

navタグはグローバルナビゲーションなどによく使われています。

利用される場所は、
アンカーリンクやハンバーガーメニュ-など、ヘッダーやサイドバーなど、
フロー・コンテンツとされるような場所です。

リンクであるからといって、すべて

コピーライトの年号の自動更新

フッターに記載するコピーライトには年号が含まれていることが多いかと思います。

コピーライト(発行年) 著作権名で記載されているかと思います、
更新年度が毎年更新されている会社であると、サイトがきちんと管理されている印象を受けます。

やはり古い状態のままよりも更新年度を記載したほうが良いでしょう。
ですが、サイトの管理に慣れていない方や、静的なサイトでいちいち更新するのが面倒くさいといった方もいるでしょう。

そんな場合にコピーライトの年号の自動で更新する方法があります。

javaScriptの場合は

を記述するだけで自動更新してくれます。
JavaScriptの場合、年号はユーザーのパソコンの時間設定に依存して取得されてしまうため注意が必要です。

WordPressのサイトの場合は、footer.phpに以下の記述をすればOKです。

PHPの場合、サーバーサイドの時間設定に依存するので、ユーザー側の時間設定を気にする必要はありません。