もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
WordPressでしっかり設定しておきたいセキュリティやメンテナンスに役立つ.htaccessのまとめ
WordPressでブログやサイトを運営する前、そして運営している時にしっかり設定しておきたいWordPressのセキュリティやメンテナンスに役立つ.htaccessの設定を紹介します。 .htaccessファイルを守る 最初に行うことは、.htaccessをあなた以外の無許可のアクセスから守ることです。下記のスニペットは第三者があなたの.htaccessファイルにアクセスするのを阻止します。 ルートの「.htaccess」に下記を記述します。 <files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </files> wp-config.phpファイルを守る WordPressでもう一つ重要なファイルがあります、それはwp-config.phpです。
[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll
ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 Infinite Scroll 一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。 Infinite Scrollのデモ Infinite Scroll -jQueryのプラグイン Infinite Scroll -WordPressのプラグイン Infinite Scrollのデモ デモはテキストだけのページです。 ページ下部の「more」をクリック Infinite Scroll -jQueryのプラグイン Infinite Scroll -jQueryのプラグイン Infinite Scrollの使い方 Infinite Scrollの実装は簡単です。 まずは、外部ファイルをセットします。 <sc
コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 ｜https://wp.yat-net.com/name
2012年 01月 12日 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 カテゴリ： Sass タグ：CodingSassコーディング効率化 CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換（コンパイル）します。 コンパイルされたフ
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
WordPress初心者がハマリやすいエラーや問題とその解決方法
WordPressでブログやサイトを作成・運営する際に役立つ、ハマリやすいエラーや問題とその解決方法を紹介します。 WordPress Tips and Tricks for Beginners [ad#ad-2] 下記は各ポイントを意訳したものです。 テーマとテンプレートの違いは？ 画像が表示されない URLを全部書くのが面倒 パンくずを設置したい ページごとに異なるスタイルシートを適用したい 新しい記事を表示したい テーマとテンプレートの違いは？ 問題 WordPressのテーマファイルとテンプレートの違いが分かりません。 答え テーマファイルはあなたが必要とするファイルをすべて含むフォルダです。 例えば、WordPressのデフォルトのテーマファイル「Twenty Eleven」がそうです。 WordPressをはじめる多くの人がテーマファイルからはじめ、それを元にブログやサイトを作
お金が無くとも実践できる21の素敵なマーケティング手法 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする ＞＞ インターネットで誰でも自社サービスを簡単に世界に売り込めるようになったと言っても、サイト制作や広告宣伝にはお金がかかり、SEOするにしても外注すればお金がかかる（＆結果の保障なし）だったりするわけです。同じく0から始めたシリアルアントレプレナーの筆者が、そんな悩めるあなたにお金が無くとも実践できるネットマーケティングの手法を21も紹介してくれました。これを読めば「お金が無くて自社サービスを十分に売り込めない」なんて言い訳は通用しなくなるかもなので、ある意味覚悟して読むべきかも？ — SEO Japan あなたも自分の会社をオンラインで売り込もうとしている？というか、やっていない人なんていないので
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
はじめての MySQL で100万件のデータを管理する時に行ったチューニングまとめ
MySQL の勉強をせずにフレームワーク等で SQL を書かずに Web サイトを構築していました。データ数も2万件程度でしたので、そこまで困ることはありませんでしたが、今回100万弱の商品データを扱う機会ができたので、MySQL のチューニングや発行する SQL について見直す機会がありました。 この記事では MySQL を高速化するのに行った対策など勉強したものを自分用にメモしておきました。 条件式で比較するカラムにインデックスを使用して高速化 商品コードで存在しない商品を見つけて、商品をDBに登録するという処理を行っている場合、4万件超えたころから処理に2秒以上かかるようになってきます。12万件超えた頃には10秒程度かかるようになってしまいましたが、商品コードのフィールドに対してカラムインデックスを貼ることで0.2秒に短縮することができました。 MySQL のリファレンスにも以下のよ
Webデザイナーさん、デザインを複数案作るとき、どんなことに気をつけてますか？
☆ご注意☆ この記事は 2011年7月23日 に書いたものです。情報が古い可能性がありますのでご注意ください。 デザイン案についていつも考えてる事、悩んでる事などをまとめてみました。 いつも孤独に作業してるので一般的にどうしてるのか知りたい！！ デザイン案っていくつ作ってますか？ 私は毎回2案作っています。 理想としては2～4案だと思うのです。 でもちょっと今の環境では時間的、コスト的に2案出すのが限界で、、、(´・ω・`) 前の制作会社にいたころはデザイナーの人数も多かったので3人×2案の6案、コンペ形式っていうのもありました。 同じトップページでもデザイナーによって同じ条件でも出来上がるものは全く違いますから、自分とはぜんぜん違う方法で表現したりしていて、デザイナー同士もすごく勉強になって、個々の引き出しが増える技術力UPになります。 クライアントにとっても、たくさん判断材料があるし、
WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α - かちびと.net
以前書いたWordPressでWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、WPも 3.2のリリースを迎えましたので、手順リスト もアップデートすることにしました。多少考え が変わっているので内容も少し変更有ります。 以前のリストの改正版です。加えて他の情報も一緒に載せておく事にしました。 【2011・07・11】 WordPressインストール サーバーを用意（PHP5.2.4 以上 / MySQL5.0 以上） DBを作成 WordPressをダウンロードし、解凍 wp-config-sampleをwp-configにリネームし、内容をDBに合わせて変更 プリフィクス（接頭語）を変更する（wp_→foodblog_） FTPソフト等でサーバーにアップロード サイト名やパスワード、IDを決める（adminは避ける） 作成したユーザー名でログイン
プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集:phpspot開発日誌
25 Excellent Photoshop Web Design Layout Tutorials プロレベルでクオリティの高いWEBサイトレイアウト作成Photoshopチュートリアル集。 かなりクオリティが高くて、１つの仕事としてうけちゃったほうがよいぐらいのチュートリアルが沢山です。 本などでこうしたチュートリアル集を買うと千円以上したりしますから、なんとも有り難いですね。 英語で書かれていますが、英語力も同時に向上させちゃえるという意味では本当にいい教材です。 関連エントリ 立体感がうまく出たWEBサイトデザイン作成Photoshopチュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル フレッシュなPhotoshop用WEBレイアウトチュートリアル２５ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集
WordPressをカスタマイズするなら覚えておきたいアクションフックとフィルターフック
WordPressのカスタマイズコードでよく見かける add_filter、add_action という関数。これは WordPressのプラグイン API という仕組みを利用したもの。プラグイン API - アクションフックやフィルターフックについて、大雑把ですがまとめてみました。 WordPress を使ってWebサイトを作る時、デフォルトの WordPress の動きを変更したいなーという時が多々あります。WordPress のデフォルトの動き（WordPress Codexでは振る舞いという言い方がされています。）でよく知られてるのは、記事を書くと自動的に <p> タグが入る … とかでしょうか。とにかくそういう WordPress の振る舞いを、何とかしたい場合ってありますよね。 こういった WordPress 独特の振る舞いは、WordPress のコアファイルと呼ばれてるとこ
初めてWordPressを使ってみようという人の為の予備知識
私も大好きな WordPress。これから WordPress を始めてみようかなと思ってる人や、インストールまではしたけど ... という人向けの記事です。カスタマイズなどについての記事ではないので、いつもの読者さん向きの記事ではないかもしれません。 このブログ – Webデザインレシピ、WordPress というキーワードで訪問してくれる人がとても多いんです。でも「WordPress」だけで、複合キーワードなしで訪れてくれているので、WordPress についての何を調べているのかなー …。 なので、今回は WordPress そのものについて、知ってる範囲でまとめてみました。WordPress って何？という漠然とした疑問を持ってる人、または、初めて WordPress を使う！という人向けの記事です。 初めての WordPress 目次 WordPress って何？ WordPre
ウェブページの高速化のために読んでおきたいサイトのまとめ
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた（公式発表） | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳
ウェブページの重要な箇所を素早く伝える5つのデザインテクニック
Creating Focal Points in Your Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事ではさらに多くのサイトが紹介されています。 はじめに タイポグラフィ イラストレーション ボタン ホワイトスペース デコレーション はじめに ウェブサイトのユーザーは、少しでも速くものを見いだすことを望みます。そしてわたし達ウェブデザイナーは、そのようにサイトをデザインするべきです。これを実現する最も重要な方法の一つがフォーカルポイントです。 フォーカルポイントと、はユーザーの注目をガイドするようウェブページ上に目立つセクションのことです。フォーカルポイントは際立っており、他のコンポーネントとは別のものです。ウェブページの最も重要な外見を強調し、ウェブサイトの主となる目的を伝えることが可能です。 タイポグラフィ タイポグラフィはサイズ、カラー、ス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まるで辞書!探したいWordPressおすすめプラグインがすぐに見つかるページ【厳選39個】
html5-memo.com
