月: 2017年9月

WordPressの新しいカスタムHTMLウィジェットが保存できない

テキスト ウィジェットと違い自動で<p>タグで括らず、htmlを記述できる新しい機能ですが、セーブが完了しない事があります。

この他にも、カスタムcssや投稿記事内でjavascriptを記述した場合とかも同様にセーブできない。セーブできたように見えても、保存出来てなかったなどが発生することがあります。

SiteGuardが動作している環境では、次の対処で解決します。

SiteGuardが稼働中の環境での対処方法

SiteGuardはセキュリティ強化を手軽に強力にしてくれる便利で頼れるWordpressのプラグインですが、セキュリティ対策故に誤動作して悪さをしてしまう事があります。間違いはないはずなのに保存・実行の段階で期待通りに動かない場合は、次のように対処しましょう。

  1. レンタルサーバーの管理画面で、WAF機能のログを見てみましょう。
  2. 不具合が発生した時間にログが登録されていたら、その「URL」と「検出されたシグネチャ」をメモしましょう。
  3. WordPressの管理画面のSiteGuardのWAFチューニングサポートのメニューを開きます。
  4. 「新しいルールの追加」をクリックして、シグネチャとファイル名、コメントの入力画面にします。
  5. メモした「検出されたシグネチャ」をシグネチャへ、「URL」をファイル名に記入して保存します。

これで問題は解決するはずです。うまくいかない場合は、再度見直し(半角スペースやtabが挿入されていないか?など)修正は、一度削除して新規に入力し直すと良いと思います。修正だとうまく反映されない場合があるようです。WAFチューニングの設定方法の詳細はこちら

WAFチューニングをしても解決しない場合

SiteGuard以外にも要因になるプラグインはあると思います(定義が重なっている場合など)が、まずは、自分の作業内容を疑って、もう一度、丁寧に見直しましょう。もし新たに変数・関数定義をした場合などはユニークとなっているか?(簡単な確認方法は私は知りませんので、グローバルな定義は頭に特定のキーワードを付けるようにしています。)

そのうえで、やっぱり、不具合時にWAF機能にログが登録されているようなら、追加したWAFチューニングの設定を削除して、入力し直して見ましょう。

TinyMCEによく使うフォントや折角のフレームワークを登録して使いやすくする。

TinyMCE Advanceでツールアイコンを追加したりして、使いやすくできるのですが、フォントやスタイルまではやってくれません。

スタイルについては、editor-style.cssでCSSを読み込んで見栄えを実際に近くでき、CSSのclassを付加することも出来ますが、セレクタ(tag)は指定は出来ません。

editor-style.cssを読み込んで、出来上がりに近い表示にする。

function.phpに以下の1行を追加します。

add_editor_style( array( 'css/editor-style.css' ) );

ここでは、cssフォルダーの下のeditor-style.cssを読み込んでいます。

editor-style.cssには、H1/H2/H3/…などをstyle.cssなどから抽出して記入します。初期設定と記事作成に使うタグだけなので、さほど多くはないと思います。あと、CSSフレームワーク関係も使えるようにしたいので、初期設定の部分と記事作成に使うものを抽出して追加します。 @importで丸ごとインポートもできるようですが、面倒でも必要な部分だけを記述するのが良いと思います。 フレームワークは、記事作成時には影響は少ないと思いますので、どの部分が必要かわからない場合は、省略でも良いと思います。 pure.cssの場合は、baseとtable、あと必要に応じてButtonsとGridでしょうか。記述の順番は以下の様な感じで(同じセレクタなら最後の設定が有効なので)

  1. pure.css Base
  2. pure.css Buttons
  3. pure.css Tables
  4. pure.css Grids
  5. style.cssから抽出した共通(基本)設定とH1/H2/H3/…など

多機能のフレームワークを使っていて、どの部分を抽出すればよいかわからない場合は、記事ではpure.cssを使う方法もあります。大変小さいフレームワークで、他との競合もないので、追加しても邪魔にはならないと思います。

プラットフォーム違いでも使える代表的英字フォントと日本語フォントに変更する。

こちらも、function.phpに以下を追加します。

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "MS Pゴシック='MS Pゴシック','MS PGothic';".
 "MS ゴシック='MS ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "MS P明朝='MS P明朝','MS PMincho';".
 "MS 明朝='MS 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

フレームワークを利用する為のオリジナルのスタイルを登録する。

記事もレスポンシブ対応させる必要が多々あると思います。特に画像や表などは面倒ですし、よくわからない人にclassを追加してなんて言ってもわかりません。

ここでは、もともとのpure.cssとの対比が分かり易い(自分が使う為の設定なので)表記で登録していますが、実際に使う方が分かり易い表記にすればよいと思います。

先ほどのフォントと合わせて、

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "MS Pゴシック='MS Pゴシック','MS PGothic';".
 "MS ゴシック='MS ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "MS P明朝='MS P明朝','MS PMincho';".
 "MS 明朝='MS 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 $style_formats = [
 [
 'title' => 'Responsive Images',
 'selector' => 'img',
 'classes' => 'pure-img'],
 [
 'title' => 'Default Table',
 'selector' => 'table',
 'classes' => 'pure-table'],
 [
 'title' => 'Bordered Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-bordered'],
 [
 'title' => 'Table with Horizontal Borders',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-horizontal'],
 [
 'title' => 'Striped Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-striped'],
 [
 'title' => 'Striped Table tr',
 'selector' => 'tr',
 'classes' => 'pure-table-odd'],
 [
 'title' => 'Default Buttons',
 'selector' => 'a',
 'classes' => 'pure-button'],
 [
 'title' => 'Primary Buttons',
 'selector' => 'a',
 'classes' => 'pure-button pure-button-primary'],
 [
 'title' => 'Grids',
 'selector' => 'div',
 'classes' => 'pure-g'],
 [
 'title' => 'grid-u-x-5/24',
 'selector' => 'div',
 'classes' => 'pure-u'],
 [
 'title' => 'grid-u-sm-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-sm-1-2'],
 [
 'title' => 'grid-u-md-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-md-1-2']
 ];
 $arr['style_formats'] = json_encode($style_formats);
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

 

これでひとまず完了!

WordPressのビジュアルエディタTinyMCEの変な設定の表もこれで綺麗に作成できます。

 

あ~!....忘れていました。

 

TinyMCE Advanceで、スタイルボタンの追加と高度なオプション「CSS クラスメニューの作成」のチェックをしましょう!.....(‘◇’)ゞ

今度こそ、WordpressのビジュアルエディタTinyMCEが素敵に変身です。

めでたし、めでたし

 

追伸:

こんな感じが分かり易いのかなぁ~

 Responsive Images  画像に付ける 
 Default Table  縦線だけの表
 Bordered Table  罫線ありの表 
 Table with Horizontal Borders  横線のみの表 
 Striped Table  ストライプの表
 Striped Table tr  この行をグレー
 Default Buttons  リンクのボタン
 Primary Buttons  リンクのボタン★ 

ロリポップで運用中のWordpressサイトを高速化をしよう!!

なにかと性能を問題にされるケースのあるロリポップ(Lolipop)のレンタルサーバーですが、価格、利便性、稼働率において、他社と同等かそれ以上の魅力のあるレンタルサーバーであるからこそ、話題に上るのだと思います。今では、大手では当たり前となっているようですが、paperboy時代からお客様に見えない部分でサーバーの多重化や回線の多重化などしっかりとした運用をしている老舗なので、私はたまにお試しで浮気はしますが、ほぼロリポップ一本で運用しています。

安心してデータを預けられるレンタルサーバー。
月額100円(税抜)~容量最大400GBでWordPress簡単インストールなど
多彩な機能がついて、バックアップ機能も完備!
 

WordPressのホームページに高速化施策の結果。いきなり結果から

高速化したのは、このホームページです。pure.css導入のテーマで作っていますが、ちっとも高速ではない(実際CSSフレームワークは全体のうちの極僅かなので、高機能のCSSフレームワークを高速なCDNを利用して使用した方が全体的には高速になるかもしれません。)ので、自家製テーマなので、テーマ自身の高速化を含め対策した結果です。

まずは、GTmetrixの結果から

Pingdom Website Speed Testでも、

そして、Googleのモバイルサイトの性能測定 testmysite では、

さすがにサーバが混むと5秒位になることはありますが、アフィリエイト広告(PCページよりは1枚減らしてますが^-^;)とFacebookページありでこれは優秀だと自己満足しています。

どうです、これなら満足できる性能ではないでしょうか。

WordPressのホームページの高速化のための施策

テーマ自体の高速化は、使用するテーマにより変わってくるのでここでは詳細は省略します。(高速なCDNが存在するフレームワークやアイコンなどは、CDNから読む、使用していないheader情報は削除するなど)

お使いのテーマによっては、ここでの施策を自前で内蔵していたり、優れたソース(wordpressはダイナミックにhtml/cssを生成しますので、phpの書き方一つで随分とレスポンスが変わります。)など様々な工夫で高速化されたものも存在します。私がお客様サイトの作成のペースで使用することの多いで、「BizVektor」などもその1つです。(よく使うもう1つ「Lightning」も比較的高速ですが、標準テーマの範囲で作成されている為か、ここでの高速化施策で、改善できます。)

まず最初にすべきは、

今のホームページの分析ですが、Googleの「PageSpeed Insights」でチェックして、ファイルを置き換えましょう。

テスト結果で、「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」と最適化されたデータを作成、ダウンロードすることができます。変更できるものは差し替えましょう。但し、2点注意が必要です。

  1. 共通の画像をモバイルもPCも使用している場合、圧縮画像のサイズを確認しましょう。PCではぴったりでもモバイルでは解像度が不足などの場合があります。
  2. ダイナミックにstyle.cssを生成するテーマの場合は、単純な差替えは有効でありません。場合によっては不具合の要因になるかもしれません。
  3. 画像読み込みにCDNを使う予定がある場合は、綺麗に見せたい画像は圧縮画像への置き換えは控えた方が良いと思います。CDN側でも圧縮しているのか画像の品質が低下する場合があるようです。

以下の様な項目で、対策状況と改善策を提案してくれますが、注意してダウンロードしたデータと差し替えると、「3.画像を最適化する」は改善されます。「4.CSSを縮小する、6.JavaScriptを縮小する」も若干改善します。差替えはFileZillaなどでftpで行います。

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  2. ブラウザのキャッシュを活用する
  3. 画像を最適化する
  4. CSS を縮小する
  5. HTML を縮小する
  6. JavaScript を縮小する
  7. サーバーの応答時間を短縮する
  8. リンク先ページのリダイレクトを使用しない
  9. 圧縮を有効にする
  10. 表示可能コンテンツの優先順位を決定する

プラグイン「WP Fastest Cache」「Fast Velocity Minify」により高速化しましょう。

高速化のプラグインは沢山ありますが、多機能すぎたり依存性が強かったりとしますので、できるだけ単純軽量で稼働実績も多いものを選びました。

これらを適切に設定することで、「PageSpeed Insights」の指摘の1項、2項、4項、5項、6項、9項が改善されます。

2項、9項は、「.htaccses」を手修正することでも対応可能ですが、静的な設定ですのでプラグインを使用しても負荷とはならないので、間違いの少ないプラグインで設定しちゃいましょう!設定は簡単!「WP Fastest Cache」をインストール・有効にして、以下のようにチェックを入れます。

WP Fastest Cacheの設定

このままでもいいですが、念のため、キャッシュのフラッシュの設定をしておきます。

WP Fastest Cacheのキャッシュを1日に1回リフレッシュ

次に、「Fast Velocity Minify」をインストール・有効にします。この状態で無条件HTML/CSS/JavaScriptの縮小・結合をしてくれますが、テーマの作りや使用しているプラグインによっては不具合が発生するかもしれません。(出来れば、ローカルに公開サーバー同等環境を用意して確認しておくのが良いと思います。)

「WP Fastest Cache」でもHTML/CSS/JavaScriptの縮小・結合は出来ますが、無料版では、元のソースを残していたり、不十分ですので、この部分は「WP Fastest Cache」と連携して動作する「Fast Velocity Minify」に任してしまいます。(WP Fastest CacheはFast Velocity Minifyを無効にするように警告しますが、Fast Velocity Minify側は問題ないとしている)※

※警告が出た場合、設定がセーブされませんので、「Fast Velocity Minify」無効の状態で、「WP Fastest Cache」を設定します。その後「Fast Velocity Minify」を有効にして、キャッシュのフラッシュも「Fast Velocity Minify」側でするようにすれば、問題はないようです。

これまでに記述したツールで評価結果をよくしたり、不具合を改善するためには、3カ所チェックします。

Fast Velocity Minify設定方法

あと、うまく動作しないテーマの場合は、「JS and CSS Exceptions」のIgnore Listに記載しましょう。例えば、

/wp-content/themes/%テーマ名%/style.css

こんな感じで記載します。「BizVektor」の場合だと、私の事例では、以下のようにすると不具合なく動作するようですが、殆ど高速化は見られないので、使用しない方が良いかもしれません。(お客様のサイトなので使用を止めました)

/wp-content/themes/biz-vektor/design_skins/001/001.css

最後にFixしているホームページなら無料の画像CDNを導入しましょう

画像限定のCDNの導入は簡単で、画像はサイトデータの多くを占めますので、高速化に大きく貢献しますが、注意が必要です。意識的にデータの削除は出来ませんし、URLさえわかればだれでもアクセスできますので、個人情報にかかわる写真や頻繁に差し替える画像を扱う場合は、使用を控えましょう。対象外設定も可能ですので、部分的に採用することも可能です。

WP Fastest Cache設定 CDN by Photon

「WP Fastest Cache」で「CDN by Photon」を設定します。CDN Url:はランダムは避けてどれか選びましょう。設定後暫くするとCDN経由で画像アクセスするようになります。

ファイルアクセスの状況を分析すると

「Pingdom Website Speed Test」のFile requestsを見ると、レンタルサーバーのDNS/SSL/Wait(Wordpressのジェネレーション時間?)で100ms~1秒まで変動します。この部分がレンタルサーバーの性能によって大きく変わる部分と思います。現状、通常500ms程度で、100ms以下の場合もあり、理想的な高速なサーバーであれば、0.4S程度反応が早くなるかもしれません。

File requests 結果

 

今後の課題

実は、「pagespeed」での測定結果が微妙なんです。PCでは90/100なんですが、モバイルが71/100と微妙な結果となります。モバイルのスコアをせめて80台にしたいと思っていますが、提案してくれる改善策は、限界でどうしたものか....サイト全体のCDN化は避けたいので、考え中....

 

その後

コメントに書いたようにCSSフレームワークとstyle.cssをインライン化、「WP Fastest Cache」と「Fast Velocity Minify」を正しい手順で設定(上記※)、画像CDNは使用したままで、「pagespeed」の完全なレポートでのスコアが、モバイル/パソコンともに98/100となり、一応の満足な結果となり、今後の高速化への施策も見えてきましたので、今回の追求はここまでとします。(facebookとgoogle Analyticsを無効とすれば、100/100

 

覚書・補足

SNS系のプラグインは、意外に重いので、できればテーマ内で処理したほうが良さそう(今後の課題:今後の弊社テーマ「pureframe」の残項目に追加)。今回は、「Seed Social」で対応、このプラグインは’the_excerpt’を書き込んでいるようなので、’get_the_excerpt()’の使用には注意が必要。

‘Crayon Syntax Highlighter’などテキストをスキャン、ハイライトしてくれるようなプラグインは大変見やすく利便性は高いのですが重いので、必要なページのみ有効とする等工夫が必要かもしれない。このプラグインに関わらず、’Contact Form 7’など使用しているページ以外に不要なものも同様に

専門の担当者のいない企業・店舗のホームページについて

専門の担当者をアサインできない企業・店舗様が自社や自社製品のホームページを構築する場合、外注するのが最も確実な方法ですが、費用削減、人材育成など様々な理由であえて、自社内で作成する場合のどのようにすれば良いでしょうか?

目的を明確にしましょう。

何のためにホームページを作成しようとしているのか明確にして、ゴールを明確にしましょう。

  • 会社の名刺・看板として
  • 新製品の広告塔として
  • 人材募集・協業者募集の案内

別に広告を出す等、誘導は別でパンフレット的なレベルであれば、不慣れな担当者でも実現できる手段はあります。

それ単独で集客を考えているなら、かなりハードルが高くなり実現性は低くなります。但し、店舗販売のローカルビジネスや、極めて特殊で競合他社がいないビジネスであれば、実現性は高くなります。

社内で実現性が低い目的・ゴールの場合は、教育期間・費用などトータル的に検討して、外注をご検討されるのが良いでしょう。外注する場合も対応範囲で2万円台から数百万(本格的?ホームページの場合、60万~150万程度)の費用と様々ですので、管理する人件費・工数を考慮すると外注に委託する方が費用を抑えられるかもしれません。(内容にもよりますが、弊社の場合だと作成費+年間のサーバレンタル費・管理費を含めても10万円前後だったりします。)

お気軽にお問合せ下さい
(ご要望の内容如何で、愛媛県以外の事業者様も対応させて頂きます。)

予算と期間は?

ホームページを作成するには公開するための場所が必要です。契約プロバイダーでホームページが作成できる場合にはそれを利用する方法もありますが、使用できるToolが自由度がなかったり、営利目的で使用は制限されていて、独自ドメインの使用や広告の非表示には有料サービスの利用が必要だったりします。

最近では安価なレンタルサーバーや格安でホームページを立ち上げられるサービスがあり、ホームページ専門のサービスを利用する方がより本格的なホームページは作成しやすいと思います。人件費を除き、作成費・維持費を0円とするならば広告が控えめで見栄えも良いAmeba Owndがおススメです。(独自ドメインは将来的な会社の財産となります。年間数千円なので必ず取得しましょう。)

(ドメイン取得は、こちら ↓)

但し、いくつか単独では機能不足(問合せフォーマットがないなど)もありますので、他のサービスを利用して補うテクニックが必要だったりはします。予めビジュアル素材(写真など)や記載すべき内容が明確であれば、作成期間も極めて短期間で公開できるでしょう。(事前準備が十分できていれば、1日で公開も十分可能です。)

月々1,000円前後であれば、選択肢は相当に広がります。Wix(無料サービスもありますが、本格的利用には有料サービスが必要)やGoopeなど初心者でもホームページの作成が容易なサービスが利用できます。WiXはレゴブロックのようにパーツを並べて自由度に構築できます(別記事で書きましたが、頻繁に保存しましょう。折角の苦労が一瞬で消えますので)。飲食店などローカルビジネスにはGoope(グーペ)がおススメです。

グーペの場合、ページを追加したいなどの場合に階層メニューが作成できないなど窮屈に感じる場合があります。

そんな場合は、低価格のレンタルサーバを使ってbaserCMS(4.0以降)で構築されると本格的なホームページが意外に簡単に作成できます。baserCMSは日本語のコーポレートサイト用に開発されたCMSですので、大変日本語にフレンドリーで4.0になって大変洗練されていますし、比較的軽いので月額100円の超低価格のレンタルサーバーでも運用できます(SSLが使用できない、高トラフィックは不可など制限はあります。)ので、リスクも低いといえます。セキュリティ対策ももともと十分考慮されている上に世界的にはシェアが低い(日本語専用なので)こともありターゲットとされる可能性も低く比較的メンテナンスも楽だと思います。

◆とにかく安い。時間帯で重い場合もありますが、連続運用の信頼性は十分

◆比較的安価で安定した性能が好評で、シマンテックグループのSSL証明書【0円】

◆お値段は少し上がりますが、安定した高性能が好評

CMSといえば、Wordpressもお手軽で、テーマの範囲でとりあえず立ち上げるだけであれば、担当者不在でも不可能ではありません。しかし、セキュリティ対策を怠ることができないので、しっかり面倒を見る必要があることと、さすがに100円サーバー(Lolipopのエコノミープラン100円プランではそもそも動きません。)では重く実用的ではなく※、ある程度の快適な運用には経験と知識が必要となりますので、専任者がいない場合は、お勧めできません。

※ レンタル費が高いサーバー程、高速・高機能ではありません。遅いから高いサーバーへ移設しても必ずしも早くはなりません。(もちろん早くなる場合もありますが、ホームページから無駄を省いたり、CDNを利用するなど高速化する工夫をされる方が効果的です。)実はこのサイトも「PageSpeed Insights」の評価が50/100(立ち上げた直後はもっと良いスコアだった(-_-;))を切るほどになっていましたが、自作テーマに変更し、無駄を省いて、キャッシュや圧縮を利用することで85/100、サーバーのレスポンスが良い時には90 overまでに改善しました。(ちなみにフレームワークとフォント以外はCDNは使用していません….現在は、画像もCDN使用)

このあたりのWordpressサイトの高速化については、別途記載したいと思います。

Instagram インスタグラムってなに?

まぁ、これは今更でしょうけど……

店舗様、事業者様から見た場合、写真を媒介とする広告媒体の一つになります。ただ、通常の広告媒体とは、少し異なります。

Facebook、Twitterなどは、投稿記事に直接リンク先が付けられますので、1つ1つの記事が直接の広告媒体としての機能も持ち合わせていますが、(有料広告は除いて)Instagramの場合は、あくまでも投稿写真のファンを作り、その中からプロフィールを見て頂いたり、検索をして頂いて初めて直接つながる。どちらかというとじっくりとコアなファンを育成する感じの媒体となります。

さて、いくつかのポイントを押さえながら、Instagramを始めてみましょう!

Instagramを始める

最低限必要な機材など

タブレットもしくはスマートフォンが必須となります。PC用のInstagramもありますが、現状では保存した写真を投稿する機能がありませんので、実用的ではありません。

Instagramのアカウントを取得

店舗様、事業者様がアカウントを取得する場合、全くの個人事業で担当の継承がない場合を除き、Instagram専用のメールアドレスを用意して、このメールアドレスで登録することをお勧めします。個人で登録される場合は、Facebookアカウントで利用できます。

https://www.instagram.com/ or スマートフォン/タブレットで専用ソフトを起動

  • フルネームは、知ってもらいた店舗・会社名など
  • ユーザーネームは、Instagramでユニークな名前、御社を連想させ、覚えてもらい易い文字列(英数字とアンダーバー)

プロフィールを登録しよう(重要

プロフィールはファンと繋がる重要な情報となるので、必ず登録しましょう。プロフィールの編集画面で、

  • ユーザーネームの修正(必要に応じて)
  • ウェブサイト

唯一直接つながる情報なので、見てほしいページ(ホームページやECサイト)のURLを記載。専用のLPなども良い。

  • 自己紹介

150文字以内で会社・ブランドの説明や、どんな写真を投稿するか投稿policyなどを記載するとよい。

  • プロフィール写真

人物感のある写真が好まれますが、集合写真やイメージキャラクターなどでも良いでしょう。

Instagramに投稿する

ポイントは、興味を持ってもらえる写真はもちろんですが、キャプションとハッシュタグ、特にハッシュタグは必ず入れましょう。

  • キャプション

写真が説明不要な場合はなくても良いですが、なにか印象付けるアクションを感じさせるキャッチとしてあった方が良いでしょう。但し、長いものはダメ。

写真が説明があった方が分かり易い、楽しんでもらえる場合は、250文字程度の範囲で記載しましょう。

出来れば、次回の投稿を期待させるようなキャプションが良いでしょう。

  • ハッシュタグ

キャプションを入力する欄に半角#のあとにキーワードを記入します。アプリ上にそのキーワードでどれ位の投稿があるか候補が表示されるので多く投稿されているキーワードを選ぶと良いでしょう。

  • 単語でも短文でも可
  • ハッシュタグの間は必ず半角スペース
  • 英数字、日本語の混在はOKだが、記号・半角スペースは使用できない。
  • 必ず5個以上、できれば10個以上(30個以内)登録しましょう。
  • 投稿写真にはpolicy/傾向があるはずなので、ハッシュタグのうち、いくつかは必ず登録して、探しやすくしましょう。(ハッシュタグ付けも少し楽になる。)
  • 位置情報

店舗など写真と関連した場所を登録しましょう。facebookとの連携が必要となります。

フォローしよう

いいね!やフォローしてくれた相手には、明らかに不適切と思われる場合を除いて、フォローを返しましょう。相互フォローでないとメッセージ通知などがされず、折角のコミュニケーションの機会を逃してしまいます。

SNSを使用する場合、競合する同業者と繋がることを嫌がる方がいらっしゃいますが、基本的には繋がっていくべきと思います。繋がることを拒否されるぐらいなら、SNSには手を出さない方が良いかもしれません。同業者の周りには未開拓のファンになる可能性がある人たちが必ずいます。単独でファンを増やすより圧倒的に効率的です。また、他の同業者がどうしているのかもわかりベンチマークとして自分たちのやるべきこともより見えてくるはずです。比較されて顧客を失うことを恐れるばかりでなく、自分たちの売りが一つでもあれば、それをアピールして、必要なところは改善していく姿勢をみせてファンを増やす努力が大事だと思います。今の時代、殻にこもった事業では疲弊してしまいます。

コメント問合せに返信しよう

コメントをもらった場合は必ず返信しましょう(公開されるので内容には注意)。中傷的なものも可能であれば、形式的な返信をして受け取ったことだけ通知しましょう。極力Openにして削除は好ましくないですが、第三者に不快にさせるような場合は、削除もやむなしでしょう。

ツール紹介

画像を補正したい

Snapseed

画像の補正だけでなくテキストの挿入、iphone6以降であればRAWファイルの現像までできてしまう優れたアプリです。iOS/Android用無料

画像に文字入れしたい

Phonto

様々なフォントで簡単に文字入れ出来ます。iOS/Android用無料

※積極的に広告を表示するので、誤って余分なものをインストールしないように注意しましょう

複数画像を1枚の画像にしたい(コラージュ)

Layout from Instagram

コラージュメーカー

その他

Facebook配下となり、急速に有料広告の利用が増えています。こちらについては機会があれば……

CSSフレームワークpureの概要

CSSフレームワークといえば、Bootstrapがまず思い浮かびますが、ご存知の通り他にも沢山の種類が存在します。その中でもpureはかなりサイズが小さく、その割に必要なフレームワークはしっかり押さえていて、使いやすいフレームワークになっています。

 

PUREの機能概要

BASE

Normalize.cssがベースになっていますので、別にリセットの用意は必要なくブラウザの違いによる表示の差分も最小限になるようにできています。

Hiding Elements

class=”hidden”; /* display: none !important;  */

 

Responsive Images

class=”pure-img”;/* responsive imge */

example:

<img src="/wp-content/uploads/2017/09/a0001_000375_m.jpg" alt="クリスマスの並木道" class="pure-img" />

 

クリスマスの並木道

FORMS

各種タイプのFormが予め設定されていて、「class=”pure-form”」と指定するだけでformが使用できます。細かいデザイン設定する場合は、デザイン設定用のclassを合わせて予め設定して、そちらでアレンジするだけです。

.pure-form input[type=”text”],
.pure-form input[type=”password”],
.pure-form input[type=”email”],
.pure-form input[type=”url”],
.pure-form input[type=”date”],
.pure-form input[type=”month”],
.pure-form input[type=”time”],
.pure-form input[type=”datetime”],
.pure-form input[type=”datetime-local”],
.pure-form input[type=”week”],
.pure-form input[type=”number”],
.pure-form input[type=”search”],
.pure-form input[type=”tel”],
.pure-form input[type=”color”],
.pure-form select,
.pure-form textarea 

コンパクトな 1 lineの入力フォームならこんな感じで簡単に記述できます。(「pure-button*」は後程記述する)

<form class="pure-form">
<fieldset>
<legend>A compact inline form/ログインフォーム</legend>

<input type="email" placeholder="Email">
<input type="password" placeholder="Password">

<label for="remember">
<input id="remember" type="checkbox"> 記憶する
</label>

<button type="submit" class="pure-button pure-button-primary">サインイン</button>
</fieldset>
</form>

 

 

A compact inline form/ログインフォーム

ラベル付き入力BOXを表示するようなFormの場合、calssに’pure-form-stacked’を追加します。

.pure-form selectがdefaultで、2.25emに設定されていますが、高さが足りないようなので、調整が必要かもしれません。ここでは、2.7emとしています。

こんな具合に

<style type="text/css"><!--
.pure-form select {height:2.7em;}
--></style>

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form/ラベル付きアカウント入力フォーム</legend>

<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<span class="pure-form-message"> 必須  </span>

<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">

<label for="state">都道府県</label>
<select id="state">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select>

<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 記憶する</label>

<button type="submit" class="pure-button pure-button-primary">ログイン</button>
</fieldset>
</form>

 

A Stacked Form/ラベル付きアカウント入力フォーム 必須

入力BOX表示位置を揃えたい場合は、calssに’pure-form-aligned’を追加します。そして、ラベルと入力フォームを’ class=”pure-control-group” ‘で括ります。

こんな具合に

<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
<span class="pure-form-message-inline">必須項目</span>
</div>

<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>

<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>

<div class="pure-control-group">
<label for="foo">任意のラベル</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>

<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">利用規約を確認しました
</label>

<button type="submit" class="pure-button pure-button-primary">送信</button>
</div>
</fieldset>
</form>

 

必須項目

‘Pure Responsive Grid’を併用することで、レスポンシブデザインに対応した入力フォームとなります。

このような具合に

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>レシポンシブ 入力フォーム 用例</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"><label for="last-name">苗字</label> <input id="last-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="first-name">名前</label> <input id="first-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" required="" type="email" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="city">市町村</label> <input id="city" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="state">都道府県</label><select id="state" class="pure-input-1-2">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select></div>
</div>
<label class="pure-checkbox" for="terms"> <input id="terms" type="checkbox" /> 利用規約を読みました </label> <button class="pure-button pure-button-primary" type="submit">送信</button></fieldset>
</form>

 

レシポンシブ 入力フォーム 用例

テキストベースの入力フォームのセットを’ class=”pure-group”‘で括ることで、サインアップフォームやモバイルデバイスに適した入力フォームとなります。

このような具合に

<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>

<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="A title">
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

 

To be continue