iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
【 Photoshop小技！】ホワイトバランスが狂っている商品写真（白背景）を一発でなおす方法
豪快にホワイトバランスが狂いまくっとりますなぁ・・・・。でも、WB狂っている通販の商品写真は巷でよくみかけますよね・・・。 白の背景を使った商品写真であれば、Photoshopを使って一発で直す方法をお教えしたいとおもいます。 ①まずは下準備、、「スポイトツール」を選択し、「選択の範囲」を「５ピクセル四方の平均」を選択。（次回からは、この設定を変えない限りこの作業は不要） ②「トーンカーブ（イメージ → 色調補正 → トーンカーブ）」を選択。白スポイトをダブルクリック！ このような画面が表示。 ③R=245 G=245 B=247と打ち込む。→OKをクリック この画面に戻ります。そのままカーソル（スポイト）を、写真の白であろう部分に持っていきます。 白背景のこのあたりにカーソルを持ってくると、 ④「情報」ウィンドウを見ながら、RGBいずれかのチャンネルの上限が240を超えない（240は最適
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
WordPressのSEO対策【厳選25項目】プラグイン・テーマ・設定の方法
WordPressは、機能性、拡張性、運用面、セキュリティなど様々な点で総合的に優れたCMS（コンテンツ・マネジメントシステム）です。 そしてWordPressは、GoogleのSEOに関する情報発信者で有名なマット・カッツ氏のブログでも愛用されており、同氏も認めるほどSEOに相性が良いことが特徴です。その理由は、検索エンジンに評価されるサイトの設計・構築が細かく、容易ににできうる点にあります。 そこで今回は、WordPressのSEO対策について、導入、設定、テーマ、プラグインという大きく4つのフェーズで、SEO効果を最大限に引き出す為の方法をご紹介します。 ※本記事とは別に『CMSのSEO対策』でもWordPressのSEOに役立つ補足を解説していますので是非ご覧ください。 WordPressの導入時に行うこと WordPressを使ってWebサイトを構築するには、事前にサーバーとドメ
無料で使えるWordPressテーマ「Simplicity」が良い。
このブログはWordpressを使っているのですが、その中でSimplicityというテーマを使用しています。 ブログを開始するにあたって、自分で作ろうか有名どころのテーマをカスタマイズしようかどうしようかと迷っていたところ、調度良いタイミングで、フォロワーのわいひら(@MrYhira)さんという方がテーマを公開されていたので、「これはなかなかよさそう」だと思い、 ちなみに、わいひら(@MrYhira)さんは、頸髄損傷でほぼ寝たきりの生活をしつつ、寝ログというライフハック系ブログを運営されたり、テーマを公開したり、フリーソフトを公開していたりと、パワフルな方です。 ここからはSimplicityを簡単に紹介します。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEOの最適化 拡散のための仕掛けが施されている 端末に合わせた4つのレスポンシブスタイル 手軽に収益
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
