はてなブックマーク

フルスクリーンでコンテンツを表示するWebページが増えましたね！ 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、１つのコンテンツをフルスクリーン表示させて、スクロールすることで１ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい！と思い、色々と調べました。 コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね！ （onLeaveというオプションを使えば可能であることがわかりました） せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。 fullPage.jsの使い方

Webサイト公開後、.htaccessを使って旧ページから新ページにリダイレクトをかけます。何度も同じようなことをしているのですが、やはり忘れっぽいので、よく使うリダイレクトの書き方をまとめておきます。 私と同じような誰かのお役に立てれば幸いです。 私がよく使うリダイレクトは301リダイレクトのため、この記事のコードは全て301リダイレクトとなっています。302リダイレクトを用いる場合は、適宜変更してください。 0. .htaccessとは？1.あるURLから別のURLへのリダイレクト2.ディレクトリまるごとリダイレクト3.類似したファイル名のURLをまとめてリダイレクト4.特定のディレクトリをリダイレクトから除外する5.特定のファイルをリダイレクトから除外する6.wwwなし / ありを統一する7.https(SSL)のURLへリダイレクトまた、上手く動作しない場合のパターンも挙げてみまし

Google AJAX APIを使って、ブログのRSSから取得した情報を、静的なHTMLに新着記事としてを表示させるということを何度かやりました。ですが、その度に過去の案件を見返すことが多いので、備忘録として記事にしておこうと思います。 今回は、記事の日付、タイトル、記事の画像、記事本文概要を書き出ししたいと思います:) 2016/1/11にGoogle AJAX APIが使えなくなったようです。 別の方法でRSSを取得する方法をまとめておりますので、よろしければ以下の記事もご参考になさってください:) ブログのRSSを読み込んで新着記事を表示！PHPを使ってみました 0.RSSとは1.使い方2.新しい記事が反映されない？ 0.RSSとは RSSとは、主に、Webサイトやブログの更新情報を公開するために使われているXMLベースの文書です。 Webサイトの各ページのタイトルや、URL、更新日

ページをスクロールすると、左側に固定したナビゲーションメニューがアニメーションで隠れ、コンパクトに収納されるJavaScript（以下、js）「hidenavi.js」を作りました。 jsの動作にはjQueryが必要です。 せっかく作ったので、ブログで公開しようと思います:) 1.動作の説明とデモ2.ダウンロード3.使い方4.ご利用にあたって 1.動作の説明とデモ hidenavi.jsは、ページをスクロールすることで、ページの左側に固定したナビゲーションメニューが、にゅーっとアニメーションし、隠れます。 隠れたナビゲーションメニューの代わりに、ナビゲーションメニューの位置を示す要素が表示されます。 その要素にマウスを乗せると、隠れたナビゲーションメニューが再びアニメーションで表示されます。また、スクロール位置を一番上まで戻しても、ナビゲーションは再表示されます。 デモページを作りましたの

可愛らしいものが大好きです、Kanaです。 私がガーリーなデザインをする際によく使う素材や、素材サイトをまとめました。 可愛らしいレース柄や、お花、パターン素材など、使い勝手のよいものばかりです。 ガーリーデザインのポイントをまとめた、ガーリー好きがお届けするガーリーデザインのポイント5つもあわせてご覧ください:) 2015/12/4：写真素材カテゴリを追加しました！ それでは、素材を提供してくださる方々に頭を下げつつ、ご紹介したいと思います。 商用可のサイトや素材を集めていますが、詳細な規約は、ご利用の際ご自身でご確認ください。 1.イラスト素材2.レース素材3.フレーム素材4.パターン素材5.テクスチャ素材6.写真素材 ガーリー素材 やさしい色使いの、かわいいイラスト素材がいっぱいのサイト「ガーリー素材」。非常に完成度が高くて、いつも利用させていただいてます！ eps、png形式で配布

Web制作でのデザインにはPhotoshopを使っています。Kanaです。 ショートカットを使ってPhotoshopを操作しているのですが、作業中、 「え、そんな便利なショートカットがあったの？」といわれることがありました。 Photoshopを使ってデザインされている方の参考になればと思い、私がよく使うショートカットをまとめました:) ショートカットを使うと、マウスの操作が減るので、とても便利ですよ！ あくまで私がよく使うショートカットですので、同じ動作が他のショートカットで出来たり、このショートカットがあるのに、あのショートカットはない…ということがあるかもしれません。 1．ファイル管理系ショートカット1-1．新規作成1-2．キャンバスサイズの変更1-3．上書き保存1-4．別名を付けて保存1-5．ウィンドウを閉じる1-6．アプリケーションを終了2．基本ショートカット2-1．コピー2-2

iPhoneユーザになって半年が経ちました。すっかりスマホにハマってしまいました、Kanaです。 おはようからおやすみまで、まるでどこかの企業のように私を支えてくれる、素敵なiPhoneアプリを一挙にご紹介します！ ご紹介したアプリの金額等は紹介当時のものになります。 無料アプリが有償化したり、有料版の金額が変わることがあるかもしれません。ご了承ください。 私のホーム画面はこんな感じ ２画面目はこんなかんじで並んでいます。３画面以降に、使用頻度は低いけど使うアプリや、情報収集に使うアプリなどが並びます。 情報収集系のアプリについては、FeedDrop、過去の記事でご紹介したものをおすすめします:) FeedDropについては、過去にレビューをしていますので、そちらもご覧ください。 可愛い、使える、無料！三拍子揃ったiPhoneニュースチェックアプリ「FeedDrop」−はてブチェックもRS

IT用語って、何だかとっても難しそう…。この業界に入りたてのひとは、誰しもそう思うのではないでしょうか。 また、言葉としては知っているけど、何のことやらさっぱり…という方も、いらっしゃるのではないかと思います。 業務でそういったお話をさせていただく機会がありましたので、ブログ記事としてもまとめたいと思います:) 今回はWebサイトへのアクセス編。 難しい話はわからない…そういった方や、初心者さんに、読んでいただけたら幸いです:) この記事は、わかりやすさを最優先し、極力簡略化しています。 1.ブラウザ2.IPアドレス3.ドメイン4.DNSサーバ5.Webサイトに繋がる流れ 1.ブラウザ ブラウザとは、Webサイトを閲覧するときに使っているソフトウェアのことです。 ピンとこない方、今、この記事をご覧になられているソフトウェアが「ブラウザ」になります。 ブラウザにはいくつか種類があります。代表

降りそそぐ良記事！FeedDrop（フィードロップ） 1.0.0（無料） カテゴリ: ニュース, ソーシャルネットワーキング 販売元: Mays Creative Office – Naoki Terabayashi（サイズ: 6.5 MB） 1.はてなブックマークと連携 アプリを起動すると、はてなブックマークから話題の記事や、ニュースを取得してきます。 読みたい記事をタップすると、該当記事を閲覧することができました:) 記事のタイトルが大きく表示されている、シンプルなレイアウト。 余計な情報は必要ないタイプの方にはオススメですね！ 他のカテゴリを見たい場合は、左上のアイコンをタップするか、アプリの画面で左から右にスワイプ！ これでメニューが出てきました！ iPhone5を使っているからか、画面上部に指を伸ばすのが非常に億劫でした。 画面上部まで指を伸ばさないで、スワイプでメニューが出るの

Webは情報収集も大切。日々目まぐるしく進歩・進化する業界なので、情報のチェックは欠かせません。 大切な「情報」ですが、ネットの海には情報が溢れかえりすぎています。闇雲に収集を行なっていては、情報に飲まれてしまい、良いインプットになりません…。 情報太りにご用心、無料Webサービスを使って効率的に行ってみてはいかがでしょうか。 今回の記事では、私が情報のチェックに使っているWebサービスをご紹介したいと思います:) Twitterはてなブックマーク関連GunosyvingowiSoople Twitter 情報の速さといえば、Twitterではないでしょうか。 私は、WebやIT、デザインに興味・関心を持っている方をフォローしています。 情報共有として、タイムラインに有用な記事がツイートされます。 勿論、そればかりでもなく、いつも楽しくタイムラインを見ているわけですが… 同じ方向にアンテナ

2013/02/20：アイキャッチの箇所について新たな情報をいただきましたので、記事を修正しました。 こんにちは。Kanaです。 このブログKana-Lierは、WordPressのテーマをオリジナルで作りました。 「WordPressでオリジナルテーマ？？WordPress全然わからないんだけど…」 そんな私がオリジナルテーマを作るにあたって、つまづいたことを書き留めたいと思います。 今回私は、どのテーマも流用せず、白紙の状態からテーマを作ることにしました。 functions.phpも0からはじめています。そのため、なぜそんなところで躓いた？！というなところで躓いてしまっていることもありました…X( オリジナルテーマを作りたいけど、まず何をしたらいいの？ まずは、Webクリエイターボックスさんの記事を読んで、ブログのテーマを作っていきましょう。 WordPress オリジナルテーマの作

ブログがとってもガーリーだね、と嬉しいお言葉を頂くことが多いKanaです。 とっても可愛いガーリーなデザインは、作っていても見ていても幸せな気分になるので大好きです。 そんな私がガーリーデザインをする際、気をつけているポイントをご紹介します。 1.配色は甘く、優しく。スイーツのような彩りを。2.テクスチャを利用して、やわらかさや、素材感を加えてみる！3.パターンを使うだけでガーリーに！ストライプとドットが素敵！4.安定感よりも、繊細なイメージを意識する。5.かわいい小物をコラージュしたり、装飾を加えて、可愛らしさをアップ！ 1.配色は甘く、優しく。スイーツのような彩りを。 ガーリーデザインの配色を考えるときは、甘く優しい色使いを意識しています。 今ひとつピンと来ない時は、googleの画像検索でスイーツ、ケーキ、マカロン、アイスクリーム、ジェラート等を検索しイメージを沸かせます。 私が好き

今回、WEBCRE8.jpの優さん企画の#LOVEFONT Advent Calendar 2012というイベントにお誘いいただきました。 愛するフォントの魅力を語る・詳しくなくても構わない、と優しい声をかけていただいて勇気がでたので、私も参加させていただくことになりました。 今回の企画、Advent Calendarと#LOVEFONTについては、WEBCRE8.jpさんの記事をご覧ください。 2012年、今年こそはAdvent Calendarに参加しよう！！ ｜WEBCRE8.jp#LOVEFONT ｜ WEBCRE8.jp#LOVEFONT Advent Calendar やさしさゴシックって…？その名の通り、やさしい雰囲気の「やさしさゴシック」。 好きなポイントはいろいろあるのに、そのフォントについて知っていることは、とても少なかったので調べてみることにしました。 やさしさゴシッ

駆け出しブロガーKanaです、こんにちは。 Twitterで仲良くさせていただいているブロガーさんが、ちらほら好きなブログを告白しておられましたので、私も私も！と好きなブログを告白します。 11月も終わってしまいそう…、かなりの滑り込み感は否めません。 11月と言えば自分の好きなブログを告白する月｜ホームページを作る人のネタ帳 ホームページを作る人のネタ帳 ホームページを作る人のネタ帳 好きなブログを告白する月を定められたYamadaさんのブログです。 Webという業界に飛び込み、右も左もわからない頃、Google先生のお導きでこちらのブログにたどり着いて以来、何度お世話になったかはわかりません。 まとめ記事や、ツールについての記事、心構えなど、本当に様々なことを勉強させていただいております。 Webクリエイターボックス Webクリエイターボックス 現在海外で活躍しておられるManaさんの

スマートフォンの普及に伴い、スマートフォンサイト制作案件が増えてきている方も多いと思います。かくいう私もその一人です。 最近は一人でカバーしきれない程のご依頼をいただくようになり、新たに担当者を増やすことにもなりました。 普段私が気をつけている点、どういったことを考えてスマートフォンサイトを制作しているかを伝えることになったので、ついでに記事にしてしまいたいと思います。 私がスマートフォンサイトを制作するときのポイントは、以下のとおりです。 1.そのサイトはいつ・誰が・どんな時見るのか2.実際のサイズ感を考えて、使いやすさを確かめる3.死角と押しやすい位置を意識する4.CSS3で実現可能なデザインを5.ユーザは本当にスマホサイトを求めているのかそれでは、詳しくお話していきたいと思います。 こんなの当たり前だよ！ということばかりかもしれません。 案件やサイトのジャンルによっては当てはまらない

2013/01/24：解説に一部誤りがありましたので、修正致しました。 こんにちは。古いブラウザを気にせずにセレクタを使い放題できると、すごく幸せになれるKanaです。 今日は、スマートフォンサイトのコーディングで私が必ずといっていいほど、よく使う簡単便利なCSSセレクタを厳選してご紹介したいと思います。 いつも忘れがちなので備忘録もかねていますXD それではどうぞ！ セレクタとはセレクタとは、スタイルシートを適応させる対象を指し示す部分のことです。 CSSの書式は、以下の図のようになっています。 例えば、pタグに対し、文字色を黒とする場合のCSSは以下のようになります。 p{color:#000;} pがセレクタ、colorがプロパティ、#000が値になります。 セレクタは上記のように単一のものにを指定するだけではなく、複数の指定ができたり、条件を指定することができます。 (1):fir

Google AJAX APIが停止したとして、ブログにコメントいただきましたので代替手段を調べてみました。 今回はrss-PHPというプラグインを使って、PHPでブログのRSSを読み込んで表示させます。 Google AJAX APIと同… ▼続きを読む 

こんにちは、Kanaです。 日本らしい、和のデザインを担当したときに利用した素材サイトや、フリー素材をご紹介します。 和の雰囲気をもった無料で商用利用ができる素材って、そう多くはないんですよね…。 今後また和のテイストのデザインをするときのためにも、まとめておくべく記事にしました。 それでは、素材を提供してくださる方々に頭を下げつつ、ご紹介したいと思います。 商用可のサイトや素材を集めていますが、詳細な規約は、ご利用の際ご自身でご確認ください。 2014/12/10：素材サイトを追加しました。 イラスト素材和柄商用フリー素材 WArgo Pattern（ワーゴパターン） こちらの素材サイトは和素材が非常に充実しています。和風イラスト、和風写真、和柄パターンなど、和デザインを作るにあたり、欲しくなる素材がたくさん集まっています。 WArgo Pattern（ワーゴパターン） 季節素材　夢幻華

2012/10/18：画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか！)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね！ スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数！…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか？ そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ！という方には、とても便利だと思います！ display: