STAFFBLOG スタッフブログ

inline-block が最近好きなので振り返ってみた。

fujie
2014/09/30
閲覧所要時間:約7

こんばんは、こんばんわ。
1週間ほど前から早寝早起き(24時前就寝、6時前起床)に嵌っている藤江です。
朝はいいですよ!夜だらだらやるよりも朝!静かで気持ちが良いです。

さて、私は1年ほど前まではIE6からのブラウザ対応を頑張らないといけない環境に居ましたが、フロンティアビジョンに入社してからはIE8からの対応でOK!となったので(巷ではIE8対応も有料らしいですが!)、制作時にいろいろ悩まずに快適になりました。

中でも良くなったのはCSSの「display: inline-block;」や「display: table;」、「display: table-cell;」などがCSSハック無しで使えるようになったり、また「box-sizing: border-box;」というwidthやpadding等の計算が楽になるプロパティ達が使えること!!

その中でも今日は「display: inline-block;」の便利さをお話ししたいと思います。
(今更などと言ってはダメだ!)


display: inline-block; とは?

20140930-inline-block01

inline-blockとは、displayプロパティの値のひとつで、以下の様なことが出来るようになります。

  • ブロック要素のようにwidth、height、padding、margin等が指定出来る
  • インライン要素のように、文字などと一緒に流し込むことが出来る
  • vertical-align、text-alignなどのプロパティが有効!

と、非常に扱いやすいラインアップですね。

さっそく例を並べてみましょう。

ブロック要素のようにwidth、height、padding、margin等が指定出来る

inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>

/* CSS */
[class^="entry7929_e"] {
  color: #fff;
  display: inline-block;
  font-size: 140%;
  font-weight: bold;
  padding: 30px;
}


インライン要素のように、文字などと一緒に流し込むことが出来る

テストテスト
inline-block
てすとてすと

/* HTML */
テストテスト
<div class="entry7929_e_pink">inline-block</div>
てすとてすと


または要素と要素を横に並べたりも。

inline-block
inline-block

/* HTML */
<div class="entry7929_e_pink">inline-block</div>
<div class="entry7929_e_blue">inline-block</div>


vertical-align、text-alignなどのプロパティが有効!

inline-block
inline-block
inline-block
inline-block
inline-block
inline-block

/* HTML */
<div class="entry7929_e_vtop01">inline-block</div>
<div class="entry7929_e_vtop02">inline-block</div>
<div class="entry7929_e_vtop03">inline-block</div>
<div class="entry7929_e_vtop04">inline-block</div>
<div class="entry7929_e_vtop05">inline-block</div>
<div class="entry7929_e_vtop06">inline-block</div>

/* CSS */
[class^="entry7929_e_vtop"] {
  vertical-align: top;
}
.entry7929_e_vtop01 {
  height: 70px;
}
.entry7929_e_vtop03 {
  height: 50px;
}
.entry7929_e_vtop04 {
  height: 50px;
}
.entry7929_e_vtop06 {
  height: 70px;
}


親要素の text-align で左寄せ・中央寄せ・右寄せが可能になります。
またinline-block に vertical-align: top; を指定すると、2段以上かつそれぞれ高さが違っても上下が整うなど、float を使って実装すると面倒だったのがスッキリでシンプルなコードで実現出来ます!


inline-blockで横に並べた時の空白が気になる!

何事にもデメリットはつきもの。
display: inline-block; を使用する際には要素と要素の間にスペースが出来てしまいます。
この謎のスペースはHTMLの改行が原因なのです。
ですのでHTMLを詰めて記述するとスペースは無くなるのですが、HTMLを詰めて記述すると後から編集するのが面倒になる+見た目が非常によろしくないので、CSSで対応しましょう。

letter-spacing を駆使してスペースを消そう!

inline-block
inline-block
inline-block

letter-spacing という文字の間隔を指定するプロパティを使用します。

親要素に対して letter-spacing: -.4em; を指定することによって、文字の間隔を無くします。
文字の間隔を無くすことによってHTMLの改行もぎゅっと詰まらせることが出来るので、子要素間のスペースを無くすことが出来ます。
そのままだと子要素内の文字がぎゅっとなってしまい大変なことになるので、子要素に対して letter-spacing: 0; を指定し子要素内の文字間を元に戻してあげましょう。

/* HTML */
<div class="entry7929_e_letter_parents">
  <div class="entry7929_e_letter">inline-block</div>
  <div class="entry7929_e_letter">inline-block</div>
  <div class="entry7929_e_letter">inline-block</div>
</div>

/* CSS */
.entry7929_e_letter_parents {
  letter-spacing: -.4em;
}
.entry7929_e_letter {
  letter-spacing: 0;
}


親要素に font-size: 0; というやり方もありますが、
%で文字サイズを指定しているサイトでは子要素にて文字サイズが元に戻せませんし、 font-size: 0; という記述がもしかしたらSEOなどに引っかかってくるのでは?という懸念点から控えた方が良いかと思います。


おわりに

本記事では触れませんでしたが、float より inline-block を活用することで、レスポンシブデザインも意識することが出来ます。
また inline-block を使いこなせるようになれば無駄なHTMLの記述も減り、可変なコンテンツにも対応力が上がるので便利です!

取材で最低限守りたい7つの事!

hashimoto
2014/09/25
閲覧所要時間:約2

012-512x325

こんにちは橋本です。

いきなりですが、実は今度とある地域の取材に1人で行くことになりました!

そして、その取材内容を興味がある人や、ない人にも伝わるようにレポートにまとめることに・・・

ですが、取材といってもなにをどうしたらいいかわからず、頭が真っ白な状態です。しかも私は人見知りです。あーどうしよう。



今回の件だけではなく、ウェブやデザインでも取材=相手の話を色々聞き、

ちゃんと理解し、それを整理し、色々な人に伝わるように形に残すということはとっても大事なこと!



そこで、取材で最低限は守っていきたいことを簡潔にあげてみようと思います。



ファーストコンタクトはより丁寧に

2

直接会う前の連絡は、通常より丁寧に行いましょう。

メールでしたら、何度も読み返すことをオススメします。

良いイメージを作っておくと、この後の取材もスムーズに進みます。



準備は周到に

3

何も調べないままでは、深いところまで話を聞くことは難しいかもしれません。

しっかり聞けるように質問できるように事前に情報収集をしましょう。

気づいた事をメモし、いつでも参照できるようにノートとペンは肌身離さず。

身だしなみは清潔に

4

このような不潔な風貌では、話にも集中できません。

第一印象でその人のイメージが決まると言っても過言ではありません!

清潔感を保ちましょう。オシャレならなおGood!

アナタを信頼して話してもらえるでしょう。


スマイルを忘れずに

5

身だしなみも大事ですが、表情も大切です。人は鏡ですからね。

話をしている相手が無表情の時より、笑顔だと話やすいですよね?

ヘラヘラはNGですが、スマイルを忘れずに話を聞きましょう。

 

疑問に思ったことはすぐ声に

6

「いつ言うの?今でしょ!?」取材中疑問に思ったことはすぐに聞きましょう。

失礼な事ではありません。相手側と自分との中で受け取りかたの違いがあるかもしれません。

後で伝え間違えがおこらぬように、ちゃんと1つずつ理解した上で取材を進めましょう。

 

沈黙を恐れずに

7

沈黙を埋めるために話すのはやめましょう。

沈黙は考える大事な時間です。より深く話しを聞く為に心に余裕をもちましょう。

 

さいごに

なににしても一番大切なことは「相手の立場にたつ」ことだと思います。

「理解する」「伝える」ためには、相手の立場にたって「どうしてか」を考えましょう。

また「伝える」側の立場だけではなく、「受け取る」側の人の立場にもなって考えましょう。

私も以上、7つを守って取材に行ってきまーす!

WordPressをマルチサイト化してみた(サブディレクトリ形式)

shuhei
2014/09/24
閲覧所要時間:約3

おはこんばんちは、にしむらです。

先日は思わぬ引きを見せてしまいましたが、手伝って頂いたスタッフの皆さん本当にありがとうございました。
おかげ様で戦績は見事にハズレオンリーです(哀)

さてさて、相も変わらずWordPressネタですがどうぞお付き合い下さいませ。
今回はマルチサイト化についてのお話です。

そもそもマルチサイト化って何?

簡単に言うと、「1つのWordPressで複数のブログを運用しよう」といったものです。
例えばこのブログは「fvs-net.co.jp/blog/」で運用していますが、同じWordPressの管理画面から「fvs-net.co.jp/blog/blog2」といった風にもう1つ別のブログを運用できるようになります。
図にするとこんな感じですかね。
multisite
プラグインやテーマの管理で逆に煩雑になる部分もありますが、そもそもそんなことやらないお客様にとっては管理画面が一つになり、操作し易くなるのではないかと思います。

WPのインストールは省略して

設定ファイルwp-config.phpに以下の一文を追加しましょう。

define('WP_ALLOW_MULTISITE', true);


これをアップし、管理画面のツールを開くと「ネットワークの設置」が追加されているのでそれをクリック!
あとはマルチサイトの形式(今回はサブディレクトリ)、ネットワークのタイトル(お好きな名前でどうぞ)、管理者用メールアドレスを入力し、「インストール」をクリック!

すると、「ネットワーク」を有効化中となり、wp-config.phpと.htaccessにこの内容を追記して下さいと指示が出てきます。
私は上で追加した一文に加えてこんな感じで記載しております。

/** 追加設定 */
define ('WP_ALLOW_MULTISITE', true);

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'fvs-net.co.jp');
define('PATH_CURRENT_SITE', '/blog/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);


.htaccessにも記述を追加したら一度ログアウトしましょう。

サイトの追加

再ログイン後、左上のプルダウンに「サイトネットワーク管理者」の項目が追加されています。
こちらの「サイト」をクリックすると、現在作っているサイトの一覧が表示されます。
ページ上部の「新規作成」からサイトの「アドレス」「サイト名」「管理者メールアドレス」を入力し、「サイトの追加」をクリックすると新しいサイトの完成です!

最後に

マルチサイト化についてですが、前述した通りデメリットになる部分もちらほらあります。
やってみると案外すんなりといった印象でしたが、wp-configや.htaccessをいじるとなると若干ハードルが高いかもしれません。
なんでもかんでもマルチサイト化すればいいってものではありませんが、「ここは使ったほうがいいんじゃないかな?」と思う場面で参考にして頂ければ幸いです。

Facebookのちょっと便利な小技

渡邉 直登
2014/09/19
閲覧所要時間:約2

みなさん、こんばんは!代表の渡邉です。

Facebook、皆さん使っていますか!?
日本では2014年現在で2300万人ぐらいの利用状況のようです。
熊本県人は約30万人が利用しているのです!
これは全国順位で14位となかなかのもの。
(東京など都市圏の利用が突き抜けて多いのですが…)

僕はこういう業界柄、皆さんとのつながりとしても
仕事のやりとりとしても、情報収集としても、広告としても
Facebookさんとは切っても切れない仲です。

最近知ったFacebookの小技その1:投稿やリンクを保存する機能!

投稿を保存する機能が2014年7月よりひっそりとリリース。
リンクやスポットをFBの左のリストメニューに記録できるのです!

Screenshot
これは便利!ブックマークするまでもない奴とか保存出来ます!
スポットは特にスマホで使うのに便利そうですね!

最近知ったFacebookの小技その2:自分が見てない投稿だけ表示する機能

なぜかは分かりませんが、下記のURLから直接やらないと
出ません。利用したい方はぜひブックマークされてください。

https://www.facebook.com/feed/missed_stories

Screenshot1
未読な情報だけ表示されるのでよくFacebookを利用している人は便利かと思います!

いかがでしたでしょうか?Facebookってコロコロ仕様が変わったりして面白いですね。
知らないことがどんどん出てきます。

それでは、また1ヶ月後にお会いしましょう♪

緊張にさよなら!スピーチの基礎を学ぼう! 【第107回サトラボ】

yamamoto
2014/09/13
閲覧所要時間:約4

design (7) こんにちは、ヤマモトです。
9月の半ばになり、少しずつ涼しくなっていますね。
扇風機はもう片付けてしまいました。

さて、今日は隔週でおこなっているサトラボの日でした。
今回のテーマは【スピーチ】!

皆さんは人前で話をするのは得意ですか?自分は緊張で汗だらだらになってしまうので苦手です。
そんなあがり症の方でも、ある程度話せるようになるポイントを紹介します。

メラビアンの法則

ポイント紹介する前に、人は話している相手のどこに印象を受けるかという万国共通の法則があります。それが【メラビアンの法則】です。

【話の内容などの言語情報】…7パーセント
【話し方(声の質・速さ・大きさ・口調)などの聴覚情報】…38パーセント
【見た目(服装・表情・しぐさ・視線)による視覚情報】…55パーセント

上記からわかるように、「話し方」と「見た目」がとても大切ですね。
意外にも「話の内容」は低いです。

ロジック?ストーリー?二つの話し方

話し方のアプローチは2つあります。一つは【ロジック型】、もう一つは【ストーリー型】です。

ロジック型

ロジック
ロジック型は理路整然と論理的に相手を説得し指示命令で相手を動かす手法です。

■左脳にヒット
論理的な話は聞き手の左脳にヒットし、相手の思いを間違わずに受け止めようとします。
■理解する
左脳は理解や分析を担当します。論理的な話は論理的に理解しようとするのです。
■行動を起こす
ここで起こる行動は相手から指示された範囲のみの行動に限定されることが多いようです。(他律的行動

ストーリー型

ストーリー 一方ストーリー型は、あなたが実際に何かを気付かされた実例を短いストーリーにして映像化します。

■右脳にヒット
映像化された映像は瞬時に聞き手の右脳のスクリーンに投影されます。(場面の共有
■感情が動く
右脳は感情を司り場面が共有されると感情も動きはじめます。(感情の共有
■行動する
感情が動き始めると、誰からも指示しなくても、自発的に行動を起こしたくなります。(自律的行動


緊張せずに話せるようになる3つのポイント

少し前置きが長くなりましたね。
上記の【メラビアンの法則】と【ロジック型/ストーリー型】をふまえた上で、以下の3つのポイントを実践してみましょう。きっと以前より緊張しなくなるはずです!

ポイント1:自分の体験を話すこと

【緊張する/あがる】というのは、「上手に話したい」または「間違えたり、忘れたらどうしよう」という気持ちが原因のようです。その対策として、【自分の体験】を話してみましょう。
自分の体験を、ありのまま、感じたまま話せば内容を忘れることがありませんし、間違っても誰もわかりません。

ポイント2:自分の言葉で話すこと

二つ目のポイントは【自分の言葉で話すこと】です。普段使わないような言葉を使おうとしても、頭と口が慣れていないのでスムーズに話すことが難しいです。人前で話すときも、普段のあなたの言葉で話すことをおすすめします!

ポイント3:周到な準備をすること

最後はスピーチに限らず、全てに言えることですね。話すことが決まったら、鏡の前で練習したりビデオに撮って自分を確認してみましょう。何度も繰り返し練習することで、口が覚えてしまいます。

実際にやってみよう!

IMG_1756 さっそくスタッフみんなで練習してみました!

<ルール>
・「青春」「学校」など様々なカテゴリが書いてあるカードを用意します。
・その中から2枚カードを引き、どちらのテーマで話すか決めます。
・テーマを決めたら、1分間のシンキングタイム。
・約3分間、決めたテーマに沿ってスピーチしてもらいます。


どんなテーマになるか分からないため、みんなドキドキしている様子でしたが、一生懸命話して以前よりレベルアップすることができました!

まとめ

スピーチが得意!!…という人は中々いないと思います。
誰でもはじめは緊張したり、失敗することもあるでしょう。
そんな時は、今回のことを思い出してとにかく堂々と自信を持って話してみましょう!


ごほうびガチャの結果報告

さてさて話は変わりますが無事に公開した案件がありましたので【ごほうびガチャ】実施しました!

▼前回のごほうびガチャ
【第二回】ごほうびガチャ結果報告!!
「嬉しいご褒美いっぱい!?『ごほうびガチャ』のご紹介。」

IMG_1767 ……ん!?

IMG_1769 あーーっ!西村さんだけ大ハズレ!
【本気の庭掃除】を引いてしました。
ただ、この間河添部長が引いたばっかりなので【本気の倉庫整理】をすることに……。
男性陣ツイてない(笑)

写真1 頑張る西村さんと、冷やかす手伝うスタッフ。

写真2 西村さんお疲れ様でしたm(__)m

ねこ写真の神様!岩合光昭さんに学ぶ「ねこの撮り方」

yamamoto
2014/09/11
閲覧所要時間:約4

design (6)
こんにちは。今回で通算3回 iPhone を壊してしまったヤマモトです。
一部の人にiPhoneクラッシャーと呼ばれています。

こんな記事書いてたのに…まあ今回は水没だったんですが。
もう割りたくない!(泣)という人向けの頑丈なiPhoneケースのご紹介

さてさて、
先月まで動物写真家岩合光昭さんの写真展「ねこ」が熊本県立美術館にて開催されていましたね。
ねこと写真が好きな自分にとっては「どストライク」な企画だったのですが、
なにかとバタバタしていて、見逃してしまいました…m(_ _)m

「心の師匠」岩合光昭さんのプロフィール

1950年東京生まれ。
19歳のとき訪れたガラパゴス諸島の自然の驚異に圧倒され、動物写真家としての道を歩み始める。
以来、地球上のあらゆる地域をフィールドに大自然と野生動物をとり続けている。
一方で身近なイヌやネコの撮影も継続し、多くの人々を魅了している。
近年は、地球環境の急激な変化と影響を自身の目で見つめ、数多くのメディアで伝えている。

主な著作『ねこ』『いぬ』『ねこ歩き』『ネコライオン』等。

関連ホームページ
Digital Iwago

 

岩合さんの書籍「ねこを撮る」を読んで

ねこ
写真展に行けなかったかわりに、岩合さんの著書「ねこを撮る」を読んでみました。
やさしい文体で書かれていて、岩合さんが撮影した写真もたくさん載っているので、楽しみながら読むことができました。数多くの動物写真を撮ってきた岩合さんだからこそ分かる、「撮影の心構え」が書かれてあって「なるほどなあ〜」と思わせるものばかりでした。今回はその一部を紹介します!

ねこを撮る時のポイント

まず、あいさつ。

まず、あいさつします。おはよう、元気?ちょっと写真を撮らせてくれない。・・・ 良いよと返事が返ってきた時に撮ります。(岩合光昭)
…とのことです。あいさつは全ての基本ですね!

いきなりはダメ!

猫にとって人間は自分の何倍もの大きさがあります。そんな生き物がいきなり飛びかかってきたら誰だって怖いですね。だから、猫に出会った時は急な動きをせず、いきなり猫に向かわないで通り過ぎてはまた戻って、というようなアプローチをとるといいそうです。※ただし、これが全ての猫に効果的ということではありません。

そして、自分もリラックスすること
撮影する側の緊張は相手にも伝わってしまいます。猫を安心させるよう、力を抜くことが大切です。

 

望遠レンズを使おう。

初心者は、猫との距離がとれる望遠レンズがおすすめです。
距離をとって撮影することで警戒心をもたれずに撮影することができます。

角度(アングル)を意識しよう。

猫に限ったことではないですが、「角度(アングル)」を考えて撮影することが重要です。
一般的には猫の目線に合わせて、カメラを低い位置で構えると猫らしく撮れます。

その基本ができたら、上下左右いろいろな位置で猫を観察してみます。猫によっては高いアングルから見た方がかわいい子もいれば、丸顔の子は横からの方がかわいかったりします。

ちょっと撮ってみた

仕事の打ち合わせ先で、ちょうどねこさんがいたので撮らせてもらいました。


IMG_8911

車の下でくつろいでました。(寝てる?)帰れない…。



やっと起きてくれたけど、機嫌ワルい?

岩合さんの教えの通り「ハロー」と声をかけます。やっと起きてくれたけど、機嫌ワルい?



と、思ったら唐突なセクシーポーズ(笑)

と、思ったら唐突なセクシーポーズ(笑)



眼がとても綺麗でした。

眼がとても綺麗でした。



最後は決め顔で。

最後は決め顔で。



おわりに

岩合さんの言いたかったことをまとめると、
猫には猫のルールがある。撮影する時には、人のルールではなくて、猫のルールで。
ということなのだろうと思いました。

写真の出来はおいといて、ねこと遊びながらの撮影はとても楽しかったです。
これからも、猫のルールを大切に撮らせてもらいたいと思います。

▼以下、ブレブレだけど気に入っているカット。
IMG_8914
IMG_8944

SEO最適化やアクセス数UP!ブログタイトルの付け方!

2014/09/08
閲覧所要時間:約2

こんにちはー、カワゾエ(@zoe)です。今回はホームページの新着情報や社長ブログ・スタッフブログなどのタイトルの付け方でSEO(検索エンジン最適化)効果UP・アクセス数UPにつなげる簡単なテクニックのお話です。


ブログや新着情報のタイトルをチェック!

新着情報サンプル

会社やお店のホームページには「新着情報」「お知らせ」「ブログ」など、情報を発信する機能があると思います。一度自分のホームページをチェックしてみましょう。各お知らせや記事のタイトルは上のサンプルのようになっていませんか?

これでは何についての情報なのか分かりづらく、クリックして読んでみようとは思いません。またSEOの観点からも望ましくありません。


SEOやユーザーを意識してタイトルを改善してみよう!

新着情報サンプル改善案

上のサンプルは「歯科医院」のホームページという想定でタイトルを少し改善してみました。院名の他にも、インプラント、定期検診、予防歯科、虫歯など、検索結果で上位表示されたいキーワードや、歯科(業種)に関係のあるキーワードをタイトルに含めます。
これにより検索エンジンに対して「このホームページ(ブログ)は歯科治療について有益な情報がたくさんある」ということをアピールし、検索結果の上位表示を狙います。

また”無料説明会”、”夏休み・アイス食べ過ぎ”といったユーザーにとって有益な情報・興味を持たれそうな情報がある場合は、それらを含めることもクリックされやすくする工夫になります。


さいごに

タイトルの付け方については、もっとたくさんのテクニックがありますが、簡単にできるはじめの一歩ということで実践してみてはいかがでしょうか。
もちろん、タイトル以外に記事の内容自体も大事です。また不自然にキーワードを多用しすぎるのは逆効果で、ペナルティを受ける可能性もありますのでその点はご注意ください。

苦手な人でも大丈夫!原稿を書くコツ

murakawa
2014/09/04
閲覧所要時間:約3

こんにちは。1ヶ月ぶりの村川です。
夏ももう終わり・・・。夏休みの宿題は終わりましたか?

毎日働いている社会人には関係ありませんね(・∀・)
夏休みの宿題といえば、いろいろありますが、読書感想文ってありましたよね。
あれはなかなか手強いやつですが、今思うとあの宿題大事だったな〜と思います。

わかりやくすまとめて、人に伝わるような文章にするのは大人でも難しいですよね。
しかし、文章を書く作業は大人になって、更に私たちを苦しめるのであります!

43828578de0addfdfa41e825a17ef7fe_s

ということで、本題に入ります。

webサイトを作るときに、原稿が無いままデザインをするのは結構たいへんな作業です。
しかし、他のwebサイト制作会社のブログをのぞいてみても、原稿が不足した状態で進めたり、
デザイナーさんが原稿を書いたりすることはよくあることみたいです。
確かにお客様は通常の業務をしながら原稿を書く訳ですから、かなり大変ですよね。

今回は、原稿を書くときのコツを調べて、
自分なりにまとめました。

目次

  1. 私が書きます!
  2. あなたに読んでほしいの!
  3. 私のこと好きになってほしいな〜
  4. あなたに・・・伝えたいことがあるんです!
  5. つまり、詳しくいうと・・・
  6. (あれ?これで伝わるかな・・・?)

そう、ラブレターですね。

私が書きます!

まずは、自分がどの立場から話すのかを決めます。
自分のサイトならそのままですが、誰かの代わりに書いている場合はその人に
なりきって書きます。

あなたに読んでほしいの!

読んでほしいターゲットを絞ります。
ラブレターと同じで、ターゲットはある特定の人にします。
ここで「みんなに好きになってほしい!」と欲張ると、
結局どういう内容にしたらいいのかわからなくなってブレブレの
原稿になってしまいます。


私のこと好きになってほしいな〜

ここでは、相手にどう思ってほしいのかを考えます。
ラブレターなら好きになってほしいのが目的ですが、
病院なら、安心感や誠実さなど、様々です。

あなたに・・・伝えたいことがあるんです!

ここで、自分のターゲットに何が言いたいのかおおまかに
考えます。

まず、これを伝えたい
次に、これ
その次に、これ

これを最終的に章にします。

つまり、詳しくいうと・・・

さっき、おおまかに決めた章について、さらに詳しく説明していきます。
ここでは、少しマニアックな内容になるかもしれないので、初めて読んだ人の目線で
書いたほうがよいです。

(あれ?これで伝わるかな・・・?)

最後は、今まで書いてきたラブレターがちゃんと相手に伝わるのか確認します。
言葉足らずで気持ちが伝わらなかったり、
ちょっとした捉え方の違いで相手に誤解されるなんてこともあります。

最後に

最後まで読んでいただきありがとうございます。
個人的にラブレターに例えたほうがわかりやすいかなと思って、まとめました。
難しく考えず、自分を好きになってほしいと思いながら書くのがコツかなと思います。

手軽に使える便利なブックマークレット!

fujie
2014/09/01
閲覧所要時間:約4

8月が終わってしまいましたが、いかがお過ごしでしょうか。藤江です。
ほとんどの日で雨が降っていたような気がしてとっても夏らしくなかったですね。
夏が一番好きな季節ですので、とても残念です。今年雨だった分来年は晴れますよね? いや、晴れろ! 晴れてください!

さて、今日は前回(手軽に使える便利な firefox のアドオン!)に引き続き、ブラウザがもっと便利になるブックマークレットをサクっとご紹介したいと思います。

ブックマークレットとは?
ブラウザのお気に入り機能を利用して、URLの代わりにJavaScriptをブックマークしておくことで、プログラムを実行できる仕組みなどをブックマークレットと言われています。

手軽に複数のSNSでの反応をチェック!

弊社トップページの様子

ソーシャルてんこ盛り
http://actyway.com/tenkomori


手早く各ソーシャルメディアでの反応をチェックすることが出来ます。名前もかわいい!
サクっと自分の記事の反応をチェックしてもよし!気になるあのサイトをチェックしてもよし!
WEB制作の実務で使える点としては、技術ブログ等で稀にソーシャルコメントに助言を書いて下さる方がいるので助かってます。


ダミー画像をとにかく簡単に欲しい!

ダミーと思われる画像

指定したサイズのダミー画像を一瞬で生成するブックマークレット。 – このブログは証明できない。
http://d.hatena.ne.jp/shunsuk/20100201/1265027593


WEB制作では写真やイラストは必須ですが、いろいろな事情があって本番で使う画像が揃わない時があると思います。
とにかくここは画像です!と明示したい場合はサクっとダミー画像いかがでしょう。

ブックマークレットの元になったWEBサービスはこちら
Dummy Image
http://dummyimage.com/


サービスがどんどん充実していっているのでもしかしたら本家のサービスを使うのが良いかも!


altの入れ忘れを無くそう!

弊社のヘッダーの画像のalt

alt属性を確認するブックマークレット。 | Blog – trustworks [トラストワークス]
http://www.trustworks.biz/blog/2008/04/alt.html


画像のaltの確認面倒ですよね。画像を見つけてオンマウスもしくは右クリックから除いたりいろいろするのは…。
このブックマークレットで画像とaltを一覧表示してサクっと終わらせちゃいましょう!


HTML内タグの閉じ忘れをチェックするツール

弊社トップページはエラーなしです!もちろん内部ページも!

HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] – とっくりばー
http://tockri.blog78.fc2.com/blog-entry-168.html


HTMLがちゃんとしているかサクっとチェックしてくれるツールです。
ページを作ったらとりあえずこれ!って感じで確かめるのに最適です!


表示されているフォントを調べる

きみなんてフォント?

WhatFont Tool – The easiest way to inspect fonts in webpages « Chengyin Liu
http://chengyinliu.com/whatfont.html


これなんてフォント?という時、ありますね。残念ながら画像は無理ですが、本当にサクっと文章のフォントを知りたい時に便利です!


QRコードを簡単作成

弊社トップページのQRコード

QRのススメ:便利ツール:ブックマークレット
http://qr.quel.jp/bookmarklet.php


QRコードをサクっと作ることが出来ます。
最近はあまり見かけませんが、やはり必要なときはいっぱいありますので便利です!


最後に

以上サクっとご紹介でした!
前回(手軽に使える便利な firefox のアドオン!)もでしたが、制作者の方々に本当に感謝感謝です。
私も世の為人の為に何かサービスを作れたらいいなぁ、とは思っているのですがなかなか…。
まずは上記をもっと活かして良いサイト作りを強化していきたいと思っています!

ではまた!

URLがhttpsから始まるサイトではブラウザのセキュリティ設定によって実行出来ないようです。
設定を変更することにより実行することは出来ますが、セキュリティ観点のことから各自の判断でご使用頂ければと思います。

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

デンタルWEB

求人情報

スタッフ紹介