CSSのみでMasonryライクな段組レイアウト
Result 過去はJSで何とか実装していたPinterestのようなMasonryレイアウトは、column-widthを使ったCSSのみで簡単に実装可能となりました。 column-countも併用すればカラム数の指定も出来ますね。 cssarticle {/*CSSカラムのセッティング*/ column-width: 7em; column-gap: 1em; } section {/*各ボックスのスタイル*/ display: inline-block; margin: 0.25rem; padding: 1rem; width: 100%; background: #efefef; }html<article> <section> <p>Lorem ipsum dolor sit amet, consectetur.</p> </section> <section> <p>Lor
gistやYoutube、Vine、TwitterやGoogle Mapなど、様々なサービスをembed出来る・「embed.js」
embed.jsは様々なサービスの埋め込みを容易に行えるようにする為のスクリプトです。テキストから自動で文字列を解析し、embedしてくれる、というもの。例えばGistやYoutubeなら、URLを貼るだけで勝手に埋め込みをしてくれます。現在対応しているのはFrickr、Vine、Google Map、Twitter、Vimeo、USTREAM、Youtube、CODEPEN、JSFIDDLE、Instagramなどの他に、任意の画像、音声、動画ファイル、URLの自動リンク化、markdownのパース、絵文字サポートからsyntax highlightまで多岐にわたります。結構便利。CMS等に摂り入れたいスクリプトですね。ライセンスはMIT。 embed.js
ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js
ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。 メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。 更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。 var favicon=new Favico({ animation:'slide' //アニメーションエフェクトの指定 }); favicon.badge(1);エフェクトは上記のようにセッティングします。 var favicon=new Favico({ bgColor : '#5CB85C',//背景色 te
「SEO」とは（おさらい編）
今さらですけど、「SEOってどんなもの？」 っていうおさらい的な記事を書いてみます。 一部の業者さんによってSEOへの認識は まったく違うものになってしまい、頭の良い 人まで勘違いするようになってしまいました。 残念な事です。 というわけで、おさらい。SEOとは何か、について簡単に。とくに釣られたわけではないでｓ SEOとはSEOはサーチエンジン最適化の略称です。現在はもうGoogleが主流なのでGoogleに最適化するのがSEO、という認識で大体あってます。勿論、人が使う検索エンジンは他にも沢山ありますが。 では、「最適化」とはどういったものを指すのでしょうか、という話なんですが、まぁ最適化する為の施工なので、 ユーザーにとって有益でないコンテンツを表示させないようにするクローラーにsitemapを送信してインデックスするのを助けてあげるURLの変更等で、適切なリダイレクト処理を行うそも
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition対応ブラウザ：webkit系(GoogleChrome、Safari等)JavaScript：未使用（※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-in-
全画面を使用したクールなギャラリー「Full Page Image Gallery」をWordPressテーマ化した
codropsのギャラリーが素敵だったので WordPressのテーマにしてみました。 ライセンスは、個人でも商用でも利用可 で、コードも自由な利用を認めてくれて いました。唯一、記事を丸ごとコピーし ないで欲しい、との事。 そのライセンスはこちら。 先日も話題になったパクリ記事問題です（僕の記事もやられてました→ttp://ameblo.jp/sfida2010/entry-10758747352.html）が、codropsは心の広いブロガーさんのようで好感をもてますね。こうありたいものです。リスペクトも兼ねて、ライセンスに従い、WordPressのテーマにしたので配布します。 FullPageImageGallery このギャラリー（Full Page Image Gallery with jQuery）です。これをまんまテーマ化。 こんな感じでWPで管理できます。サムネイルの数は「
お手軽・簡単にブログやWebサイトを拡張出来そうなWebサービスいろいろ
以前、デザインとか加工とか出来ないから なんかいいの教えて、と言われて教えたツ ールいろいろという記事で、ブログを始めた 彼が今度はブログをパワーアップさせたい 的な事を言い出したので教えたWebサービ スです。知識がないから簡単に出来るやつ がいい、とのことでしたのでそんなWebサー ビスになっています。 パワーアップさせたい、としか聞かれなかったのと、僕もあまり時間がなくてさほど数は探せませんでしたが、喜んでくれていたので需要があるかと思って記事にしてみます。パワーアップって言われても、どうしたいのかよく分からないので機能を追加できる的なものを探してみました。 基本的にコピペで済むものがほとんどです。僕自身、あまり導入経験が無いので使用感抜きで書いていますがご了承ください。 zenback 国産（シックス・アパートさんですね）のWebサービスです。かなり色々なところで見かけますが、申請
「吹き出し」をツールチップとして実装するjsいろいろ
マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので
最近知った素晴らしいデザインの国内ブログいろいろ
「最近」というのはここ4～5ヶ月 を指しています。国内のブログで 凄く素敵だなぁと個人的に感じた サイトをご紹介させて頂きます。 主観で選んでいますのでその辺 ご了承くださいね。。 （恐らく）配布されたテンプレート等を使用していないブログデザインを選んでいます。更新のあまり無いブログやコンテンツの少ないブログは極力割愛しました。 K’conf 一目惚れしたブログです。メニューのツールチップもいいですね。クールなデザインですがなんとなく柔らかい印象も受けます。内容もWeb制作に役立つ情報なども配信してくれています。 K’conf Photoshop Vip このブログと同じ時期くらいに始められたそうです。大きなフォントが凄く印象的。リニューアルも検討されていると伺ったので変更されるかもしれません。 Photoshop Vip RedLine Magazine クール＆ビューティーなデザインで
Google Chrome使い始めたけどFirefoxにはコレがあるから完全に移行出来ないっていうアドオンまとめ
二十歳街道まっしぐらさんの私が Firefox から Chrome に乗り換えた７つの理由という記事に刺激されて食わず嫌い（と言うほどでも無いけど・・）していたGoogle Chromeを使い始めました。 記事通り、リリース当初よりかなり便利になっていますし、Chromeの速度はかなり魅力なのですが、Firefoxの「このアドオンがあるから・・」という理由でやはり完全に移行出来ませんでした。カメきちさんの記事のブコメもいろいろと参考になりますね。一言で済ますと好みですよね。使いやすいもの使ったり併用したり。 僕は今は半々くらい、ややFirefoxよりでテスト利用しています。通常ブラウジングは殆どChromeになりそうです。ついでに「このアドオンがあるから・・」というアドオンをご紹介したいと思います。 「お勧めアドオン」系の記事ってあまり参考にならないことも多いと思いますので「こいつはこんな
Twitter関連ツール・まとめ - かちびと.net
Twitter関連の便利なツールがかなり 紹介されて来ていて、そろそろ混乱 してきたのでまとめます。 リンク先は日本語で解説してくれて いる記事にしています。されていない ツールやサイトは載せていません。 今現在は165個のツールがありましたが、今後追加していく可能性もあります。 TwitterWikiに載ってるサービスは極力載せていないつもりですが、若干被ってるかも。 全てのサービスを試したわけではありません。ＭａｃとiPhoneは持って無いですし。。。 また、リンク先を日本の記事にしたのは、海外のサービスに直接貼っても 使い方が分からなければ意味が無いと思った為です。 なので、リンク先がかなり偏っていますが重ねてご了承下さい。 ※コメント頂いたので１５個追加して180個更に20個追加して200個に育った。 ※8月アップデート＞17個増えて217個 ※9月アップデート＞30個増えて247
よく見かける「SEO的に～」という様々な疑問
ＳＥＯ関連のサイトや掲示板、ブログ等のコメントでよく見かける質問が 「～はＳＥＯ的に有利？」、「～をするのはＳＥＯ的に不利なのかな？」 と言った内容です。ＳＥＯに関わる業者さんなら何度も同じ質問を 頂くこともあるかと思います。 そこで、様々な「ＳＥＯ的にどうなの？」という疑問をまとめてみようと思います。 サブディレクトリとサブドメインではどちらがSEO的に有利か よく見かける質問ですが、既にWebサイトが存在していてこれから全く別の 新しいコンテンツを作成するのであればサブドメインにした方が良さそうですが、 既に存在するコンテンツを強化する為に関連したキーワードで上位表示を 狙うのであればサブディレクトリで既に存在するサイトの評価の恩恵を受ける事が 可能なようです。コンテンツ次第という事でしょうね。ただし、関連していても 階層が深くなる（http:example.com/seo/wp/sh
フリーのはてなブックマークアイコンいろいろ
フリーのアイコン配布記事は 凄く助かるのですが、SBMアイコン なんかは9割方使いようが無いので 日本のSBMの代表格でもある、 はてなブックマーク、はてブの 無料アイコンをまとめます。 はてなブックマークの立体アイコン いいですね！立体アイコン。影もちゃんと付いてる。 はてなブックマークの立体アイコン はてなブックマークの3Dアイコンを作ってみた。 こちらもいい感じ。綺麗目ですね。 はてなブックマークの3Dアイコンを作ってみた。 スケーラブルな「はてブ」アイコン2種 でかいｗｗこういうのありがたいですよね～。 スケーラブルな「はてブ」アイコン2種 ブックマークアイコン作ってみた-FLA-FLI 日本のSBMアイコンセットが２つ。かわいいｗｗ ブックマークアイコン作ってみた-FLA-FLI はてなブックマークアイコン15色 カラフルなはてブのアイコンがずらり。 はてなブックマークアイコン1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slideshowify
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
RSS全文配信してると記事を丸々転載されてしまうので、WPプラグインを使って逆に転載サイトを利用してみる