合同会社ひめぽーと は、愛媛の店舗、生産者様のホームページ作成・制作・管理、ネットショップ作成・制作・管理、パソコン関連サポートなど、バックアップ致します。

月別: 2017年10月

ホームページやネットショップで利用できる無料素材


弊社が良く利用する写真・イラストの掲載サイトをご紹介

弊社が良く利用する写真・イラストの掲載サイトをご紹介します。
一部使えない用途などもありますので、各サイトの利用規約を確認してご利用ください。

誤って使用することは少ないとは思いますが、いずれのサイトもスポンサー画像・広告を含む場合がありますので、注意しましょう。

※ このページのリンク先は保護されていないページも含まれます。

写真・素材 類

写真素材 足成
http://www.ashinari.com/

様々なジャンルの写真が探しやすいように分類されて掲載されています。

ぱくたそ
https://www.pakutaso.com/

足成と同様に様々なジャンルの写真が探しやすいように分類されて掲載されています。

BEIZ Graphics
https://www.beiz.jp/

掲載ジャンルは少ないですが、背景に使用しやすい様なベタな素材が多くあります。

Natural Material
https://natural-material.com/

そのまま使える写真もありますが、加工素材として利用するのに適した写真が多くあります。

.foto project ※利用規約に注意が必要
https://free.foto.ne.jp/

使用条件に注意が必要ですが、様々な写真があります。

Pixabay
https://pixabay.com/

世界中の様々な写真、イラストがあります。
Wordpressで利用する場合は、プラグインを使用することで簡単に記事に差し込めます。

イラスト・素材 類

いらすとや
http://www.irasutoya.com/

可愛いイラストが沢山あります。

無料素材倶楽部
http://sozai.7gates.net/

主にアイコンなどの素材となりますが、イラストもあります。

音楽・BGM など

こちらは画像ではなく音楽ですが
Music-Note
http://www.music-note.jp/

BGMやアクションの擬音に使えそうなものとか多数の音楽が掲載されています。使用時に引用元の記載が必要となります。

ボタン・イベント などショップ素材

E.Commerce予備校
http://ec-yobiko.com/

EC design(デザイン)
http://design-ec.com/

無料素材倶楽部
http://sozai.7gates.net/

福岡発の純国産CMS『OneThird CMS』を試してみる


福岡発の純国産CMS『OneThird CMS』とは

baserCMSと同じ福岡発の純国産CMSで、baserCMSがフレームワークにcakePHPを使用しているのに対して、すべてオリジナル設計で、無駄な部分がなく、高速動作、超軽量を謳っています。

まだ、マニュアル類が整備されていない事がネックで、サードパーティーのテーマやプラグインも現時点では公開されていないようですが、指摘されていたセキュリティー問題も対策されたようですし、今後、コニュニティなどができて永続開発される体制ができれば化けるかもしれません。

プロ向けのようで、難しいのかもしれませんが…..

ドキュメントに記載を見つけられませんでしたが、OSDN(SourceForge)を見る限り、GNU General Public License v2 (GPLv2)のようです。ここら辺もソースなりドキュメント内で明示されていると安心できるのですが、ソース内にGPLの規約の添付も宣言も見当たらないし、OSDN(SourceForge)も紹介だけで実際のパッケージは公開されていないなど、業務で本格的に使用するには、少々厳しいのが現状かと感じています。

OneThird CMS のローカル環境を構築

OneThird CMSは、SQLiteにも対応で安価なレンタルサーバーでも運用可能なのも売りですが、ここでは、お試しということで、簡単にWordpress環境を構築できるLocal by Flywheelを使って、超簡単にMySQLを使った環境を構築します。

  1. Local by Flywheelをインストール、インストール済みなら次へ
  2. Local by Flywheelを起動して、Local Siteを追加
  3. 追加したSiteのフォルダ(/app/public/)のWordpressのファイルをすべて削除
  4. OneThird CMSのOnline Installerをダウンロードし、解凍したファイルを上記フォルダにおく
  5. Local by FlywheelでLocal SiteのVIEW SITEをクリック
  6. 表示されたセットアップ画面に従って、セットアップ
  7. セットアップにあたり、database情報は、Local by FlywheelのLocal SiteのDATABASEのタブを参照
  8. Admin/Admin passwordはとりあえずdatabaseのアカウントを入れておき、セットアップ後、OneThird CMS アカウント設定で正しい情報に入れ直す。
  9. 次回から、Local by FlywheelでLocal SiteのADMINで設定画面が表示できるようになる

 

おしまい。簡単でしょ~(^_-)-☆

サンプルサイト作成(将来…..?)

サンプルで金魚の紹介サイトでも作ってみようかと思いましたが、最初に書いたようにまだライセンスや開発継続性に不安がある状況なので、工数を割いて作業するのは、今後の動向をみて考えたいと思います。

現状、Wordpressでも弊社作成のテーマで十分な高速性を出せることが確認できていますし、SQLlite環境ではbaserCMSが使用できますし、baserCMSの高速化の検証を先に実施したいと思っています。

ローカルビジネスの店舗だからこそ必要なもの、ホームページ……


お店が成功するループ/流れを作る

あなたがお客様に喜んでもらえる商品を扱うお店をオープンしました。成功させるためには、どのようにすればよいでしょうか?

  1. お店を知ってもらう。
  2. 訪れたお客様に満足して頂く。
  3. お客様にリピートして頂く。
  4. お客様にお客様をご紹介頂く。
  5. お客様の声を聴いて、商品・サービスにフィードバックする。

ざっくり、このような流れとなるでしょう。

お店を知ってもらう

あなたのお店が、あなたの商品に興味を持つ通行人が沢山いる場所にあるならば、「のぼり」で十分な場合もありますが、人は見えていても見ていない事が多いので、チラシ配布/呼び込みなどで積極的にPushしたり、デジタルサイネージのように画像や音の動きがあるもので認識度を上げるなどは必要になろうかと思います。

通常は、事前にフリーペーパーや新聞、雑誌に広告やチラシを掲載したり、FAX業者に依頼してFax DMをばらまいたりとなりますが、あなたの商品を必要としている人を特定してアピールできないので、非常に効率の悪い、コストパフォーマンスの悪い結果となる結果が多々発生してしまいます。

もし、あなたのお店の商品を探している人にアピールできれば、どうでしょう? きっと、効率の良い広告となりますね。

ところで、あなたがお店を探す場合、どのようにしていますか?

電話帳で調べられる方もまだいるかもしれませんが、殆どの方が、パソコンやスマホで探されると思います。とくにスマホは、音声で「近くのお弁当屋さん」としゃべるだけで、自分がいる場所の近くのお弁当屋さんを案内してくれるなど、パソコンの扱えなかった方でも簡単に使えます。

パソコンやスマホで探したときにあなたのお店が表示されれば、あなたのお店の商品を探している人にアピールできることになります。

ひょっとすると、あなたは何もしていないのに、スマホやパソコンで調べるとあなたのお店が出てくるかもしれません。でも、情報が不正確だったり、必要な情報がなかったりします。あなた(オーナー)がちゃんと正しい情報を設定することで検索で表示されやすくなり、広告(情報)としてもお客様へ必要な情報と安心感を提供できますので効果を発揮することになります。具体的には後程

訪れたお客様に満足して頂く

ここはあなたの商才を発揮して、お客様が満足する商品とサービスを提供してください。

お客様にリピートして頂く

DMなどお店や商品を知って頂くアピールの適度な繰り返しが必要となります。さらに、会員になって頂き、会員ならではのお得なサービスを提供するなどがあるとリピートされやすくなると思います。

ここでも先ほどのパソコンやスマホで探したときにあなたのお店が表示されれば、お客様に思い出して頂け、良い印象(満足)を感じて頂けていたなら、また訪問して頂けます。また、もし会員登録にメールアドレスを記入して頂いていた場合は、メールでのDMを新商品や催しの際に通知を差し上げると訪問して頂ける可能性が高くなります。

また、ご購入後の1~2週間後のフォローメールなどもお客様に好印象を感じて頂けます。

お客様にお友達をご紹介頂く

お客様が満足する商品とサービスの提供と、アフターフォローなどによって、お友達とともにご訪問頂けるかもしれません。また、お友達ご紹介ポイントや割引などの特別なサービスの提供も効果があるでしょう。

お客様の声を聴いて、商品・サービスにフィードバックする

より良い商品とサービスを提供し続けるには、常にお客様の声を聴き、世の中の流行に敏感になることが必要と思います。

また、他の同業者の商品やサービスとベンチマークして、優れた面をお客様にアピールしてファン(お客様)を作っていくとともに、負けている部分の改善もしくは視点を変えてそれが特徴としてアピールする方法なども検討して、常に前向きな成長が必要と思います。

例えば、他社競合店より高額になるなら、なぜ高額になっているかが他社比較でアピールするポイントになっていないかなど……

店舗運営以外に、ローカルビジネスだからこそ必要なこととは <結論>

誰もがネットで情報検索する時代です。たとえお店に訪問中でもネットでお店の情報を調べる方は少なくありません。そこで有意義な情報を提供できるかどうかで、お客様の反応も大きく変わることでしょう。

  • Google Mapにあなたのお店が正しく表示されるようにしましょう。
  • 同時にGoogleビジネスのアカウント設定して、必ずビジネスオーナーの登録をしましょう。
  • インターネット販売していなくてもホームページも用意して、お店の詳細な情報を発信しましょう!
  • インスタグラム、facebookなどのSNSもお店用のアカウント、ページを用意して、Google map、ホームページ、SNSを連携させましょう!

詳しくはこちらまで
お気軽にご相談ください。

掲載日:
月別: 2017年10月

構造化データ > hentry(マークアップ: microformats.org) author/entry-title/updated がありません

Google Search Content 構造化データ マークアップ

構造化データ > hentry(マークアップ: microformats.org)対応について

WordPressで構造化データに対応していない、もしくは対応が不十分なテーマだと、Google Search Consoleで構造化データのエラーが多発する場合があります。

author がありません
entry-title がありません
updated がありません

構造化データのエラーが発生しても直接はSEOに影響するわけではありませんが、検索結果の表示に影響しますので、不適切な構造化データだと、クリック率に影響して、長期的・間接的にSEOへ影響します。Wordpressはデフォルトで<article>に[class=”hentry”]付加してくれますので、折角なので対応します。

対応は、適切な箇所にclass=author/entry-title/updatedを追加するだけ

通常、投稿記事には「author」と「entory-date」は、大概のテーマではあるはずなので、そこのclassにauthorとupdatedを追記すればOKなのですが、この時2つのポイントに注意が必要です。

hentryで囲まれた中であること(通常はこの条件は満たすが、自作テーマやメインコンテンツの外枠に表示するような特殊な構造だと注意が必要)

entory-date/updatedには、形式のルールがあり、これに則している必要があります。

 $time_string = '掲載日: <time class="entry-date published updated" datetime="%1$s">%2$s</time>';
 if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
 $time_string = '掲載日: <time class="entry-date published" datetime="%1$s">%2$s</time> / 更新日: <time class="updated" datetime="%3$s">%4$s</time>';
 }
 $time_string = sprintf( $time_string,
 esc_attr( get_the_date( 'c' ) ),
 esc_html( get_the_date() ),
 esc_attr( get_the_modified_date( 'c' ) ),
 esc_html( get_the_modified_date() )
 );
 $posted_on = sprintf(
 esc_html( '%s', 'post date' ),
 '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
 );

こんな感じ

authorは通常この後に表示される(?)ので、その部分にclass:authorを追記、表示がなければ以下のような感じで、上記の記述に続けて追加します。

 $byline = sprintf(
 esc_html( 'by %s', 'post author' ),
 '<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
 );
 echo '<span class="posted-on">' . $posted_on . '</span><span class="byline"> ' . $byline . '</span>'; 

最後にentory-titleの対応方法には2つのパターンがあります。

hentryで囲まれた中にTitle表示はある場合は、そのtitleのclassにentory-titleを追加するだけですが、本ページで使用しているテーマのようにhentryのarticleの外にtitle表示はある場合は、別途にhentryに囲まれた中にtitle表示を追加する必要があります。

本ページのテーマの場合は、以下のようにしています。

上記2つの記述に加えて、以下を記述

 <div class="entry-title-style">
 <?php if( is_home() || is_front_page() ) { ?>
 <span class="entry-title"><a href="<?php esc_url( get_permalink() ) ?>" rel="bookmark">home</a></span>
 <?php } elseif ( is_single() ) {
 the_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_archive() ) {
 the_archive_title( '<span class="entry-title">', '</span>' );
 } elseif ( is_search() ) {
 ?><span class="entry-title"><?php the_search_query();?> で検索した結果</span><?php
 } else {
 the_title( '<span class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></span>' );
 }
 ?>
 </div>

これまでのまとめて、functions.phpで関数定義して、適当な場所に差し込みます。

/* 構造化データ post-date/time , author. and title */
function pureframe_posted_on() {
/* 上記3つの記述をここに */
 <?php 
}

で適当な場所に

pureframe_posted_on();

固定ページへの対応方法

投稿ページには、投稿日や執筆者名が通常あるので、上記の方法で通常対応できると思いますが、固定ページの場合は、これらの記載はない場合が多いのではないかと思います。固定ページでは”hentry”をとってしまうのもありなのかもしれませんが、上記の3つの記述は固定ページにも一応対応していますので、「pureframe_posted_on();」を適当な場所に挿入します。

固定ページのarticleを閉じる直前など記事の邪魔が少ない(デザインへの影響が少ない)場所に挿入します。

最後に

この対応は、本テーマでの現時点(2017.10.1)での対応で不十分な部分も多々あると思いますので、流用される場合は自己責任で(^-^;

WordPressでAMP(Accelerated Mobile Pages)対応は簡単!だけど….


WordPressでAMP(Accelerated Mobile Pages)対応

このサイトのようにモバイルを意識して構築した場合に、AMPの必要性は個人的には若干疑問(現状では、表示速度やビジュアル性が低下する場合が多々ある)なんですが、Googleが対応を推奨している以上、AMPを無視するわけにもいきません。

現状、手間をかけてAMP対応はしたくないので、プラグイン「Accelerated Mobile Pages」を使用します。有料の機能/プラグインが必要な部分は通常ページへの案内をしてそちらへのリンクを掲載で対応して、お金も手間も倹約します。(開発者の為に余裕がある方は、有料の機能/プラグインもどんどん使ってあげてください。)

ampプロジェクトのプラグイン「AMP」ではなく「Accelerated Mobile Pages」をインストール

最初、Googleも案内するampプロジェクトの「AMP」をインストールしてみましたが、単独では使用できず追加のプラグインを要求されるし、設定方法も分り難いので、設定が分かり易い「Accelerated Mobile Pages」を使用します。

Accelerated Mobile Pagesの設定は簡単

プラグインをインストールして、有効にした後、AMPforWP OptionsのSettingsとDesignを設定するだけ、沢山設定がありますが、とりあえずわかるところだけでも設定して、<your url>/ampを見てみましょう!

Accelerated Mobile Pagesの設定の注意点

Custom CSSに通常ページのCSSを貼り付けるだけで、通常ページに似せたデザインにできますが、使えないCSSがあります。Custom CSSに貼り付けると文法チェックされて、無効なものは赤の△、注意が必要なものが黄色の△で表示されますので、最低限、赤の△は、修正or削除します。

Google Search consoleで「重大な問題のある AMP ページ」と表示されてしまいます。

コメントに禁止CSSと類似の記載があっても「重大な問題のある AMP ページ」となってしまうようなので、コメントはすべて削除しておくと安全かもしれません。

設定後はしばらくは、注意してGoogle Search consoleを見ましょう。もし、「重大な問題のある AMP ページ」と表示されてしまったら、速やかに修正しましょう。

その他、AMPページ作成でのポイント

各ページをAMP対応に変更したい場合は、SettingのPage Builder / Legacy Page Builder (widgets)を有効にすると各ページでAMP専用のページが簡単に作成できるようになります。

モバイルページはAMPを標準としたい場合は、SettingのAdvance Settings / Mobile Redirectionを有効にするとモバイルからのアクセスでは自動的にAMPページが表示されるようになります。ただ、この場合はSEO設定などもちゃんとしておかないとモバイルファーストとなったときにSEO的に不利となると思われます。ちなみに、このRedirection設定をしなくてもGoogle Search consoleはAMPページを認識します。

 

実は、まだこのサイトも対応中の段階で、ここでの記載は最終的に変更される可能性があります….(^-^;

Accelerated Mobile Pages設定項目について(追加)

SettingsのStructured Dataは設定しましょう。この設定をしてないと構造化データが不完全となってしまいます。

pure.cssは、flexを使って自由なレイアウトのレスポンシブ対応にする。


pure.cssでレスポンシブ対応するなら、flexを使いましょう。

pure.cssで素直にレスポンシブ対応Gridだけで構築すると

 

ABC

 

A
B
C

こんな感じにHTMLに記述された順番にしか並びません。

例えば、BCAの順番に縦に並ぶようにしたい場合、どうしたらよいでしょうか?

pure.cssでpure-gで括るとbox/flexbox/flexの定義がされているので簡単!

以下のような感じで、それぞれのボックスにオーダー番号を付けてあげるだけで、簡単に並び替えが出来ちゃいます。

-webkit-box-ordinal-group:2;
-ms-flex-order:2; 
-webkit-order:2; 
order:2;

で、これを画面サイズごとにCSSに定義していくと画面サイズごとに違った順番で表示の変更も可能となります。

ABC

A:1、B:2、C:3

BC
A

A:3、B:1、C:2

B
A
C

A:2、B:1、C:3

こんな感じにも簡単にできます。

弊社作成中のテーマ「pureframe」では、以下のように使っています。分かってしまえば、簡単ですね。

@media screenでの定義順番は注意が必要で、CSSの基本ルールで最後の定義が有効になりますので適用範囲の「デフォルト、広いー>狭い」とします。

/*レスポンシブデザイン 表示順番 */
.container-inner > .main-left ,
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-l ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
@media screen and (min-width: 35.5em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 48em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
.container-inner > .side-lr ,
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
}
@media screen and (min-width: 64em) {
.container-inner > .main-left {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-left-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .side-lr ,
.container-inner > .side-l {
 -webkit-box-ordinal-group:2;
 -ms-flex-order:2;
 -webkit-order:2;
 order:2;
 }
.container-inner > .side-r {
 -webkit-box-ordinal-group:1;
 -ms-flex-order:1;
 -webkit-order:1;
 order:1;
 }
.container-inner > .main-right {
 -webkit-box-ordinal-group:3;
 -ms-flex-order:3;
 -webkit-order:3;
 order:3;
 }
}