第三十四回「Public Post Preview を使って公開前ページを共有する」

「Public Post Preview」の設定方法。

1.「Public Post Preview」をプラグインからダウンロードします。
bandicam 2016-05-30 20-41-03-437

2.投稿ページより、「Enable public preview」のアイコンが新たに作成されているので、チェックを押します。

3.すぐ下に、URLが吐き出されるので共有して終わりです。
bandicam 2016-05-30 20-48-10-760

★完成★

作成中の非公開ページを共有したいときに使いましょう!

<参考サイト>

Public Post Preview – 公開前の記事を他者に見せることができるWordPressプラグイン

第三十三回「Crazy Boneプラグインでログイン履歴を表示」

Crazy Boneとは、WordPressサイトにログインした場合の履歴を管理できるプラグインです。
導入するだけで作動してくれるプラグインとなりますので、ぜひ導入しましょう。

「Crazy Bone」の設定方法。

1.「Crazy Bone」をプラグインからダウンロードします。
bandicam 2016-05-25 20-29-33-007

2.ユーザーの中の「ログイン履歴」から詳細が確認できます。
bandicam 2016-05-25 20-31-43-447

★完成★

ログイン履歴を管理して、不正アクセスや乗っ取りを行っている人がいないかしっかり履歴をとりましょう。

PCサイトをスマホで見たときに文字サイズが変わらないようにする。

PCサイトしか対応していないサイトをスマートフォンで見たとき
縦で見た時と横にした時で文字のサイズが変わってしまう場合があります。
これはスマートフォンの機能で縦方向と横方向のサイズを自動調整してしまう事によって起きるのですが、
それをcss上で設定を切ることができます。
-webkit-text-size-adjust: 100%;
この一文を入れるだけで勝手にiphoneなどのスマートフォンで予期しない文字サイズになる事はなくなると思います。

最近はスマートフォン対応サイトが当たり前となってきましたが
まだまだ対応が追い付いていないサイトも多い現状です、
ユーザー目線に立って最低限こういった配慮をすることが大切だと思います。

第三十二回「Broken Link Checker プラグインでサイトリンク切れを探す」

自分のwebサイトの中のリンク切れを探して、教えてくれるプラグインです。

「Broken Link Checker」の設定方法。

1.「Post Expirator」をプラグインからダウンロードします。
bandicam 2016-05-25 18-15-16-337

2.ダッシュボード内で詳細を確認することができます。
bandicam 2016-05-25 18-20-16-945

★完成★

このプラグインの利便性が高い部分は、初期設定でも有効活用できる点です。リンク切れは定期的にチェックしましょう!

<参考サイト>

Broken Link Checker – リンク切れを自動的にチェックできるWordPressプラグイン

第三十一回「WP Social Bookmarking Lightで外部発信」

WEBサイトでアクセスを多く獲得する方法の一つとして利用されるのは、SNSです。

SNSが拡散してくれることによって、思いがけない人の目に留まったりします。

今回はSNSボタンを簡単に設置できるプラグインをご紹介します。

「WP Social Bookmarking Light」の設定方法。

1.「WP Social Bookmarking Light」をプラグインからインストールします。
bandicam 2016-05-24 09-19-18-873

2.設定より「WP Social Bookmarking Light」を開き、表示したいボタンを移動します。
bandicam 2016-05-24 09-21-06-298

3.ページにアイコンが出ていれば完了です。
bandicam 2016-05-24 09-23-16-005

★完成★

昨今SNSは、現在なくてはならないものです。プラグインでソーシャルボタンを設置して外部発信や共有していきましょう。

<参考サイト>

WP Social Bookmarking Light の設定方法

第三十回「WordPressにファビコンを設定するプラグインFavicon by RealFaviconGenerator」

投稿した記事を、期限付きで投稿しておくプラグインをご紹介します。

ファビコンって何?
1112

ブラウザ上で、以下のように表示される画像のことです。

ファビコンを目に留まりやすいものにしておくだけで、自分のサイトを覚えてもらえたり印象付けることができるので、是非設定しておきたい内容となります。

「Favicon by RealFaviconGenerator」の設定方法

1.「Favicon by RealFaviconGenerator」をプラグインからダウンロードします。
bandicam 2016-05-23 20-06-18-787

2.外観の中のFaviconに画像設定します。
bandicam 2016-05-23 20-09-36-918

3.ファビコン設定画面へと進みます。
bandicam 2016-05-23 20-10-23-026

4.ファビコン画像が設定されていれば終了です。
44443

★完成★

簡単な設定で、自分色のサイトに仕上げることができるので、ロゴなどを設定しておきましょう。

<参考サイト>

RealFaviconGeneratorでWordPressにファビコンを設定する方法

emmetを使ってコーディングのスピードアップを目指す。

今回はコーディングソフトで使用するプラグイン「emmet」についてです。
emmetを導入することで短文で構造を指定することができます。

■DreamweaverでのEmmetのインストール
http://emmet.io/download
emmet1

GitHubに転送されるのでEmmet.zxpの所をクリックするとダウンロードできます。
emmet2
ADOBE EXTENSION MANAGERを起動して「ファイル>拡張機能をインストール」を選択し
先ほどダウンロードしたEmmet.zxpを選ぶとインストールが始まります。
emmet3

■emmetの使い方

Emmetをインストールしている状態で

Ctrl+Eで展開

たとえばimgと入力して展開してみます。

img
展開(Ctrl+E)すると

一瞬でimgタグの中にsrcとaltが生成されました。

次にこの短縮系
ul>li
展開(Ctrl+E)すると

ul内にliが生成されました。
>を使う事で下層に対して指定ができます。

最後に少し難しい短縮系
ul>li.item$*5
展開(Ctrl+E)すると

ul内のliにクラス.itemに$で連番を指定し、*でliに対しての数を指定しています。

面倒くさい構造とクラス指定がたった1行でできてしまいました。

最後に参考サイトとしてチートシートが公開されているので載せておきます。

http://docs.emmet.io/cheat-sheet/

Javascriptを使ってカーソルが触れると画像を変更する。

今回は通信販売サイトでよくある商品詳細ページでサムネイル画像にカーソルがきた時に
メインの大きな画像を切り替えていく動きをJavascriptで再現したいと思います!

■イメージ図
js_over01

■使用したHTMLのコードはこちら

tableの上段にnameにitemImageと指定したメイン画像を置き、
下段にはtdにあるサムネイル画像にマウスカーソルを合わせるとonmouseoverでmyChgPicに大きな画像のurlを指定します。

■使用したjavascriptのコードはこちら

HTMLで指定したmyChgPicに対して
tdの上段で指定したname=itemImageの画像のURLを
document.imagesで書き換えるという
3行のシンプルなコードで完成!

■下記は実際動かしたDEMOです。

第二十九回「PostExpirator プラグインで公開期限付き投稿」

投稿した記事を、期限付きで投稿しておくプラグインをご紹介します。

「Post Expirator」の設定方法。

1.「Post Expirator」をプラグインからダウンロードします。
bandicam 2016-05-16 12-41-01-697

2.投稿の中に「Post Expirator」が生成されるのでこちらを設定します。
bandicam 2016-05-16 12-43-38-410

3.今回は一定期間で非公開になるように設定します。
Enable Post Expirationにチェックを入れて、日付設定、private(非公開)に設定します。
bandicam 2016-05-16 12-45-45-937

★完成★

予約投稿と併用すれば、一週間限定公開などの、期間指定ができるようになります。

<参考サイト>

記事の公開期間を設定出来るプラグイン「Post Expirator」