サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
hm-solution.jp
こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード ※2014.02.03 jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>
前回のデザイナー視点で見る!イケてるバナーとトホホなバナー~これはトホホ編~ に引き続き今回は参考にしたいグッドデザイン編! 前回はあまり目に優しくありませんでしたが、今回はアイデアの種になりそうなバナーたちです。 縦に割る 写真を文字を分けることでスッキリとした印象になります。
今日はひな祭りですね。ひな壇飾っていますか? それはさておき、Googleがスマホ対応しているサイトを検索結果に影響を及ぼすと発表してしまいました。 その内容とはいかがなものでしょうか・・・? 先日Googleが検索エンジンのランキング要素に対し、スマホ対応を加味することを発表しました。 スマホ対応するとスマホの検索上位表示に影響するよって話 実は去年の12月頃からスマホサイト対応の表示は検索結果に表示されていた Webサイトがスマホ対応していなければ、もちろんこのラベルは表示されません。 Googleは具体的にどう評価に反映させるのかは語っていませんが、目に見える変動があることを予測しておくほうが良いと言えますね。 この評価基準は4月21日から導入を予定 Googleはこの評価基準はスマホからの検索結果に対し影響する、と語っています。 つまりPCサイトには影響しない、と語っている反面 つ
暖かくなったと思ったらまた寒くなるし、、、 服装に悩む季節になってきましたね。 はやく暖かくならないかな〜 先日チャットワークAPI利用の申請をだしておりましたが、無事利用可能となりました! 午前中に申請を出したのですが、その日の夜には「【チャットワーク】チャットワークAPI(プレビュー版)ご利用開始のお知らせ」メールを受け取りました。 チャットワークさん、ありがとうございます〜 試しに、Google Analytics × スプレッドシート & チャットワークでデータを効率的に見よう! | チャットワーククリエーターズブログの記事を参考にしながら、アナリティクスのデータをチャットワークへメッセージ投下してみようと思います。 すること チャットワークAPIのAPIトークンを発行してもらう アナリティクスの情報を用意する スクリプトギャラリーからスクリプトをダウンロードしちゃう ChatWo
①の手軽軸は言わずもがな、コンビニとか回転寿司、1000円カットみたいな、誰もが手軽に利用できるサービスや製品のこと。 ②の商品軸は、レクサスやApple製品など、商品やサービス自体の魅力で売れるもの。 さらにブランドが確立してくると、「それを持っているグループに属したい」みない帰属意識もでてくるので、余計に売れます。 ③の密着軸は、 「おっちゃんいつものね」「あいよ!兄さんも飽きないね~」みたいな感じもそうですし、宿泊したホテルに、コンタクトレンズの洗浄液とか、携帯の充電コードが備えてあるなんていうのもそうですね。 隣のライバル店が安さを売りにするならそこでは戦わず、 「全く別の商品を仕入れてみる」とか「宅配サービスを始める」とか、 自社に合った方法で、別の角度から攻めるわけですね。 ここで勘違いしてはいけないのが、全ての軸を強みにするのは無理だけど、全体のベースは高めないといけないとい
Google Chromeの新バージョンでデベロッパーツールの中身がちょろちょろ変わっていますね。 知らないうちににょろっと変わっているってことよくありますが、ユーザーエージェントはよく使う項目なので備忘録としてブログにしておきます。 Google ChromeのUser Agent項目が消えた? webに携わるお仕事している人向けのお話です。いつものようにスマホサイトの確認をしようとChromeのデベロッパーツールを開いていた時のお話です。 あれ?いつもの項目と何か違う・・・? え?User Agentの項目ないじゃないか! もうだめぽ。 こんな気持ちになった方は少なくとも僕だけではないはず。 対処法 バージョン31の環境をそのまま置いておく! そんなわけにも行きませんよね・・・。 ご安心ください。業界的にエージェントを疑似的に変更しない! という流れになったわけではありませんので。ちゃ
とある日、スプレッドシートのセルの背景色を交互に着色するのがめんどいな〜スクリプト以外でなんか簡単な方法ないかな〜と思い、Google先生に色々質問してたらですね。 なんでも、「新しい Google スプレッドシート」を使えば「条件付き書式」で交互に背景色を変更できるというじゃないですか! でも「新しい Google スプレッドシート」ってなに?なにそれ?? そんなこんなでさらに検索 どうやらGoogleさんは2013年の12月11日に、「Googleドライブ」のスプレッドシートについて、新バージョン「新しい Google スプレッドシート」公開してたらしい。 知らなかったのは私だけですか?そうですか、、、 私だけ知らなかったっぽい 新しい Google スプレッドシート とは? 新しい Google スプレッドシートに切り替えると、より速く、より多くのデータを処理できるようになり、そして
※Macの場合はCtrlをcmdに置き換えてください。 にっくきギザギザにはPhotoshopライブ効果を! Photoshopライブラリの「線」効果を使った場合と、光彩/グロー(内側)を使った場合の比較してみた。 Photoshopライブ効果であれば斜めにしても問題なさそうです。 ここからさらに枠線をつけたい場合は2通りの方法があります。 パターン①もう一度Photoshopライブ効果を使う もう一度Photoshopライブ効果の線を使いたいのですが・・・ うんうんそうなるよねー。 Photoshopライブ効果は二度づけ禁止でしたねー。 でもそんなの関係ないです。一度グループ化してみてください。 Ctrl + G これでもう一度ライブ効果を使えるようになります。 綺麗な線が描けました。 パターン②シャドウ(内側)で代用 シャドウ(内側)を使います。 今回の設定数値は以下の通り 位置:0
神戸で定期的に開催されている、CSS Nite in KOBEに参加してきました。4月20日・21日の2日間でじっくりディレクションを学ぶプログラムで、弊社からは2日にわたり計4名…
覚えておくと便利な人物レタッチのチュートリアルです。 女性は“綺麗”に、男性は“かっこよく”見せることが多く、目的が違うので男性と女性のレタッチの方法も変わってきます。 今回は「男性編」になります。 イメージはこちら。 ※Macの場合はCtrlをcmdに置き換えてください。 くっきりシャープにしよう 今回使用した写真は GATAG|フリー画像・写真素材集 3.0からお借りしました。 ・レイヤーを複製します。 Ctrl + J ・フィルターをかけます。 フィルター>その他>ハイパス 数値詳細は以下の通り 半径:0.5px ポイントは半径pxを少さくする。目安は人物のラインがうっすら出るくらい。 ・レイヤーモードを「リニアライト」に。 ※このレイヤーを2回複製します。 現在のレイヤーパネルはこの通り。 写真がシャープになって引き締まりました。 くっきりし過ぎた部分を削る だいぶ良くなりましたが
広告やカバージャケット、ロゴデザインに欠かせないのがタイポグラフィーなのですが、 既成フォント並べるだけじゃ味気ない・・・ そんなときにに役立つIllustratorのチュートリアルをご紹介します。 ※Macの場合はCtrlをcmdに置き換えてください。 手順は 理解・分解・再構築 の3ステップ。 書体を決める ―理解― タイトル通り複数のフォントを組み合わせるのですが、あまりにもちぐはぐな組み合わせは危険です。 選び方としては出来る限り日本語文字の場合は明朝なら明朝、ゴシックならゴシックと近い書体を選んだ方がいいでしょう。 フォントの太さを合わせる 異なるフォントを使うので事前に太さを合わせておきましょう。 [理解]したところで実際に作っていきます。 フォントをばらす -分解 ― 部首ごとに分けていくのでまずアウトラインします。 Ctrl + Alt+ O くっついてる部分はナイフツール
資料や広告で人によりわかりやすく伝えるのに効果的なモックアップ素材。 今回は、モダンブラウザ・スマートフォン・Apple製品に絞ったモックアップ素材の紹介になります。 詳細は以下から。 ブラウザ編 Safariブラウザのモックアップ Freebies — My safari browser .psd template Google Chromeブラウザのモックアップ Google Chrome – Freebie No:1 モダンブラウザセットのモックアップ Web Browser PSD’s 7 Free Web Browser Frames スマートフォン編 iPhone 5sのモックアップ 3D View iPhone 5S Psd Vector Mockup iPhone 5cのモックアップ 3D View iPhone 5C Psd Vector Mockup Windows P
Fireworksで簡単!写真風画像加工(斜めでもギザギザさせない)の別の方法もまた今度書きたいと思います。(どうしてもビットマップにはしたくない人向けです。) 今回はFireworksの便利機能の紹介をしたいと思います。 レイヤーからファイルに書き出し スライス機能がとっても便利なFireworksですが、透過pngの書き出しの時は 「レイヤーからファイルに書き出し」がさらに便利です! 例えば・・・ 複数のオブジェクトが重なり合ったレイアウトの時 ▲こんな風に重なり合ったオブジェクトを個別に書き出したい時にも有効になのですが方法は至って簡単。 ・書き出したいオブジェクト(ビットマップ)をレイヤー毎に分けておく。 ※書き出ししたくないものは非表示にしておく 書き出しの設定は現状の設定が反映されます。 透過pngなので“マット:”のところは無色指定にしてます。 ※一括書き出しなのですべて同じ
こんにちは松本です。先日第二子が誕生しましたヽ(´エ`)ノこれで女3:男1家族になりました。10年後の自分の扱いが楽しみです。 写真風加工を簡単に ホームページ上で良く見かける、写真風の画像加工テクニック。 矩形を二つ作って、内側の矩形と画像をマスクでグループ化して・・・っていうのがオーソドックスな方法ですが、もうちょっと手短にできないかと別案を考えました。 とりあえずサクッとつくる 白枠をつける まず実際に作りたいサイズの矩形を作り、その中に画像を Ctrl + Shift + V で内部ペースト(画像を任意のサイズに切り抜いたものでも良いです)。 フィルターから「光彩(内側)」を選択。上記の画像のように「幅:6」「カラー:白」「不透明度:100%」「柔らかさ:0」「光輪のオフセット:0」を設定します。幅はお好みで。 ※レベルや、色彩などの補正をする場合は、これより前に行なっておいてくだ
前回の記事ではイメージ写真として障害物になるものを排除しました。 今回は「詰め」の部分になります。モデルルームのサイトのメインビジュアルにも使用できるくらいに仕上げたいと思います。 工程をざっくり分けると ・細かい部分の修正 ・色調調整 の二つになります。 細かい部分の修正。 もしモデルルームだったとしたら家の中に物があったらおかしいですね。 下準備として人物レタッチでも活躍のお肌つるつるにしてくれる、ぼかし(表面)フィルターをかけます。 数値は下の通り ※しきい値は低めがいいです。 上の画像を見てもらえばわかると思いますが窓からうっすら見えてたカーテンがほとんど消えてくれてます。 ついでにノイズもだいたい消してくれました。 (余分に消えてしまった箇所は、レイヤーにマスク追加して元レイヤー下に引いてマスクに消しゴムかけてください。) こういう物はツールで消します。 修正ツール J の ・パ
今回は建物や家の写真から邪魔な電線や木を排除して綺麗な写真に変身させるフォトレタッチのチュートリアルです。 ※こういったチュートリアルは目的に都合のよい写真が使われていることが多いですが、Photoshopの機能に頼り過ぎない様、多少手間のかかる写真を選んでいます。 ※Macの場合はCtrlをcmdに置き換えてください。 使用した写真は「写真素材 足成」より 建物の写真 空の写真 建物と空を分ける ※失敗しても元に戻せるように作業ごとにレイヤーを複製しながら進めています。 電線を消すついでに空の色が鮮やかではなかったので空ごと変更することにします。 建物写真から選択ツールWで空の部分を選択。 空の写真のレイヤーに移動して右下のマスクボタンでレイヤーマスクを追加 マスクを追加するとこんな感じに。 空が鮮やかになりました。 屋根に被る電線を消す 塗りつぶしの“コンテンツに応じる“を使って電線を
やぁ、みなさんこんにちは!ちょっとタイムリー逃した感ハンパないですが、yahooアナリティクスについて解説するよ! 今回の記事はマジ長いからはてブとかブックマークしてあとで読めるようにしておけよ!!! Yahooアナリティクス の登場で驚愕したこと まず初めに、登録までの道のりが長すぎる!ということ。アナリティクスの内容はgoogleアナリティクスに比べ初心者よりだな、といった感じですが、 登録までの道のりがもはやプロ級なんです。 文章のところどころで黄色のマーカーが引かれています。できる大人になるための心構えもあわせて紹介しているので、要チェキですよ! yahooアナリティクス。設定までの道のり さぁさぁ、yahooアナリティクスの設定方法を紹介するよ! まずはヤフーアナリティクスで検索をして・・・ Yahoo!アクセス解析編 ヤフーアナリティクス公式ページに入ります。検索が面倒だという
こんにちは松本です。web制作を始めた頃からデザインソフトはFireworksを使っています。 もしや元々アドビ製品じゃなくてマクロメディア製品だったの知らない人多いのでは!? え?フォトショとかとかイラレはちゃんと使えるのかって? こ・・・細かい切り抜きとか画像補正とか・・・ロゴ作ったりで使います・・・たまに・・・ 開発中止(なくなるわけじゃない)が決まって、そろそろ別のツールも考えたほうがいいんじゃない?的な話もちらほらとありますね。 でも、愛着もあるので何年か後の最新OSで動かなくなるまではFireworks使い続けますきっと。 ダメダメ編 保存できなくていろいろもがく 保存しようとしたら、「メモリが不足しています」「内部エラーが発生しました」等のアラートがでてセーブできず。 「しょーがねーなまったくよー」と言いながら、ヒストリー消したり、レイヤー非表示にしたり、あれこれもがくも泣く
なんかもう世間は年末の準備に入っているようす。 おかしいな〜先月お正月だったような感じがするっす。 時間が進む感覚が年々早くなるのはホントっすね。。。 サイト改善サイト改善と言うけどどうすりゃいいの? サイトのデザインを最近の流行りに合わしたらいいんれすか?そうれすか? 見た目もとても重要なんですが、サイトの改善ではそればかりが正解ではないですよね。 今回は、アナリティクスの計測結果から推測される簡単な改善ポイントの見つけ方のご紹介。 実は、というか周知の事実ですが、ホームページへユーザーを誘導する動線はあまり多くありません。しかも、ユーザーが能動的にアクションを起こさないとサイトを訪問することはまずありません。 そんな少ないアクションの1つに検索があります。 検索サイトの検索結果に表示された、リンクをクリックして訪れることなんですが、数すくない訪問機会を獲得しようと、検索結果の表示順位を
ファイル編集前にバックアップとっておけばすぐもどせるし管理も簡単、わかりやすい! そう思っていた時期が俺にもありました・・・ 前回はGitの紹介と簡単な使い方を紹介しました。 前回の内容だけだとファイル管理の手間が増えただけで、「自分でバックアップとりながらやるほうが楽かも」といった印象を感じるかかもしれません。 しかし、今回紹介する「ブランチ(分岐)」と「マージ(結合)」機能を使えば手作業のバックアップでは管理が難しかった作業が簡単にできるようになります。 初期設定 前回に引き続き、SourceTreeを使いながら説明していきます。 まず、ブランチ/マージを試す前にSourceTreeの設定を変更します。この設定をしておくとマージした時の履歴が分かりやすくなります。 Tool>Options>Git から「DO not fast-forward when merging, always
切り抜きを行うツールとしてphotoshopを使われている方は多いと思います。細かい、複雑な切抜きはやはりphotoshopの方が便利だったりしますが、 Web制作において忘れてはいけないFireworksでもかんたんに綺麗な切抜きができます。 今回は複雑な形と思われる ・水の切り抜き ・炎の切り抜き の方法について記述したいと思います。 設定を変更しておく 編集→環境設定→編集→選択精度 単純に高いほうが精度がいいです。 ここでは最高の10に設定。 “自動選択ツール”と”選択範囲をパスに変換”を使う 自動選択ツール Wで切り取る部分を選択 プロパティはこちら “アンチエイリアスをオン” 許容量は切り抜きたい境目の色の差があいまいな場合は数値を低くして精度を高めたりして調整してください。 選択部分を削除 選択された切り取る部分を削除します。 選択してDelete さらに綺麗にしていく 素材
台風一過でめっきり寒くなってきましたね。 ナイスミドルは寒いのがとっても苦手なんですが、今年こそは、冬を楽しもうと誓うのであります。 ウインタースポーツ挑戦してみようかな。。。 みなさんは「jQuery」使ってますか? ナイスミドルな松葉は結構つかっちゃいます。 jQuery便利よね〜Google先生に聞いたらコピペでなんとなく動くものね〜プラグイン豊富だしね〜 なんだかんだで、依存症になりつつある人も多いんじゃないかな。 でもね、クライアントの要望にこたえたい!ここもっとこうしたい!ああしたい!とか出てくると、コピペやプラグインじゃちょっと物足りないよね〜 そうすると、やっぱりリファレンス必要よね〜 そして唐突にはじまるjQueryリファレンスサイトのご紹介。。。 これはおさえておくべきjQuery日本語リファレンス5選 ちょいちょい使うサイトは日本語だとストレスがないですよね。。。 素
もうだいぶん寒くなってきましたね。寒いの苦手やわ〜 どもども、今回もひつこくGoogle アナリティクス + Google スプレッドシートについてです。 なんだか楽しくなってまいりました。 以前えいやんが【Googleアナリティクス】実はとっても便利!カスタムレポート機能の使い方で表示させてた項目をスプレッドシートに読み込めるんじゃねかな?と思ったので。 まったく必要はないんですが作ってみました。 アナリティクスをスプレッドシートに読み込む準備は前前回の記事を参考にしてみてください。 表示するデータは「直帰率」「訪問数」「ページビュー数」「訪問時の平均滞在時間」「ユーザー数」「目標の完了数」の過去一月分。 グラフ化までやっちゃいます。 それでは、はりきっていってみよう! すること スプレッドシートをちょっとだけ色付け サンプルコードコピペ サンプルコード実行 スプレッドシートへ表示された
トホホバナーでディレクターやクライアントを困らせない為にも! 良いところと悪いところ、自分で分析できるようにならないといけません。 いろんなバナーを見て改めて自分のおさらいにもなりました。 広告バナーにおいてデザインはクリック数や反応に左右するとても大事な部分なのですが、今回はそれ以前に広告バナーとして出すにはあまりふさわしくないバナー例です。赤ペン先生気分で解説しています。 詰めが甘い
こんにちはえいやんです。あまりWordPressのプラグインは好きではないのですが、これは便利で使える!といったものをおすすめします。もちろんSEO施策にも一役買ってくれるものばかりですよ! いいから黙って入れておけ系WordPressプラグイン Google用のサイトマップ(XML)を作成してくれる健気な子 Google XML Sitemaps WordPress側ではプラグインを有効にするだけでOKです。合わせて、ウェブマスターツールでも設定を行っておきましょう。 プラグインの紹介 Googleウェブマスターツールから設定を行いますので、Googleアカウントへログインしておきましょう。 サイトマップをクリック sitemap.xmlを入力して、「サイトマップを送信」をクリックでOK。 簡単ですね! この操作は、基本的にはサイト開設時など一度だけでOKです。 それ以外はGoogleイ
今回もまたチャレンジしてみました!!レッツクリエイトー!!のコーナー はい。ということでね。。。 なんか毎回作ってみてますが、ブログ当番の順番がはやい!!追いつかない!! 時間に追われてでもいけるとこまでがんばってみます。 それでは今回制作してみたものは 「Ajax (非同期通信)をつかってみよう!!」 「Jqueryでプルダウンメニューをおしゃれに!!」 「オリジナルアイコンフォントを作ってみよう!!」 今回はこの3つにチャレンジしています!! ということでまずは制作物。 「ホームページ戦隊 キャラクター紹介2」 内容が薄いのが申し訳ないですが。 前回のキャラクターの紹介を別の技術を使ってみた程度でご理解ください 表面的にはあまり特別な動作や動きはないので 気づかないかもしれません。 実は、ちゃんと内部で非同期通信しているんです。 Ajax 非同期通信とは URLを入力してホー
先日に引き続きGoogle アナリティクス + Google スプレッドシートについてです。 前回はGoogleのチュートリアルをコピペで実行したのですが、それじゃ提出レポートにはならないので、よりレポートっぽくしてみます。 さてさて、どうなることやら。 アナリティクスをスプレッドシートに読み込む準備は前回の記事を参考にしてみてください。 今回は希望するサイトのアナリティクスデータを取得し、特定キーワードのセッション数とページビュー数を日毎に取得してみようかと。 ビューIDの準備 まずは、取得するアナリティクスのデータを指定するためのビューIDを用意する必要があります。 アナリティクスのビューIDとはなんぞや?と思われるかもしれませんが、ちょっと前はプロファイルIDって名前でした。 確認方法はアナリティクスへログインして取得したいレポートを表示させましょう。 それから、右上にある「アナリテ
次のページ
このページを最初にブックマークしてみませんか?
『Webサイト制作の相談は神戸ホームページ制作センター』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く