とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
とある六畳間で印刷物を作ったりWEB的な何かをしていたり、物思いをしてみたり、嫁様の目を盗んでtwitterとかしてたりします。
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考:Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 (※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか? 情報が見つからなかったので知ってる方は教えてください) また、viewportの数値はサイト側で指定できます。 スマホ
福岡を拠点に活動するPLUSではWebサイト制作・iPhone/Androidアプリの開発を行っています。 WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7sかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。 高速化に役立つツール まずはじめに、改善に役立つツールを2つご紹介します。 一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。 次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で
8月1日から、このサイトの WordPress を置いているサーバーを Amazon Web Services(以下 AWS)の Elastic Compute Cloud(以下 EC2)に移してみました。 ちょっぱやになってるけど、でも導入難しいんでしょう?なんてぼくが半年前に思っていたような声が聞こえてきそうですが、AWS の導入自体はさして難しいものではありません。 この記事では、ぼくでもできる、あなたでもできる AWS + 網元の導入についてご紹介します。 Table of Contents AWS って何? 網元って? AWS のアカウントを作成する AWS コンソールにログインする EC2 のリージョンを選ぶ Key Pairs を作成する Security Groups を作成する サーバーインスタンスを立ち上げる Elastic IPs を設定する WordPress のセ
「Download button」「CSS button」「Music Player」など、テキストボックスに欲しいユーザーインターフェースパーツを記入するだけで、総合計2万個以上のパーツの中から欲しいものを検索してきてくれるのが「UICloud」です。 UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads http://ui-cloud.com/ トップページのテキストボックスに探したいパーツの名称を記入して「Search」ボタンを押します。今回は「Download button」で探してみました。 すると検索結果一覧が表示されます。色んなダウンロードボタンがずらり。 気になったものをクリックします。 すると、大きめサイズのイメージが表示されます。 画面右端には詳細情報
こんにちは。 連日の暑さにとろけそう。井畑です。 今回は、前からやってみたかった事に挑戦してみました。 今はやりのWebフォントとCSS3を使って、 3Dボタンを作る事です。 以前から、機会があったらやってみようと思っていたのですが、 なかなか機会にめぐりあえず、どうせなら備忘録ついでに ブログに書いちゃえと思った次第です。 それでははりきってどうぞ! 目次 1.Webフォントを「fontello」からダウンロード 1-1.Webフォントを「fontello」からダウンロード 1-2.解凍して中身を確認する 2.CSS3でボタンを作成 2-1.HTMLの設定 2-2.CSSの設定(WEBフォント) 2-3.CSSの設定(ボタンの装飾) 2-4.CSSの設定(ボタンのホバー時装飾) 1.Webフォントを「fontello」からダウンロード Webフォントを使うにあたり、最近とてもステキなサイ
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
こちらの記事のざっくりまとめです Google Finally Takes A Clear Stance On Mobile SEO Practices Official Google Webmaster Central Blog: Recommendations for building smartphone-optimized websites (モバイル・スマホという言葉が出ますが、基本どちらもスマホを指しています。) 結論から言うとレスポンシブデザインがSEO上はオススメ あくまでSEOの観点ですが、スマホにかぎらず様々な表示領域をもつデバイスに対応するため、レスポンシブデザイン(画面幅に合わせてレイアウトが変わる奴。)が適用できるならそれが一番いいとのこと。 ※レスポンシブデザインに関しては、日本ではまだ定着していないため賛否両論があるようですが、個人的には本気でやるなら有りかな
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
2013年3月25日 ダウンロード ページを開くと、無機質な「メンテナンス中」の表示。誰もが一度は見たことがあると思います。文章のみが表示されると、なんだか寂しいですよね。だからと言ってメンテナンスページを作るのに時間をかけたくない…。そんな方のために、カウントダウンタイマー付きの「準備中ページ」テンプレートをご用意しました!ご自由にお使いくださいませませ。 ↑私が10年以上利用している会計ソフト! ダウンロード デモ 仕様 無料 商用サイトでの利用可 日付設定するとカウントダウン可能 Chrome、Safari、Firefox、iOS、IE7〜9、Operaで動作確認済 タイマーの設定 タイマー設定は index.html の <head></head>内にある $(function () { $('#countdown').countdown({until: new Date(2013
Google AdSenseのパフォーマンスが劇的に向上した!!!絶っっっ対に設定した方が良い「カスタムチャネル」の「ターゲット設定」について あいもかわらずプロ・ブロガー本を読み漁っております@OZPA です。 今回は、Google AdSenseを導入しているブロガーの方でしたらなにはともあれぜっっっっったいにやっておいた方が良い「カスタムチャネル」と「ターゲット設定」についてのお話。 参考:Google公式のAdSense無料ガイドブックがものすげぇ参考になった | ごりゅご.com 「ターゲット設定」とは? 「プレースメントターゲット」を設定しておこう (中略)広告ユニットには忘れずにカスタムチャネルを設定し、ターゲット設定で[広告の掲載先(ブログの内容の簡単な説明)][広告掲載位置][説明]のそれぞれをにゅうりょくしておきましょう。 via:「必ず結果が出るブログ運営テクニック1
画像をホバーすると、ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシートを紹介します。 デモページ [ad#ad-2] 実装 HTML 画像のimg要素とエフェクト用のdiv要素をdiv要素で内包します。 <div class="image_shine"> <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" /> <div class="hover_shine"></div> </div> CSS まずは、ラッパーのdiv要素のスタイルです。 エフェクト用のdiv要素用の「position: relative;」がポイントです。 .image_shine{ width: 200px; height: 200px; margin: 30px auto; posit
2012年 04月 20日 フリーイラストサイト12点。商用利用OK・著作権表示不要・無料。 カテゴリ: フリー素材 タグ:イラストフリー素材まとめ作成支援ツール 会社内の資料を作成する際やブログを書く際にイラストが欲しい!と思うことは多々あるんですが、ひとつひとつイラストを書いてると膨大な時間が掛かってしまいあまり現実的では無いかなと思います。 なので、ちょっとフリー素材として使えるイラストを公開してくれているサイトをご紹介すると共に、シェアさせて頂こうと思います。 こういったものをフリーで公開していただけるのは非常に有難く頭が上がりませんね。尚、商用利用可能で、著作権表記が出来るだけ不要のものをご紹介させて頂きますがWeb上で公開したりする際は念の為、各サイトのポリシーや利用規約をご確認下さい。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く