お好み焼きは主食派はい、ごめんください。
ちょっと質問されたけれどもすぐに解決できない割には需要があるなあと思ったのでメモしておきます。誰かプラグインにしませんか。

まず、現状は下記のとおりです。

  • お好み焼きの記事Aがある。
  • 卵焼きの記事Bがある。
  • 記事Aは「おかず」というカテゴリーと「主食」というカテゴリーに登録されている。
  • 記事Bは「おかず」というカテゴリーに登録されている。

そしてこの状態で起こりえる問題があります。

  • 「主食」というカテゴリーから、お好み焼きの記事Aを閲覧した。
  • 次の記事として、卵焼きの記事Bへのリンクが出現。
  • 確かに記事Aは主食でもありおかずでもあるが、「主食」のカテゴリーから来た以上、「おかず」のカテゴリーに属する卵焼きの記事Bへのリンクは許せない。

お好み焼きはそれだけで主食だと思うのに、卵焼きは主食か否か。や、私は主食でもいいんですけどね。

つまり、閲覧元のカテゴリーと同じカテゴリーの前後記事を表示する方法

閲覧元を調べてリンクを出すのはできましたが、そのまた次のページに行くなど、閲覧元のカテゴリーをずっと引き回すのがそのままではできなかったので、Cookie を使いました。

functions.php に下記を追加します。

下の方はフォーラムのkzさんの投稿がすごく参考になりました。

参考:WordPress › フォーラム » next_post_link:特定カテゴリーの除外について

 

そして、single.php のナビゲーション部分を下記のように変更します。位置としては while 〜 endwhile; の中ですね。

ざっくりとした概要

  • カテゴリーページに行くと、表示したカテゴリーIDをブラウザが保存(上書き)します。
  • 個別記事ページに行くと、保存されたカテゴリーIDと同じカテゴリーの前後記事を表示します。
  • ブラウザを閉じたりトップページに行くと、保存したカテゴリーIDは削除され、カテゴリーページを表示しなければ、時系列での前後記事を表示します。

できてしまえば単純でした。

We love WP!はい、ごめんください。
雪国新潟のウェブ解析士マスター、小杉です。

WordPress Advent Calendar 2013 の16日目の記事となります。

去年も個人ブログの方で参加しましたが、1年後に独立しているとは夢にも思っていませんでした。

今では WordPress を利用したサイト制作とウェブコンサルティングをやっています。アクセス解析ツールを見たりいじったりもしていますが、最近はウェブカウンセラーなんじゃないかと思い始めました。そんな私ですが、WordPress は今でも大好きです。

WordPress を個人で使っている方も多いと思うので、今日は Facebook と連携するときに知っておくとイイコトを記事にしました。

ちなみに、WP 成分は薄いです。

商品に「○○使用」と書いてあって5%くらいだったり、メロン味と書いてあってメロンを使ってなかったりするくらいの薄さです。スミマセン。

きっかけは、何気なく Facebook を眺めていた時。

FB友達の 笹川さん がブログをアップしたのを Facebook で見て、「ん?」と思ったのです。

Facebookの記事に作成者名?

なんぞこれ?

Facebookの記事に作成者名?

どうやらFacebook のウォールが新しくなった頃からのようです。本人のタイムラインなどには出てきませんが、メインのニュースフィードや埋め込み投稿にも表示されます。

↓このように、埋め込み投稿にも作成者名が表示されます。

 

↓ただ、はてなブックマークなどアプリ連携で投稿したものには表示されていません。代わりにアプリ名が表示されています。リンクを直接シェアしないと表示されないということがわかりました。

 

そこでフィードに流れてくる「リンクをシェアした記事」を見ていましたが、大抵ドメイン名が表示されているだけなんですよね。

笹川さんはライブドアブログとは思えない変態カスタマイズ(褒め言葉)をしているので、そのためかなと本人にお聞きしてみましたがお手上げ状態でした。

ソースを眺めたらすぐにわかった・・・けれど

HTML ソースを調べたところ、meta タグの name=”author” が該当しました。

Facebook との連携について調べてみましたが、解釈できるブラウザもないし、あまり意味がないからいらないよーという記事がたくさん見つかりました。

そんな記事に埋もれているのか、今回の件についての日本語の記事が見当たりませんでしたが、そのものズバリの英語の記事を発見しました。

参考:Optimizing Your Site for the Open Graph (UPDATED)

そのものズバリだ!

さっそく meta タグの name=”author” を入れてみた。

メールアドレスを入れることもあるようですが、今回は Facebook の投稿に作成者名を表示させることが目的なので、表示させたい文字そのものを入れることにしました。

ということで、<meta name=”author” content=”小杉 聖(@mekemoke)” /> などとヘッダに入れれば良いわけですね。日本語もOKです。

WordPress のプラグインで対応しているものはなさそう

Facebook との連携と言っても、OGP 設定とは違うので、プラグインで対応しているものはないように思います(ちゃんと調べていないので、もしあったらそちらで適用されているかと)。
私は WordPress SEO by Yoast を愛用しているのですが、特に設定項目はありませんでした。

そこで、手動でテーマを編集します。

管理画面の、[外観]>[テーマ編集]>header.php をいじるだけで行けます。プログラムも不要で、下記を <head> 〜 </head> に追記するだけなので1分もせずに終わります。

はい、終わりました。

追加したー!・・・けど、表示されない?

実際に表示されるかどうかは、「自分のみ公開」の設定にして Facebook でリンクをシェアしてみるとわかります。わかるんですが・・・どうにもこうにも表示されません。

しかも Facebook のデバッガで確認すると、エラーになっていました。

Facebookのデバッガでエラーが〜

The meta tag on the page was specified with name ‘author’, which matches a configured property of this object type. It will be ignored unless specified with the meta property attribute instead of the meta name attribute.

「meta タグで name 要素に “author” を指定してるみたいだね。でも、property 要素として扱わないと、無視すんよ?」と言われました。

はいスミマセン。OGP として設定しろってことですね。わかります。わかりますけどでもでもだって。

結論:適切な OGP 設定 + HTML レベルの著者情報で OK

OGP の詳しい説明は省きますが、ソーシャルメディアで連携する時にウレシイ設定です。

参考:これだけは知っておきたいOGP (Open Graph Protocol) | NEX.FM
参考:Facebookインサイト設定の落とし穴、app_id, page_id, admins の違いとは – Six Apart ブログ
参考:OGPに何書いたらいいか – MEMOGRAPHIX

結論から言うと、下記の設定を行なっておくことで作成者名は表示されます。

fb:admins もしくは fb:app_id は設定しておく

個人の場合は admins、複数人で更新している場合は app_id が良いようです。
これは片方でも両方でもOK。IDは調べて設定しましょう。

article:author もしくは article:publisher も設定できる

個人の場合は author に自分のFBページ、複数人の場合は publisher に FBページの URL を入れます。ちなみに、日本語版ではこの機能は反映されていないようです…(詳細は上記参考リンク)。
これはどちらか片方にしておきましょう。

私の場合、author と publisher の両方を設定していたことでうまく行かなかったようです。

このブログは個人用なので、fb:admins と article:author を設定しました。
自分の個人事業用のサイトは Facebook ページと連携させたかったので、fb:app_id と article:publisher を設定しました。

app_id の取得を別途しておけば、WordPress SEO by YOAST で fb:app_id と article:publisher をプラグインの設定画面から設定できます。

そして <meta name=”author” content=”作成者名” /> を追加する

追加する場所は <head> 〜 </head> ならどこでも良いようです。さくっといけますね。

というわけで、下記のように作成者を表示することができましたヽ(=´▽`=)ノ

注意点。

今回の流れで気になった点を4つほど。

自由度が高いけど虚偽表示はダメ、ぜったい。

著者表示は単純なドメイン名だけでなく、自分の名前を表示させることができます。

私もふと気づいたものだし、メインのフィードにしか現れないので「著作者が表示されるから、自分の名前を出して信頼を得よう!」とか声高に言うのは早計すぎるので、あくまで小技程度の紹介です。

ただ、自由度が高いので悪用されかねないなあとも思いましたが……、そうなったら Facebook 側で表示することはしなくなるだけでしょうね。

昔の記事に適用されるまでにはタイムラグがありそう

Facebook はデータをキャッシュするので、一度 Facebook でシェアした記事のデータは変わってくれません。OGP はデバッガで更新できるようですが、この作成者名については対応していないのかな?と思いました。

ただ、記事を書いている間に適用されたのを目の当たりにしたので、タイムラグがあるようですね。Facebook では、「自分のみ」の公開範囲で投稿して、全体のニュースフィードを確認してみると良いでしょう。

エラーが消えない

最初のきっかけとなった笹川さんの記事は、デバッガでエラーが出てこないのです。OGP 設定を合わせてみましたが効果なし。

無視するよーと言いつつ表示しているあたり、仕様のよく変わる Facebook のツンデレっぷりがよくわかります。そのうちなんとかなるのかも。

アプリで連携させない

アプリを介すとその情報が入ってしまうので、手動でシェアするようにしましょう。
せっかく書いた思い入れのある記事ですから、読んで欲しいポイントや気持ちを添えてシェアすると良いですよ。

いいね!ボタンだけでなく、シェアボタンを置いておくと楽かもしれませんね。

参考:Share Button – Facebook開発者

ウラ話。

なんていうかもう、WordPress <<< Facebook 的な記事でスミマセン。

実は WP のネタを考えているときに、

WP Test の日本語化とかやろうかなー → 公式が数日前にアップデート → orz
(参考:WordPressテーマユニットテストデータ日本語版を更新したよ! ‹ nuuno

WordPress SEO by YOAST の日本語化しようかなー → 最新版がんばってる方発見 → orz
(これは自分用にまとめました:WordPress SEO by YOAST を日本人が使いたい場合のメモ – NAVER まとめ

となっていてちょっと焦っていたのですが、WordPress 3.8 が出たという情報を振りきって、ムリヤリ WP にこじつけた感が…。

・・・ま、細かいことは気にしない!

明日17日は、あのプライム・ストラテジーの藤 祐太郎さんです!(実は誕生日が一緒だった!)

wp-seo-by-yoastWordPressを使った機械的な部分のSEOについては、もうこのプラグイン使っちゃえば、あとは別にいらないんじゃないかと思っている昨今です。

むしろオススメあったら教えてください。

参考:WordPress › WordPress SEO by Yoast « WordPress Plugins

Facebook でページをシェアする時に表示される画像の話です

Facebook とかでシェアする時に、サムネイル画像が表示されるのを見たことがあるかと思います。あれは、「このURLの画像を使ってね〜」と教えてあげると、それらを参照します。(og:image として設定します)

でも Facebook は 1,500px だか 2,000px だか(どんどん大きくなってる)を推奨しているので、小さい画像だと無視されちゃって、ページ内の他の画像をサムネイルとして使ってしまいかねない場合もあります。

Facebook はちょこちょこ仕様が変わるのですが、「また変わるのー?勘弁してよー!」と思うより、「ああ、解像度のめちゃ高い画面に最適化しようとしてるのね〜。時代がそうなっていくのを見越してるのね〜」と思っていたほうが精神衛生上お勧めです。

WP SEO は OGP タグを自動的に出してくれるのですが

さて、本来ならその元画像を og:image として設定しておけば、投稿内の画像をサムネイルとして使うことができるようになります。

手作業でやるのはちょっと面倒なので、WP SEO を使うと、投稿内にある画像を og:image として自動的に設定してくれます。何も考えなくて良いので嬉しいですね!

ですが、元々の画像は大きくても、表示するために小さめの画像(中サイズとか)を設定している場合があります。これが問題。

元画像を og:image に設定できる方法はないものかな?
ってことで、プラグインの中身覗いてみました。

WP SEO でフルサイズの画像を og:image として設定する方法

本題です。

WP SEO を有効化しているという前提で、下記を functions.php にコピペして保存すればOKです。

久しぶりに PHP いじったので、変な書き方だったらご指摘ください。英語はわかればなんでもいいです。

何をやってるかというと、WP SEO では og:image を出力する時に、一旦 content を参照してイメージタグを取得しているのですね。その content で使っている画像の、元画像ではないファイル(-300×240とかついている画像)のサイズ指定部分を取っ払ってから読み込ませているわけです。

直接プラグインをいじるより、フックしたほうが安全なのでこれで実現できました。

・・・うん、まあ、動かなかったら該当ページ教えてください。改良してみます。

画像がでなかったり、シェアする時におかしかったら?

Facebook でシェアするときとかに「サムネイルがちゃんとでなーい!」「何か変!」という場合には、下記のページにURLを突っ込んで、確認すると良いですよ。ここでキャッシュさせると表示されるよーって話も見かけました。

参考:Debugger – Facebook Developers

12. 11月 2013 · 2 comments · Categories: WEB制作 · Tags: ,

やばーい!となる前に。ちょっとアメブロからの移行をお願いされたのですが、その期間に色々考えることがありました。

やっぱり、私の周りでもアメブロ使っている人多いです。FC2はあまりいないのですが。

前からずっと言われていることなのですが、どうして商用で無料ブログを使っちゃいけないのか、ということを書き連ねてみました。言いたいことは最後の一文です。

ちなみに、サービスを妨害しようという気はありません。使っている方を卑下する気もありません。そもそも個人で使ってる方は、楽しそうで何よりです。

ただ、「ああ、やっぱりもったいないよね。そうだね。何とかしたいな」と思っていただければ嬉しいです。

よくある理由1:SEOが不利

アメブロの場合、URLが http://ameblo.jp/(アカウント名)/ という形になっています。

Googleは、同じドメインの記事を多くは出さない傾向にあります。今回の場合、ドメインというのは ameblo.jp の部分です。

そのため、検索したキーワードによっては、このドメインの制限を理由に、自分のブログが表示されないという事態に陥ります。

何が問題なの?

ここで何が問題かというと、自分自身の努力ではなかなか表示させることができないという点です。希望するキーワードで来て欲しいのに、表示させたくても表示されないのは、通常のSEOより困難です。

アメブロはすでに何千という記事を書いている人もいますから、一部では参入障壁が天高くそびえています。
そういう場合には、独自ドメインでがんばったほうがずっと楽です。

ただ、例外もある

FC2では http://(アカウント名).fc2.com/ となるので、(アカウント名).fc2.com の部分がドメインになるため、個々のブログが掲載制限にかかることは(今のところ)ないと考えられます。

FC2のようなサブドメイン型のブログサービスは、ここで言われている内容とは(今のところ)無縁ですね。

また、別のキーワードならすんなり上位表示するという状況も十分ありえます。

「うちはニッチなサービスだし、そんなにお客さん来なくてもいいから十分」と、現状に満足されている方もいらっしゃるでしょう。だって、店舗名でなら表示されるんですもんね。

時々、「○○というキーワードで1位に表示!」となっていても、それはその人のパソコンだけで、他の人が検索したら次のページだった、ということもありえます。(パーソナライズ機能というものです)

よくある理由2:商用利用が禁止されている

商用利用厳禁!?アメブロは商用利用が禁止されているからやめとけ!というのはよく言われます。私も言ってました。

下記は2012年10月の記事ですが、どうやら「やりすぎなければ大丈夫」という状態のようです。

参考:アメブロの商用利用は禁止なのか? 公式に確認してみた | Web担当者Forum

何が問題なの?

グレーゾーンだという事はもちろんですが、出る杭は打たれます。雉も鳴かずば撃たれまい。そんな状況。

グレーというのは、ブログからご自身のサイトに集客するのはアリですが、ブログをサイト代わりにしているのはNGです。つまり、アメブロで完結している場合は、消されても文句は言えません

だから「お金がなくても大丈夫!」「アメブロだから無料だよ!」と謳ってるようなところが、今後心配でなりません。特に、ママさん向けの起業とか、よくわからない人が「それだけやっときゃOK!」みたいに言われていたら……

「うちみたいな小さなところは大丈夫でしょ?ばれないばれない♪」っていう人は、利用規約に反していることを承知のうえで、消される覚悟ができてるんですか?と問いたい。

何より、お客様に迷惑がかかるということをもう少し自覚して欲しいと思います。

例外があるとしたら

上記の記事を元に考えると、公式サイトへの流入源としての利用は認められています。ただ、それが活用できるかどうかは別問題。

よくある理由3:独自ドメインが育たない

Curious leafホームページは持っていないけど、アメブロはやってる。という人は、先に上げたとおり辞めたほうがいいです。

というわけで、ホームページを持っているけれど、メインはアメブロ、という人。

これはプロバイダの無料スペースにホームページを持っていて、更新がうまくできないからアメブロでやってる、みたいな状況でしょう。
百歩譲って、これなら利用規約に(白に近いグレーですが)反しているとは言いがたいので、目を瞑ってもらえる可能性は高いと言えます。

ただ、わざわざ独自ドメインでホームページを持っているのに、無料ブログをやっている人は考え直したほうがいいです。

何が問題なの?

条件は上記と一緒なので、違反だなんだということは重要ではないのですが、思い入れがあるはずの屋号(独自ドメイン)が育ちません。

つまり、自分のホームページが無料サービスより下に格付けされている状態です。

現実では、いつか自分のお店を持ちたいな…!と思っている人は多いと思います。そのお店を持ったのにも関わらず、ライバルもひしめくテナントを間借りしている状態です。

せっかくお店を持ったのだから、そっちにお客さんを呼んで、どんなお客さんが来ているのかを把握して、ちゃんとおもてなしできるようにしておくべきではないでしょうか。

例外があるとしたら

無料ブログをメインにせず、集客ツールとするべきです。

たとえばサイトに設置したブログを更新したら、無料ブログにはサイトを更新した旨の記事を書きます(もちろん手動で)。これはFacebookページの使い方と同じですね。

面倒だ、意味が無いと思うなら、統合してしまえばいいのです。
でも、集客の効果を感じているならやってみて損はないでしょう。

それでホームページに来てくれれば、サービスに興味を持ってくれている証拠でしょうし、そうでなければ、ただの冷やかしです。そんな冷やかしのためにブログ書いてたって仕方ないでしょう。(アメブロはアクセス数が水増しされてるという話もあるので)

忘れそうなのでここら辺でもう一度書きますが、ビジネスで無料ブログを使った場合の話です。個人利用なら楽しくて良いと思います。

よくある理由4:バックアップができない

FC2はできるようですが、アメブロはできません。記事を消されたら完全抹消です。どうにもなりません。

アメブロがちょっと特殊なんですが、「みんながやってるから」「かわいいから」という理由で選ばれるのでしょうか。ピグとかもあるのかな。

たまに言われる理由1:情弱っぽい

Who's been using my phone?情報弱者っぽいというか…ここまで書いてたらそのものな気がしてきました……。

結局、ネットの世界において無知は罪なのです。

「だって誰も教えてくれないし!」という人が増えてしまったのは、ネットのインフラが急激に発展して、追いついて行けない人が多いからでしょう。

近年の行動パターンとして「商品を買うときはまず検索から入る人が多い」と言われているにも関わらず、「自分で調べることができない」という人が多いのが不思議ですね。

検索力さえあれば何とかなると思ってますが、ことネットの事になると「見てもよくわからない」と放棄してしまう人が多いのですね。

そのために、解析ランチというものを開催しています。ネットに関するなんでも相談所です。今更ながらの事でも大丈夫です。現状の相談でもウェルカムです。

たまに言われる理由2:解析がしにくい

ちょっと専門的になってきましたね。だからたまに言われる理由です。
ご自身のサイトならいろんな情報がわかりますが、外部サービスだと取りたい情報が取れません。

そもそも、「取りたい情報」が定まっていない場合がほとんどなので、よくわからずに無料ブログを使っちゃう状態とも言えそうです。

根本的な理由:要するに本気じゃない

Another view of Nermal on the laptopそもそも無料のサービスを使うということは、できるだけ消費を抑えたいという気持ちの現われなので、投資という考えはないのですよね。

これは無料ブログに限ったことではなく、一般的なホームページにも当てはまります。

なので、無料ブログを辞めました!独自ドメインでホームページやってます!

・・・だけでは、実は大して変わりません。

大事なことなのでもう一度言いますが、今回の話題はビジネスでブログをやっている場合の話です。

ということは、サービス利用費用等の見えるコストがかかっていなくても、人件費という目に見えないお金が関わっています。

そして(あまり向き合いたくない話かもしれませんが)ブログやホームページは、営業マンとしてお金をいただくことのできる可能性が十分にあります。

  • なんのために(ビジネスで)ブログをやっているのですか?
  • そのブログにかけた時間で、お客さんを呼び込みたくはないのですか?
  • 時間やお金を投資したいと思いませんか?

・・・そんなことを思うのです。

もうちょっと金臭い話を(オブラートに包んで)すると、

  • 毎月いくら稼ぎたいですか?
  • どのくらいのお客様にお世話になれば良いですか?
  • そのために、ブログやホームページができることはなんですか?
  • どれくらいのアクセスがあればいいと思いますか?

と、目標から掘り下げてみると現実が見えてきます。

もちろん、現状のビジネスでネットの役割がほとんどないということもありますので、一概に「ホームページ頑張りましょうよ!」とは言えません。

私はネットを大事にしないと生きていけませんが、リアルのつながりで事業を営んでいる方も多いです。というか周りはほとんどそんな感じです。

そんな中でもインターネットを活用していかないとだな〜と思われている方は、呑気に無料ブログなんてやってる場合じゃないんです。

 

はい、言いたいことは最後の1文だけです。

大事なことなので、言い回しを変えてもう一度。

ネットでお仕事を広げていきたいと思っている方は、呑気に無料ブログなんてやってる場合じゃないんです。

 

ameblo2WPコスギスの方に書くようなネタでもないので、こっちに投下。

結論から言うと、ひじょーに使いにくいしこれで有料ツールなのかっていうと首を傾げざるを得ないのですが、コツ(癖)さえ掴めばなんとかなりそうなので、メモ。

1.リスト全取得→画像も取得→MT形式にエクスポート(画像へのリンクは切る)

画像へのリンクが残っていると、結局リンク先が変わるので切っておく。

それでも残ってしまうのはあるのだけど…。

あと、取れない画像があるようですが、今回は大丈夫そうでした。体験版で取れない場合、おとなしくFC2を使ったほうが良いと思います。

2.WPにインポートする前に、必要な物は全て置換する

まず、絵文字はサイズの小さいgifとpngなので、テーマフォルダにでも突っ込んで、パスを正規表現で置換。

過去の絵文字形式のものは、[]の部分を<>に変えておけば表示はされない。

写真等はメディアからアップしておけばいいけれど、大きい物はもうサイズ変更しちゃってからアップして、フルサイズにしたほうが楽。
なので、画像のサイズ指定は置換してすべて取っ払っておく。

フォントサイズが入り組んでいる場合は、3はカット、2以下は83%、4以上は125%とかにしてしまう。

strongとspanをくっつけちゃったけど、閉じタグの関係でfontはすべてspanに置換したほうが楽。

中身が空のタグは、対応できる記事数じゃなければ、見なかったことにしておいたほうが精神的におすすめ。入り組んでなければ正規表現で置換してしまえばOK。

<p>タグは残しておいたほうが良い。もしくは、よくわからない改行は置換してしまう。<br>に頼らない方が良かった。

正規表現使えないと、置換は非常に大変です。

3.mt.txt をインポートして確認する

MT形式のインポートには専用プラグインがあるので、それをインストールしてインポート。

インポート自体はすぐに終わりますが、問題は内部リンクがあった場合…リンク先全部変わってるので。

4.リンク先を変えるのは手作業を覚悟する

ここが一番苦労するところ。カテゴリーへのリンクなら Search Regex とかのプラグインで一括置換できるけれど、過去の記事へのリンクとかが手作業で入っていると、泣けます。

ほとんどのリンクが「こちら」とかでリンクされていて、その先が想像できないと尚更です。

そんなわけで、深夜作業で音楽でも聞きながら、目視確認ついでに編集していくのがオススメです。1記事につき、1〜3分くらいかな。

 

というわけでザックリメモでした。

FC2通すと楽ですよ〜とは聞いたんですが、上記のことどこまでやってくれるんだろう?

WordPress › Improved Page Permalinks « WordPress Plugins

はい、ごめんください。

WordPressで「ページの」パーマリンクを変更したい場合は、「.html on PAGES」を使っていたのですが、ページの構造が複雑になってくると、親ページはスラッシュ(/)で終わらせて、子ページは .html で終わらせたい、という要望が出てきます。従来のホームページのURLを変えたくない場合などには頻出するのでしょうかね。

そんな時に救世主になった(と言うより単純に私が知らなかっただけ)プラグインがありました。

WordPress › Improved Page Permalinks « WordPress Plugins

このプラグインの何が嬉しかったって、子ページがなくても親ページとみなし、スラッシュで終わらせることができる点です。つまり、スラッシュ(/)で終わらせるか「.html」をつけるかを設定することができるんですね。

特定のプラグインが重宝しているからといって、そればかりに束縛されるのは良くないと反省。

Anchorはい、ごめんください。
前に使ったことがあったのに忘れてしまって、使いたい時に使えなかったのでメモメモ。

WordPress 3.5 以降から、左側のメニューからリンクが消えました。

以前からリンクの機能を使っていて、バージョンアップされているかたは問題なく表示されていますが、新規でインストールすると消えています。

ちょっとしたバナーの管理とかしやすかったんですがね。

プラグインを使わなくても function.php に1行書けば一発 OK

リンク機能がなくなった!でもこのプラグインを入れればOK!というものはあります。それが Link Manager というプラグイン。
公式プラグインなので、検索してインストールすれば OK です。

ただ、プラグインのソースを見てみると・・・

link-manager.php in link-manager/trunk – WordPress Plugin Repository

・・・実質一行!!

というわけで、下記の一行を function.php に入れておくだけで、リンク機能を使うことができます。要するに、機能は存在しているものの、それを表示していないだけなのですね。

表示されていないということは、今後そのまま消滅する可能性があるとも言えます。その場合はカスタム投稿タイプを利用して、リンクを管理すると良いでしょう。

カスタム投稿タイプは難しそう…と敬遠している方は、これこそプラグインを使って管理すると良いでしょう。

WordPress › Custom Post Type UI « WordPress Plugins

私は他に投稿タイプを使う予定もなかったので、しばらくはリンクの機能を復活させて使います。

inkscapeはい、ごめんください。
このブログは備忘録として使っているのですが、情報を発信するためのサイトを別途作成中です。そのためのロゴやらイラストやら作るためには、やっぱりベクタデータが扱いやすいんですよね。

でも、Adobe Illustrator は高くて手が出ない!という時に便利なのが、Inkscape。
イラレに慣れてしまうと若干使い勝手が違うので戸惑ってしまいますが、無料のソフトかつUSBにも入れて持ち運べるポータブル版もあるので、ちょっと作りたい時にオススメです。

Inkscape Portable(Windows版)をダウンロードしてみた

Inkscape 公式サイト
Inkscape 公式サイト(ダウンロードページ)

Windows 7/Vista/XP の portable というところからダウンロードして、インストール先をUSBなどにすると良いです。個人的にはレジストリを汚さないのが嬉しい。

is_install01

インストールする際に多言語オプションを求められますが、上図のようにチェックを入れておけば環境設定から日本語を選ぶことができます(2013年4月30日現在、ver 0.48.4)。

Inkscape の日本語化は設定してソフトを再起動するだけ

InkscapePortable.exe をダブルクリックすれば起動しますので、File -> Inkscape Preferences… (Shift+Ctrl+P) を開きます。

is_install02

左側から Interface を選び(下から4つめくらい)、右側の画面で Language を Japanese (ja) にします。あとはこの設定画面と Inkscape のウインドウをすべて閉じ、再度 Inkscape を起動してください。

Inkscape でいつも戸惑うのは、OK とか適用のボタンがないところなんですよね…(選んだ時点で適用されます)

Inkscape の日本語フォントを変更するよ

Inkscape を再起動して、日本語になったと喜んだのも束の間、インターフェイスのフォントが汚い!設定を弄る方法としては2通りあります。

インターフェイスの設定ファイルを変更する方法

1つめは、インターフェイスの設定ファイルを変更する方法。書体以外にも文字の大きさを変えたい場合にオススメです。

Inkscape の インストールフォルダ内の App\Inkscape\etc\gtk-2.0 を開きます。その中に gtkrc という拡張子なしのファイルがあるので、それをテキストエディタで開きます。

一番最後に、下記を追加してください。今回はメイリオ、8pt を指定しています。フォント名のあとの数字がフォントの大きさになります。8はやや小さめ。また、「MS UI Gothic」や「MS PGothic」も指定できますが、Windows7 ならメイリオで良いかと。

上書き保存したら Inkscape を再起動して、メニューのフォントが変わっていることを確認してください。

is_install06

書体の定義を変える方法

参考:InkscapeのUIフォントを直す – Weblog – hail2u.net

2つめは、フォントの定義を変える方法です。「sans」という枠にフォントの候補を設定します。CSS で言う font-family の指定に似ていますね。

Inkscape の インストールフォルダ内の App\Inkscape\etc\pango を開きます。その中に pango.aliases というファイルがありますので、テキストエディタで開きます。

に変更して保存、Inkscape を再起動してください。sans に segoe ui と meiryo を追加しただけです。

is_install05

英文フォントして segoe ui が優先され、日本語フォントはメイリオになります。メニューのショートカットのフォントで違いがよくわかるかと。

どちらもそんなに難しくはないので、お好きな設定をお選びください。ちなみに、両方やっても1つめの設定ファイルの方が優先されます。

それでは、素敵な Inkscape ライフを(^ω^)

19. 3月 2013 · 1 comment · Categories: WEB制作 · Tags: , ,

css_sprite_thumbnailはい、ごめんください。

先月から、片手間にココナラでサービスを出品しています。

ウェブ解析とか、WordPress で困ったことのご相談とか、キャッチコピーとか、チビの声とかw おかげさまで、適度なペースでお声がけいただいています。ありがとうございます。

WordPress のご相談とか、解決できるとこちらもスッキリ気持ちいいです。「わかる人ならわかるんだろうなあ…」と悩むことがありましたら、お手伝いさせてくださいな。

さて前置きが長くなりましたが、先日「CSS スプライト」で作るグローバルメニューのご相談を受けました。CSS スプライトを使ったメニューの説明ページは多いのですが、ご依頼の内容をバッチリ解決できる参考ページが見つからなかったので、ちょいとエントリー。

CSS スプライトって?

一枚の画像を背景に設定し、CSS で表示エリアを設定する手法です。画像の任意の位置(X座標とY座標)と幅、高さがわかれば、四角く切り抜くことができます。

要するに CSS で画像の一部を四角く切り抜いて表示する という手法です。

0.CSS スプライトの基本条件

  • マウスオーバーで画像を変えるため、大抵はリンク(アンカータグ)で利用します。
  • リンクはブロック要素(display:block;)(=四角形)にします。
  • 画像は背景(background-image)として使います。
  • 背景画像を表示する位置(background-position)を決めます。
  • 背景画像はリピートして使えません。(background-repeat:no-repeat;)
  • アンカーの :hover で背景画像の位置を変更します。
  • アンカータグ内に入れたテキストは、text-indent か padding で表示しないようにします。

1.どんなデザインでどんな動きにしたいのか想像してみよう

css_sprite1

こんなグローバルメニューがあるとします。
メニューの周りには背景がありますね。HOME はマウスオーバーした時の状況を表します。
つまり普段は、背景が青、文字は白。マウスオーバーで背景が薄い青、文字が青となります。
まずは動きの想定とデザインを把握しておきましょう。

2.メニューの周りに注目しよう

css_sprite2

グローバルメニューの外側には背景(1)があります。
また、グローバルメニューの左右には、マウスオーバーしても変わらない部分の背景(2)があります。

これらの部分は、X軸(横)方向にリピートして使う必要があります。

ん?CSS スプライトはリピートできましたっけ…?(上記0番で確認してみてください)

CSS スプライトはリピートできません。背景は CSS スプライトとは別に考えましょう

ということで、メニューのまわりで使う背景(1)とメニュー用の背景(2)はそれぞれ切り抜くかスライスして、名前をつけて保存しておきます。

左右の端を角丸にするのは、画像を並べてもいいですが、CSS の border-radius で設定したほうがスマートですね。

3.各メニューの大きさを確認しよう

メニューの高さは全て揃うはずですね。幅がすべて同じ場合は、1つだけ分かれば良いです。違う場合は、それぞれの幅をしっかり確認しておきます。

たとえば今回の例ならすべて同じ大きさなので、1つのメニューは130×60(ピクセル)となります。それが4つあるので、メニュー部分は520×60(ピクセル)となりますね。

css_sprite3

4.上段に通常時、下段に :hover 時のメニューを並べます

メニュー部分のみを切り抜き、キャンバスの大きさを調整します(例では 520×60 となります)。

CSS スプライトにハマってしまう人は、メニューの外の背景ごとコピーしてしまうことが多いようです。必ずメニューのみを使ってください。

キャンバスの高さを2倍にして(例では120px)、メニューをコピー(レイヤーやグループ機能を使える場合は、それらを複製すると使いやすいです)して移動し、縦に並べます。

上段が通常時、下段がマウスオーバー時となります。

css_sprite4

黄色の線で示された部分をスライスして4つの画像にしてもいいですが、1つの画像として保存して進めます。(下記サンプルデモ参照)

5.CSS で設定して仕上げよう!

画像の左上を基準に、位置を指定します。

css_sprite5

右上に行くほど数値が大きくなり、左下に行くほど数値が小さくなります。
だから メニュー画像を設定 = 画像を左に移動させる 時は X座標がマイナスになり、hover 時 = 画像を上に移動させる 時は Y座標がマイナスになるのです。

・・・ややこしいですが、CSS を確認してみてください。

画像の切り抜きさえ間違わなければ、CSS スプライトは難しくありません。
今回のサンプルは下記にあります。基本部分しか入れていないのですが、お好きに使ってください。(あとで改良の余地あり)

CSS スプライトサンプル ZIP DEMO

参考サイト

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス

基本部分がわかりやすく解説されています。私が今回の記事で言いたかったのは、背景は別になるんだよ!という部分だけです。

CSSスプライトについてあれこれ。

スプライトした際の速度検証や、背景に画像を設定してガチャガチャやる一般的な方法以外にも、色々な方法を紹介しています。深く知りたい方は必見。

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

CSS スプライトのための画像を作ってくれるサイトの紹介。メニュー画像は個別にあるから、全部くっつけたいよという場合に使えます。

はい、ごめんください。
備忘録のためのメモです。

Advanced Custom Fields はカスタムフィールドを柔軟に設定できるプラグインです。
ここでセレクトボックスを使っているのですが、値と表示名を変えているんですね。

apple : りんご
banana : バナナ
chocolate : チョコレート

という状態です。
設定された値で、画像を表示させることが目的でした。

<img src=”./images/apple.gif” alt=”apple” />

という具合に。

選択肢として使われている表示名も欲しいなあ・・・

上記だと、 alt で表示するものも apple や banana になってしまうので、

<img src=”./images/apple.gif” alt=”りんご” />

と、表示名の値を取得したいところです。

Advanced Custom Fields のセレクトボックスの、ここ!

ですが Advanced Custom Fields の利用方法は値と表示名が同じ場合が前提となっている記事が多いので、なかなか方法が見つかりませんでした。

なら、直接データベース覗いちゃえばいんじゃね?

何処かに格納されているはずなのでデータベースを見てみたところ、フィールド番号で格納されていました。
このフィールド番号を確認する一番簡単な方法は、Chrome などの開発者用ツールで該当する入力欄の id を確認すると良いです。

acf-field_1_label という id が設定されている場合、下記の方法で実現できます。

ポイントは get_field_object で該当フィールドのデータを取得するところですね。

素敵なWPライフを~