サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
kana-lier.com
0.rss-phpライブラリを使おうRSSやAtomを読み込むためのライブラリを開発している方がいらっしゃるので、そちらを使います。 今回は、rss-phpというライブラリを使います。 ライブラリをダウンロード以下のURLより、ファイルをダウンロードしてください。 dg/rss-php · GitHub 使うファイルをコピーダウンロードしたZIPファイルを解凍します。 この中の、srcディレクトリ内、Feed.phpを使います。 Feed.phpを作業するディレクトリへコピーします。 これで準備は完了です。 1.PHPを記述 2015/12/4:一部プログラムを修正しました。 2015/12/3:詳細の文字数を制限したいという要望をいただきましたので、プログラムを修正しました。 新着記事を表示させたいファイルに、以下のPHPを記述します。 <?php require_once "./Fee
フルスクリーンでコンテンツを表示するWebページが増えましたね! 私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:) 「fullPage.js」は、1つのコンテンツをフルスクリーン表示させて、スクロールすることで1ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。 わかりにくいかもしれないので、デモをご確認ください。 この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アプリを一挙にご紹介します! ご紹介したアプリの金額等は紹介当時のものになります。 無料アプリが有償化したり、有料版の金額が変わることがあるかもしれません。ご了承ください。 私のホーム画面はこんな感じ 2画面目はこんなかんじで並んでいます。3画面以降に、使用頻度は低いけど使うアプリや、情報収集に使うアプリなどが並びます。 情報収集系のアプリについては、FeedDrop、過去の記事でご紹介したものをおすすめします:) FeedDropについては、過去にレビューをしていますので、そちらもご覧ください。 可愛い、使える、無料!三拍子揃ったiPhoneニュースチェックアプリ「FeedDrop」−はてブチェックもRS
社会人になったら、アフター5とかでオシャレなカフェにいったり、ウィンドウショッピングするんだろな〜。なんて事を夢見ていました。Kanaです。 先日、無料写真素材サイトPAKUTASO、そして、ブログ楽しければいいのです。を運営しておられるすしぱくさんが面白い記事を書いておられました。 ぱくたそ管理人の1日!タイムスケジュール(円グラフ風)を作ってみました。皆さんもどうぞ。|楽しければいいのです。 学生の頃は、社会人が一体どんな生活をしているのかなんて、詳しく知りませんでしたし、別世界だなあと思っていました。(当時、興味・関心を持っていなかったことも大きな要因ですが…) もし、このブログを見にきた、Webクリエイターを目指す誰かに楽しんでいただけたらな、と思って、私も1日のスケジュールを作ってみることにしました。 まさに誰得記事ですが、よろしければご覧ください! 平日の1日
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、デザインに興味・関心を持っている方をフォローしています。 情報共有として、タイムラインに有用な記事がツイートされます。 勿論、そればかりでもなく、いつも楽しくタイムラインを見ているわけですが… 同じ方向にアンテナ
みかこさん今日マチ子のセンネン画報廃葬(君と来た道、僕らの家族ごっこ、悪魔は隣の席) 画像参照:廃葬 Re:さんが自サイト・廃葬で連載しておられる漫画です。現在、君と来た道、僕らの家族ごっこが完結済みで、悪魔は隣の席が連載中です。 どれかひとつをおすすめしたいのですが、どの作品もおすすめです! ダークな一面を持つキャラクターや、きらきらかわいい天使のようなキャラクターが心を通わせ、愛しあうストーリー。展開にハラハラしたり、ニヤニヤしたり、目が離せません! 作品がクロスオーバーしているので、一作読むと、他の作品が気になって、またハマってしまうというループです…! 廃葬あずきの地! 画像参照:「あずきの地!」 田舎に誘致された中高一貫の学園が舞台のラブコメ「あずきの地!」。ナガトカヨさんが描かれる繊細な絵がとても素敵です。 主人公は、明るい髪にロングスカートといったヤンキースタイルがトレードマ
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:
かわいい女の子は好きですか? こんにちは、Kanaです。 可愛い女の子のイラストを描くときはテンションがあがります。 そんな私が女の子のイラストを描くときに気をつけているポイントをメイキングと共にお伝えしようと思います。 この記事を書こうと思った理由イラストメイキングこの記事を書こうと思った理由…イラストのメイキングは、未完成なところや下書きを見せることになるので、とっても恥ずかしいです。 でも、この記事をご覧になった方が、今開催中のJPGirlFestivalに参加してみようかな~と思うきっかけになればいいなと思い、ブログを書くことにしました。 JPGirlって…?かわいい女の子が好き。イラストも大好き。 そんな人たちが第1回 イラスト描いて楽しいな大会で「お団子ガール」を描いたことがきっかけとなり、JPGirlFestivalというイベントができました。 第1回の詳しい様子は、JPGi
お菓子をくれなきゃ悪戯するぞ! 10月はハロウィン気分でウキウキのKanaです。こんにちは。 早速Twitterのアイコンもハロウィン仕様にしちゃいました。 自分の作ったハロウィンアイテムを素材にしてみたところ、ご好評をいただいたのでブログにも載せてみます。 使い方は簡単!アイコンに良い感じに乗せるだけです。 こんな感じです♪ 素材の形がアイコンに合わない方もいるかな…と思ったので、お面タイプも作ってみました。 素材はこちら!画像クリックで大きいサイズが表示されます。 画像はすべて透過pngになっています。 良い感じにあわせて使ってみてください♪ 色を変えたり手を加えたりするのもご自由にどうぞ。 楽しいハロウィン気分を味わうお手伝いができたら嬉しいです。
このページを最初にブックマークしてみませんか?
『Kana-Lier カナリエ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く