SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ - Design Color
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
Googleマップをスマートフォンでも最適な大きさで表示しよう！ - Design Color
ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。 @media (max-width: 767px) { iframe { width: 100% !important; } } とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。 何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。 .google-maps { position: relative; padding-bottom: 75%; /*これが縦横比*/ height: 0; overflow: hidden; }
初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします！ もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ（エッジを整列）」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…！ CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください！ 1.
自分のデザインをチェック！色覚シミュレーションの方法いろいろ - Design Color
もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型：赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型：緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型：青い光を主に感じる錐体が無いため、青色付近の識
jQuery.autopagerで次ページを読み込む間にローディングアイコンを表示させよう - Design Color
2.ローディングアイコン 読み込んでいる間に表示させるローディングアイコンを用意しましょう！ 私はこちらのサイトでローディングアイコンを作成しました！細かい設定ができるジェネレーターです！ 3.「次のページへのリンク」を取得する関数 「オートページャー」とは、分割されている「次のページ」を今みているページ内に継ぎ足して読み込んでくれるものです。なので、「読み込むべき『次のページ』とは何ページ目なのか」を指示してあげなければならないですよね。 ※オートページャーの場合は「前のページにもどる」ことは考慮していないので、「次のページへのリンク」だけでOKです。 例えば一番簡単な方法だと「現在のページ + 1」で次のページの値が取得できます。 以下はものすごくシンプルにした「次のページへのリンク」を取得する関数の例です。 <?php function nextpage(){ //現在のページを取得
WordPressでスマートフォン用テーマを作成した時の5ステップ - Design Color
1.スマートフォンサイトのデザインを研究 以前に「私が初めてブログのデザインをした時の流れ」という記事を書きましたが、その時「ブログらしいデザイン」を事前に調べたように、今回も「スマートフォンサイトらしいデザイン」というものを研究しました。 PCとは勝手が違うので、スマートフォンでは何px以上の文字サイズなら見やすいのか？どのくらいの大きさのボタンなら押しやすいのか？ロゴやメニューはどこにおくのか？など、最初は何もかもわからなかったです。 その時、参考にさせていただいた記事は以下のとおりです。 ありがとうございます！ 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 | 07design.blog スマートフォンサイトをデザインする上で知っておくべき10のTIPS – to-R スマートフォンの画面デザインで気をつけるべき4つのポイント ｜ SONICMOOV
サイトをスマホ対応した時に意識したこと5つ - Design Color
もくじ サイト幅はリキッドレイアウト&リンク領域は大きめに 動画やGoogleマップも画面サイズに応じて伸縮するように なるべく画面遷移をしないように PC版のデザインでも見れるように 最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめに サイト幅は基本的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか！しかも、スマホを横向きにするとまた解像度が変わってきます。 なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。 また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。（とはいえ、タグやはてブのリンクまでは大きくできなかったのですが）一部を除いては基本的にはリンク要素は「44px以上」
Wordpressテーマ作成に役立つ記事＆学んだことまとめ（テーマ作成編） - Design Color
もくじ ローカルの環境構築 テーマ作成 全体的な行程 部分的な機能の実装 使用したプラグイン サムネイルサイズ一括変更 – Regenerate Thumbnails テーマの表示確認 – WordPress Theme Test Drive リリース前 – Maintenance Mode やってしまったミス・・・ GoogleAnalyticsのコードを埋め込み忘れてしまった functions.phpのタグを閉じてしまった ローカルの環境構築 死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編） | OZPAの表4 新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにBitNamiを導入してみました。 … 個人的にはXAMPPよりはるかに簡単でした！ 以前にXAMPPでローカルの環境構築しようとして全然
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
