see more 2012-06 - ponnao-clip

Home > アーカイブ > 2012-06

2012-06

きれいなモデルはみんな夢中! ミラクル・グリーンスムージー – BEAUTY – X BRAND
http://xbrand.yahoo.co.jp/category/beauty/8856/1.html

健康な「便」をするために! 腸を若返らせるための3つのポイント : ライフハッカー[日本版]
http://www.lifehacker.jp/2012/06/120619intestines.html

ラクに痩せる!ためしてガッテンの究極ダイエット法 – NAVER まとめ
http://matome.naver.jp/odai/2133851117493366601

この夏、「セルフネイル派」急増中! – BEAUTY – X BRAND
http://xbrand.yahoo.co.jp/category/beauty/8766/1.html

座ったままできる11のエクササイズで、ジムに行けなくても健康に暮らそう : ライフハッカー[日本版]
http://www.lifehacker.jp/2012/06/120614exercise.html

肩こりと二の腕に効果的な体質別・中医アロマ:日経ウーマンオンライン【体質別☆漢方×アロマで不調改善】
http://wol.nikkeibp.co.jp/article/column/20120620/127921/

深夜に食べても太らない50の法則―伊達式食べてもキレイにやせるダイエット (日文新書PLUS 7)(伊達 友美)のまとめ 〜 本の要点まとめサイト【ブクペ】 〜
http://bukupe.com/summary/5095

40代からの「太らない体」のつくり方 (知的生きかた文庫)(満尾 正)のまとめ 〜 本の要点まとめサイト【ブクペ】 〜
http://bukupe.com/summary/4762

はてブで人気になった最強のダイエット方法ベスト5! | 世界ろぐ
http://sekailog.com/2012/06/diet/

引き締まった体を作るためにやるべきケア|日経ウーマンオンライン
http://wol.nikkeibp.co.jp/welcome/welcome_leaf.html?http%3A%2F%2Fwol.nikkeibp.co.jp%2Farticle%2Fcolumn%2F20120530%2F126002%2F

いつまでも若々しくいられる!美容の裏技・便利技まとめ25個 – M3Q
http://m3q.jp/t/93

8秒伸ばしてキープで凹ませる!:日経ウーマンオンライン【日経ヘルス7月号】
http://wol.nikkeibp.co.jp/article/special/20120525/125823/

たるんだ頬のもたつきはこれで解消!:日経ウーマンオンライン【顔筋トレで、なりたい顔の作り方】
http://wol.nikkeibp.co.jp/article/column/20120524/125761/?P=3&rt=nocnt

下腹の凹ませ方診断:日経ウーマンオンライン【日経ヘルス7月号】
http://wol.nikkeibp.co.jp/article/special/20120525/125822/

【動画】下腹が凹む!くびれ呼吸ストレッチ:日経ウーマンオンライン【トレンド(ヘルス&ビューティー)】
http://wol.nikkeibp.co.jp/article/trend/20120523/125601/

これで楽痩せ!脂肪を燃焼する「スーパーフード」27個【3/3】 | 美レンジャー
http://www.biranger.jp/archives/42062

海外一人旅したい人向け!世界一周経験者による、バックパッカー入門ガイド | Hibilog
http://www.aokiu.com/2012/06/21/firstbackpack/

【保存版】iPhoneで極める情報収集|圏外でも面倒くさがりやでも実践できる、タイプ別3つのテクニック | AppLiFE
http://www.app-life.jp/2012/06/38245/

5泊5000円台の貸しふとんで、お客様用ふとんを持たない暮らし : akiyan.com
http://www.akiyan.com/blog/archives/2008/05/55000.html

持たない暮らし : akiyan.com
http://www.akiyan.com/blog/archives/2007/03/post_88.html

年間収支を網羅するExcel家計簿テンプレートを公開します – 凹レンズ ~まとまりのない日記~
http://d.hatena.ne.jp/adgt/20120618/1339991704

初めてバックパッカー・海外一人旅したい人に、勧めたい国6選 〜タイ、カンボジア、マレーシア、ネパール、インド、エジプト〜 | Hibilog
http://www.aokiu.com/2012/06/18/hatsutabi/

iPhoneで「 」(かぎかっこ)を華麗に入力する方法 : ギズモード・ジャパン
http://www.gizmodo.jp/2012/06/iphone_367_618.html

目黒通りのおしゃれインテリアショップまとめ – NAVER まとめ
http://matome.naver.jp/odai/2133985980055325001

iPhone5回分の大容量バッテリー『enecycle EN03』お値段2,480円の携帯充電器レビュー | nori510.com
http://nori510.com/archives/11163

短時間で高パフォーマンスが期待できるジョギングの法則は「10-20-30」 : ライフハッカー[日本版]
http://www.lifehacker.jp/2012/06/12061610-20-30.html

めちゃくちゃ安くカンタンに無線LANをパワーアップさせる方法 – GIGAZINE
http://gigazine.net/news/20120615-extend-wi-fi-signal/

生産性を劇的にあげるWindows用フリーウェア秘蔵の5選 | jMatsuzaki
http://jmatsuzaki.com/archives/4412

覚えておくと便利な小物の再利用方法の裏技:ハムスター速報
http://hamusoku.com/archives/7180458.html

【マジ助かった!】キャンプ・バーベキューに持っていくと意外に便利なもの – NAVER まとめ
http://matome.naver.jp/odai/2133940057691559401

身近なもので!入浴剤の代わりになる意外な物まとめ13個 – M3Q
http://m3q.jp/t/101

一晩でカラッと洗濯物を乾かす干し方 – NAVER まとめ
http://matome.naver.jp/odai/2133939483690601701

Tシャツを一瞬で畳んで収納するワザ – NAVER まとめ
http://matome.naver.jp/odai/2133912297046971501

知らないと損する!肩こりを完全に解消する5つの方法 – NAVER まとめ
http://matome.naver.jp/odai/2133853938096609501

海外旅行に行く前に知ってほしい、クレジットカードに関する6つの知識 | Hibilog
http://www.aokiu.com/2012/05/01/creditcard/

【ビールが苦手な女子でも呑める】東京都内のフルーツビールが飲める店(///・ω・//) – NAVER まとめ
http://matome.naver.jp/odai/2133889360525941401

夏までもう少し! かんたんバーベキューの手引き : ライフハッカー[日本版]
http://www.lifehacker.jp/2012/06/120601howtobbq.html

html+cssのコーディングの作業スピードが数倍に!「Zen-Coding」の情報まとめ – NAVER まとめ
http://matome.naver.jp/odai/2134030054992097501

gifアニメーションで表現した東京23区の区章 | カラフルで「お役所」感が全然ない : きよおと-KiYOTO
http://blog.livedoor.jp/clock510/archives/1818437.html

ゲーム感覚でレイアウトを組み立てる、HTML5+CSS3に対応したレイアウトジェネレーター -PageBlox | コリス
http://coliss.com/articles/web-services/online-layout-generator-pageblox.html

Photoshop VIP ☞ 無料ダウンロード可、すごいフリーフォント素材28個まとめ 2012年6月度
http://photoshopvip.net/archives/36859

Photoshop, Illustratorをマスターするための最初の一歩、Adobe系アプリのよく使うショートカットをまとめた壁紙 | コリス
http://coliss.com/articles/freebies/freebies-wallpaper-adobe-suite-toolbar-shortcut.html

吹き出し素材専門サイト「フキダシデザイン」
http://fukidesign.com/

コードリーディングに最適!たった200行で作れるHTML5製テトリスのプログラミング学習ムービー | Chrome Life
http://www.chrome-life.com/html5/5391/

CSS記述規則「プロパティ別整理法」の提案 : akiyan.com
http://www.akiyan.com/css_every_propaty_order_system

トップセールスが無意識に使いこなしている6つの販売テクニック | バズ部
http://bazubu.com/6salestechs-3021.html

JavaScript 基礎 (Part 1) 資料
http://null.ly/post/25358306007/javascript-part-1

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)
http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/

JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ - Publickey
http://www.publickey1.jp/blog/12/javascript_mvc.html

短期間でのスマホ向けWeb開発

シリコンバレーで学んだWebサービスを成功に導く10の原則 – パパパパ
http://www.paji.me/entry/2012/06/18/110232

画像アイコンはもう古い!CSSでスタイル自由自在のアイコンWebフォントまとめ5つ – W3Q
http://w3q.jp/t/2396

HTML5で使えるスマートフォンの機能 | Classmethod.dev()
http://dev.classmethod.jp/smartphone/mobile-html5/

フリーランス向け嫌な仕事の断り方・交渉の仕方 | たけのおしごと
http://take-a-job.info/archives/924

極端に低い単価や無料で仕事をしてはいけない単純な理由|DESIGN Oil BLOG
http://www.design-oil.com/blog/2012/05/22/2480

ぶっちゃけWEBサイトっておいくらなの?って話 | Hal-Cana
http://www.halcana.jp/archives/809

今こそ安心できるWordPressバックアップを!復旧作業まで実際にやってみたWordPress丸ごとバックアップ法 | 情報科学屋さんを目指す人のメモ
http://did2memo.net/2012/06/25/wordpress-backup-and-restore-backwpup/

効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単! | Webクリエイターボックス
http://www.webcreatorbox.com/tech/css-sass/

Google Chromeを3年使い続けて辿り着いたベストな拡張機能14個 | 和洋風◎
http://wayohoo.com/google-chrome/extensions/google-chrome-extensions-of-my-best.html

UIデザイナーが知っておくべきエンドユーザーの10の特徴 – CNET Japan
http://japan.cnet.com/sp/businesslife/35018495/

【Illustrator】デザインをワンランク上げるイラストレーターのチュートリアル集 その2 – NAVER まとめ
http://matome.naver.jp/odai/2134054900909076001

Webデザイナーなら押さえておきたい、今月の優れたWebデザイン(2012年6月)まとめ12個 – W3Q
http://w3q.jp/t/2383

投資対効果の極めて高い、プログラムなんて分からない人のための「単純作業自動化」入門 – R&D: りょうえんダイアリー
http://ryosukeishii.hatenablog.com/entry/2012/06/21/021503

あなたが作ったサイトのフッターの役割は?12のフッター活用方法!
http://creators-manual.com/footer12/

とにかく最新のHTML5やJSを使用したサイトをたくさん見たい時に便利!国内外のWEBデザインサイトのタグリストをまとめました | Webデザインクリップ|Web制作に便利な情報を集めたまとめサイト
http://webdesignmatome.com/webdesign/html5site

ファーストサーバーがデータ初期化の大惨事!被害者の状況と損害賠償について調べてみた。|楽しければいいのです。
http://www.susi-paku.com/pakupost-132.html

グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 - Publickey
http://www.publickey1.jp/blog/12/javascript_mvcangularjs.html

縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個! | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
http://design.kayac.com/topics/2012/06/koukyuperaichi.php

すぐに使える!簡単で効果的なPhotoshopテクニック – NAVER まとめ
http://matome.naver.jp/odai/2134001258167785901

Responsiveデザインのサイト設計・実装・確認に役立つツールとリソースのまとめ | コリス
http://coliss.com/articles/build-websites/operation/work/responsive-web-design-tools-and-resources.html

200を越えるアイコンが揃ったBootstrap向けWeb Font「Font Awesome」 – MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
http://www.moongift.jp/2012/06/20120615-3/

キャッチコピー力の基本「ひと言で気持ちをとらえて、離さない77のテクニック」:Blogで本を紹介しちゃいます。
http://blog.livedoor.jp/tkfire85/archives/55524977.html

サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。 | ウェビメモ
http://webimemo.com/web/3873

角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ!! | OZPAの表4
http://ozpa-h4.com/2012/06/15/css3-generator/

最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012 | 海外SEO情報ブログ
http://www.suzukikenichi.com/blog/website-performance-optimization/

Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!
http://fukuyama.co/lazyloadsns

画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう | HTML5でサイトをつくろう
http://www.html5-memo.com/webtips/css3-loading/

» レスポンシブWebデザインの画像問題の解決法5種│Design Spice
http://design-spice.com/2012/06/13/responsive-web-design-image/

コンバージョン率アップの参考になる5つのランディングページ徹底解剖 | バズ部
http://bazubu.com/5lp-2695.html

Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
http://phpspot.org/blog/archives/2012/06/13kbquojs.html

レスポンシブ・デザインの無料Wordpressテーマ12選 | ihayato.news
http://www.ikedahayato.com/index.php/archives/11119

DESIGN ARCHIVE – BLOG: 作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
http://stam-design-stam.blogspot.jp/2012/06/101specctr.html

Amazon EC2 を使った無限IPアドレスの作り方 – ぼくはまちちゃん!(Hatena)
http://d.hatena.ne.jp/Hamachiya2/20120612/ec2

シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt – かちびと.net
http://kachibito.net/web-design/jquery-gantt.html

Web制作者が読んでおきたい、最近公開されたおすすめのスライドまとめ11個 – W3Q
http://w3q.jp/t/2316

【保存用】Dropbox の全まとめ。基本機能の使い方解説から、応用まで。 – AppBank
http://www.appbank.net/2012/06/13/iphone-application/421289.php

ヤフーがどのようにFlickrをダメにしたのか? スタートアップが大企業に買収されるということ : ギズモード・ジャパン
http://www.gizmodo.jp/2012/06/flickr_1.html

Googleアナリティクスでソーシャルからの流入を解析する方法 – nanapi Web
http://nanapi.jp/38715/

あなたのサイトにぴったりなロゴを生成してくれるジェネレーター「LogotypeCreator」*二十歳街道まっしぐら
http://20kaido.com/archives/6296770.html

CSS3だけで作るボタンデザインいろいろまとめ7つ – W3Q
http://w3q.jp/t/2306

優先すべきは、ソーシャルよりもオウンドメディア 自社ならではのコンテンツで、カタログサイトから脱却せよ (1/2):MarkeZine(マーケジン)
http://markezine.jp/article/detail/15765

私がweb制作でよく使うサイト47+α 作業ごとリスト – WEBCRE8.jp
http://webcre8.jp/collect/webcreate-important-website.html

Web制作の作業効率があがるPhotoshopショートカットキーまとめました【第一回基本編】 | HTML5でサイトをつくろう
http://www.html5-memo.com/webtips/shortcut/

綺麗にデザインされたピクトグラムアイコン100個セット:phpspot開発日誌
http://phpspot.org/blog/archives/2012/06/100.html

Photoshop VIP ☞ 使い方解説付、テキストエフェクトに最適な無料レイヤースタイル35個まとめ
http://photoshopvip.net/archives/36579

IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll | コリス
http://coliss.com/articles/build-websites/verification/cross-browser-testing-software-browseemall.html

自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」 – GIGAZINE
http://gigazine.net/news/20120608-browserling/

【美大卒の漫画家が教える!画力上達の為の練習法】絵が上手くなりたい。俺に教えて欲しい。|お絵かき初心者の学習部屋
http://oekakigakusyuu.blog97.fc2.com/blog-entry-400.html

大量アクセスによるサーバの負荷テストなどが簡単に実行できるフリーソフト「JBlitz Professional」 – GIGAZINE
http://gigazine.net/news/20120606-jblitz-professional/

誰でもできる!Facebookのタイムラインをクリエイティブっぽくする方法 – nanapi Web
http://nanapi.jp/38311/

[JS]FlashもHTML5も無しで、美しいアニメーションを実装するスクリプト -jCSML | コリス
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcsml.html

パズル感覚でプログラミングが学べる「Google Blockly」が面白い – NAVER まとめ
http://matome.naver.jp/odai/2133903199236811901

twitter の新ロゴデザインが美しすぎて調べてみたら、黄金比で構成されてた。|楽しければいいのです。
http://www.susi-paku.com/pakutwitter-2.html

仕事でExcel使うなら必ず読んでおきたい記事まとめ – NAVER まとめ
http://matome.naver.jp/odai/2133891120627829001

私がウェブサイト作成時にお世話になっているサイトをご紹介|Webpark
http://weboook.blog22.fc2.com/blog-entry-324.html

「Webサイト改善は図を描きなさい!」 〜 SiteCatalyst達人から教わった分析フレームワーク – Six Apart ブログ
http://blog.sixapart.jp/2012-06/draw-concept-diagram.html

誰でもできる!Facebookのタイムラインをクリエイティブっぽくする方法 – nanapi Web
http://nanapi.jp/38311/

PDFの文字をテキスト化! オンラインで簡単に使えるOCRサービス : ライフハッカー[日本版]
http://www.lifehacker.jp/2012/06/120604ocrfreeonlineocr.html

最高にクールなAndroidアプリを作ったのはMicrosoftだった?–それがon{X}
http://jp.techcrunch.com/archives/20120605onx/

最低限覚えておきたいWEB配色の基本2大原理と6つの配色パターン | バズ部
http://bazubu.com/colorpttn-2507.html

IE7~8に対応したHTML5+CSS3サイトを制作してみよう ~IE7~8のブラウザ対応をするための便利な方法をまとめました~ | HTML5でサイトをつくろう
http://www.html5-memo.com/html5/html5-ie/

いまのWebサイトを低予算でスマートフォンに対応させるための5つのTIPS
http://neta.ywcafe.net/001221.html

Photoshop VIP ☞ 夏を感じる、木や葉っぱなど植物系の無料ベクター素材450個まとめ
http://photoshopvip.net/archives/36465


画像一枚だけで写真を重ねたようにするチュートリアル | コリス
http://coliss.com/articles/build-websites/operation/css/css-tutorial-stacked-elements-by-inspectelement.html

ASCII.jp:レスポンシブWebデザインとは|ゼロから始めるレスポンシブWebデザイン入門
http://ascii.jp/elem/000/000/697/697463/

インターネットでものづくりするときに役立つサイトまとめ | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
http://design.kayac.com/topics/2012/06/make-internet.php

企業Facebookページ制作マニュアル:18個の手順 【タイムライン対応・制作編&集客編】 | Web担当者Forum
http://web-tan.forum.impressrd.jp/e/2012/05/30/12806

無料で使えるUIデザインの基本要素が詰まった32の素材集 | SEO Japan
http://www.seojapan.com/blog/32-ui-element-psd

ASCII.jp:レスポンシブWebデザインとは|ゼロから始めるレスポンシブWebデザイン入門
http://ascii.jp/elem/000/000/697/697463/

インターネットでものづくりするときに役立つサイトまとめ | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
http://design.kayac.com/topics/2012/06/make-internet.php

無料で使えるレスポンシブのWordPressブログテンプレート10選 | バズ部
http://bazubu.com/wptemplates-2439.html

新米デザイナーに読ませたい、ロゴデザインの制作プロセスまとめ6つ – W3Q
http://w3q.jp/t/2245

東京渋谷 “HTML5入門&jQuery” 勉強会(5/26)の資料を公開します | tonowp
http://tonosamart.com/blog/html5-jquery-5-26/

【インタビュー】クックパッドのUIデザイナー:「エンジニアの仕事が0を1にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating [スタートアップ・デイティング]
http://www.startup-dating.com/2012/05/interview_ikumikatayama/
このデザイナーさんが学生時代にやった「未踏」応募についての説明漫画
100710hateda3.pdf – Google Docs
https://docs.google.com/file/d/0B7RWzSndo7jmYTY4MjZhNjUtNTkyZS00Mzg4LWJiNTEtMGYxMDYyNWI1Y2Iz/edit?pli=1

Photoshop VIP ☞ Photoshopを極める、すごいチュートリアル30個まとめ 2012年5月版
http://photoshopvip.net/archives/36353

UIデザインが素晴らしい35のウェブスタートアップ | SEO Japan
http://www.seojapan.com/blog/35-startup-ui-design

ヴィンテージ風のざらっとしたテクスチャを作成できるPhotoshopのブラシとパターン素材 -Maleika E. A. | コリス
http://coliss.com/articles/digress/freebies-photoshop-brushes-for-vintage-by-maleika.html

ロゴデザインする時の参考に!ロゴデザインギャラリーのオンパレードと注目記事色々! | バンクーバーのWEB屋
http://webya.opdsgn.com/introduceweb/roundupforlogodesign2012/

良い企画書もをマネることから始めよう!大手企業が行うプロモーションの企画書事例まとめ | SUN MEDIA|販促のまとめ
http://media.marsdesign.co.jp/promotion/check_good_plans.html

adobe acrobat professionalで開いた2ページのPDFを、別名で保存でjpeg形式で保存して、MovableTypeから画像を挿入したら、1ページ目のjpg画像だけ表示されないという現象が起こりました。
生成されたjpg画像を調べたら、1ページ目だけCMYKモードになってました。

こちらのPDFはお客さんが作成したものなのですが、たぶんパワーポイントで作ってると思うんだよね・・・。
1ページ目と2ページ目でモードが違うというのは、初めて見ました。

pdfをアドビプロフェッショナル7上でカラー環境(CMYKもしくはRGB)の変換、確認す… – Yahoo!知恵袋

RGBのPDFドキュメントをCMYKに変換(RGB→RGBでも構いませんが)するには「色を置換」ダイアログを使用します。が、これはバージョン7には入っていないかもしれません(8以降にはあります)。

とあったのだが、「色を置換」ダイアログは見つからなかった。
でも以下の方法でRGBで出力されるようになりました。

上メニュー「編集」→「環境設定」を開き、
分類から「PDFからの変換」を選択→「JPEG」を選択、「設定を編集」をクリック
一番下の「変換」のカラースペースを「自動」から「RGB」に変換

2012-06-29_113924

2012-06-29_114229

私の場合はほとんどWeb上でしか画像を扱うことはないので、上の設定のままで問題ないかも。

また、MTで見えなかったのは縮小したサムネイル画像だったので、ひるがえって考えると、ヘンな画像を元に生成されてしまったサムネイル画像は同様にヘンな設定を引き継いでしまうということですな(–;

カスタムメニューのプラグインやカスタマイズで探してもなかなか出てこなくて、
最終的にこちらのページリストのカスタマイズ方法を説明されてるページが大変参考になりました。
こちらのスクリプト記述を利用させてもらいました。
ありがとうございます。

WordPress 階層構造のページリストをドロップダウンメニューにする | hijiriworld Web

カスタムメニュー用にfunctions.jsを変更

参考元のページは、固定ページのリスト(wp list pages)をナビゲーションにしているので、これをカスタムメニューにしたときとの違いを照合しました。

hogehoge.comにてドロップダウンしたいとこだけ抜き出したが、こんな感じ。

<ul id="menu-mainnavi" class="menu">
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://hogehoge.com/wp/menu/">Menu</a>
<ul class="sub-menu">
<li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://hogehoge.com/wp/menu/food/">Food</a></li>
<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://hogehoge.com/wp/menu/drink/">drink</a></li>
</ul>
</ul>

見比べると、以下のクラス名が対応してることがわかりました。(アンダーバーとハイフンの違いにも注目!!)

page_item ⇔ menu-item
children ⇔ sub-menu
current_page_item ⇔ current-menu-item

これを元に紹介ページのfunctions.jsを以下のように書き換えました。

$(document).ready(function(){
    $("ul.sub-menu").hide();
    $("li.menu-item").hover(function() {
        $("ul.sub-menu",this).slideDown("fast");
    },
    function() {
        $("ul.sub-menu",this).slideUp("fast");
    });
});

このfunctions.jsを任意の場所にアップします。
Jqueryは恐らく他の仕様で既に入ってる場合が多いと思うのですが、これがないと動かないですぞ!
念のため下記の記述にはJqueryのリンクも入れておきます。

wp_enqueue_script関数でスクリプトタグの仕込み

20130513追記
最初はwp_enqueue_script関数で、function.jsに書いたほうがスマートと思ってたのですが、考えてみると他のscriptで直書きにしているものもあるので、競合の調整を考えると、最初の導入時はヘッダーに素直に直書きの方がいいんじゃないかと今は考えています。
ある程度テンプレートや使うJSが固まって、それを一気にfunction.jsに記述するというのが最終形態と考えます。

下の記述をheader.phpかfunction.phpに記述しますが、3.2.1以前ですとwp_enqueue_script関数は
<php wp_head(); ?>より前に記述しないと出力されないので注意。
◯function.phpに記述する場合

wp_enqueue_script('jquery.min.js', get_bloginfo('template_url').'/js/jquery.min.js');
wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js');

◯header.phpに記述する場合
Wordpressフォルダ内にJSフォルダを置く場合

<script src="<?php bloginfo('template_url'); ?>/js/function.js"></script>

vicunaのvegaスタイルのJSフォルダに入れる場合(自分用)

<script src="<?php bloginfo('template_url'); ?>/style-vega/js/function.js"></script>

以下はwp_enqueue_scriptを使った場合

<?php wp_enqueue_script('jquery.min.js', get_bloginfo('template_url').'/js/jquery.min.js'); ?>
<?php wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js'); ?>

※Jqueryのバージョン1.6.1と1.6.2→1.6.1で動くことを確認しています。
どこまでバージョン落としても大丈夫なのかはわからんです。

実際のソースには、以下のように出力されてます。

<script type='text/javascript' src='http://hogehoge.com/wp/wp-content/themes/wp.vicuna.exc/js/jquery-1.6.1.min.js?ver=3.3.2'></script>
<script type='text/javascript' src='http://hogehoge.com/wp/wp-content/themes/wp.vicuna.exc/js/functions.js?ver=3.3.2'></script>

参考

wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話 | マイペースクリエイターの覚え書き
3.3以降から出力位置は</body>の直前にも出力できるようになったそうです。

WordPress で jQuery などの外部ファイルを読み込む wp_enqueue_script() | ウェブル
wp_enqueue_script(‘jquery’);でWordpressが元々梱包しているjqueryを呼び出してくれるとのことだったのだが、今回のはちゃんとjqueryを指定しないとうまくいかなかったです。

最終形態

2回めに設置したときに改めて、wp_enqueue_scriptについて調べ直しました。

最終的にはjsフォルダは直下として、function.phpに前に出力するように記述するのが一番スマートな気がしてます。

◯function.phpに記述した場合で、前に出力する記述

wp_enqueue_script('jquery-1.6.2.min.js','/js/libs/jquery-1.6.2.min.js', array(), '1.0' ,true);
wp_enqueue_script('functions','/js/functions.js', array(), '1.0' ,true);

CSSの調整

元ページに参考のCSSが載ってますが、子ページのない時に作ってあった自前のCSSで調整しました。

参考サイトさんの、このへんの法則をヒントに調整できそうです。

初期状態

・すべてのページ(li)に menu-item というクラス名が付く。
・子ページのページリスト(ul)に sub-menu というクラス名が付く。

親ページがアクティブな時

・現在アクティブなページ(li)に current-menu-item というクラス名が付く。

子ページがアクティブな時

・現在アクティブなページ(li)に current-menu-item というクラス名が付く。
・その直近の親ページ(li)に current-menu-ancestor current-menu-parent というクラス名が付く。

ちなみに子ページがアクティブなときは、直近の親ページになぜか以下のクラス名も付加されます。
どう見てもクラス名をアンダーバーからハイフン仕様に変更したっぽいよね・・・(ーー;
バージョンアップ時の変更と整合性をとるためでしょうか。

current-page-ancestor current-page-parent
current_page_parent current_page_ancestor

20121210追記_親ページ非公開時の子ページの取り扱い

期間限定のページが終わって、そのページを削除することになったのですが、
Wordpressのこの仕様ですと、固定ページを非公開にすれば、自動的にメニューから消えます。そこが便利!
しかし、もし親ページとそれに連なる子ページがある場合で、親ページだけ非公開にすると、子ページは自動的に親となってメニューの一番下に付きます。
この場合、子ページも非公開にするか、子ページだけ残す場合は順番を見直すことを忘れないように。

lightshot

相方が新しいipadを購入。買うのに付いてってケースはなんとなく選ばしてもらいました。

ipadカバー

フィルムの付属してるレイアウトのケースと迷ったのだが、色が好きでベルキンていうとこのにしちゃった。

液晶フィルム

悲しいことにベルキンのには液晶フィルムが付属してなかったので、エレコムのを買うことに。多少の違いなのに6種類くらいあって、相方と面食らいました。
ここの中段参照・・・。

最終的に、ほとんど室内に使うということで光沢タイプにして、その他の機能が平均的なこちらにしました。
iPad 2012用フィルム(指紋防止コーティング・光沢タイプ) – TB-A12FLFAG
ヨドバシだと1700円もしましたよ(泣)ipadの液晶って高いのね(–;
気泡が入らないというのがウリになってましたが、いつも失敗する相方がなかなか上手く貼れてたので、ウリは本当らしい(爆)

既にipadを持っている義弟は風呂蓋みたいなケースを使っていると言ってて、気になったのですが、このタイプかな。

設定時の覚書です。

ざっくり設定マニュアル(20121206追記)

1.プラグイン「Google XML Sitemaps」のインストール
2.WPディレクトリの中に「sitemap.xml」という名称の空ファイルを作成
3.プラグイン「Google XML Sitemaps」の設定(左メニュー「設定」→「XML Sitemap」)

  • 基本的な設定:Bingのチェックをはずす
  • 投稿の優先順位:固定ページメインの普通のサイトだったら、『「優先順位」を自動的に計算しない』で。
  • 含めない項目:フォームの送信完了ページなど検索ページに表示させたくないページのIDを入れる。
  • 優先順位の設定:ホームページを1.0、固定ページを0.9で、使ってないページは0.0とする。(記事ページを使ってない場合など)

4.ウェブマスターツールページヘのログイン
※アナリティクスと同じIDでログインする。
①サイトの新規作成
②サイトマップの送信

参考サイト

[Wordpress]Google XML Sitemapsを使ってGoogleウェブマスターツールにサイトマップを登録する方法 | たかひろぐ。

WordPressのサイトマップ(sitemap.xml)作成用プラグイン『Google XML Sitemaps』 | 無料SEO対策のススメ

【Google XML Sitemaps】sitemap.xmlを自動作成し、サイトマップ登録がスムーズに完了するプラグイン – ひなログ

WordPressにgoogleサイトマップを作成するプラグイン『Google XML Sitemaps』設定方法

日本語環境でのエラーの問題

最初生成したときにエラーが出たり、Bingへの更新通知のエラーは、日本語環境によるもののようです。
ファイルを修正すれば直るらしいですが、そこまではしなかった。

Google XML Sitemaps 日本語ファイル

日本語環境でXML Sitemap Generatorを使用するとBingへの更新通知でエラーが発生する問題の修正: herba fragile graciousness

Google XML Sitemapsで「Bingへの通知中に問題が発生しました。」とエラー表示されるので簡単に修正してみた | ノート100YEN.com

sitemapファイルを生成してくれない場合は空のファイルを置いておく

デフォルトだと自動検出でWordpressディレクトリの中に生成されるようになっています。
別の場所に生成したいなと思って、「サイトマップファイルの場所」項目で改めて手動設定に変更して、再構築をしたら、以下のエラーがでてきていくらやっても、指定の場所に生成されない。

一回目

WP_DEBUG was set to false somewhere before. You might not see all debug information until you remove this declaration!

二回目以後

There was a problem writing your sitemap file. Make sure the file exists and is writable. Learn more

There was a problem writing your zipped sitemap file. Make sure the file exists and is writable. Learn more

こちらのページで解決。
WordPressのサイトマップ(sitemap.xml)作成用プラグイン『Google XML Sitemaps』 | 無料SEO対策のススメ

sitemap.xmlが作成されない場合には、「sitemap.xml」、「sitemap.xml.gz」という空のファイルを作成し手動でアップしてパーミッションを666(606)に変更後、実施してみてください。

文字通り再構築って概念のようで、一度作ってしまった後は、新しくは生成してくれないようです(TдT)
空のファイルを置いておけば、それを書き換えてくれます。
自分の環境の場合は666ではダメで、777にしないと書換えできなかったです。
原因がわかってみると、英語エラーの内容もなんとなくわかった(笑)
でも新しく別の場所に作ったファイルはスタイルシートが効いてなかったです(TдT)

修正後は都度「設定を更新>>」を忘れずに!

設定を修正した後は、必ず一番下の「設定を更新>>」ボタンをクリック
項目数が多くだいぶページが縦長なので、忘れがちです(爆)
そのまま再構築しちゃって、また設定やり直しとか(TдT)

基本的な設定

Bingへの送信でエラー出るので、まーいーかとはずしたった。

投稿の優先順位

固定ページメインの普通のサイトだったら、「優先順位」を自動的に計算しない

「含めない項目」設定

フォームの送信完了ページとかをいれました。
除外メニューと同じようにIDで入れます。番号を間違えないように~(><

優先順位の設定

ホームページを1.0、固定ページを0.9で、今回は記事ページはまったく使ってないというか直リンクされると逆にまずいので(^^;それ以外を0.0としました。

robots.txtについて

WordPressには見えないrobot.txtがあるという認識。実際に設置すれば上書きできる。
robots.txt ファイルを使用してページをブロックまたは削除する – ウェブマスター ツール ヘルプ

今まではナチュラルに透過pngで設定してたのですが、今回はなんとなく画像を使わないでできないかなと思いたち・・・

結果的に下のかえラボさんのやり方を引用しました。
グラデーション設定をグラデーションさせない(GradientType=0)で透明機能だけを利用する方法です。

rgba()とfilterで背景だけを透過させる。 | かえラボBlog
記事中の設定は白50%を背景にする設定ですね。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
background-color: rgba(255, 255, 255, 0.5);

これを踏襲して

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B6062b7b,EndColorStr=#B6062b7b);
background-color: rgba(6, 43, 123, 0.7);

という設定で、IE8、9、chrome、firefoxで同様な感じで濃い青の半透明になりました。
上のfilter: progid:DXImageTransform~がIE向けの設定で、rgbaはIE以外のブラウザ向けの設定ですね。

rgba()はCSS3じゃなくても使えます。

いくつかのところでCSS3のリファレンスとして載ってるので、rbga設定ははCSS3じゃないと使えないかと思ってたのですが、3じゃなくても大丈夫でした。
rgba()-CSS3リファレンス

尚、RGBA値をサポートしていないブラウザでは、透明度だけが無視されて単なるRGB値として扱われるのではなく、色指定そのものが認識されずに無効となるので注意してください。

rgba()と一緒に背景は設定できない

footerの設定をしてるときに、IEでは半透明になってるのに、chromeでは背景しか見えないという現象にあいました。
悲しいことに、rgba()を設定した項目と同じ項目にbackgroud-imageを設定すると、backgroud-imageが上にのっかってしまい、半透明部分が見えなくなるようです。なので画像が半透明でない限りは、背景画像は一緒に設定できません(ーー;ううう。
filter:設定は、背景が後ろに回るようなので、IEだとちゃんと見えるんですがね。
CSS3だとまた違ってくるかも知れません。

filter:項目でフォトショでいう70%の透明度はどうやってあらわすのか

上の設定で元色の#062b7bの頭に透明度を表す数値を付ければ、よいということはわかったのですが、フォトショで設定している透明度70%を16進数で表すにはどうしたらよいということに頭を悩ましました。
最終的に無理やり計算して、「B6」という数値を出しましたが、割り切れずに適当に出した部分があるので、厳密には多分違う・・・(–;
00を0%、FFを100%として、10%刻みの数値が知りたい・・・(–;

無理やり割って16進数対応表で照らしあわした数値(255/10=25.5≒26にしちゃった)

0% ⇔ 00
10% ⇔ 1A
20% ⇔ 34
30% ⇔ 4E
40% ⇔ 68
50% ⇔ 82
60% ⇔ 9C
70% ⇔ B6
80% ⇔ D0
90% ⇔ EA
100% ⇔ FF

ググっている時にARGB変換ツールというのも見つけたのですが、これも不透明度を指定しなきゃいけないので使えなかった。

filter:項目で記述を間違えたり、ありえない数値を入れると、なぜか青いグラデーションが表示

関連して#D0と入れなければいけないところを、まちがえて#DO(表にはない数値)としてしまったら、なぜか青いグラデーションが表示されました。

opacityだと子要素まで全て透過してしまうので、背景には使えない

失敗例ですが、最初は以下を引用したら見事に中の画像まで透明にorz

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック – WEBデザイン BLOG

ほとんどのブラウザで背景の半透明化を可能にするCSS指定 | fixture.jp

はまちちゃんもいってるようにopacityだと子要素まで全て透過してしまいます。

CSSで半透明、opacityとrgbaの違い – ぼくはまちちゃん!(Hatena)
←この記事見たことあったのだが、すっかり忘れてた。

敢えて背景だけでなく全てを透かしてみる(20130614追記)

その場合はこのページを参考に。
全てのブラウザに対応したcssスタイルシートの透明、半透明の背景設定を記述する | WordPressにGoogle Maps API V3!

例は85でかなりスケスケなんですが、95ぐらいにすれば、デザインによってはそこそこ使えそうかなと思います。
これだとスクロールバーは全透けで背景と同じ画像になりますよ!

    background: #fff;
     filter:alpha(opacity=95);
     -moz-opacity:0.95;
     -khtml-opacity: 0.95;
     opacity:0.95;
}	

その他の参考記事

rgbaで簡単にcssのみの半透明の背景が実装できた – ファンブログハック
http://fanblogs.jp/oands/archive/284/0

この方も最終的にかえラボのやり方で落ち着いているんですが、
他にも色々参考リンクが載っています。
また自分の環境では確認してないoperaでは実装できなかったという記述があります。

あなたのサイトにぴったりなロゴを生成してくれるジェネレーター「LogotypeCreator」*二十歳街道まっしぐら
FREE Logo Creator – Unique Corporate Logo – Logo Maker – Logo Generator

試してみた。
lightshot
9つのロゴが出てきますが、オレンジのuniqueって方は有料でした。
lightshot
↑これは2回目に出した分ですが、2回目もランダムでまた違うロゴが色々出てきますよ。

タダで落とせるのは左の3つだけのようです。
それでもまあまあクオリティは高いし、カスタマイズも直感的にできて楽しいですw
lightshot

lightshot

二十歳さんでも言ってたけど、このまま使うってことはないだろうけど、ロゴ仕事のときに参考には充分できそうです。

参考記事

無料でオリジナルデザインのロゴが誰でもカンタンにすぐ作れてダウンロードも可能な「Free Unique Logo Creator」 – GIGAZINE

量多めのQ&AページでJqueryのアコーディオン仕様を実装してみました。
前から目を付けていたのですが、ちゃんと実装したのは今回初めてかも。
実装自体は割と簡単なのですが、クリックしたら開くよ!と自然にわかるデザインにする方がメインな作業ですな。

仕様はこちらのページを参考にしました。JSの細かい説明と色々なバージョンも載せてくれてるとこがありがたい。

jQueryでの開閉式のアコーディオンの動きいろいろ | CSS Lecture

jQueryでの開閉式のアコーディンの動きいろいろのデモページ|CSS Lecture

[JS]タブ式メニューとアコーディオンをつかったサンプル | CSS Lecture

[JS]タブ式メニューとアコーディオンをつかったサンプルのデモページ|CSS Lecture

スクリプト部分

faqというスラッグを付けた固定ページという設定で条件分岐で挟んであります。

<?php if(is_page(faq)): ?>
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
    $('.accordion_head').click(function() {
        $(this).next().slideToggle();
    }).next().hide();
});
&lt;/script&gt;
<?php endif; ?>

slideToggle()の中に’slow’(遅い)、’nomal’(普通(指定なしと同じ))、’fast’(早い)を入れるとスライドスピードも変えられます。

今回はごくシンプルにこんな感じで。
lightshot

開いた状態。
lightshot

<p>※クリックして回答をご覧下さい。</p>
<div class="ac">
<h4 class="accordion_head">ここに質問が入ります。</h4>
<p>ここに解答が入ります。</p>

この場合pの中身に新たなタグは入れられないです。

CSS記述

div class=”ac”で囲っちゃって、pに一気にスタイル付けをしています。

div.entry h4.accordion_head {
	cursor:pointer;
	background-image:url(images/custom/md_h4_ac.png);
	background-repeat:no-repeat;
	color:#066;
	padding-left:40px;
	border:none;
	margin-bottom: 5px;
	}	
	
div.ac p {
	background:url(images/custom/back_p_ac.png);
	background-repeat:no-repeat;
	padding-left:40px;
	font-size:14px;
	min-height:30px;
	margin-bottom:30px;
	}

以下のページがデザイン的には参考になりました。
Javascriptによるアコーディオンのサンプルサイト5つ | Webデザインのレシピ

CSS3とhtml5仕様

今後の参考にCSS3とhtml5仕様のものです。


デザインも美しい、アニメーションで開閉するアコーディオンを実装するチュートリアル | コリス

カッコよくデザインされたピュアCSS3なアコーディオン実装デモ:phpspot開発日誌

おまけ:内容divバージョンのcss(20121101追記)

スライドで開く内容が多めのバージョン。div.conventionとしました。

div.entry div.ac h2.accordion_head {
	background-image:url(images/custom/ac_h2_back.gif);
	cursor:pointer;
	color:#036;
	border:none;
	margin-bottom: 5px;
	padding-left:30px;
    }
	
div.entry div.ac h2.accordion_head:hover {
	background-image:url(images/custom/ac_h2_back_on.gif);
	cursor:pointer;
    }
     
div.ac div.convention {
    margin-bottom:30px;
    }

Home > アーカイブ > 2012-06

MESSAGE
3月11日の東北地方太平洋地震で
被災された方、親しい方が被災された方に、
心よりお見舞いを申し上げるとともに、
被災地の一日も早い復興を
心よりお祈りいたしております。
PROFILE

横浜在住。
横須賀でWeb制作の仕事をしている
へっぽこ兼業主婦です。
ガチャピン似。


A RELATED SITE
くまのがっこうブログパーツ
TODAY’S COLOPLA COLONY
FAVORITE SHOP
RECOMMEND COMIC
【送料無料】しろくまカフェメロン味!

【送料無料】しろくまカフェメロン味!
価格:680円(税込、送料別)

【送料無料】なのはな

【送料無料】なのはな
価格:1,200円(税込、送料別)

【送料無料】昭和元禄落語心中(1)

【送料無料】昭和元禄落語心中(1)
価格:590円(税込、送料別)

【送料無料】テルマエ・ロマエ(4)

【送料無料】テルマエ・ロマエ(4)
価格:714円(税込、送料別)

TWITTER
POPULAR ENTRY
BOOKLOG

PONNAO’S RAKUTEN FAVORITE

YOUR’S RAKUTEN FAVORITE

Return to page top