STAFFBLOG スタッフブログ

WPのJetpackでFacebookと共有すると全文表示される!?

2015/06/25
閲覧所要時間:約1

こんにちはゾエです。
僕のブログでは「Jetpack」というWordpressのプラグインを導入しています。
これはブログの記事を書いたら「FacebookやTwitterなどのSNSと連携して自動で投稿してくれる便利な機能」なのですが、いつの頃からかFacebookへの投稿が記事の全文を投稿するようになってしまいました。というか、会社のブログも全文投稿されてるッッ!?


01

本来なら”記事のタイトル”を表示して投稿してくれるものですが、記事の全文が投稿されてしまうと長ったらしくて不快ですね。これでは「いいね!」や「シェア」もされにくくなってしまいます XP


この問題を解決する方法は?

Jetpackをやめて手動で投稿する

一番確実なのはこれだと思いますが、ブログを書く度に幾つものSNSへ手動で投稿するのは少し面倒ですね。


投稿する際に「詳細を編集」をクリックする

02

ブログ記事を公開する際に、「詳細を編集」をクリックして「カスタムメッセージ」が表示されている状態で公開すると正常に動作するようです。
あくまでも応急処置になりますが、お試しあれ〜。

みなさん、はじめまして。

sawamichio
2015/06/25
閲覧所要時間:約2

blog_sonoda_01

みなさん、はじめまして。
先週入社したばかりの新人(中年)デザイナーのソノダです。
FVSメンバーの中で唯一県外(大牟田)からはるばる熊本まで通勤しています。
高校時代以来の毎朝の電車通勤に懐かしさと共に、同乗してくる若い学生を見ては
「年とったな〜」と日に日に実感している今日この頃です。

自己紹介

福岡県大牟田市出身の36歳。
噂では平均年齢28歳のFVSでは最年長になります。
趣味は→ 絵画、ギター、写真、DTM、ガンプラ、Macでゴソゴソ。

小さい頃から両親とも共働きだったこともあり一人の時間が多く、
暇があれば1日中絵を描いて過ごしてました。
そしてそのまま大学油絵科へ進み、絵も沢山描きましたが、
ギターばかり弾いていたような気がします。
属性は夜で、根っからのインドア派ですがアウトドアに転向したく今脳内覚醒を実行中です。

20代は美術を、そして30代でWEBデザイナーへ

10代後半から20代のすべてを美術とギターに注ぎました。
注ぎすぎてお金がついてこず、公園で寝泊まりすることもしばしば。

WEBデザイナーになったきっかけは自分でもよくわかりませんが
ギターなども最初はなんとなく弾き始めるように、
Macをなんとなく触り出して今にいたるような気がします。

そしてフロンティアビジョンへ

たまたまとある求職サイトにエントリーしてたポートフォリオが渡邉社長の目にとまり
光栄にもお声がけをいただき入社する事となりました。

まだ入社して間もないのですが、
会社の快適で綺麗なオフィスにすっかりリラックスしてます。
Macがずらりと並んでいるのもMac好きにとってはたまりません。

ただ毎日同じミュージックが流れるので休みの日も
会社で聞いている音楽が頭から離れませんが。。。

「HAPPYをつなぐ」という会社のスローガンのもと
質のいいウェブサイト通してお客様や社会に貢献できるよう
日々努力していきたいと思っています。

自分の誕生花を知って話に花を咲かせよう!

yabushita
2015/06/18
閲覧所要時間:約3

こんにちは!ヤブシタです!
最近だんだんと暑くなってきましたが、いかがお過ごしでしょうか?

私はというと、家に咲いているアジサイがモノ凄く綺麗で見惚れています(笑)
我が家のアジサイがコチラ↓
DSC_0016きれいですね〜〜(ウットリ中)

ちなみにアジサイの花言葉は


「移り気」「高慢」「辛抱強い愛情」「元気な女性」「あなたは美しいが冷淡だ」「無情」「浮気」「自慢家」「変節」「あなたは冷たい」

出典:花言葉辞典

だそうです…なんだかクールですね。。。だからあんなに雨に打たれても大丈夫なのか。。。

誕生花とは!?

そういえば、『誕生花』というものをご存知ですか?


誕生花(たんじょうか)は、生まれた月日にちなんだ花のこと。誕生花そのものの概念・起源や、誰が決定しているのか等その由来は国や地域によって諸説分かれる。

出典:Wikipedia

やっぱり自分の誕生日がどんな花か気になりますよね??
ということで今回は誕生花が掲載されているサイトを紹介します!!

スクリーンショット 2015-06-17 10.24.00
誕生花と花言葉
http://www.birthdaycolors.jp/flowers/


366日(閏年も含む)の誕生花と花言葉が一覧で載っています!
色々な色がありますね〜
じんせい〜色色っ \いろいろっ!/  ですね〜!!!(ちっともうまくない…)

いざ!私の誕生花は?

さぁ早速、自分の誕生日の花を探したいと思います。
私は11月7日生まれなので、下の方まで一気にとばします。。。

スクリーンショット 2015-06-17 10.48.19のコピー

ありました!なんだかオレンジ色をしていますね!

タ、タンジー???なんか歴史上の偉人に似たような名前の人がいましたね…
ま、それは置いといてタンジーがどんな花なのかというと…

ジャン!!
herb44_1
高橋園芸株式会社
http://www.takahashi-engei.co.jp/modules/tinyd3/index.php?id=50


シンプルですね〜!
タンジーはキク科のお花だそうです!

そして花言葉は

「抵抗」

なんだか誕生花の花言葉が「抵抗」だなんて、一生反抗してるみたいでヤですね…(笑)
もうちょっと可愛らしいものが良かった…(泣)

最後に


みなさんはどんな花でしたか?
自分の誕生花を知り、話に花を咲かせましょう!(ちっともうまくない…Part2&ややこじつけ)

※サイトによって内容が異なっていたので、会話の一つとして楽しみましょう!
そして、自分が一番素敵だと思う花を自分の誕生花にしましょう!(勝手)

プレゼントなどで相手の誕生花を贈るなんてのも粋でいいですね〜!
花の時期と誕生日が合わない時は、その花の色の小物なんかでも良さそうですね♪

ちなみに、私はタンジーをプレゼントされたら「抵抗」します(笑)(ちっともうまくない…Part3)

それでは、ごきげんよう さようなら〜〜!!!!!

デスクワークでお腹がボヨンなアナタに

kawaguchi
2015/06/15
閲覧所要時間:約3

あなた、運動できていませんよね?

どうも、最近お腹がでてきた川口です。(前からです)

最近は梅雨に入りムシムシジメジメで気持ち悪かったり、梅雨があければ本格的に夏になります。
長袖シャツから露出の多い半袖Tシャツに切り替えた方も多いかと思います。
そこで気になってくるのは、自分の体型ですよ

4月から入社して3ヶ月目に入りました。
入社前は夕方ランニングしたり、定期的に筋トレをしていたのですが、
現在はデスクワークだし、帰宅後も時間が作れないということもあり圧倒的に運動量が減りました。
というよりは続かなくなった(根性が無くなってます 笑)

そこで最終兵器ライザップをしようとしていたところ見つけました!
スマホの筋トレアプリ「Runtastic Six Pack」まさに腹筋て感じのネーミングです。
こちら5月24日限定で通常アプリ内課金600円のところ無料で使えるとのことだったのでダウンロードして使ってみた感想を書きたいと思います!
※もちろん無料版もあります!


まさに腹筋「Six Pack」

six_pack_img01

筋トレ系のアプリいざ使用してみると時間や1セットの回数が多くて続けるの嫌だなと感じる方がほとんどだと思います。

ですがこれは、
  • ワークアウト1回:10分〜13分
  • 1セットの回数:8〜16回

とこれで鍛えられるの?という感じです。

レベルごとに回数が増えていくようですが、レベル1だと10日間あり1セット8回スタートです。
はじめた時正直ものたりなさはありますが、それが次やろうとやる気も引き出しくれます。
3日目、4日目となってくると結構きます 笑


名前はダニエルです

six_pack_img02
なんと心強い、ダニエルが一緒になって腹筋をしてくれます!
BGMも流れて完璧です!
セクシーな女性のアンジーも選べます

自分なりのプランが作れます!

普通のワークアウトで物足りない場合、全43項目の腹筋の中から選んで自分のワークアウトが作れます。


このように約10分で簡単に筋トレができるので日曜は休みにして毎日続けています!
なかなか機能が盛りだくさんで全ては説明できませんが、
この機会に久しぶりに運動しようと感じていただけたら嬉しいです!
決してこのアプリを購入してくれという宣伝では無いです 笑




追記

上記はフルバージョンの説明で無料版では10日間のプランしかできないようです。
そこで私が「Six Pack」をする前に使用していたアプリがあるので紹介しておきます。

腹部トレーニング
icon_hukubu01
こちらは有料のトレーニングをやりたい場合
事前に5秒の広告動画をみると無料でトレーニングすることができますよ!

fukubu_img01
名無しのキャラクターもいます 笑




ダウンロード


こんにちわ。ザワ○ンです。

watari
2015/06/11
閲覧所要時間:約3

blog1

こんにちわ入社半年ワタチンです。
いえ、ワタリです。

熊本県民となり半年が経ちました。
早いですね。

時が経つのは早く、今という時間は戻ってきません。
一瞬一瞬が積み重なり「今の自分」となるのです。
その「一瞬、今の自分」大事にしてますか??

その二度と戻らない「一瞬」を永遠に切り取る魔法の道具、、、
そう、それがカメラです!!

皆さん、自撮りしてますか?
今日は自撮りの時間です。

必要なものは3つだけ。

1.カメラ(タイマー付き10秒は欲しい。)
2.三脚(できればグラつかないやつ)
3.ナルシスト魂
4.やっぱり欲しいセルフィー棒
(私は持ってません)

特にテクニックは入りません。

では私の自撮りBest10を一挙大公開。

・Best10・・・趣味編
fishing
夕日をバックに釣り。釣れずに暇して自撮りした1枚です。
皆さんも趣味に没頭している自分を撮影してみては?

・Best09・・・秋編
IMG_7709
せっく四季がある日本に生まれたからには四季を感じる写真を。
※銀杏があると臭っさ臭さなので要注意。

・Best08・・・夕日シルエット編
夕日に黄昏れる自分と自転車がGoodです。
有明海に沈む夕日と雲仙のシルエットもたまりません。
DSC_02191

・Best07・・・冬編。
DSC_06231
気分はウユニ塩湖です。(行った事ないけど)死ぬまでに1度は行ってみたいものです。
会社の研修でぜひ・・・

・Best06・・・家族と夏編。
IMG_0330
生まれた娘と唐津の海へ。娘の成長が楽しみな今日この頃です。

・Best05・・・夏編VOL.2ジャンプ編
DSC_05961
山口県の角島です。『死ぬまでに行きたい! 世界の絶景』で3位に選ばれていましたね。
本当いいところですw
飛んで腰がグキッとなった30の夏です。

・Best04・・・友達と編(FVスタッフ Fujieさんと・・・左の橋とかぶっているのは私です。)
DSC_30281
サンフランシスコ ゴールデンブリッジにて・・・嘘です。北九州の若戸大橋です。

・Best03・・・阿蘇版トロルの舌編(勝手い銘々)
DSC_0037
後ろからはなかなかわかりずらいですが一歩先は崖です。
私のブログの更新が無くなったら阿蘇近辺の崖下に転がっているかもです。
※黄色いリュックが目印です。

・Best02・・・噴火編
DSC_01431
阿蘇の噴火です。恐ろしいですね・・・
どうかこれ以上ひどくなりませんように・・・

・Best01・・・マジックアワー編。
DSC_04612
夕日も素敵ですが、やはりマジックアワー。
全てが綺麗な世界に包み込まれる時間はやっぱり最高です。



以上、駆け足でしたが
私の自画自賛自撮りBest10でした。

自撮りして1人にんまり眺めるも良し、
SNS等で皆に見てもらうのも良し・・・
さぁ皆さんも梅雨があけたらレッツ自撮り!!

ではまた次回ブログの時間にお会いしましょう。

【※注意】あまり自撮りしすぎるとフォロワーさんが減るとのことですのでご注意を。

館長:庵野秀明 特撮博物館に行ってきました!

murakawa
2015/06/04
閲覧所要時間:約2

村川です☆こんにちは!
いきなりですが、これ私の部屋です↓

NCM_0324
散らかってますね〜

・・・もちろん、うそですよ!!
私の部屋ではありません!!!
これ実はミニチュアなんです

現在、熊本市現代美術館で「館長:庵野秀明 特撮博物館」が開催されています
特撮で使用する、ミニチュアの街が再現されていました
館長:庵野秀明 特撮博物館
http://www.kkt.jp/event/tokusatsu/


庵野秀明さんと言えば・・

皆さんご存知のとおり、エヴァンゲリオンで有名ですよね。
エヴァ展が少し前に熊本県立美術館で開催されていましたが、今回はそれとはまた違うおもしろさがいっぱいでした!
CGを使わず、いかに迫力ある演出をするか、というのが今回の見どころだと思います

↓これもミニチュア!
IMG_3328

そういえば、エヴァ展でも街並みにかなりこだわって制作されている様子が展示されていました!
細かいところをリアルに再現すると、その世界観もかなりリアルに伝わるような気がします。

特撮といえば・・・

ヒーローと怪獣がたたかって、街がドガシャーーーーンとなるのが定番!!
派手に壊れていく建物に興奮した子どもたちも多いはず

でも、こうやってミニチュアの建物とか模型とか見ていると、壊すの本当にもったいないなあと思ってしまいます
一瞬で壊されちゃうのに、すごい細かいところまで作りこんであるし、職人さんのメンタルすごいですね(笑)憧れのヒーローと怪獣に壊されるなんて、本望です!みたいな・・・
ロマンですね。

破壊された建物もリアルでした↓
IMG_3336

「巨神兵東京に現る」

この作品は見たことがある人も多いのではないでしょうか?
私も以前見たことがあったのですが、なんとCGを使ってないんです
ビルのガラスが割れていくシーンや、キノコ雲があがるシーンも手作業!

キノコ雲はボウルみたいなやつに綿を貼り付けて、中にライトを入れて上下に動かしているだけ
カメラ越しだとリアルに見えるからびっくりです
巨神兵は二人羽織みたいにして動かしているんですって
それであのなめらかな動きはさすがです!

最後に〜

ウルトラマンとかゴジラとか見てからいけばよかった〜と少し後悔しました
小さいころから見ていた人にはたまらないと思います

難しいことをしなくても、ちょっとした工夫や細かい作業で全然見え方が違うといういい勉強に
なりました(無理やりまとめた感がありますが笑)
なぜか、ちっちゃいものがリアルに再現されていると興奮しますよね
やっぱり特撮って夢があります(*´Д`)

↓なんとなく気に入った
NCM_0334

ゴジラをイメージしました
gojira

自社サイトをレスポンシブウェブデザイン対応しました!

fujie
2015/06/01
閲覧所要時間:約5

gyazo-1
先々月…自社サイトをレスポンシブウェブデザイン対応致しました。
やったのは Googleが勧告していたスマホ対応による順位の変動(4/21)の直前の19日!

結局特に変わりませんでしたが…。

というのも一度はそのアップデートを適用したものの、
日本のサイトのスマホ対応率があまりにも低すぎるので取りやめたというお話を
この間開催されたWebパフォーマンスのセミナーでお伺いしました。

以下、今回やったことを振り返ってみようと思います。


まずは現状を知る

レスポンシブウェブデザイン対応をする前に、まずはその時の現状を確認しました。
  • 1年前にPCサイトをリニューアル
  • 画像はすべて通常サイズ
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
  • 横に長い画像が主要なページにいくつもある
  • ヘッダーが追従する
  • グローバルナビゲーションの中にプルダウンメニューがある
等という特徴があります。

また今回の取り決めとして、
求人案内とスタッフ紹介のページはまったくデザインが異なるので、
一度に行わないことにしました。(時間があればコソコソやります…)


現状を維持しつつ、レスポンシブ時の時の動作を決める

現状の仕様がざっくりと整理できたので、
ブラウザ幅を縮めていった時の動作を考えていきます。
  • 1年前にPCサイトをリニューアル
    → 既に形があるので、必然的にPCファースト(960px)
    → メディアクエリーでレスポンシブスタイルを制定
  • 画像はすべて通常サイズ
    → ロゴのみRetinaディスプレイに対応させる
  • トップページにvideoタグで動画を流しているが、videoタグ非対応ブラウザには画像を表示している
    → PCでブラウザ幅を縮めていった時にはそのまま何もしない
  • 横に長い画像が主要なページにいくつもある
    → 画像は基本 max-width: 100%; で対応するが、横に長い画像は縦が細くなってしまうので、通常の画像と違うスタイルを制定する
  • ヘッダーが追従する
    → 追従をやめて、右上にハンバーガーアイコンを設置する
  • グローバルナビゲーションの中にプルダウンメニューがある
    → プルダウン動作をやめて、右上のハンバーガーメニュー内で展開されるようにする
という動作を決めました。
グローバルナビゲーションですが、ドロワーメニューとかハンバーガーメニューなどなど人によって言い方がまちまちですが、ここではハンバーガーメニューと言うことにします。


レスポンシブウェブデザインを作っていこう

それでは決めた仕様で作っていきます。

ブレイクポイントをどこにするか

PCサイトを 960px で構築しているため、
どこかの値でブレイクポイントを決める必要があります。

iPad縦持ちサイズからレスポンシブウェブデザインを適用したかったので、
768px を基本のブレイクポイントにしております。

これで、横持ちだとPCのデザイン、縦持ちだとレスポンシブウェブデザインが楽しめるので
私個人的には気に入っております。

(追記:2015年6月13日)
と思っていたのですが、
いろいろ思うところがあって 960px 未満からにすることにしました。


ロゴのみ Retinaディスプレイに対応させる

1倍画像


2倍画像


ロゴのみ高解像度ディスプレイでもぼやけないように2倍の画像を用意し、
高解像度ディスプレイにはそれ用のメディアクエリーで変更しています。

横に長い画像でも美しく

レスポンシブウェブデザインでは画像に対して何もスタイルを指定をしないと
ブラウザサイズからはみ出してしまいます。

そのために画像へ、

/* CSS */
img {
height: auto;
max-width: 100%;
}

というスタイルを一般的に指定します。

このスタイルによって下記のような横長い画像も、
ブラウザサイズの伸縮と合わせて可変するのですが、

こちらの画像だと縦が細長くなって見栄えがよろしくありません。

そこで

/* CSS */
.over-image {
overflow: hidden;
}
.over-image img {
margin-left: -25%;
max-width: 150%;
}

と、横幅の最大値を大きく取り、少しずらすことによって

この様に両端を若干隠すことになりますが、
全体のバランスを崩すことなくレイアウトが出来ました。

表示領域を確保するためにヘッダーの追従を無効に

私がついこの間までiPhone4ユーザーということもあってスマートフォンサイズにて領域を確保することに意識をおいて制作にあたりました。

しかし今は nexus6 を使用しておりかなり余裕があるので、
今後は追従などの手を加えてもいいのかなと思いました。

また上にスワイプするとヘッダーがスッと出てくるのも気になっているので、
そういうこともどんどんやっていけたらな…。

プルダウンメニューはハンバーガーメニューの中で展開させる

今回はプルダウンの中身が少ないので、隠さずに展開させた状態にしました。
メニューの数が多ければ、カテゴリーをクリック後表示非表示させるなどの手法も考えました。

そのあたりでとても参考になるのが、
トヨタ自動車さん
http://toyota.jp/

のサイトが上手く設計されていると思います。


まとめ

以上、弊社自社サイトのレスポンシブウェブデザイン対応でした。

私が担当した案件で恐らく1年半ぶりの4件目の
レスポンシブウェブデザイン対応だったと思います。

今回はワンカラムでスッキリシンプルなデザインでしたので、
制作時間もそこそこ少なめで出来たので良かったかなと思っています。

しかし冒頭にも申し上げましたが実は Googleスマホ対応の直前に急ぎ足で制作してしまったので、
細かいところで行き届いていなかったり、モバイルファーストになかなか踏み込めなかったり(IE8への対応がまだまだあるので当分難しいかも…)するのでもっと色々と考えて出来るようになりたいと思っています。

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介