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

作者別: himeport

magazine系のテーマ Metro Magazineをカスタマイズ

Wordpressのテーマ Metro Magazine

Metro Magazineのカスタマイズ

Metro Magazineについて

一応、日本語も対応(独自部分は日本語にはなりません)のNewsやMagazine形式のテーマとなります。

写真を使ったプロダクトの紹介などにも適したテーマとなっていて、proバージョンを購入して機能アップもできます。

テーマのReadmeより

Metro Magazineは、インタラクティブな WordPress スタイルのウェブマガジンで、ニュース、新聞、雑誌、スポーツ、テクノロジー、グルメ、トラベル、ブログ、出版、ビジネス、その他様々な分野に適したテーマです。このテーマは、カスタマイザー(Customizer)上に構築されており、瞬時にプレビューを確認しながら、あなたのウェブサイトをカスタマイズできます。Metro Magazineには、カラースキームやカテゴリー毎に色を変える機能も含まれており、 クリック一つであなたのウェブサイトの色合いを変えることができます。このテーマでは、検索エンジン最適化(SEO)機能を使用しているため、Googleのランキングで上位にランク付けされやすいのも特徴です。他には、ソーシャルメディアとの統合、カスタム・ウィジェット、著者のプロフィール、ブレッドクラム、広告設定、カスタムCSS、トランスレーション・レディなど様々な機能があります。

ここでは、公式テーマで配布されている「License: GPLv2 or later」のものをカスタマイズして使用する一例を記載します。

子テーマの作成

子テーマの作成方法は、いろいろな方が丁寧に説明されているので、詳細は省略します。

functions.phpとstyle.cssを含む子テーマを作成します。

WordPressのインストールされた環境で、/wp-content/themesの下に子テーマのフォルダーを作成して、functions.phpとstyle.cssを置きます。

style.cssには最低以下の記載をします。

/*
Theme Name: 適当なアルファベットの名前
Template: metro-magazine
Description:
Author: 
Tags:
Version: 
*/

functions.phpには、とりあえず、以下の記載をします。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}

カスタマイズ準備が出来ましたので、いよいよカスタマイズ開始です。

子テーマを有効にして「外観ー>カスタマイズ」

子テーマの内容が正しい前提で、プレビュー表示ができれば、OKですが、ひょっとすると「リダイレクトの繰り返し……」とかでプレビュー表示に失敗するかもしれません。その場合は、functions.phpの最初に(<?phpの次の行)以下を追記します。

// リダイレクト繰り返し対策 おまじない
remove_action('template_redirect', 'redirect_canonical');

真の対策をする場合は、もっと深く調べてみる必要がありますが、とりあえずはこれでOK

カスタマイズのヒント

カスタマイズ画面の「プロバージョンの案内」は日本語の場合はみ出して見栄えも悪いので削除、footerのCopyrightのPowerd表示も削除しました。

カスタマイズ内容をズバリ書きにくい部分なので、ヒントだけ記載します。

手順としては、子テーマのfunctions.phpで、設定をしている部分の「add_action()」を「remove_action()」して、必要に応じて新たに異なるfunction名で再定義します。

ちなみに「プロバージョンの案内」は、

add_action( ‘customize_register’, ‘metro_magazine_sections_pro’ );

「Copyright」は、

add_action( ‘metro_magazine_footer’, ‘metro_magazine_footer_credit’, 40 );

子テーマを作成できる方なら、これだけのヒントで対応できると思います。

スライドショーの追加

スライドショーは、Wegit対応で使いやすいプラグイン「MetaSlider」を利用します。

直接、表示したい場所にスライドショーを組み込む方法もありますが、ここでは折角の子テーマですし、「Metro Magazine」はあらかじめhookが何か所か設置されていますので、サイドバーを作成して、ウィジェットでいろいろな使い道ができるようにします。

functions.phpに以下を追加します。関数名やサイドバー名は適当に変えられますが、function名には「_」は使えますが、「-」は使えませんので注意が必要です。(まぁ、エラーとなるので見逃しはないと思いますが…..)

function metro_child_widgets_init() {
register_sidebar( array(
'name' => __( 'トップスライドショー' , 'metro-child' ),
'id' => 'front-slide-widget',
'before_widget' => '<div id="%1$s" class="container">',
'after_widget' => '</div>',
'before_title' => '<aside>',
'after_title' => '</aside>',
) );
}
add_action('widgets_init','metro_child_widgets_init');
function metro_child_slider(){
if ( is_active_sidebar( 'front-slide-widget' ) ) : ?>
<div class="content-top">
<?php dynamic_sidebar( 'front-slide-widget' ); ?>
</div>
<?php endif;
}
add_action( 'metro_magazine_header', 'metro_child_slider', 51 );

これでウィジェットにトップスライドショーというサイドバーができます。

最後のadd_action( ‘metro_magazine_header’, ‘metro_child_slider’, 51 );の部分を表示させたい場所のhookに変更してください。

ちなみにhookは、親テーマの

/inc/template-hooks.php

などを見るとわかります。

TOPページのカテゴリー4の画像を変更

カテゴリー4の表示をしている部分をリムーブして、アドするのが綺麗と思いますが、ここではあまり変更しない前提で、子テーマにimageを置くようにします。

この部分は、CSSでバックグランド画像として表示させているので、子テーマのstyle.cssに以下を追記します。

.section-four .img-holder{
float: left;
width: 55%;
min-width: 400px ;
height: 885px;
background: url(images/A002.jpg) no-repeat center;
background-size: cover;
position: relative;
}

子テーマのフォルダーにimagesフォルダーを作成して、表示させたい画像を置きます。

表示サイズや、表示のさせ方は、必要に応じて変更します。

 

とりあえず、第1弾のカスタマイズはここまで

 

 

 

掲載日:
作者別: himeport

ハードディスク ・ SSDの突然の故障に備える


ハードディスク(HDD)やシリコンディスク/ソリッドステートドライブ(SSD)の健康チェック

あなたのHDD/SSDは健全ですか?

近年のハードディスク、とくにSSDの信頼性向上は目覚しいと思いますが、それでも動作環境により極端に寿命が短くなったり、製品寿命や故障で、ある日突然データが読めなくなる、パソコンが起動しないなんてことがあるかもしれません。

あなたのHDD/SSDは大丈夫ですか?

最近のHDD/SSDは、S.M.A.R.T.なる状態をログする機能を持っています。このログを確認することで、利用温度や経年劣化による故障の兆候や寿命を予見することが可能になります。

S.M.A.R.T.(Self-Monitoring, Analysis and Reporting Technology)を利用する

最近のPCのBIOSやOSには標準でS.M.A.R.T.データを参照する機能がある場合がありますが、BIOSに至っては再起動時にしかわかりませんので、殆ど再起動しないパソコンなどは、再起動したときには時遅しなんてことがあるかもしれません。

運用中に定期的にS.M.A.R.T.を監視して、状態がかわると警告してくれる常駐アプリケーションを利用をお勧めします。

CrystalDiskInfo

Crystal Dew Worldで開発、公開されているソフトでBSDライセンスですので、無料で利用できます。いかに紹介する有料ソフトに対して監視のみですが、雫ちゃんバージョンや音声による警告など、無料とは思えない優れものです。

インストールするだけでは、常駐してくれません。ソフトを起動して機能->常駐とスタートアップにチェックすることで、常駐監視となります。

設定した警告温度、代替セクタを増えた場合など警告をしてくれます。

弊社経由でパソコンを購入されたお客さまには、標準でインストールをお勧めしています。

HDD Sentinel PRO

有償ソフトになりますが、HDD/SSDを監視して大事なデータの保全に役立つソフトですし、会社様によってはフリーソフトのご利用は制限されていたりしますので、こちらをご利用も良いかもしれません。監視だけでなく、積極的な診断テストや残り寿命の予測表示などの機能もあります。また、HDD/SSDだけでなくSDカードやUSBメモリなどの診断もできます。

有償らしく、機能が充実していてよりビジュアル的に表示してくれます。

HDD Sentinel PRO ver.5|ダウンロード版

新品価格
¥3,980から
(2018/1/11 09:48時点)

その他にもPC/HDD/SSDに添付されている場合もあるようです。

 

ここで紹介したのは、Windows版ですが、LinuxでもS.M.A.R.T.はサポートされています。

S.M.A.R.T.のサポートはWindowsよりLinuxの方が早かったのですが、残念ながら、ユーザーフレンドリーなアプリケーションはないように思います。サーバーなどでは、以下に紹介するCUIツールで十分なので、GUIツールの必要性が低いからかもしれません。

従来は、smartmontools パッケージをインストールして、コンソールからsmartctl コマンドでS.M.A.R.T.情報を見ていましたが、バリバリのlinux使いを除いてユーザーフレンドリーではありません。常駐監視や警告表示なども可能ですが、GUIではないので万人向けではありません。

GSmartControl(smartctl のフロントエンド)を利用することでGUIでの利用ができるようになりますが、それでも万人向けではありません。

ubuntuでは、標準でディスク管理ソフト(ディスク:⁠gnome-disks)でS.M.A.R.T.情報の確認ができるようですが、詳細は未確認 m(__)m

 

今どきのLinuxの詳細なご紹介はまた今度…..機会があれば

最後に

S.M.A.R.T.も万能ではありません。突然の故障には対応できませんので、日頃からのバックアップは怠らないようにしましょう

セキュリティ上、重要なパスワードの管理、大丈夫ですか?


パスワード管理は、セキュリティの基本

増えすぎたパスワード

インターネット普及に伴い、様々なサービスを利用するのにパスワードは不可欠になっています。

そして、ドンドン増え続けるパスワード….

複雑な(安全度の高い)パスワードの管理は、煩雑でパスワード忘れなどを引き起こし易く、

  • パスワードの使いまわし
  • 特定ルールで生成したパスワードなど単純化

など、個人のセキュリティへの認識の甘さなどもあり、セキュリティ面で甘い状況を作ってしまうケースが発生してしまう。

結果、パスワードが甘いがゆえに乗っ取りされ、悪用されるケースが増えています。

個人情報の流出やクレジット番号の流出などの極めて致命的な事態のニュースも頻繁に聞かれます。

 

そのような中、当然、悪用を避けるために、さらなるパスワード強化が要求され、

  • 定期的なパスワードの変更
  • キーボードハックによるパスワード盗聴を防ぐための仮想キーボード入力
  • 同上の理由でパスワードのペーストの禁止

などの対策がとられることで、さらなるパスワードの煩雑な管理が必要となっています。

(残念ながら、これらの強化は、パスワードの使いまわしや、パスワードの単純化を加速しているように感じている。)

増えすぎたパスワードの管理

安全度の高い複雑なパスワードを記憶して管理することは現実的ではありません。

しかし、複数の目に触れる可能性のある場所にパスワードのメモを貼り付けるなどセキュリティの管理の甘さの典型ですので、絶対にしてはいけません。

では、どうするかですが、最近ではパスワードの代用となる様々な認証手段が登場して、スマートフォンでアカウントの一括管理や二段階認証などありますが、基本的なパスワードの管理は必要となります。

 

個人的なパスワードの管理には、しっかりセキュリティ対策されたパソコン上で、古くから存在(必ずしもではないが、信頼性のパラメータ)し、スタンドアローンで動作するID管理のソフトを使用するのが良いと思います。

例えば、ID Manager

パスワードの暗号化バックアップや、CSVで吐き出す機能もありますので、万が一の場合でも他の管理ソフトへの移行や、デスクトップとノートパソコンでパスワード管理の共有なども容易にできます。

その他にもいろいろとありますが、完全にスタンドアローンの物は少なく、海外製のものがほとんどで、使用には少々ハードルが上がるように思います。

 

企業内でのパスワードの管理は、個人でのパスワード管理と少し事情が違ってきます。

企業を構成する各自がしっかりとした危機管理意識をもって、パスワード管理することで、個人での管理と同様の方法でも管理は可能ですが、退職などの場合に問題が発生する可能性が出てきます。

企業内でのパスワード管理

企業内でパスワード管理する場合、

経営者以外に1人以上の従業員がいれば、どんなに小さな中小企業でも同じく、経営者もしくは、セキュリティ管理者が一括で管理できるようにするのが基本となります。

そこで、ぜひ検討したいのが、

電子証明書認証局として20年以上の実績があり、 SSL証明書のシェア・純増数では国内シェアNo.1のGMOグローバルサインが提供する無料のシングルサインオン SKUID です。

クラウドサービスのパスワード管理がより簡単に安全にできるクラウドサービスです。

SKUID(スクイド)は、Webサービスごとにある複数のログイン情報を”ひとつにおまとめ”できるクラウドサービスです。 ログイン情報をひとつにすることで、ログイン情報の紛失や、複数サービスでのパスワードの使い回しを防げます。
法人利用では、システム管理者が業務で使用するWebサービスのログイン情報をあらかじめ登録すると、 スタッフはSKUIDのIDとパスワードひとつで、複数のWebサービスにログインできるようになります。
SKUIDで登録されたIDとパスワードは、GMOグローバルサインのセキュリティ技術により暗号化しクラウド上の強固なシステムで安全に保存しています。

クラウドサービスの一括管理の基本のシングルサインオンや社員のIDパスワード管理機能は標準で、しかも無料で、登録数も無制限となっています。

現在、提供されているサービスは、2219件もあり、もし利用のサービスがない場合もサポートをリクエストできるようですので、今後もさらなる充実が期待できます。

また、より高度な管理の有料提供なども、今後予定されています。

中小企業の情シス、総務、人事など、会社のパスワードを管理する立場の方や、中小企業の経営者など、会社のリスク管理やセキュリティーについて責任を持っている方は、自社のセキュリティ管理の見直しと合わせて、アクセス管理クラウド SKUID をご検討されると良いかと思います。

 

ご利用開始は、簡単、SKUID から「ご利用を開始する」をクリック

アクセス管理クラウド SKUID

必要事項を入力。

(company IDは英数字と「-」、パスワードは、英数字+記号の安全度の高いものが要求されます。)

登録メールアドレスに確認のメールが届くので、指示通りのURLをクリックすれば登録完了。アカウントでログインすると以下の画面となり各サービス(APP)が登録できるようになります。

無料のシングルサインオン SKUID のサポートアプリの登録

google関連、Microsoft関連、Amazon関連、各種ストレージサービス、などなど、大変充実しています。

 

 

 

久々にRaspberry-piを起動


私事になってしまいますが、事務所兼自宅の電気代が高いので、一番の電気食いと思われるPCの通電時間や消費電力を減らせないかと検討しています。

# 長男が電源入れっぱなしのネットゲームPCを外出中はPower Downしてくれるとそれだけで大きいのですが…..

まずは、私が使用しているPCで節電できるものはないかと検討しています。

多分、私が使用しているPCで一番の電気食いは録画兼観賞用のPC(業務用は未使用時は電源を落としているので除外)で、最近はめっきり録画したものを見なくなったので、キーワード予約を停止して、必要なものだけピンポイントで録画するように変更。そうすると観賞用としてももっと節電タイプで問題ないので、FireTV Stickを観賞用のメインにと考えています。

しかし、やっぱりいじれて観賞にも使える低消費電力のものをお金をかけないで…..いろいろ物色しているうちに以前にお試しで入手して放置していたRaspberry-piを思い出して、久々に電源を入れてみました。

意外に使える感じなので、最新OS/FWにUpgrade

sudo apt-get update
sudo apt-get upgrade
sudo apt-get dist-upgrade
sudo reboot

 それこそ、3,4年前の状態だったと思いますが、upgrade出来ちゃいました。

その後、

sudo apt-get install ttf-kochi-gothic xfonts-intl-japanese xfonts-intl-japanese-big xfonts-kaname
sudo apt-get install uim uim-anthy
sudo apt-get install jfbterm

日本語化を試みたのですが、どうもtmpがあふれたようでうまくできませんでした。

最新のOS環境にはパーティションの設定が不適合だったのかもしれませんので、改めて初めからOS SDを作り直してやってみようと思います。

今度は、

・一度、英語環境で環境構築

・不要な大きなパッケージをpurge

sudo apt-get purge wolfram-engine

・念のためUpgragde(今回は新規にネットワークインストールするので必須ではないと思うが、念のため)

sudo apt-get update
sudo apt-get upgrade
sudo apt-get dist-upgrade
sudo reboot

・日本語フォントをインストール

sudo apt-get install ttf-kochi-gothic xfonts-intl-japanese xfonts-intl-japanese-big xfonts-kaname
sudo apt-get install uim uim-anthy
sudo apt-get install jfbterm
sudo reboot

・改めて日本語に環境設定

sudo raspi-config

CLIでの設定なら以上で旨く行くはずでしたが、最新(2017/11)のNOOBS liteでネットワークインストールする場合にインストール画面の下側に表示される言語設定で日本を選んでおくとほぼ自動的に(Timeゾーン、日本語入力メソッドなど一部設定が別途必要そうですが)日本語表示環境が設定され、最初からGUIで起動しました。ふつうに使う分にはこのGUIで困らなくなっていました。(暫く、放置している間にかなり進化していました。)ただ、さすがに1 coreのRaspberryPi 1では、GUI環境はマルチタスクが必須となるので実用には厳しい感じです。4 coreのRaspberryPi 3なら…..

覚書、万が一クラッシュしたら、以下でpkgを初期化

 sudo dpkg –configure -a’

 

PS.

古い環境は、OpenELECの環境も作っていたのですが、現在は、LibreELECに移行しているようなので、この環境のSDカードを作成して動かしてみました。

LibreELECはメディアサーバーで、RaspberryPi(1core/700MHz/512MB)でもギリギリ実用レベルで動いてくれます。ただ、ファイル総数が数百レベルの我が家のサーバーを開こうとするとファイル一覧の取得に時間がかかってしまいます。これと再生中の画面の切り替えのラグがなければ十分実用になる感じがします。RaspberryPi3(4core/1.2GHz/1GB)で、もっと早いSDカードを使用したらどれだけ快適になるのだろうか、ぜひ試してみたいところです。

さすがにデフォルトでは、CPUパワーが心もとなさを感じたので、Turbo(1Ghz)にOverclockしました。

やり方は簡単!SDカードにある「config.txt」というテキストファイルに以下を追記

arm_freq=1000
core_freq=500
sdram_freq=600
over_voltage=6

ヒートシンクもファンもない状態なら、Overclockはやらない方が無難と思います。やってもover_voltageしない

arm_freq=800
core_freq=300
sdram_freq=400
over_voltage=0

このくらい留めるのが良いかと思います。

(Pi2/Pi3で発熱を抑える低速で動かしたい場合に同じ手法が使えます)

OverClockの結果、ネットワークサーバー上にあるDVDのisoイメージのビデオも気になる引っかかりもなく鑑賞できるレベル(CPU負荷は100%ですが;;)で再生してくれましたが、さすがにヒートシンクを取り付けてあるCPUの温度が56℃くらい(室温23℃)になってしまいましたので、プラスチックケースを改造して冷却ファン(12Vファンを5Vで回しているので風量も少ないですが、まったく無音のレベル)を取り付けました。これでCPUの温度はmaxで46℃、夏場でも計算上70℃を超えないので、ギリギリ常用も可能な状態になりました。

<のちほど写真を掲載予定>

RaspberryPi1でもこれだけ使える感触なら、ちょっと前のマルチコアで低消費電力のAMD E-350やIntel Celeron J1800などを使用した安く(RaspberryPi3の購入と変わらない値段で)手に入るマザーボード/PCで十分でないかと思えてきます。実際、E-350のノートPCで、起動に若干時間がかかるもののWindows10が実用レベルで動作するのを確認しています。

実際の環境をどうするかは、暫く悩むことになりそう

 

最後に

RaspberryPiへの今後是非サポートしてほしい事

  • USB3ポート
  • Giga-LAN
  • microSDのUHS-II対応

これで、単独でデスクトップ、ファイルサーバーとして使用できる最強のボードマイコン?となるでしょう

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


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

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

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

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

写真・素材 類

写真素材 足成
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を連携させましょう!

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

掲載日:
作者別: himeport

構造化データ > 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;
 }
}