お正月休みに私がしたブログ見直しの試みあれこれ - Design Color
今回の試みたブログの見直し 今回行った大きなブログ見直しは以下の通りとなっています。 他の記事への「おすすめ」の仕方を強化 関連記事にサムネイルを追加 facebookの「Recommendation Bar」を追加 サイドバーの充実化 「人気記事」の表示 「はてなブックマークの人気記事」の表示 Facebookページ作成 他の記事への「おすすめ」の仕方を強化 とにもかくにも、願いはただひとつ。時間があれば、他の記事もぜひ読んでもらいたい！…ということで、他の記事への「おすすめ」の仕方を自分なりに強化してみました！ 関連記事にサムネイルを追加 今までは記事下に関連記事をテキストのみのリスト表示で出していました。ですが、サムネイルがないとどんな記事かパッと見てイメージがつきづらいし、「クリックしたくはならない」のかなあ…ということで、こちらにサムネイルを追加することに。 さらに、今までのコー
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
ドラッグ＆ドロップでファイルをアップできるHTML5のデモ:phpspot開発日誌
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery | InsertHTML ドラッグ＆ドロップでファイルをアップできるHTML5のデモ。 デスクトップなどからファイルをブラウザにドロップしてサムネイルを表示→ボタンを押下でアップロード実施というインタフェースのアップローダ実装デモです。 ソースをDLしてそのまま使うことも可能です。 ドロップするとサムネイルと共にボタンが表示されます。 ボタンを押すとファイルがアップロードされます。 使い慣れるといちいちダイアログからファイルを選ぶのが馬鹿らしくなりますね。 サンプルにはPHPスクリプトもおまけでついてきますが、値をValidateしていなかったりするため、実際に利用するには注意が必要そうです。 関連エントリ これは必見のWEBデザインの近未来。HTML5で構築
サムネイルがシャッフルされてクールなギャラリー実装「Photofy」:phpspot開発日誌
Photofy | Photo Swap Shuffle Plugin for jQuery サムネイルがシャッフルされてクールなギャラリー実装「Photofy」。 写真が沢山並んでおり、一定時間ごとにシャッフルされる写真ギャラリーです。固定位置よりも何がでるかわからない楽しさが演出できます ほとんどのギャラリーが順番が決まっていますが、これはランダムに並べられ、そのアニメーション効果もクールです サムネイルクリックで写真を説明と共に拡大が可能 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 動画ギャラリー用WordPressプラグイン10個 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル 洗練されたUIのギャラリーサイト「Ui Parade」
指定した画像のサムネイルを自動作成してくれるWebサービスAPI『rethumb』
また、オプションのパラメータ『width』と『height』でサムネイルサイズを指定できます。（最大512pxまで） さて、サムネイル画像の作成は大抵ローカルで作成したものをアップロードするかサーバーサイドで何らかのプログラムで自動作成するのが普通だと思いますが、今回のような外部サービスを使えば作成自体することもなく、さらには画像をホストする必要さえないので、お手軽さからいえばこれ以上のものはないと思います。 気になるところといえばサムネイル画像の表示スピードでしょう。 そもそもサムネイルをわざわざ別に作成する意味の一つとして、オリジナル画像ではファイルサイズが大きくてページ全体の表示スピードが遅くなる、という理由が挙げられると思いますが、もしサムネイル表示も遅いのならばまったく意味のないことになってしまいます。 今回のサービス、一番はじめのリクエスト時だけは作成時間分ある程度かかりますが
WebKitベースのURL全体のキャプチャ·webimage MOONGIFT
webimageはコマンドラインでWebKitベースのWebブラウザサムネイルを作成するソフトウェアです。 Webサイトのサムネイル画像生成サービスは多数あります。しかしサービスによってWebブラウザの種類が決まっています。Geckoエンジンを使ったものが多いですが、WebKitを使って取得するサービスを構築するなら使ってみたいのがwebimageです。 デモサービスを通じて生成された画像です。ページ全体がキャプチャされています。 日本語がトウフになってしまっていますが、JavaScriptが解釈された点は評価できます。 利点、欠点の双方がありそうですがこの手のシステムでは総じてセキュリティ上の理由からJavaScriptやFlashがオフにされているのが一般的です。しかしwebimageを通じて作成した画像はJavaScriptが評価されているので、Webアプリケーションのスクリーンショ
[JS]プロダクトの一覧表示を1クリックで、リストとグリッドに切り替えるチュートリアル
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ：グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
Archive.is : 見た目を忠実に再現してくれるインターネットアーカイブ・サービス
Archive.isは指定したWebページそのもののコピーを作成して保管しておいてくれる、いわゆる『インターネット・アーカイブ』のサービス。 オリジナルの記事がネット上から削除されてもコピーを作成しておくことでいつまでも閲覧できるというもので、Wayback Machineやウェブ魚拓などが有名だと思いますが、こちらの特徴は何といってもその再現力の高さです。 大抵、同種のサービスはスクリプトに対応していませんが、このサイトはスクリプトによって読み込まれる情報も忠実に読み込んでそれを保存します。 画像などは一個一個コピーを作ってこのサービスでホストするようになっていて、CSSなどは『style』属性に変換して各要素に入れることでCSSファイル自体を使わずともスタイルを再現できるようにしているようで、これでオリジナルのページとほぼ同じ見た目での閲覧を可能にしています。 サンプルとして作成したこ
画像を生成せずにサムネイル風に小さな画像を表示·jQuery NailThumb MOONGIFT
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。 Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。 正方形の他に縦横比の固定、横幅優先といった指定もできます。 縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。 こちらは切り取りです。 他にもサンプルが多数あります。 画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイ
WordPressにアップロードしてリサイズされたJPG画像の画質を1行のコードで改善させる
覚えておきたいTipsだったのでメモ。WordPressでのJPGの画質を少しでも改善させよう、という方法です。手軽に出来るので覚えて置いて損は無いかと思います。設定されている圧縮比を変更する、という方法。 今まで知らなかったんですけど、覚えておくといいかも。 リサイズ機能 WordPressにはリサイズ機能があります。例えば横幅500pxの画像をアップロードした際、300pxの幅で使いたければ上記のようにサムネイルを選択出来ます。 foo.jpgという名のファイル名なら「foo-300×225.jpg」という、リサイズされた画像を生成してくれます。 デフォルトは90％この際の圧縮比がデフォルト値では90％になっています。wp-includes/media.phpの410行目あたりには image_resize( $file, $max_w, $max_h, $crop = false,
ど素人の私がWordPressテーマを自作した際にめっちゃ参考にさせていただいた13記事 | なまら春友流
先日WordPressのテーマを自作しました。 ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザインブック』 | なまら春友流 基本的には「WordPress デザインブック」という本を参考に作成。 でもそれだけでは自分の好きなようにはデザインできなかったのでやっぱりGoogle先生に聞いてみました。 多くの記事を読みましたがそのなかでもめっちゃ参考になった記事をご紹介いたします。 記事の作者様本当に役立ちました、ありがとうございました！ AGENDA ソーシャルブックマークボタンの埋め込み 記事の1番最初の画像をサムネイル表示する（2記事） 広告の表示 ブロック要素とインライン要素 CSS3用例集（3記事） jQuery サイトの配色について WordPressのまとめ記事（3記事） 1. ソーシャルブックマークボタンの埋め込み WordPress
WordPress（ワードプレス）で記事の一番最初の画像を取得する方法 | Liglog
WordPressで記事の一番最初の画像を取得し、サムネイルとして使う方法をご紹介します。 当サイトもトップページの記事一覧はサムネイル画像と、文章出だしの一覧になっていると思いますが、構造としては記事の一番最初に画像を挿入し、文章出だしを書いてmoreタグをつけるという手順を踏んでいます。 ただ、この方法だと画像が一番上にきて、つづきの文章があり、という形を変えることは難しいです。 もちろん、抜粋などを利用して頑張れば色々出来ることはあると思いますが、今回紹介する方法であればサムネイル画像を自由に設置することができます。 以下手順。 functions.phpの設定 コードはこちらの記事を参考にさせて頂いてます。 まずは、functions.phpに以下のコードを追加します。 function catch_that_image() { global $post, $post
米LHが選ぶ最強なWin向けキャプチャツールは『PicPick』 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」
WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」について紹介します。 １．プラグインの機能 プラグインを適用することで、記事に挿入した画像から自動的にサムネイル（キャッシュ）を生成します。 1つの記事に対して作成するサムネイルは1つだけです。記事中に複数の画像がある場合、何番目の画像をサムネイルにするか、指定することもできます。 ２．ダウンロード・インストール QF-GetThumbのページ右にある「Download Version 1.1.3（2010年9月現在のバージョン）」をクリック。 ダウンロードしたアーカイブを展開して、中にある「qf-getthumb」フォルダをwp-content/pluginsディレクトリにアップロードします。 管理画面左メニューの「プラグイン」をクリックして、次の画面で「QF-GetThumb」の「有効化」
WordPress「アイキャッチ画像」の使い方
WordPressでは「アイキャッチ画像」という機能が追加されています（2.9～。当時は「投稿サムネイル／投稿画像」という名称だった模様）。 本エントリーでは「アイキャッチ画像」について紹介したいと思います。認識誤り等ありましたらご指摘ください。 １．アイキャッチ画像とは 「アイキャッチ」は「人目を引く」といった意味があり、WordPressの「アイキャッチ画像」とは、記事単位にアイキャッチ用の画像を設定できる機能を指します。 アイキャッチ画像を記事に設定しておけば、記事にひもづいたサムネイルや、ページのヘッダー画像として利用することができます。 TwentyElevenテーマでは次のようにヘッダー画像（赤枠部分）にアイキャッチ画像を表示できます（仕組みについては後述）。 アイキャッチ画像を利用するには、利用しているテーマにアイキャッチ画像を利用する設定が必要です。設定の詳細は４項で解説し
jQueryのカルーセル系プラグイン・Caroufredselだけで「こんな事も出来るよ！」をまとめたサイト・Cool Carousels
Caroufredselという、結構人気なプラグイン があるんですが、このプラグインの開発者が 応用例をサンプルソース付きでまとめてくれ ていましたのでご紹介。1つのプラグインで ここまで出来るってちょっと凄いですね。 もう少し軽量になってくれると嬉しいんです けど・・ カルーセル系プラグインの定番的なライブラリ、Caroufredselの応用例を開発者さん本人がまとめてくれていました。もともと沢山例があったんですが、更に一歩進んだ使い方を紹介してくれています。サンプルはダウンロードできます。
APIを使わずにYoutube動画のサムネイルを得る方法:phpspot開発日誌
APIを使わずにYoutube動画のサムネイルを得る方法があるみたいです。 画像が以下のようにvideoidをベースに生成されるので、URLを作って<img src>に設定するだけです。 videoidは、http://www.youtube.com/watch?v=XXXXXX の部分のことです。 http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.j
動画の場面を切り出してサムネイルを生成·Thumbnail me MOONGIFT
Thumbnail meは動画を読み込んで各場面を切り取ったサムネイル画像を生成するソフトウェア。 Thumbnail meはWindows/Linux用のオープンソース・ソフトウェア。動画はインターネット上に無数に存在するコンテンツで、みんなに好まれている。だが閲覧時間が長いのが難点だ。最後のオチのために30分PCの前で我慢して見続けるというのはなかなか大変だ。 動画の場面を切り出したサムネイル画像 ざっとした内容を確認したいと思ったら、ダイジェストがあると便利だ。そのような動画紹介をしたいと思ったら、Thumbnail meを使って動画のサムネイルを作成してみよう。 Thumbnail meは任意の動画ファイルを読み込んで、そのサムネイルを生成するソフトウェアだ。縦横の数を設定し、プレビューボタンを押すとThumbnail meが動画を解析して場面を切り出して一つの画像にしてくれる。こ
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」:phpspot開発日誌
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ（幅・高さ）、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[wordpress]自動でアイキャッチ画像！抜粋記事にサムネイル画像表示「Thumbnail For Excerpts」 | nori510.com![[wordpress]自動でアイキャッチ画像！抜粋記事にサムネイル画像表示「Thumbnail For Excerpts」 | nori510.com](https://cdn-ak-scissors.b.st-hatena.com/image/square/27b4365c92ee314f27fa4961860d5c891f0a9990/height=288;version=1;width=512/https%3A%2F%2Fnori510.com%2Fwp-content%2Fuploads%2F5624890618_562f988dea1.jpg)
