はてなブックマーク

• あとで読む

  Google Maps JavaScript API V3のサンプル

  3 users

  39kn.com

  今更ですがGoogle Maps API V3のサンプルです。※バージョン2までとの主な変更点はバージョン3ではAPI Keyが不要になり、パソコン用だけでなく、携帯端末にも対応するようになりました。 また、Google Maps 無償版 APIでSSLが利用出来るようになりました。 Google Maps JavaScript API V3のサンプル1 ポイントをクリックでウインドウオープン。 ストリートビューマーカー移動で画面にストリートビューを表示。 Google Maps JavaScript API V3のサンプル2　Gmap3 jQuery plugin ポイントマーカーをドラッグしてウインドウ内にストリートビューを表示。 参考サイト Google Maps JavaScript API V3 リファレンス Google Maps入門(Google Maps JavaScrip

  • テクノロジー
  • 2012/03/21 18:39
• あとで読む

  カスタム投稿タイプをウィジェットの最近の投稿に含める・・WordPress

  5 users

  39kn.com

  カスタム投稿タイプを作成したら以下の点に注意が必要です。 トップページに最新記事を表示している場合 ウィジェットに最近の投稿の表示している場合 RSSの配信 query_posts などで記事を取得している場合は、カスタム投稿タイプを追加してやらないと表示されませんので追加します。 ウィジェットに最近の投稿のタイトルを5件表示 ※ウィジェットにある「最近の投稿」を使用するとカスタム投稿タイプは含まれないので、 プラグイン「Executable PHP widget」を使用。「インストール＞有効化」でウィジェットに「PHP Code」が追加されますので以下のコードを記述。 <ul> <?php query_posts( array( 'post_type' => array('post', 'カスタム投稿タイプ'), 'posts_per_page' => 5 )); ?> <?php if

  • テクノロジー
  • 2011/12/16 19:46

  • WordPress
• あとで読む

  WordPress プラグインWelcartでネットショップ

  3 users

  39kn.com

  WordPressのショッピングカートプラグイン「Welcart」。メンバー登録・クレジット決済などにも対応。 簡単な初期設定と商品登録だけで手軽にネットショップを構築・運営できます。 「Welcart」DEMO 初期設定・・注意）商品登録は初期設定後に行います。 管理画面のメニューに「Welcart Shop」が追加されますので、 あとは以下の順番に必要事項を入力して初期設定を完了してください。 「基本設定」ショップの設定、支払方法など 「配送設定」配送業者と送料の設定 「メール設定」受注メール設定 「システム設定」言語・通貨の設定 「クレジット決済設定」・・決済サービスの設定 「営業日設定」 オンラインマニュアルはこちら 「基本設定」ショップの設定、支払方法など（画面） 「配送設定」配送業者と送料の設定（画面） 「メール設定」受注メール設定（画面） 「システム設定」言語・通貨の設定（画

  • テクノロジー
  • 2011/10/05 11:26
• あとで読む

  カスタム投稿タイプとカスタムタクソノミーの追加・・WordPress

  9 users

  39kn.com

  カスタム投稿タイプとカスタム分類とは・・ カスタム投稿タイプ（Custom Post Types）・・「投稿」のようなメニュー項目を追加する事 カスタム分類（Custom Taxonomies）・・「カテゴリ」「タグ」のような分類の事 例えば、“販売店”(store) という「カスタム投稿タイプ」を作成して 「カスタム分類」で　“エリア”(area)　“取扱商品”(product) を追加してみましょう 今回は、プラグインを使わずにfunctions.php（テーマファイル）にコードを追加します。 ※プラグインの場合は「Custom Post Type UI」がおすすめです。 functions.php /* カスタム投稿タイプの追加 */ add_action( 'init', 'create_post_type' ); function create_post_type() { reg

  • テクノロジー
  • 2011/07/25 19:13

  • カスタム分類
  • wordpress
  • カスタム投稿タイプ
  • まとめ
• あとで読む

  カスタム投稿タイプとカスタムタクソノミーの表示・・WordPress

  20 users

  39kn.com

  前回の「カスタム投稿タイプとカスタムタクソノミーの追加」の続きですが、今回はカスタム投稿タイプで投稿した記事の表示方法についてです。 シングルテンプレート（single.php）で表示するには 「カスタム投稿タイプ」ならテーマのsingle.phpファイルをコピーしてテーマディレクトリ内にsingle-[post-type].phpを作成する方法が簡単です。例）single-store.php ただし、コピー元のファイル（single.php）内にテンプレートタグ（the category/the tags）で カテゴリ・タグを表示している場合には「投稿」のカテゴリ・タグが表示されてしまいますので、 カスタム分類のテンプレートタグ（get_the_term_list）に置き換えてください。 参照）カスタム分類をリンク付で表示・・テンプレートタグget_the_term_list 例）カスタ

  • テクノロジー
  • 2011/05/31 09:54

  • カスタム投稿タイプ
  • WordPress
  • custom post type
  • wordpress
  • php
• あとで読む

  WordPress プラグイン　Custom Field Templateの使い方

  48 users

  39kn.com

  ビギナーにはちょっとわかりにくい「カスタムフィールド」。 使い方によってはとても便利な機能なのです。基本的な使用方法は「カスタムフィールド」の入力項目の「名前」と「値」を 追加して、この「メタデータ」を取得して表示します。 使い方の例）・・カスタムフィールドでサムネイル表示 カスタムフィールドテンプレートを使用すると下記のようなAmazonのリンクも簡単にできます。 Custom Field Templateのダウンロード Custom Field Templateプラグインは 同じフォーマットでの入力が多い場合には便利なプラグインです。 ダウンロード：　Custom Field Template plugin 解凍後、ファイルをFTPで/wp-content/plugins/のディレクトリにアップロード。 設定方法：　管理画面＞設定＞カスタムフィールドテンプレート Custom Fiel

  • テクノロジー
  • 2011/05/30 09:21

  • wordpress
  • カスタムフィールド
  • カスタム投稿タイプ
  • *wordpress
  • プラグイン
  • plugin
  • テンプレート
• あとで読む

  kpicasa-galleryでPhoto Gallery作成

  4 users

  39kn.com

  「kpicasa-gallery」でGoogle　Picasaの写真を公開してみた。 撮影した写真を公開するのにはこのプラグインはとっても便利。「Picasa」に写真をアップしておき、”公開”にすれば、ページにそのまま反映される。 ダウンロード：　kpicasa-gallery ダウンロード後、解凍して「wp-content/plugins/」にアップロード。 管理画面からプラグインを有効にして、「設定」でkpicasa-galleryのオプションを開き、「Picasa」のユーザー名を入力。（****@gmail.com） あとは、ページの表示設定をしておく。また、細かい設定は「CSS」などで・・。 そして「新規」ページ作成して”KPICASA_GALLERY”を記述して完了 Sample ：　Photo Gallery 追記）　2010/5/23　kpicasa-gallery　(v:

  • テクノロジー
  • 2011/02/08 18:12

  • Picasa
  • wordpress
• あとで読む

  CSSで作る画像の切り替え・・Image Switcher

  5 users

  39kn.com

  JSを使用せずにCSSでオンマウス時に画像が切り替わるタイプ。 ヘッダーのトップ画像切り替えなどに使えますね。 デモ： HTML <div id="images-wrap"> <a id="img_a" class="image-link" href="#"> <span>サンプル画像A</span></a><br /> <a id="img_b" class="image-link" href="#"> <span>サンプル画像B</span></a><br /> <a id="img_c" class="image-link" href="#"> <span>サンプル画像C</span></a> <a id="img_d" class="image-link" href="#"> <span>サンプル画像D</span></a> </div> CSS #images-wrap { wi

  • テクノロジー
  • 2011/02/04 17:30

  • あとで読む
• あとで読む

  WordPressでCGIを動作させるには・・

  3 users

  39kn.com

  cgiをWordpressで動かす方法・・投稿ページなら以下の手順通りにテンプレートファイルを作成する方法。また投稿の記事ならiframeで埋め込みが簡単。 手順1） テンプレートの作成。※テーマのpage.phpを開き、最初の行に以下のように”テンプレート名”を記述。 <?php /* Template Name: テンプレート名 */ ?> 手順2） 次にpage.php内に以下のようにiframeで動作させたいcgiのパスを記述して、名前を付けて保存。 ※例えば、投票用であればテンプレート名を”votec.php”など。 <?php <iframe src="http://****.com/votec.cgi" width="550" height="400" frameborder="0" scrolling="no"></iframe> ?> 手順3） 作成したテンプレートファイ

  • テクノロジー
  • 2010/11/15 05:56

  • wordpress
• あとで読む

  「phpMyAdmin」を利用したMySQLデータベースのエクスポートとインポート

  4 users

  39kn.com

  WordPress3.0になって徐々にプラグインも対応されてきましたが、いつ何らかの原因でWordpressが動かなくなったり、データが飛んでしまったり、ウイルスに感染したりと・・そういう事態になってからの復旧作業は意外と大変です。 今回はドメインの引越しによるWordPress作成したサイトのデータの移行です。まずは準備です。 新ドメインにデータベースを作成してWordPressをインストール プラグイン「WordPress Database Backup」を使ってデータベースのバックアップ。 またはWordPressの管理＞ツール＞エクスポート 画像・テーマファイル・プラグイン等のバックアップ WordPressの場合、管理機能でエクスポート、インポートが簡単ですが 今回は「phpMyAdmin」を使用してのデータを移行してみます。 データのエクスポート・・「phpMyAdmin」にロ

  • テクノロジー
  • 2010/10/07 01:51

  • WordPress
• あとで読む

  使えるWordPressプラグイン

  5 users

  39kn.com

  WordPressプラグインはいつのまにか15,000にせまる勢いで公開されています。100近いプラグインを試してみましたが、その中でも個人的に使えると思うプラグイン56個ご紹介します。 WordPressプラグイン Name&Download

  • テクノロジー
  • 2010/08/21 02:01

  • wordpress
  • プラグイン
• あとで読む

  画像のスライドショー「jquery showcase」

  20 users

  39kn.com

  jquery showcaseは画像内にサムネイルを表示してスライドショーなどを表示できます。 jQuery (version 1.3.2+) 、jquery.showcase.X.jsをダウンロード要。 配布元：　jquery showcase：jquery.showcase 2.0.1 DEMO・・マックのメニューからサムネイルで3点のリストを右下に配置してオートフェード。 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" conte

  • テクノロジー
  • 2010/07/01 16:20

  • jQuery
  • slideshow
  • javascript
• あとで読む

  Google Mapsの応用　JavaScriptでリスト表示「Google Maps API」

  5 users

  39kn.com

  「Google Maps API」でサイドバーのリストから表示させるタイプを作成してみた。 マーカーにロゴを使用して、マーカーおよびサイドのリストをクリックして「info window」を開き、概要を表示させる。こんな感じのマップが一番実用的で良いかも・・。 ※地図をみるとわかるが、さすがに「セブン＆アイ・ホールディングス」マーケティングがすばらしい！ 参考サイト：　Seis Pesos イトーヨーカドー・ネットスーパー「神奈川県エリアマップ」

  • テクノロジー
  • 2010/06/15 17:49

  • javascript
• あとで読む

  WordPressでトップページに最新記事5件をリスト表示

  55 users

  39kn.com

  トップページによくあるメモ書きです。 トップページに最新記事5件を日付・タイトルをリスト表示。 さらに過去30日以内の記事にはNEWアイコンを付けるコード。 <ul> <?php query_posts('posts_per_page=5'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <span class="date"> <?php the_time('Y年n月j日'); ?> <?php $days=30; $today=date('U'); $entry=get_the_time('U'); $diff1=date('U',($today - $entry))/86400; if ($days > $diff1) { echo '<img src="images/new.g

  • テクノロジー
  • 2010/06/08 16:59

  • wordpress
  • WordPressカスタマイズ
  • php
  • wp
  • カスタマイズ
• あとで読む

  楽天ショップの構築、サイト作成時の注意

  8 users

  39kn.com

  何年か前に管理しているサイト宛てに月々5万円で楽天から 「日本最大のショッピングモールに出店」とかいうメールの案内がきた記憶がある。 そのショップは楽天のロイヤリティなど考えると採算が合わないのでやめたらしいが・・。 しかし今回、別件ですでに契約していた楽天のショップのリニューアルを依頼された。 話を聞いてみるとショップ構築が難しいのと効果がないのでやめようとしたら、 月々19500円のプランを薦めてきたらしい？そしてとりあえず、継続してみることにしたという。 さっそくマニュアルを送ってもらい、ログインして機能などいじってみる。 まぁ感想としては、一言でいうと使いにくい！ あとで調べてみるとこのマニュアルさえも有料らしい？（RMS入門マニュアルセット32,000円（税別）） そしてショップ編集機能（旧R-Storefront）で現サイトをみてみると操作は簡単だったが、 レイアウトは応用きか

  • テクノロジー
  • 2010/04/27 16:14

  • html
• あとで読む

  リビジョンの設定ができるWordPressプラグイン「Revision Control」

  3 users

  39kn.com

  投稿リビジョンや自動保存は便利なのですが、何度も編集を繰り返していると履歴が溜まってしまい、その都度データベースに書き込まれます。そして履歴は1つの投稿と同様にデータベースを消費してしまいます。 ※投稿毎のIDが連番にならないのは、これが原因です。 そしてこれらの設定をカスタマイズできるプラグインが「Revision Control」です。 ダウンロード：「Revision Control」 上記サイトからダウンロード後ファイルを解凍、FTPで「wp-content/plugins」にアップロード。 コントロール画面の「プラグイン」にて「Revision Control」を有効化。 投稿リビジョン、ページリビジョン設定は、コントロール画面の「設定」→「Revisions」 リビジョンの「ON/OFF」、件数の設定ができます。 また、個別投稿・個別ページの編集で、過去の記事も削除できるように

  • テクノロジー
  • 2010/02/22 18:35
• あとで読む

  ドメイン移管（.jp）他社から「ムームードメイン」へ

  5 users

  39kn.com

  汎用JPドメインをムームードメインへ「指定事業者変更」「汎用JPドメイン移転」の流れ サーバ引越し作業で、gTLDドメイン（.com）は、さくらインターネットへ移管申請手続き中。そしてもうひとつの汎用JPドメインを同じく、さくらインターネットへ移そうとしたが汎用JPドメインは”会員メニュー上からの管理機能に未対応”という事なので取得済ドメインがあるムームードメインに移転申請をした。 汎用JPドメイン移転費用の比較・・コストはほぼ同じ さくらインターネット：　ドメイン移転（名義変更）年3,800円。移管（ドメインの転入）2,100円 ムームードメイン：　ドメイン移転（名義変更）年3,360円。指定業者変更は無料 以下ムームードメインのケース 最初に前管理会社側に移転するドメインを移転可能な状態にしてもらう。 ムームードメインに対して”指定事業者変更または汎用JPドメイン移転”を申請 申請後ム

  • テクノロジー
  • 2010/02/12 13:53
• あとで読む

  クリック時のリンク画像の点線枠を消す・・CSS

  5 users

  39kn.com

  リンクしてある画像をクリックすると、 点線枠が出てきます。 そのままでも良いのですが・・ なんか気になるので消しましょ。 CSSに以下追加すればOK。 a:focus { outline:none;}

  • テクノロジー
  • 2010/01/05 18:14

  • CSS
  • webデザイン
• あとで読む

  Google マップ にPicasaの写真をスライドショーで表示「Google AJAX Feed API」

  3 users

  39kn.com

  Google AJAX Feed APIでPicasa Webの写真をGoogleマップにスライドショーで表示してみた。 予めPicasa Webにアップロードした写真にジオタグ(位置情報)を付けておくと地図上に表示できるようになる。 参考サイト：　http://www.touraineverte.com/ DEMO：　Picasa Webの写真をGoogleマップにスライドショーで表示 サンプルソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml

  • テクノロジー
  • 2009/12/05 09:07
• あとで読む

  記事投稿のテンプレートを選択できるWPプラグイン「Custom Post Template」

  6 users

  39kn.com

  WordPressにはページ投稿時にはテンプレートを選択できる機能があるのに、なぜか記事投稿時にはデフォルトテンプレートしか選択できない・・。プラグイン「[Custom Post Template」は投稿記事ごとに違ったテンプレートを使用したい方にはおすすめ！ ダウンロード：　「Custom Post Template」 使用方法： ダウンロード後、「wp-content/plugins」へアップロード 管理画面でプラグインを有効化 「投稿」画面内の「Post Template」でテンプレート選択 テンプレート作成方法： ローカルで使用中のテーマの「single.php 」ファイルを開き、以下のソースを最上部（1行目）に記述 ファイル（＊＊＊.php）名前をつけて保存。 このファイルを「/wp-content/themes/使用中のテーマ」内にアップロード。 <?php /* Templa

  • テクノロジー
  • 2009/11/06 15:22

  • wordpress
  • プラグイン
  • plugin
• あとで読む

  画像のズームアップ「jqzoom」-jquery plugin

  7 users

  39kn.com

  このjQueryのプラグイン「jqzoom」は通販サイトなどで商品をズームアップして表示する時に役立ちます。 まずは配布元からダウンロード後、元画像・拡大画像を用意して、拡大表示の設定をするだけ。表示位置は（上:top、下：bottom、左：left、右：right）。・・ソースをご覧ください デモは左の写真にマウスをのせると右側に10倍ズームで表示されます。 配布元：jqzoom DEMO: ソース： <html> <head> <title>JQzoom Demo</title> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script> <link rel="styleshee

  • テクノロジー
  • 2009/11/02 15:11

  • jquery
  • javascript
• あとで読む

  wp.Vicuna専用スキンのカスタマイズ

  4 users

  39kn.com

  現在、テーマ「wp.Vicuna」、スキン「style-smartCanvas」を追加。少しカスタマイズしてみましょう。 テーマ：　「wp.Vicuna Ext」 スキン：　「style-smartCanvas」 レイアウト：　「Eye Catch Short」 投稿記事の表示：　マルチ ページ投稿表示：　ダブル フォントの指定、配色等のカスタマイズ・・・（style-smartCanvas） ”themes/wp.vicuna.ext/style-smartCanvas/module/mod_subSkin/1-subSkin.css” フォントの指定：　//General// リンクの配色：　//Link Color// レイアウト幅調整や画像の差し替えなどのカスタマイズ・・・（「style-smartCanvas」Eye Catch [Short]） ”style-smartCanv

  • テクノロジー
  • 2009/09/08 22:53

  • wordpress
• あとで読む

  おすすめ画像作成ツール（web2.0アイコン・背景・ロゴ・ボタン）

  21 users

  39kn.com

  ロゴ作成・・Logo Creator 背景画像作成・・Background Image Maker ボタン作成・・buttonmaker ボタン作成・・As Button Generator Web2.0 styleのアイコン作成・・Web2.0 Badges Web2.0 styleのアイコン作成・・Adobe Icon Generator ※インストールが必要です CS5・Web2.0 styleのアイコン作成（オンライン）・・Icon Generator CSS CSS ジェネレーター（CSS3）CSS3.0 Maker

  • テクノロジー
  • 2009/08/28 15:56

  • 素材
  • アイコン
  • ボタン
  • ツール
  • webデザイン
  • webサービス
  • web
• あとで読む

  「wp-pagenavi」プラグインのインストールとCSSのカスタマイズ

  5 users

  39kn.com

  インストールは通常通り「/wp-content/plugins」にアップロード。カスタマイズは以下のように。 「/wp-content/plugins/wp-pagenavi」の「pagenavi-css.css」を開いて編集。 またはテーマファイルのCSSに記述 例）　配置の中央揃え .wp-pagenavi { text-align: center;} 追記）　2011/5/30 プラグイン「WP-Page Navi」のCSSデザイン サンプル 画像上のCSS・・CSS3で角丸（※IEには対応していません） /* --------------------------------------------------- PLUGIN WP-Page Navi　角丸 ---------------------------------------------------- */ .naviga

  • テクノロジー
  • 2009/08/12 14:59

  • WordPress
• あとで読む

  スライドでフラッシュ風にみせる「s3Slider jQuery plugin」

  18 users

  39kn.com

  管理しているサイトでも使用している「s3Slider jQuery plugin」の紹介。 トップページなどで写真を使用する場合など少し見栄えがよくなるかも？一度作成しておけば、同じサイズの写真を追加・変更するだけで簡単に更新できます。デモのようにスライド部分の設定はリストタグ内のclassで上からスライドなら”top”。下からスライドは”bottom”に変更すればOK。 配布元：s3Slider jQuery plugin ※配布元に左右のスライドもあります。 DEMO: ソース： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • テクノロジー
  • 2009/08/10 18:55

  • jQuery
  • スライドショー
  • Slideshow
  • *webデザイン
  • Plugin
  • flash
• あとで読む

  カメぞうのメモ書き

  9 users

  39kn.com

  久しぶりの更新です（汗） 今回、WordPress3.8（日本語）にアップデートしましたが、ただひとつ問題が・・？ ログイン・ログアウト時に表示されるWordpressのロゴが表示されなくなりました。

  • テクノロジー
  • 2009/08/09 12:05

  • WordPress
  • ブックマーク バー
  • まとめ
• あとで読む

  画像スライドメニュー Horizontal Accordion「slidemenu.js」

  6 users

  39kn.com

  画像スライドメニューで「Image Menu」に比べて「Horizontal Accordion」は1kbと軽いのが特徴。 DEMO-A：「Image Menu」 DEMO-B：「Horizontal Accordion」 DEMO-A・・Image Menu DEMO-B・・Horizontal Accordion HTML・・Horizontal Accordion <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

  • テクノロジー
  • 2009/07/14 11:19

  • スライドショー
  • jquery
• あとで読む

  ロリポップからさくらサーバへ

  4 users

  39kn.com

  「ロリポップ」でのWordPressは評判通り重いので「さくらインターネット」に ロリポップの契約期間がまだ残っているが、あまりの重さにストレスが溜まるのでさくらのレンタルサーバ スタンダードと契約（2週間のお試し期間あり）。 作業手順） 契約が完了すると登録したメール宛に「申し込み完了、仮登録完了」のお知らせが届く。 その内容をもとにFTPソフトに設定⇒WordPressをインストールしておく。そしてロリポップからデータのエクスポート。 ロリポップユーザー専用ページ＞ログイン。 ＞WEBツール＞データベースの作成＞データベース「phpMyAdmin」を開く＞ 独自ドメインで運用する場合の注意事項 「wp_options」のインポートは注意が必要。これをエクスポートして新サーバにそのままインポートした場合、旧サーバーの情報になってしまうため、新サーバでのログインできなくなります。（手間かか

  • テクノロジー
  • 2009/06/04 01:16

  • Wordpress

次のページ