eye_icloud

iCloud のまとめ

iCloud には iCloud.com でも使える機能と各アプリから使用する使い方がありますが、iCloud.com で使える機能を忘れがちなので、簡単な一覧とサポートのリンクを作成しました。



【その他】


【iCloud サポート】
http://www.apple.com/jp/support/icloud/

【Appleのサービス、Store、およびiCloud(システム状況の確認)】
https://www.apple.com/jp/support/systemstatus/

会社の Mac からもフォトストリームが見たいんですが、iCloud.com では見れないので、結局 Dropbox のカメラアップロードを利用しています。何か上手い共有方法はないものでしょうか…。
このエントリーをはてなブックマークに追加
LINEで送る

SEO

SEO診断・対策ツールの無料サービス一覧

ウェブサイトの運営・管理には欠かすことのできないSEO対策。でもどう対応すれば良いかわからない…。そんな時の手助けになる、SEO診断・対策の無料オンラインサービスをまとめました。

Ferretポータルサイト (SEOツール集)

http://tool.ferret-plus.com/

・URL構造チェック  ………………………………… ◎
・HTML構造チェック ……………………………… ◎
・コンテンツ対策チェック ……………………… ○
・キーワード対策チェック ……………………… ○
・被リンク数・ドメイン数チェック………… ○
・サイト全体分析チェック ……………………… ◎

キーワードの参考になる キーワードアドバイス や競合サイトの流入キーワードがわかる 秘密ワードPro をはじめ、URL構造対策, HTML構造対策, コンテンツ対策, キーワード対策, Googleツール, サイト全体分析 を判定してくれる SEOスカウター に 競合比較サイト, 被リンクチェック がそろった SEO対策ツール、その他 SEO順位チェック, 文章リライトツール…など、SEO対策に最適なサービス満載。ただし SEOスカウター の登録ドメイン数は3件, 登録ページ数は各5件と制限があるため、機能をフルに活用したい方はプレミアム会員登録が必要です。

SEOツール|超高機能次世代無料SEOtools

http://www.seojapan.co.jp/seotool/

・URL構造チェック  ………………………………… ×
・HTML構造チェック ……………………………… △
・コンテンツ対策チェック ……………………… △
・キーワード対策チェック ……………………… ○
・被リンク数・ドメイン数チェック………… ○
・サイト全体分析チェック ……………………… △

URL・Title・Description・Keywords・H1・発リンク数(総リンク数,外部リンク数,内部リンク数)・ヘッダー情報・ファイルサイズ・読み込み時間の基本情報と
ディレクトリ登録、SNSブックマーク数の確認が可能。ページ内のSEOキーワードのチェックがしやすいので、運用後の確認には最適なツールです。

SEO診断ツール itomakihitode.jp

http://itomakihitode.jp/

・URL構造チェック  …………………………… ×
・HTML構造チェック ………………………… ×
・コンテンツ対策チェック ………………… ○
・キーワード対策チェック ………………… ○
・被リンク数・ドメイン数チェック…… ○
・サイト全体分析チェック ………………… ○

上の2つと比べると項目や内容は弱いですが、レーダーチャートやグラフなど、分析がビジュアル化されていてわかりやすい。有料版ではより詳細な診断データが得られます。SEO対策サービス devo が運営。

被リンクチェックの無料SEOツールhanasakigani.jp

seotools_hanasakigani

・URL構造チェック  …………………………… ×
・HTML構造チェック ………………………… ×
・コンテンツ対策チェック ………………… ×
・キーワード対策チェック ………………… ×
・被リンク数・ドメイン数チェック…… ◎
・サイト全体分析チェック …………………  ×

被リンク数のチェックに特化したサービス。自サイト・競合サイト それぞれの 被リンクチェック競合サイト被リンク危険度チェック被リンク獲得ペナルティ対策 をチェック。SEO対策サービス devo が運営。

無料で使えるSEOツール SEOチェキ!

http://seocheki.net/

・URL構造チェック  …………………………… △
・HTML構造チェック ………………………… △
・コンテンツ対策チェック ………………… ○
・キーワード対策チェック ………………… ◎
・被リンク数・ドメイン数チェック…… ○
・サイト全体分析チェック ………………… ○

ページ情報 から一目で URL, title, description, keywords, h1, 発リンク数, ファイルサイズ, ページ読込時間 が確認できるほか、ソーシャルサイトGoogle PageRank, 検索順位チェック, キーワード出現頻度チェック もできるため、自サイトの現状を知りたい場合に最適な診断ツール。

SEOTOOLS – SEO対策を無料ツールで診断!

http://www.seotools.jp/

・URL構造チェック  …………………………… ×
・HTML構造チェック ………………………… ×
・コンテンツ対策チェック ………………… ○
・キーワード対策チェック ………………… ○
・被リンク数・ドメイン数チェック…… ○
・サイト全体分析チェック ………………… ○

最重要に認定されているキーワードYahoo, Google の検索順位 をはじめ、Google ページランク・トラフィックランキング・インデックス数・被リンク数 の分析結果を掲載。別サービス 鬼ツールズ.htaccessファイル作成日本語文章校正支援 などのツールも便利。

SEO診断ツール Dipper β(ディッパー)-Septeni-

http://dipper.septeni.co.jp/

・URL構造チェック  …………………………… △
・HTML構造チェック ………………………… △
・コンテンツ対策チェック ………………… △
・キーワード対策チェック ………………… ○
・被リンク数・ドメイン数チェック…… ○
・サイト全体分析チェック ………………… ○

総合評価をポイントで表示。検索順位検索結果数 をはじめ、ページランク, ディレクトリ登録, 被リンク数, Googleインデックス数, キーワード出現数, サイト構造, ソース, ドメイン取得 をA〜C判定で表示されます。

SEOエボ: 究極のSEOツールであなたのサイトを無料診断

http://www.seoevo.jp/

・URL構造チェック  …………………………… △
・HTML構造チェック ………………………… △
・コンテンツ対策チェック ………………… △
・キーワード対策チェック ………………… △
・被リンク数・ドメイン数チェック…… △
・サイト全体分析チェック ………………… △

SEOツールズ の 検索順位チェック・総合SEO診断 はその場で利用可。その他の 競合サイト診断・被リンク調査・ブラックリスト判定・サイトへの流入キーワード・キーワードアドバイス・キーワードヒント については、ニックネーム と メールアドレス, パスワード の登録が必要です。

サイト解析+SEO診断ツール無料!

http://seotool.sk-corp.jp/

・URL構造チェック ………………………………… ×
・HTML構造チェック ……………………………… ○
・コンテンツ対策チェック ……………………… △
・キーワード対策チェック ……………………… ◎
・被リンク数・ドメイン数チェック………… ○
・サイト全体分析チェック ……………………… ○

1.対象キーワードで検索した順位, 2.対象キーワードの検索結果数, 3.Googleページランク, 4.Yahoo!カテゴリの有無, 5.被リンク数, 6.インデックス数, 7.対象キーワードの出現数, 8.サイト構造, 9.htmlソース, 10.ドメイン取得年月日に項目を100点満点で採点。点数なので項目別の評価がわかりやすいです。

ToFUシステム

http://www.tofu-system.com/

・URL構造チェック ………………………………… ×
・HTML構造チェック ……………………………… ◎
・コンテンツ対策チェック ……………………… ◎
・キーワード対策チェック ……………………… ○
・被リンク数・ドメイン数チェック………… ×
・サイト全体分析チェック ……………………… ○

対策キーワードURL から、SEO対策状況を判定。タイトルをはじめ、H1, H2, H3 タグ内などの キーワード比率, 文字数, 構成単語数 が表示されるので、キーワードのメンテナンスに最適。また HTML, CSS の改善もSEOの効果あり。全体の総単語数・構成単語数・総単語数に対する構成単語数の比率・キーワード比率判定結果(A++ ~ F)も表示される。上位ランクインを目指すなら、成果法修正SEOサービスもあります。

以上、SEO診断ツールを紹介しましたが、HTML構造のチェックから見直す場合は Ferretポータルサイトの SEOスカウターToFUシステム が最適ですが、キーワードや被リンクのチェックは一長一短あるため、一つにサービスに偏らず複数の結果から自分のサイトが対応すべき点を見つけることが大切です。また、SEOはトップページだけでなくサイト全体の評価でもあるため、ページ数が多いサイトを運営・管理する方は、自分のサイトに適した有料サービスを使うことも検討しましょう。

このエントリーをはてなブックマークに追加
LINEで送る

Online Color Challenge

「Online Color Challenge」で色の正確さを計測してみる

GIZMODO の記事で紹介されていた「Online Color Challenge」で色の正確さが計測できるとのことでやってみました。

http://www.xrite.com/online-color-test-challenge

Online Color Challenge

colorchallenge-01s

色彩従事者の色覚がその業務を遂行する上で必要な機能を有しているかどうかをテストする Farnsworth Munsell 100 Hue Test(マンセル 100ヒューテスト)に基づいた計測で操作は簡単。カラーチップが固定されている最初と最後のから色相の順序でグラデーションになるようにドラッグ&ドロップで並べ替え、終了したら「Score Test」をクリックします。

colorchallenge-02s

結果は…惜しくも『4』!

colorchallenge-03s

性別+年代別のベストスコア「0」とハイスコア「1520」が表示されますが、平均値はなし。でもかなり良いスコアではないかと思われます。

結果はモニタの精度や環境光によっても左右されますが、加齢に伴い色彩識別能力は低下するそうなので、この機会にテストしてみてはいかがでしょうか?

■ あなたは色がどれだけ見えていますか? グラデーションで色の正確さを計測できる「Online Color Challenge」
■ Online Color Challenge

このエントリーをはてなブックマークに追加
LINEで送る

画面サイズ一覧

画面サイズ一覧

インターネット初期の頃は画面サイズが 640×480800×600 などが標準サイズでしたが、今では PC,タブレット,スマートフォンはもちろん、家庭用ゲーム機やテレビからもインターネットを見ることができる一方で、配置する画像サイズに困ることも少なくありません。

…というわけで、ウェブサイトの背景画像や壁紙などを作成する際の参考に画面サイズ一覧をまとめてみました。

※ ここでは主な規格のみ掲載しています。機種ごとのサイズには対応していませんのでご了承ください。

画面サイズ一覧
サイズ 通称 比率 備考
320×240 QVGA 4:3 PDAや携帯電話などで採用
400×240 WQVGA 3:2 QVGAの幅を広げた規格。PDAや携帯電話などで採用
640×480 VGA 4:3 PC用グラフィックシステムの標準
800×480 WVGA 15:9 VGAの幅を広げた規格。PDAや携帯電話などで採用
800×600 SVGA 4:3 256色、65536色、16777216色
854×480 FWVGA 16:9 WVGAの幅を広げた規格。PDAや携帯電話などで採用
1024×768 XGA 4:3 iPadが採用
1280×800
1280×768
WXGA 15:9
16:10
1280×960 Quad-VGA 4:3 VGA(640×480)の4倍の画素数・面積(相似比は2倍)
1280×1024 SXGA 5:4
1400×1050 SXGA+ 4:3 SXGA(1280×1024)を縦横にわずかに広げた解像度
1680×1050 WSXGA+ 16:10
1600×1200 UXGA 4:3
1920×1080 FHD 16:9 フルHD
1920×1200 WUXGA (Wide-UXGA) 16:10 ノートパソコンの最大ピクセル数
2048×1536 XGA (Quad-XGA) 4:3 XGA(1024×768)の4倍の画素数・面積(相似比は2倍)
2048×1536 Retinaディスプレイ 4:3 iPad Air … 264ppi
iPad mini … 326ppi
2560×1600 WQXGA (Wide-QXGA) 16:10 WXGA(1280×800)の4倍の画素数・面積(相似比は2倍)
2560×2048 QSXGA (Quad-Super XGA) 5:4 SXGA(1280×1024)の4倍(Quad)の画素数・面積(相似比は2倍)
3200×2400 QUXGA (Quad-Ultra-XGA) 16:10 UXGA(1600×1200)の4倍の画素数・面積(相似比は2倍)
3840×2160 QHD (Quadruple/Quarter High Definition) 16:10 フルHD(1920×1080)の面積比4倍(3840×2160、相似比は2倍)または1/4(960×540、同1/2)の解像度
3840×2400 QWUXGA (Quad-WUXGA) 16:10 QUXGA(3200×2400)の横幅を広げた解像度

最近のモニターであれば、16:10 で画像を作成すれば対応しますが、古いモニターに対応する場合は4:3のサイズで作成するのが望ましいでしょう。また、レスポンシブで縦・横どちらの表示にも対応する場合は 1:1 で背景画像を作成し、保存時の画像圧縮などで適切なサイズに書き出すようにしましょう。

※ iPad Air(264ppi), iPad mini (326ppi)をはじめ、高解像度の画面に最適な画像を用意する場合、2048×2048 の画像を別に用意し、jQuery でPCとスマホで画像を切替える方法などを使います。

このエントリーをはてなブックマークに追加
LINEで送る

Lightbox

Lightbox を使った画像表示

Sleeping egg では主に写真を掲載していくため、先に作成した fullPage.js ベースのティザーサイトで大きいイメージを表示するのに最適な Lightbox をとりあえず追加してみました。
※ ティザーサイトの作り方はこちら »

1. 公式サイトから Lightbox をダウンロード

Lightbox のダウンロード

Lightbox のダウンロード

トップページを下にスクロールすると、Lightbox v2.6 のリンクがあるので、そこからダウンロードします。

2. lightbox2.6.zip を解凍

lightbox2.6.zip の解凍ファイル一覧

lightbox2.6.zip の解凍ファイル一覧

解凍されたファイルには css, img, js の各ファイルと index.html が入っています。

3. 解凍した lightbox のフォルダを fullPage.js で作成したサイトに移動

fullPage サイトに lightbox フォルダを移動

fullPage サイトに lightbox フォルダを移動

Lightbox のファイルをまとめるために lightbox フォルダをそのまま移動していますが、外部リンク先を変更しない場合は img, js, css の各フォルダを example2.html と同じ階層に保存してください。

4. htmlファイルの<head>に JavaScript を追加

&lt;script type=&quot;text/javascript&quot; src=&quot;lightbox/js/lightbox-2.6.min.js&quot;&gt;&lt;/script&gt;

既にHTML内に jquery が入っているため、jquery-1.10.2.min.js は外しておきます。また、lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

5. htmlファイルの <head> に CSS を追加

		&lt;link href=&quot;lightbox/css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;

lightbox フォルダを使わない場合には lightbox/ の記述を消してください。

6. 画像リンクに Lightbox を設定

&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-1.&quot; href=&quot;lightbox/img/demopage/画像-1.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;
&lt;a class=&quot;example-image-link&quot; title=&quot;キャプション-2.&quot; href=&quot;lightbox/img/demopage/画像-2.jpg&quot; data-lightbox=&quot;要素名/グループ名&quot;&gt;
&lt;img class=&quot;example-image&quot; alt=&quot;thumb-1&quot; src=&quot;lightbox/img/demopage/サムネール画像-2.jpg&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
&lt;/a&gt;

Lightboxを有効にするには、画像の a 要素に data-lightbox 属性を追加します。data-lightbox の値が単独の時は1枚画像に対しての効果、複数の画像に共通した data-lightbox 値を設定すると、共通のグループ画像として認識されます。また、キャプションを表示する場合は title 属性を設定します。

7. Lightbox の動作確認

通常の画像表示

通常の画像表示

↓画像をクリック↓

Lightbox 使用時の画像表示

Lightbox 使用時の画像表示

画像がモーダル・ダイアログで拡大表示されたら、Lightbox は正常に動作しています。

今回はサンプルをほぼそのまま使用していますが、ボタンやモーダル・ダイアログ時の背景色をはじめ、アレンジした使い方もやってみたいと思います。

このエントリーをはてなブックマークに追加
LINEで送る