【WEB】美容室ホームページ製作

新規開業する美容室のホームページ制作を担当したためまとめます。

美容室について

・美容室の名前は「Hair Resort Lino」
・コンセプトは「プチリゾート気分でくつろげる癒しのプライベートサロン」
・場所は「福島県須賀川市」
・完全予約制

サイト

　
■Hair Resort Lino
http://www.hear-resort-lino.com/

■PCサイト／スマホサイト

テンプレートサイト

準備中…

【動画】トリック動画の撮影方法

iPhone/スマートフォンではVineというアプリを使って以下のようなトリック動画を撮影可能なようです。

トリック

アプリ

■特徴
・このアプリを使って６秒動画を撮影できる
・撮影画面をタップしている間だけ撮影可能
・６秒以内なら何度も撮影可能
・前回タップして撮影下部分がうっすら見えた状態で次のシーンを撮影できる
・保存してある動画を組み込み可能
・撮影した部分をカット可能
・撮影した動画はVineに投稿可能

サイト

■Vine

https://vine.co/

Vineは動画投稿型のSNSサイトです。
興味があればこちらもご利用ください。

【HTML】【CSS】コピペで使えるサンプル集－引用部分編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは他サイトから文章を引用した時に使う引用部分（brockquote）のデザインについて
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

引用部分サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

“

infinityforest

「引用部分①」
画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを
いろいろデザインする
”

<div style="text-align: right;"> <a href="http://infinityforest.net/"><i>infinityforest</i></a></div> 「引用部分①」<br /> <a href="http://infinityforest.net/home/archives/1530">画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを<br />いろいろデザインする</a><br /> <span style="color: red; float: right; font-size: 700%; height: 25px; margin: 10px 0; padding-top: 5px;">”</span> </blockquote>

引用部分②
ここに引用する文章を記載してください。

<blockquote style="border: 2px dotted #D4D4D4; margin: 10px; padding: 10px;"> 引用部分②<br /> ここに引用する文章を記載してください。 </blockquote>

❝ Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.

tympanus

<blockquote style="background: #fff; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(188, 147, 200, 0.7), -5px -4px 25px rgba(0, 0, 0, 0.3); padding: 30px; width: 500px;"> <span style="color: #bc93c8; font-family: serif; font-size: 80px; font-weight: 700; line-height: 32px; text-indent: 90px;">❝</span> <span style="color: #b4b4b4; font-family: "alegreya" , serif; font-size: 24px; font-style: italic; line-height: 40px; text-indent: 100px;">Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.</span> </blockquote> <cite style="color: white; font-family: 'Alegreya', serif; font-style: italic; font-weight: 700; padding-left: 550px; text-shadow: 0 1px 1px rgba(0,0,0,0.3);"> <a href="http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/" target="_blank">tympanus</a> </cite>

【HTML】【CSS】コピペで使えるサンプル集－背景編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－引用部分編


────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

背景サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

背景・模様①

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span> </div>

背景・模様②

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span> </div>

背景・模様③

<div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span> </div>

【WEB】マウスホバーエフェクトの導入

今回はGitHubに公開されているcssライブラリ（Hover.cssファイル）を導入することで、
手軽にマウスがのった時のボタンやリンクの動作（ホバーエフェクト）を設定する方法をご紹介いたします。

しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;

Hover.cssの導入手順

導入手順は以下のとおりです。
ブログなどに導入する場合は＜HEAD＞タグが編集できる必要があります。

①Hover.cssをダウンロードします。

②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。

　https://github.com/IanLunn/Hover

③「Hover-master.zip」というファイルがダウンロードされますので、

　中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。

④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。

<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>

Demo

主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。

http://ianlunn.github.io/Hover/


Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。



Pulse




ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。

テキスト編

ほたるの光　まどの雪
書（ふみ）よむつき日　かさねつつ
いつしか年も　すぎのとを
あけてぞけさは　わかれゆく

ほたるの光
まどの雪
書（ふみ）よむつき日
かさねつつ
いつしか年も
すぎのとを
あけてぞけさは
わかれゆく

画像編

随時更新予定…

【WEB】円形プログレス

CSSとJavaScriptとHTMLのコードだけで使えるブログ用のパーツとして使えるものが他にもありましたので、紹介します(^^)

円形のプログレスが上がったり下がったりするアニメーションをしますが、
カスタマイズすれば色々と使えるのではないかと思います。

円形プログレス

参考

TheCodePlayer

というサイトで他にも色々と使ってみたいコードがあります♪

また良い物があれば紹介していきます～(^O^)／

【WEB】計算機

CSSとJavaScriptとHTMLのコードだけで使える計算機を見つけましたので紹介します(^^)
（ブログでちゃんと動くかは未確認ですが(^^;)）

計算機

C

7 8 9 + 4 5 6 - 1 2 3 ÷ 0 . = x

参考

TheCodePlayer

というサイトで他にも色々と使ってみたいコードがあります♪

また良い物があれば紹介していきます～(^O^)／

【HTML5】PC・スマホ両用のフォトギャラリー

スマートフォンでフリックして写真を切り替えられるフォトギャラリーがあると思いますが、
探してみるとPCと共通で使えるものはあまりなく、
スマートフォン専用であるものがほとんどでした。

その中で、スマートフォンとPCと共通で使えるフォトギャラリーを見つけましたので
紹介します。

画像をフリック可能なフォトギャラリー

まずは、データフォルダのヘルプページでも使ってるフォトギャラリーです。
PCならマウスでドラッグ、スマートフォンならフリックで画像を切り替えられます。
PCとスマートフォン共通で利用できるので、別々なページに切り替える必要がなく便利です。
下部の画像をクリック／タップしても画像切替が可能です。

【アプリ活用】PVSTAR+

こんばんは。

今回は自分が音楽プレイヤーとして使っているアプリ『PVSTAR+』をご紹介します。

音楽プレイヤーと言っても、携帯やSDカードに音楽を保存しているものを
再生するわけではありません。

YouTubeやニコニコ動画、Dailymotion、Vimeo等の動画共有サイトから音楽を探して、
再生できるクラウド型の音楽プレイヤーです。

活用方法

自分が主に利用しているのは車内でのFMトランスミッターによる音楽再生です。
充電しながら音楽を再生させて、ナビを使ったりもしています。

音楽を持ち運ぶ必要がないため、音楽の入れ替え等の手間をかけずに
「人気動画ランキング」から最新の音楽を聞くことができて便利です。

洋楽やちょっと前にはやった曲なんかもたまにランキングにのっていたりするので
そういうのも聞いたりしちゃってます(^^)

気に入った曲などはプレイリストのような形で保存できる「マイリスト」を作成可能です。
たまたま見つけた良い曲や懐かしい曲、カラオケで歌いたい曲なんかを見つけた時に
保存しておいて、時間がないときはそれをまとめて再生させたりして活用してます(^0^)/

自分が知ってる曲や良い曲に巡りあうための機能も充実してますので、
それらの便利な機能について紹介していきます。

【アプリ活用】Endomondo

これまで色々なアプリを使ってきましたが、
日常生活の一部でアプリを使って活用していたりするので、
その活用事例をこれから紹介していきます(^0^)/

今回紹介するジャンルは、スポーツです。
自分はよくジョギングをするとき、このアプリを利用してタイムを計っています。


走るときにこのアプリを使ってタイムを計るだけで、
以下のような分析結果を表示してくれます。

Endomondo Sports Tracker

Endomondo Sports Trackerは、様々なスポーツに対応していますが、タイムや距離の記録を取るためランナーに一番使われてると思います。

時間、距離、速度、消費カロリーなどをリアルタイムに計測し、それを自動で管理・分析してくれます。

分析する内容も昔よりも高低差や消費水分量などが増えており、過去の記録を分析することもできますので、トレーニングにはかなり役立つのものになっています。

Endomondoのアプリで記録したデータは全てクラウド上で管理されます。

Webサイトへデータの連携が行われていて、

Webサイト上で提供されている分析記録のサービスが利用可能です。

（無料のアカウントの登録が必要です。）

【Google検索】リンク集は注意!!

アプリ開発の話からちょっと離れますが、
最近Google検索アルゴリズムの変更がありました。

今回の“アルゴリズム変更は「世界中のGoogle検索の90％に影響を与える」（CNET Japan）”
そうなので、ここで少し触れておきたいと思います(^^;


今回の検索アルゴリズムのアップデート（通称「ハミングバード」）では、
相互リンクの行為がスパムとして扱われるようになるそうです。


サイト内にリンクやリンク集などでたくさんのリンクがあるページがある場合、
相手側からもリンクされているとスパム扱いされる危険性がでてきそうなので
注意が必要です。

その対策として、リンクに「rel="nofollow"」をつけることで、
Ｇｏｏｇｌｅはリンクをたどらなくなります。


⇒　rel="nofollow"について（Google ウェブマスターツール）


上記で説明している rel="nofollow"の使用例として、
以下のようなリンクに使用すると説明しています。

・信頼できないコンテンツ

・有料リンク

・クロールの優先順位（他に優先したいページがある場合に検索除外する意味で使用）

今後はSEO対策が施されただけの相互リンクサイトやリンクだけのサイトが減り、

コンテンツが重視されたサイトが検索上位に表示されるようになってくるんでしょうか。

以下のサイトで説明しているような「コンテンツ　イズ　キング」の時代になってくるのかなぁ

と少し期待しています(^^)

⇒本当に「コンテンツ　イズ　キング」の時代がやってきた。自称SEO業者さん壊滅の日

【コンテンツ開発】開発に必要なソフトウェア（準備）

こんばんは。

今日はアプリ開発を行うための準備として、必要な開発環境についてまとめていきます。

ソフト以外にもＷｅｂにも便利なサービスがたくさんありますので、
アプリ開発を行ううえでは、こちらも含めて紹介していきたいと思います。

関連して画像加工や動画作成なんかで便利だったソフトもあったのでここにまとめておきます。

（１）Androidアプリ開発環境（ソフト）

・Android Studio……Googleが提供するAndroid開発環境(Windows/Mac)

・Eclipse ……………Visual Studioのような総合的な開発支援ツール(Windows/Mac)
・Android SDK………Android 開発キット、必須です(Windows/Mac)
・Chrome Canary … Google Chromeの開発者用ブラウザ(Windows/Mac)
・PupSQLite  ………アプリで使用するDBを確認するツール(Windows)

k0j1 Webサイトの紹介

前回のアプリの紹介に引き続き、
開発アプリのWebサイトについて紹介していきます。

k0j1の開発アプリ一覧のページを用意しました。
jQuery Mobileを使用したページで、各アプリのヘルプページにリンクしています。

Webサイト

■k0j1－アプリ一覧

■データフォルダ－ヘルプページ

■スクリーンメモ－ヘルプページ

■ペイント～simple～－ヘルプページ

各アプリのページはアプリからオプションメニューのヘルプで
これらのページに飛ぶように設定していますので、
実際にアプリのヘルプページとして利用しています。


アプリでそれぞれプロモーション用の画像を作成していたのですが、
今のGooglePlayでは使われていないのが少し残念です(^^;

まぁそこまで出来が良いわけでもないのですが、
画像の作成は時間がかかるため、もうちょっと活躍させたかったなと思っていたので、
せめてブログででも使いたいなと思い紹介しました(^0^;


アプリではWEBと連携したものも作ってみたいとは思うので、
今後はそのような技術も取り入れていこうと思います(^^)


また、今回WEBで使用しているjQuery Mobileについても、
色々と便利な機能が揃っているので、使用中の機能や今後使用する情報について
書いていきたいと思います(^0^)/