AGN Web! - AGN Web! BLOG

Kindle本を読める端末について

先日、弊社で電子書籍を発売しました!

★バスケットボールスピリッツ6号★

Kindle版ですので、アマゾン限定発売です。
発売にあたり誤解が多かったのが、Kindle端末を持っていないと読めないのでは？と言う声でしたが、Kindle本は「専用端末を持っていなくても」読めます。
必要なのは、アマゾンのアカウントだけです。
無料の書籍もマンガや雑誌を含め多数有りますので、この機会に是非
アカウントだけでも作ってみることをオススメします。

Kindle本は、確か最初の頃はリーダー端末を買うしかなかったはずなんですが、いつの間にか、あらゆる環境で読めるようになっていました。試しに手持ちのKindleアプリが用意されている端末すべてに入れてみました。↓こうなります。

kindlebook02 — 後ろ、PC、手前左から、iPad mini / Xperia Z ultra / Xperia Z3 /Kindle Fire HD

今後、電子書籍の読み方、のようなコンテンツを作るかもしれないので、現状のKindleアプリの守備範囲を調べてみました。
（2015年11月15日現在の情報です。）

先に簡単に利用までの流れを説明しますと、
利用開始までには、
1．アマゾンでアカウントを作る。
2．アプリをインストールして、アカウントを登録する。
3．Amazonのサイトかアプリから書籍を購入。
4．読む！
と言った手続き、設定が必要になります。

★はじめにアマゾンのアカウント

どの端末で読むにしても、アマゾンのアカウントは必須です。
こちらから作っておきます。もちろん無料です。
www.amazon.co.jp/login2
引き続き、電子書籍を購入するのですが、とりあえず試してみたいだけなら、
無料本を購入（と言うのも変な表現ですが、）しておきましょう。
買った本は、下記で紹介する、各リーダー（Kindleアプリ）で読むことが出来ます。

★パソコンで読む

○大画面で快適読書。
×最近のPCは横長ワイドが基本なので縦長のコンテンツは読みにくいかもしれない。
パソコンソフトKindle for PC　を使えば、Windows PC上でKindle書籍が読めます！
PCの大画面で読めることは最大のメリットです。
下記リンクからダウンロードしてインストールするだけ。後は、先ほど作ったアカウントでログインします。
Mac版やブラウザ版もあります。ブラウザ版ならインストールも不要です。
kindle for PC
http://www.amazon.co.jp/gp/feature.html/?ie=UTF8&docId=3078592246
kindle for Mac
http://www.amazon.co.jp/gp/feature.html?docId=3077089416
Kindle cloud reader
https://read.amazon.co.jp/

★Androidで読む

○アプリ内で購入まで出来、専用端末と大差ない操作感。
×端末によってばらつきが大きいので、液晶の品質によっては読みにくいかも。
Android系のスマホ＆タブレットでそれぞれ無料のKindleアプリが出ています。
アマゾンのアカウントでログインすれば、いつでも電子書籍が読めます。
もちろん画面の大きなタブレットの方が読みやすいですが、テキスト主体の書籍なら、
スマホでも本によっては十分実用的です。最近は画面も大きいですしね。
Androidではアプリ内で書籍の購入もできるので、さらにお手軽です。
雑誌は片面ずつ、拡大して読むスタイルになります。
Google Play
https://play.google.com/store/apps/details?id=com.amazon.kindle&hl=ja

★iOS（iPhone,iPad）で読む

○美しいレティナディスプレイで読書
×書籍の購入はブラウザから
iPhone&iPadでももちろんアプリが出ていますので、Android同様読めます。
Androidと違ってアプリ内でストア機能は使えません。書籍はsafariなどのブラウザを通して購入することになります。
ちょっと不便です。こちらもタブレットのiPadの方が読みやすいですが、retinaディスプレイもあって、iphoneも実用的ですね。iphone6 plusなどは大きさと重さのバランスが良く、電子書籍に向いていると思います。
apple app store
https://itunes.apple.com/jp/app/kindle-ben-dian-zi-shu-ji/id302584613?mt=8

★書籍を買う

kindlebook03

アプリの準備ができたら、とりあえず、無料本でも何でもいいので、買ってみましょう。
カードでの支払設定が済んでいると、クリックひとつで購入になりますので、気をつけて下さい。
購入時にどの端末にダウンロードするかを選べますが、後から別の端末でダウンロードもできるので、大丈夫です。

★どれがいいのか。

個人的には上記に上げた全ての端末に加えkindle fire HDも使っていますが、単純に画面が大きいほど読みやすいです。（当たり前です。）
ただ画面が大きいと、端末が重く手が疲れるという別の問題が出てきます。じゃあPCがいいのかというと、書籍はやはり板状のものを手にとって眺める方が見やすいのです。
どれも一長一短有るので、使い勝手は実際に使って頂くしか有りませんが、あえてお薦めするなら、7～8インチ以上のタブレット端末です。

弊社で発売したような固定レイアウト型の雑誌なら、高解像度カラーのタブレット端末がやはり読みやすいです。コンパクトな7インチ（NEXUS7クラス）、8インチ（iPad miniクラス）サイズでも十分実用的でしょう。5インチクラスのスマホだと、拡大すれば問題なく読めますが、雑誌のように眺める読み方にはやや不向きです。（個人的に出たばかりのiPad Proで見るとどうなるか、興味あります。見開きでいけるのか？）

また、Kindle各アプリは複数端末で読んだ箇所を同期できます。日中スマホで読んだ書籍の続きを夜に自宅のタブレットで読むと言うこともできますので、複数台あっても便利に使えます。

とりあえず、アカウントは無料ですので、手持ちの端末にKindleアプリを入れて頂き、無料本を楽しんでみてください。
そしてバスケットに興味があれば、弊社発行のバスケットボールスピリッツを是非ご購読ください。書籍の方もアマゾンで買えます。

★Kindle無料本
http://www.amazon.co.jp/s/ref=amb_link_68378709_10?ie=UTF8&field-price=0-0&rh=i%3Adigital-text%2Cn%3A2250738051&pf_rd_m=AN1VRQENFRJN5&pf_rd_s=merchandised-search-1&pf_rd_r=1XM4W40TRS423965C3DG&pf_rd_t=101&pf_rd_p=205067909&pf_rd_i=2275256051

★バスケットボールスピリッツ
https://www.amazon.co.jp/s/ref=sr_nr_i_2?rh=k%3A%E3%83%90%E3%82%B9%E3%82%B1%E3%83%83%E3%83%88%E3%83%9C%E3%83%BC%E3%83%AB%E3%82%B9%E3%83%94%E3%83%AA%E3%83%83%E3%83%84%2Ci%3Adigital-text&keywords=%E3%83%90%E3%82%B9%E3%82%B1%E3%83%83%E3%83%88%E3%83%9C%E3%83%BC%E3%83%AB%E3%82%B9%E3%83%94%E3%83%AA%E3%83%83%E3%83%84&ie=UTF8&qid=1447583383

そして…12月には最新7号がでます！（なにげに告知）

LINE@でポイントが貯められるショップカードが登場

2015/10/22よりLINE@でデジタルポイントカードが無料で発行できる機能
「LINEショップカード」の提供が始まりました。
LINE@アカウントを持っている店舗でポイントカードを発行し、
QRコードを読み取るとポイントが貯まるシステムです。

今回は、ショップカードの開設の方法をまとめました。

前提条件

●LINE@アカウントを開設している。
●LINE@管理アプリをインストールしている。
※LINE@管理アプリはApp StoreかGoogle Playからダウンロードしてください。

ショップカードの作成

LINE@管理アプリより起動します。

メニューの中に「ショップカード」がありますのでタップします。

① デザイン
10種類の既存デザインの中から1つを選択します。
※オリジナルデザインには対応していません。

② ゴールまでのポイント数
カードのポイント上限を1～50の間で設定できます。

③ゴール特典
ポイントが全て貯まった際の特典サービスを設定します。
※特典チケットの作成

④追加特典
ポイント集めの途中の段階の特典サービスを設定します。
例えばゴールが10ポイントだが、5ポイント貯まったときにも特典を追加したい。

⑤ 有効期限
ショップカードの有効期限を設定します
・最終利用日から○年○ヶ月
・初回利用日から○年○ヶ月
・無期限

⑥有効期限前通知
有効期限が近づいた際にお客様にお知らせをする設定をします
下記の中から選択します。
・有効期限の前日
・有効期限から3日前
・有効期限から1週間前
・有効期限から2週間前
・有効期限から3週間前
・有効期限から1ヶ月前
・通知しない

⑦初回ボーナスポイント
お客様がショップカードを取得した時点で
ポイントを付与する場合に設定します。

⑧不正防止設定
・同日中に同一アカウントへの付与を許可しない
└お客様は1日1回しかポイントを取得することができません
・設定時間以内に同一アカウントへの付与を許可しない
└お客様は設定された時間が経過しないとポイントを
再取得することができません

⑨ご利用案内文
利用ルールを設定します。

⑩リッチメニューの表示
お店のトーク画面の下部にショップカードの告知の表示設定。

⑪ポイント付与画面設定
店舗側でお客様にポイント付与を行う際の画面の設定を行います。

⑫ランクアップカードを設定
ポイントが貯まった方向けの次のレベルのカードを作成することができます。

⑬サービス公開
設定が終わった段階でサービスの公開します。

特典チケットの作成

特典チケットとは簡単に言うとクーポンです。
ポイントを貯めたお客様へのサービス内容を設定します。

③ゴール特典をタップします。

特典チケットを作成するをタップします。

A.チケットタイトル
特典のタイトル（サービス内容）を設定します。

B.注意事項
チケット利用に関するサービス内容詳細や注意事項を設定します。

C.有効期限
チケットの有効期限を設定します。

D.写真
特典のイメージとなる写真をアップロードできます。

E.背景
デザインを既存3種類の中から選択します。

F.プレビューを確認
作成した内容を確認します。

特典は複数用意できますので、追加特典などに使用できます。

基本設定と特典設定が終わればサービスの公開ができます。
公開するとショップページに「ショップカード」が追加されます。

ポイント付与のQRコード

お客様に店舗で用意したQRコードを読み取ってもらうことで
ポイントを付与します。
店舗で用意するQRコードはスマートフォンに表示させるものと
印刷して用意するものと2種類があります。

実際に使うこと考えれば、印刷して使うことが多いと思いますので、
印刷データの作成方法を説明します。

LINE@管理アプリより起動します。

「ショップカード」をタップします。

QRコード印刷をタップします。

・読み取った際に付与するポイント数
1～9ポイントの間で設定

・QRコードの有効期間を設定
ここで設定した期間を過ぎるとQRコードが使用できません。

・ユーザー位置情報を設定
ここを設定すると設定地点から500m以内でQRコードを
読み取られた時のみ、ポイントが付与されるようになります。

・連続でのポイント取得制限
ここを設定すると一定の日や時間内での連続してのポイント付与を制限できます。

・メールアドレスを入力し、「送信」を押すと、指定されたメールアドレス宛に
「横型2種類」「縦型」の3種類のデザインで印刷できる
QRコード読み取り用紙のダウンロードURLが送られます。

・ダウンロードしたデータを印刷して使います。

ショップカードの取り下げ

LINE@管理アプリよりショップカードの取り下げが行えますが、
ポイント有効期限などの設定をする必要があります。
既存ポイントが終わるまで新たにショップカードを追加することができませんので、
取り下げの際は、慎重におこなってください。

突然「Chromeユーザーの皆様本日のラッキーな訪問者はあなたです。」と言われた…

昨日(2015/11/05)Google Chromeで、あるURLを直打ちしてアクセスしたところ、
「Chromeユーザーの皆様本日のラッキーな訪問者はあなたです。」
って言われました！(下記画像)

「わーい、俺ってばラッキー!!」と思うこともなく。

だって怪しすぎるでしょう。

「本日の」「ラッキーな」「感謝の印として」などなど、怪しげな言葉が並びます。

表示されているURLも、こちらが入力したURLとは違うところに行かされてますし、GoogleのURLでもないですね。

さすがに嫌なので、ここから先には進みませんでしたが、調べてみると結構話題になっていたんですね。IEやFirefox、Youtubeなんかのバージョンもあるようですね。

君子危うきに近寄らず。不用意にメールアドレスやパスワード、カード番号なんか入力しないようにしましょう。自分が君子だったかどうかはさておき。

参考

詐欺？？「2015年年次訪問者調査の参加者に特別に選ばれました！」の画面が急に出てくる現象

調べると結構出てきます。。。

Twitterの投票機能を早速つかってみました！

こんにちは。秋バージョンのバナーを作っているうちに冬みたいな寒さになってやられているyasaiです。

前書き
Twitterの投票機能
実際にやってみた

※無駄に前振り長いので、メニューつけます。

寒くなってくると、温かい飲物が恋しくなりますね♪
万年コーヒー中毒みたいな僕はコーンポタージュも大好きです。

できることなら、コーンポタージュの海に飛び込んでみたい。押し寄せるコーンの荒波をくぐり抜け、より大きな海の男になって帰ってきたい！

・・・言ってることがよくわかりませんが。

そんなこんなで自販機でかった缶のコーンポタージュを見つめながら、思ったのです。

「大きな缶のコーンポタージュがあったらいいのに！」
そしたら世の中きっと幸せになるに違いない!!

わかっています。コーンポタージュはあのサイズだからおいしいんですよね・・・
名残惜しい感じが、奥ゆかしいんですよね・・・でも・・・

そんな中、チームの中から天の声が聞こえたのです。

「Twitterの投票で聞いてみたらいいじゃん」

というわけで、Twitterの新機能「投票機能」をつかってみたお話です。

Twitterの投票機能

これから数日の間に、Twitterの上で簡単な投票ができる機能が追加されます。ツイート作成画面でこの機能のアイコンが見えたら、お試しください。 https://t.co/BpnsRHTeI7 pic.twitter.com/QQiTX6xCzU

— TwitterJP (@TwitterJP) 2015, 10月 21

こちらがTwitterのツイッターでのツイートです。公式のブログ記事はこちら。 2択のアンケートを入れたツイートを発信でき、それを見た人は、そのアンケートに答えることができて、その結果がパーセンテージでリアルタイムに評価される機能みたいです。

実際にやってみた

アンケートを作る

ツイートを作る画面に「投票」のボタン（■1）が追加されていますね。こちらをクリックすると、いつものツイートエリアの下に2択の選択肢を入力するところが表示されます(※現在は任意で4択まで増やせるようです。(2015.11.27追記))。いつものツイートエリア（■2）にアンケートや質問を入力し、選択肢部分（■3 ）に選択肢を入力し、「ツイート」ボタンをクリック！さぁいってこい!!

投票してみる

実際に流れるツイートはこんな感じです。この画面を見ると、「投票数」と「〆切り時間」がわかるみたいです。流れて来たツイートに投票するには、自分の思った方にチェック(緑のチェックマークがつきます)して、「投票」ボタンをクリック。タイムライン上でできるので、身構えずに気軽にポチッとしてしまいそうですね。

結果発表

世紀の結果発表です！みんな大きな缶でコーンポタージュ飲みたくないのか!?

大きな缶のコーンポタージュがあったらいいと思いませんか?? ※通常自販機サイズ：190g 大きい缶→350ml缶、500ml缶、1L缶みたいな #大きな缶のコーンポタージュ — AGN Webチーム (@agn_web) 2015, 10月 30

80％対20％で、「みんな大きな缶でコーンポタージュ」が飲みたい!!

やったね、それはそうでしょう！

最終投票数5票ですけどね。ほとんど身内ですけどね。
これなら、チャットワークでもメールでも聞けましたけどね・・・

やってみて思ったこと・わかったこと

今回はちょっぴりしょんぼりな結果になってしまいましたが、今回のまとめです。

条件

投票は24時間有効
~~選択肢は2択~~
※現在は任意で4択まで増やせるようです。(2015.11.27追記)
投票は無記名（誰がどちらに入れたかはわからない）

感想

タイムライン上で流れるので、質問する側もされる側も心理的な障壁が低く、答えやすい。
自分の答えがすぐに反映されるので、投票した側に「参加した」感がある。
タイムライン上で流れてしまうので、うまくリツイートしてもらえないと、誰の目にも止まらずに終わる。
フォロワー数が多い、フォロワーと普段からコミュニケーションが取れているといったアカウントではリアクションがとりやすいかもしれない。
文章だけで質問がわかりにくい場合は画像も添付したら良かったかも。
商品の紹介やアンケート、クイズなどにも使えそう！コミュニケーションツールとしてよいかもですね。

検索してみると、他にもいろいろな使い方されているみたいですね。
今後どのような使い方されていくか要チェックです！

AGN WebチームではTwitterやってます。良かったらフォローしてくださいね♪

ついでにこっそりFacebookページもあります。こちらもよかったらどうぞ。

大きい缶のコーンポタージュあったら、嬉しいと思うんだけどなぁ・・・

より手軽にオリジナルグッズが作れる！Canvathを使ってみました。

在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめ

オリジナルグッズ作成サービスのご紹介。
今回は、Canvath　https://www.canvath.jp/を実際に使ってみました。

こちらはすでにネットショップをもっている方向けのサービス。

デザインを決めたら、自身の運営するショップサイトに掲載。
注文があったらCanvathに発注し、直接注文者へ商品を発送をしてもらうシステムです。

ちなみにネットショップサービスのBASEと連携が可能です。
詳しくはこちら

※ご利用の際はサイトの規約などをご確認ください。
※2015/10/31現在の情報です。

続きを読むより手軽にオリジナルグッズが作れる！Canvathを使ってみました。

「CSSフレームワーク FOX CSS」に触れてみた

こんにちは、yasaiです。

今年の新潟は例年以上に秋を通り過ぎて冬が来ちゃいそうです。。。
寒いのは苦手なのです。(暑いのもダメだけども)

【DEMO】

今月は当ブログのネタはなんにしようかしら、今日の夕飯はなんにしようかしらと悩んでまして、夕飯を大根ときのこの味噌汁にすることは決めたすぐ決まったのですが、何を書くかはさっぱり。
アウトプットって難しい。。。

そんな中coliss様の記事で触ってみたいものを発見したので、今日はそちらを。
そちらの記事はこちら。

「IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS」

「FOX CSS」に触れてみましたよ、というお話です。

普段使っているフレームワーク

普段制作するときははだいたい「RESPONSIVE GRID SYSTEM」とプラスアルファ自分で使いやすくカスタマイズを追加したものを使っています。

もちろん「Bootstrap」系のものにも興味はおおありなのですが、グリッドシステムを使ったレイアウトさえあればOKということが多く、「RESPONSIVE GRID SYSTEM」の24カラムバージョンを多用しています。こちらはデザイナーさんとも話したうえで使っています。

はじめて触ったときはbox-sizing: border-box;の威力に感動してた頃です。

FOX CSSを触ってみようと思ったわけ

軽量フレームワークであること
レイアウトだけのフレームワークであること
モバイルファーストな仕様で、「RESPONSIVE GRID SYSTEM」のように使えそうなこと
flexboxを使っていること
IE9+で対応しているらしいこと
個別のsassファイルで切り分けられ、クラス名が他と重複しづらく他のcssへ干渉しないこと

flexboxを使ったレイアウトが今後主流になるのかなぁという感じですが、実案件ではIEへの対応(IE10ではベンダープレフィックス付き、IE9以下は非対応)や仕様変更が多くちょっと使うのが怖かったこともあって、使うのを少し敬遠してたところがあったのです。←~~ただの勉強不足のいいわけ~~

そんなときにcoliss様の記事を見て、IE9+なら良さそうだぞ！、ということでやる気になったのでした。

試しにざっくりやってみた

【DEMO】

ドキュメントを見ながら写真おいて、テキスト入れて。

基本的な使い方は自分の使いたい奴のクラスをどんどんつけていくパターンです。

float+絶対配置やdisplay：table-cell;を使ったレイアウトの良いとこどりな感じで、
flexboxを使ったレイアウトで、特徴的なのが「コンテンツを天地のセンター合わせ」と「コンテンツの並びをリバースできる」ってところですよね。

特に可変する高さの「コンテンツの天地のセンター合わせ」に関してはCSS挫折の一つの要素だったんじゃないかと思っているので、flexboxが敷居を下げる一つのきっかけになったらいいな、と思っているのです。

コンテンツの天地のセンター合わせ

<div class="fx-row">
    <div class="fx-col-100-xs fx-col-25-s fx-col-top-s">
        <img src="images/01.jpg" alt="">
    </div>
    <div class="fx-col-100-xs fx-col-25-s fx-col-center-s">
        <h2>近所の漁港</h2>
        <p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。</p>
    </div>
    <div class="fx-col-100-xs fx-col-25-s fx-top-top-s">
        <img src="images/02.jpg" alt="">
    </div>
    <div class="fx-col-100-xs fx-col-25-s fx-col-center-s">
        <h2>日本海の夕日</h2>
        <p>無理矢理ボックスを天地のセンターにしたので変ですが。。。</p>
    </div>
</div>

</div>

<h2>近所の漁港</h2>

<p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。</p>

</div>

</div>

<h2>日本海の夕日</h2>

<p>無理矢理ボックスを天地のセンターにしたので変ですが。。。</p>

</div>

.fx-rowで行を指定し、その中に.fx-col-00-xでボックスを作ります。00の部分は比率になってます。（デフォルトでは10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100）
また。xの部分はメディアクエリの切り替えのポイントです。(デフォルトではxs、s: 768、m: 940、l: 1200)

画像のボックスは.fx-top-center-xで上付きに、テキストは行に対して.fx-col-center-xを指定して「コンテンツの天地のセンター」にしています。

flexbox使って「コンテンツの天地のセンター合わせ」をやりたいがためにこんなコードですが、ここに関してはこうじゃなくてもできましたね(苦笑)

コンテンツの並びをリバース

<section>
    <h1>Item Center</h1>
    <div class="fx-row fx-row-center-s">
        <div class="fx-col fx-col-100-xs fx-col-40-s">
            <h2>晴れた雪の日</h2>
            <p>このボックスでは「文章」40％、「画像」30％を、センターにして配置しています。</p>
        </div>
        <div class="fx-col fx-col-100-xs fx-col-30-s"><img src="images/07.jpg" alt=""></div>
    </div>
</section>

<section>
    <h1>Item Revers and Center</h1>
    <div class="fx-row fx-row-center-s fx-row-reverse-s">
        <div class="fx-col fx-col-100-xs fx-col-40-s">
            <h2>雪の日の空</h2>
            <p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。
</p>
        </div>
        <div class="fx-col fx-col-100-xs fx-col-30-s"><img src="images/08.jpg" alt=""></div>
    </div>
</section>

<h1>Item Center</h1>

<h2>晴れた雪の日</h2>

<p>このボックスでは「文章」40％、「画像」30％を、センターにして配置しています。</p>

</div>

</div>

</section>

<h1>Item Revers and Center</h1>

<h2>雪の日の空</h2>

<p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。

</p>

</div>

</div>

</section>

上のセクションが普通の順番「テキスト+画像」、下のセクションが逆順に「画像+テキスト」になります。

違いは下のセクションでは.fx-rowに対して.fx-row-reverse-xを指定しているところですね。同じ内容で見た目だけ違うだけなので、html的には同じ並びになっていてコードの可読性が高くなりますね。

あと、このセクションでは.fx-rowに対して.fx-row-center-xを指定しています。これは中のボックスのトータルの水平の配置の仕方です。

.fx-row-start-x　：左寄せ

.fx-row-center-x　：中央寄せ

.fx-row-end-x　：右寄せ

.fx-row-between-x　：均等割り(端から端まで)

.fx-row-around-x　：均等割り

.fx-row-between-xと.fx-row-around-xの違いを言葉で説明できないので、こちらはドキュメントで確認してください。

FOX CSSでDEMO作ってみて思ったこと

使い方は簡単に覚えていけそうです。
基本的にはクラスを付与していくだけなので、どのクラスがどのようになっているのかさえ覚えてしまえば、どんどん組んでいけます。

FOX CSSにはリセット関係があらかじめ入っています。この辺りは、sassフォルダの中に分けて入っていたので、自分の制作環境に合わせて使えそうです。
また、メディアクエリの切り替えのポイントなども「variables.scss」の中で定義しているので、こちらを編集したらOKそうです。
scssファイルが同梱されているっていうのは、個人的に高感度ポイント高いです！

気をつけなくてはならない点は、このフレームワークを使ってもflexboxの使い方(書き方)は覚えないですね、当たり前なんですけど。flexboxを使ったレイアウトの感触をつかむのにはとてもいいんだと思います。

後は社内的な問題ですが、gridの割り方がこれまで使っていた「RESPONSIVE GRID SYSTEM」とはちょっと違うので、FOX CSSを使う際にはまたデザイナーさん(ディレクターにも)と打ち合わせてお互いに何となくわかった状態で進めたほうがスピードアップにつながりそうですね。

もう少し自分で試してみて、習得できそうなら「RESPONSIVE GRID SYSTEM」と「FOX CSS」を案件に応じて使い分けていってもいいなぁと思っています。

ちょっと初めのさわりだけで、全然突っ込んだところがないんですが、今回は触ってみた感想ということで。

参考にさせていただいたcoliss様、ありがとうございました!!

WordPressに便利なソース。

私がWordPressで構築する際に追加している
便利なソースをまとめてみました。

funtions.phpに記述する便利なソース

【固定ページ内の画像URLを簡単にする】
固定ページ内で画像を使う際に『get_bloginfo(‘template_directory’)』をイチイチ付けるのは面倒なので
サンプルでは『image/』が付いたらテンプレートまでのURLを付加します。

function replaceImagePath($arg) {
	$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
	return $content;
}  
add_action('the_content', 'replaceImagePath');

function replaceImagePath($arg) {

$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);

return $content;

}

add_action('the_content', 'replaceImagePath');

【カスタム投稿一覧でカテゴリでも絞り込みしたい】
投稿一覧ではカテゴリでの絞り込みはできますが
どう言う訳かカスタム投稿では絞り込みが用意されていません。
もっとも設定自体がユーザー次第なので付けようがないとは思いますが
カスタム投稿でも投稿数が増えると必要になってきます。
サンプルでは
《　カスタム投稿名:list　／　分類名：cate　》
で記述しています。

add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' );
function add_post_taxonomy_restrict_filter() {
    global $post_type;
    if ( 'list〔カスタム投稿名〕' == $post_type ) {
        ?>
        <select name="cate〔分類名〕">
            <option value="">カテゴリー指定なし</option>
            <?php
            $terms = get_terms('cate〔分類名〕');
            foreach ($terms as $term) { ?>
                <option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
            <?php } ?>
        </select>
        <?php
    }
}

add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' );

function add_post_taxonomy_restrict_filter() {

global $post_type;

if ( 'list〔カスタム投稿名〕' == $post_type ) {

<option value="">カテゴリー指定なし</option>

<?php

$terms = get_terms('cate〔分類名〕');

foreach ($terms as $term) { ?>

<?php } ?>

</select>

<?php

}

【固定ページ内でPHPを使いたい⇒ショートコード対応】
今更なんですが、ショートコードの記述が理解しきれていませんでした…
基本的な部分は分かっていましたが…難しく考えすぎていたようです。
そんな同類の方に向けて、一番分かりやすい物を…

function indexft() {
    return "<a href='" . get_bloginfo('url') . "'>トップ</a>";
}
add_shortcode('idxfc〔ショートコード〕', 'indexft〔関数名〕');

function indexft() {

return "<a href='" . get_bloginfo('url') . "'>トップ</a>";

}

add_shortcode('idxfc〔ショートコード〕', 'indexft〔関数名〕');

《indexft()》が関数になります。
“return”内で返す内容を用意。今回は、トップへ戻るリンク『トップ』が表示されます。
固定ページ、または投稿ページに《[idxfc]》と言うショートコードがあったら、ソコに『トップ』が表示されます。

テンプレートPHPに記述する便利なソース

【一定日数内の記事に”NEW”を付けたい】
ページ内で新着情報などの一覧表示部分で一定の期間だけ”NEW”マークを付けたい。
マークを付けたい部分に下記のソースを原だけでOK。
『echo』で吐き出しますので、画像でもタグ付でも

<?php
$days = 7; //表示する日数。これは公開日から7日。
$today = date_i18n('U');
$entryday = get_the_time('U');
$kijiday = date('U',($today - $entryday)) / 86400 ;
if( $days > $kijiday ){
echo 'NEW';
}
?>

<?php

$days = 7; //表示する日数。これは公開日から7日。

$today = date_i18n('U');

$entryday = get_the_time('U');

$kijiday = date('U',($today - $entryday)) / 86400 ;

if( $days > $kijiday ){

echo 'NEW';

}

見せるページと見せないページを会員権限で簡単に分けるプラグイン

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。

先日、会員制サイトをWordpressで構築しました。

その際、コンテンツの閲覧を会員の権限によって分ける必要があったので、いろんなプラグインを試しましたが、最終的に採用したものをご紹介します。

類似のプラグインは多々あるのですが、日本語で設定できること、クライアント側でも簡単に設定できることを重視して今回は、 WordPress Access Controlを導入しました。

導入は、プラグインページ→新規登録で入れられます。

日本語化ファイルは検索したところ複数あったのですが、一番新しそうな、こちらで配布されているものを利用させていただきました。

→http://www.jetbaby.net/wordpress/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E5%88%B6%E9%99%90%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8Cwordpress-access-control%E3%80%8D%E3%81%AE%E6%97%A5%E6%9C%AC

（リンク先があれば、この記事いらない気がしますが。）

導入後、プラグインを有効にすると、設定→Members Onlyから、サイト全体の設定ができるのですが、今回は使いませんでした。

各投稿ページの右上に公開範囲を決める選択肢が現れます。

ここで、ユーザーの権限に合わせて見せる範囲を決めていきます。
追加された権限などにも対応します。

投稿時に、「このページを誰に見せるか」をチェック一つで選べるので、クライアント側での作業も簡単です。

非表示のページは、メニューからも消え、対象外の人には、ページの存在自体がわからなくなります。逆に、非会員のみに見せるページを作ることも可能です。（入会のご案内など）

また、この設定は投稿だけでなく、固定ページでも有効です。

これにWordpressのユーザー管理を組み合わせると、シンプルな会員制サイトのできあがりです。コンテンツ閲覧型のサイトならこれで十分機能します。

制作事例　社会福祉法人わかば福祉会様

新発田市を中心に幼稚園と保育園を展開している法人様です。
2015年7月1日にオープンした新しい保育園です。

公開　2015年10月15日
URL　http://www.wakaba-net.ed.jp/mebae/
●制作内容
・わかば福祉会としてのデザインの統一
・CMSの導入

Mac OS X El Capitan（OS10.11 エル・キャピタン）のMail設定　

2015年9月30日にリリースされたOS X El Capitan（OS10.11 エル・キャピタン）の
標準Mailで、今までのPOP形式の設定ではサーバー認証できない事象が起きました。
この記事は2015/10/03時点の記事です。

OS10.11にアップグレードする際に、
標準Mailも合わせてバージョンアップします。

バージョンアップ後にMailを開くと、
受信エラーが起きます。
内容は、POP形式の設定でサーバー認証できないということでした。
●認証状況
サーバー上のログを確認したところ、
POP認証のパスワードがブランク状態で送信されているため認証できない。
●対処方法
アカウントの詳細の「アカウント設定を自動的に検出して管理」のチェックを外す。

上記の対処法でPOP形式でサーバー認証が通りました。

既存のアカウントの受信用メールサーバーのパスワードの再入力や
アカウントの再登録などを行いましたが状況は全く変わらず。
「アカウント設定を自動的に検出して管理」のチェックを外すことで回避することができました。

今後のバージョンアップやご使用のサーバー状況で変わる可能性がありますが、
POP形式のサーバー認証エラーの場合は、参考にしてみてください。