jQueryでファイル選択時にプレビュー表示する方法
jQueryでファイル選択時にプレビュー表示する方法を紹介します。 １．はじめに フォームのファイル選択で画像を選択したときに画像のプレビューを表示したい場合があると思います。 ということで、jQueryを使って画像をプレビュー表示する方法を紹介します。 ２．ファイル選択時にプレビュー表示する まず、下記のファイル選択フォームを用意します。 <form> <input type="file" id="file" /> </form> <div id="result"></div> そして次のjQueryを追加します。 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $(function(){ $('#file').change(function(){ $('img').remove()
WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する
WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する ※2013-11-16更新 ブログの記事の下に表示してる関連項目にサムネイルも表示したかったのですが、LinkWithin では精度が物足りませんでした。 Similar Posts でのサムネイルの入れ方がわからずテキストのみで放置だったところ、ウェビメモさんの記事でみごと解決させていただきましたのでそのメモです。 いま製作中の別サイトで、関連記事を各投稿の下にサムネイル付きで表示させたかったんですが、 Similar Postsの設定でいくら{image}と書いてもまったく全然サムネイルを取得してくれなかったので phpを使って表示させてやりましたよ！！！！同じ現象で困ってる人はこの方法を試してみてください！！ 関連記事のプラグインSimilar Postsでサムネイル表示がうまくい
関連記事のプラグインSimilar Postsでサムネイル表示がうまくいく方法
いま製作中の別サイトで、関連記事を各投稿の下にサムネイル付きで表示させたかったんですが、 Similar Postsの設定でいくら{image}と書いてもまったく全然サムネイルを取得してくれなかったので phpを使って表示させてやりましたよ！！！！同じ現象で困ってる人はこの方法を試してみてください！！ 使用したプラグイン 今回使用したのは関連記事を表示できるプラグインSimilar Postsです。 サムネイル設定以外のこまかい設定方法は以下の記事で解説されています。 カスタムフィールドを使ったサムネイルの表示方法も解説されているので、元々カスタムフィールドを使用している方はそちらの方法がおすすめです！ 参考：関連記事をサムネイル付きで表示できるWordPressプラグイン – ミblog : レビューや日常など 早速結論を。サムネイルを取得できる記述方法！ カスタムフィールドは使いません
エクスプローラの右クリックメニューに画像ファイルのサムネイルを表示できる「FastPreview」
By Gemma Bou エクスプローラーの右クリックメニュー内に選んだ画像ファイルをサムネイル表示できるフリーソフトが「FastPreview」です。対応しているファイル形式は「BMP/DDS/GIF/HDR/ICO/J2K/JP2/JPEG/PCD/PCX/PFM/PNG/PSD/RAW/SGI/TARGA/TIFF/WBMP/XBM」となっています。インストールと操作方法は以下から。 FastPreview https://tn123.org/fastpreview/ ◆インストール Windows7の64bit版を使用しているので、上記サイトの「FastPreview-x86_64.exe」をクリック。 ダウンロードした実行ファイルを起動。 「I Agree」にチェックを入れて、「Next」をクリック。 「Next」をクリック。 「Next」をクリック。 「Close」をクリックす
WordPressの「アイキャッチ画像」がいまいちピンとこないクライアントさん向けに説明文を挿入する - かちびと.net
WordPressのアイキャッチ画像は凄く便利で 僕もテーマ開発時には必ず使用するんですが Webに疎いクライアントさんは必ずと言って いいほどアイキャッチ画像、という言葉が ピンとこないようで忘れがちです。なので、 わかりやすいように説明文や画像を挿入して あげます。 正直、僕も初めて「アイキャッチ画像」と言われても機能性が全然ピンとこなかったのでWebに疎い方じゃ余計に理解しにくそうです。なので、分かりやすく説明文を入れておくと親切かもしれません。 説明文を入れる このようにアイキャッチのメタボックス内に説明文を加えます。 コード functions.phpに以下を加えます。 add_filter( 'admin_post_thumbnail_html', 'add_featured_image_instruction'); function add_featured_image_in
リッチスニペット対応させて検索結果で注目度UP
今年の6月下旬の話を思い出したように書いています。 google の検索結果がリッチスニペット対応したのが 2009年12月あたり。ユーザ視点で言えば、ページの有益性を検索結果一覧上で確認する手段が提供されたことになりますが、情報提供者側の視点から言えば、検索順位以外でユーザの注目を集める方法が提供されたことになります。公式ブログでは下記のような説明がされています。 製品やサービスのレビューや評価情報を表示することで該当ページの有益性が分かりやすくなり、より効果的にユーザーをウェブサイトへ誘導できることが我々の実験結果で出ています。 つまり、リッチスニペット対応して検索結果にレビューやサムネイルとかを表示すれば、注目度が上がりアクセス数も増えるんだろうなぁーと容易に想像できたので、いつか自分のブログも対応させたいと思い始めてから早一年半・・・。料理カテゴリの記事のみですが microfor
プラグイン [ Popular Posts ] / [ Similar Posts ] のカスタマイズまとめ #1 « nulldesign
サイト内の人気のあるポストをリスト形式で表示してくれるプラグイン[ Popular Posts ]ですが、カスタマイズのための日本語資料があまりないようだったので、調べてみました。 私の場合かなりの確率でこのプラグインを利用しているのですが、使えば使うほど便利なプラグインだなと感心してしまいます。 今回の内容は少し長くなってしまうようなので、4回に分けてのエントリーにします。 予定としては・・・(タイトルは仮です) #1 管理画面での設定各種 (今回のポストですね) #2 よく使いそうなカスタマイズ方法 #3 ちょっと突っ込んだカスタマイズ方法 #4 PHPと連動してみる 同じくよく使うプラグイン[ Similar Posts ]についても備忘録としてまとめようと思ったのですが、同じフォーマットでカスタマイズが可能なようです。 あわせてご覧ください。 管理画面について Gene
サムネイルつきでアクセス数の多い記事を表示できる `WordPress Popular Posts` を導入してみた
Popular Postsというプラグインもあるけどwp-super-cacheと相性が悪い（キャッシュページ表示時にカウントされない）ので使えなかった。 » Google Analytics Popular Posts Yaima surfというものもあったけど今回はやめといた。 そういうことで WordPress Populer Posts というものを試してみることにした いちおう普通にアイキャッチ画像をサムネイルに使う人のためにウィジェットは特に説明しなくても見れば分かると思いますが、記事の下などに Wordpless Populer Posts にアイキャッチ画像を表示させたい場合は以下のように記述する <?php get_mostpopular( 'thumbnail_width=50&thumbnail_height=50&thumbnail_selection=userge
[Wordpress] サムネイル（アイキャッチ）画像の設定いろいろ | nm705.com
サムネイルを表示させる方法は比較的簡単に見つかったのですが、 alt や title が画像名になってしまい、不恰好だったので、調べてみました。 まず、サムネイルの表示方法から説明します。 1.サムネイルを表示させる サムネイルとは、上記画像のように、 画像挿入の時に「アイキャッチ画像として使用」をクリックした時に表示される画像です。 上記サイトに詳しく書いてあるのですが、初心者の私が試したところ、 function.php で設定したとおりにならなかったので、別の方法でサイズ指定しています。 とりあえず、function.php に、 add_theme_support( 'post-thumbnails' ); と記載するところまでは、同じです。 （記載箇所はfunction.phpの一番最後でいいと思います。） 次に、set_post_thumbnail_size( 50,
3分LifeHacking：Windowsの右クリックメニューに画像のプレビューを追加する - ITmedia エンタープライズ
デスクトップ上に置かれた画像ファイル。中身を確認するためにはダブルクリックしてビュワーを起動する必要がある。縮小アイコンを表示する場合もあるが、サイズが小さすぎて内容を正確に判別できない場合も多い ネットで拾った画像やメール添付で送られてきた画像など、出どころ不明の画像を大量に抱えている人は多いだろう。すぐに見ようと思ってデスクトップ上やダウンロードフォルダに保存し、その後そのまま忘れ去ってしまったというパターンだ。 そうした画像を整理整頓するためには、1枚ずつビュワーで開けて内容を確認する必要があるわけだが、枚数が多いとかなりの手間だ。エクスプローラのアイコン表示を「特大」や「大」あたりにしておけば1枚ずつ開かなくても判別できるが、中途半端な枚数であれば、むしろ表示モードを切り替える方が煩わしかったりする。 こうした場合に便利なのが、今回紹介する「FastPreview」だ。このソフトを
Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery - かちびと.net
ポップアップしたLightbox内にサムネイルも表示可能 なjQueryプラグイン・ppGalleryのご紹介です。Lightbox 系のjQueryプラグインの大半は1つずつ見ていくか、 一旦ポップアップを閉じてからもう一度開く必要があり ましたが、ppGalleryは一回開けばあとはサムネイルで 好きな画像に飛べるのでLightboxスクリプトの中でも イメージギャラリーに向いてそうです。 さて、今日は8月6日「ヒロシマ」の日ですね。1945年の今日の8時15分に原爆が投下されました。不幸にしてお亡くなりになられた方々のご冥福をお祈りすると共に、ご遺族の方々に対して心よりお悔やみを申し上げます。 現在、上記のようにGoogleストリートビューで原爆ドームの外と内を見ることが出来るようになっているようですのでチェックしてみてください。 では本題に戻ります。「Lightbox内にサムネイル
『Facebookのシェアボタンをブログに設置しよう！』
佐渡の洋食屋店長のブログ佐渡の洋食屋店長のマニアックなブログです。 グルメネタは少なく、マニアックなネットTEC的なネタ、佐渡ネタが豊富なブログです。 え？いいね！ボタンがあるから要らないって？ いやいや、違うんですって・・・Facebookのシェアボタンにはシェアボタンのいい所があるんですよ。 例えば、このアメブロにいいね！を押してくれた方のウォールを見てみましょう。 こうなりますよね。 OpenGraphProtocol（オープングラフプロトコル）を設定していないと画像サムネイルが選べないのです。 OGP（オープングラフプロトコル）についての記事はこちら。 ですが、シェアボタンならこういうことも出来るんです！ ほらね？同じ記事ですが、サムネイルがわかりやすく表示されましたね。 これ、実際使ってみるとひじょ～～～～～～～に便利です。 デメリットをあげるとすれば、いいね！ボタンはワンアクシ
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」:phpspot開発日誌
簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」 2011年06月15日- jLinkPreview 簡単なコードでリンク先をサムネイルプレビューできるjQueryプラグイン「jLinkPreview」のご紹介。 リンクを合わせたときにリンク先のイメージが分かるといいですが、それをjQueryプラグインの形で、簡単に実装できます。 サムネイル画像にはwimg.caというサービスが使われています。 サムネイル表示の例 使い方は以下のように初期化すればよいみたい。 画像のプレロードや、サムネイルサイズ（幅・高さ）、フェードや背景色など自在にカスタマイズできますね プラグインもそこまで大きくないため、サムネイルのプロバイダを変更するのもソースをちょこちょこっと変えれば対応できます。 関連エントリ テキストシャドウを自在にアニメーションさせられる
トップに指定した固定ページにサムネイル付き最新記事の抜粋を表示した
トップページに固定ページを設定し、ページの下部に ・最新の記事のタイトル ・更新日時 ・本文抜粋（できれば記事内の画像を自動で取得してのサムネイル付きで） を表示したいと考えています。 ある女性サークルのサイトで更新作業はあまり知識のない方々があたる事になり、ページ内でPHPが動くようにし固定ページにプログラムを書き込む方法だと、ユーザーがビジュアルエディタを使用する度にプログラム部分が化けてしまいます。 専用のページテンプレートを作り、thumbnail-for-excerpts等のプラグインを利用して…？とおぼろげに考えるのですがうまく設定出来ません。 PHPはほとんど理解出来ていない身で申し訳ないのですが アドバイスをいただけませんでしょうか、よろしくお願いいたします ・wordpressは2.9.2です ・ThemeはVicuna、スキンはstyle-vegaを改変したものです ・
WordPressの「QF-GetThumb」プラグインがPHPのセーフモード環境で動作しない問題の対処
先日エントリーした「WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」」で、PHPのセーフモード環境で正常に動作しない問題の対処方法を紹介します。 「QF-GetThumb」は、記事に挿入した画像から自動的にサムネイル（キャッシュ）を生成するプラグインです。 １．問題点 XREAやCORESERVERなど、PHPがセーフモードで動作するサーバでは、プラグインが利用するための、キャッシュを保存するディレクトリが正常に生成されないため、プラグインが正常に動作しないようです。 ２．対処方法 プラグインファイルqf-getthumb.phpの中にある、qf_get_savepath()関数の以下の部分を変更することで、サムネイルを表示させることができました。 変更内容は、プラグインのデフォルト動作である、サムネイル単位のディレクトリ作成をやめて、ファ
WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」
WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」について紹介します。 １．プラグインの機能 プラグインを適用することで、記事に挿入した画像から自動的にサムネイル（キャッシュ）を生成します。 1つの記事に対して作成するサムネイルは1つだけです。記事中に複数の画像がある場合、何番目の画像をサムネイルにするか、指定することもできます。 ２．ダウンロード・インストール QF-GetThumbのページ右にある「Download Version 1.1.3（2010年9月現在のバージョン）」をクリック。 ダウンロードしたアーカイブを展開して、中にある「qf-getthumb」フォルダをwp-content/pluginsディレクトリにアップロードします。 管理画面左メニューの「プラグイン」をクリックして、次の画面で「QF-GetThumb」の「有効化」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fine Uploader Javascript Upload Library
IDEA * IDEA