自分のサーバー上の画像を、TwitterやFacebookに載せられるかテストしています。
上手く表示されるようなら、今年撮ったの桜の写真シリーズをアップしたいと思います。
猿の天国、長野県の地獄谷(1)良い感じの写真編 〜 2011年08月
長野県の地獄谷の猿に会いに行ってきました。
猿の写真をいっぱい撮ったので、今回はその中から気に入ったものを公開します。
母と子ども編
雪の地獄谷のときもそうでしたが、母と子の姿が印象に残りました。
猿の母と子の風景。
(twitterでも公開)
twitterで聖母子像のようだとのリツイートを頂きました。
(twitterでも公開)
白黒写真も良いよね!
(twitterでも公開)
猿のお母さんは、どんなことを考えているんでしょうね。
猿の子ども。可愛いです。
猿の様子編
橋の側面の鉄骨で寝ています。器用なものです。
(twitterでも公開)
橋の上で毛づくろいをしている猿たち。
寝ている小猿がふとこっちを見たところ。 (twitterでも公開)
これから貫禄が増していきそうな猿ですね。
地獄谷は冬と夏で2回目になります。
猿は人間に近いためか表情が豊かな写真になって面白いです。写真はいっぱいあるので、次回に続く予定です。もうちょっとくだけた写真でいこうかな。
見てくれてありがとう!
(まだ公開していない、雪の地獄谷の猿も公開したい! 公開したときはブログでお知らせします)
WordPressのKtai Styleで、特定の画像をaltのテキストに置き換える
WordPressでKtai Styleプラグインを使って携帯用表示をさせるときに、特定の画像をテキストにしたいことがありました。そこで携帯用表示時には、特定のclassのimg画像をaltの代替テキストに置き換えるようにしてみました。プログラムソースと一緒に公開します。
なぜそうしたのか
携帯用表示には、Ktai Styleプラグインを使っています。画像は自動で縮小され、とても便利です。しかし自分の使い方で不都合が起こりました。見出しに画像を使っている場合に、縮小された見出し画像の見栄えが悪かったのです。元が大きい画像だと、文字も含めて余計に小さく感じることも。
そこで見出しは、携帯では画像を表示せずに代替テキストのみを表示したいと思いました。そのような処理は、Ktai Styleの関数にはなさそうなので、下記プログラムを書いて対処しました。(WordPress3.2.1で確認)
ソースコード
/*
ktai style で、特定のclassの画像をaltの文字に置換える
(見出し画像を携帯ではテキスト表示にしたい場合などに活用)
*/
// 初期設定(function.php?)などに
define( 'KTAI_IMG_TO_ALT_CLASS', 'ktai-alt' ); // 置換えるimg画像のclass名
// function.phpなどに
// フィルタ用関数
function ktai_img_to_alt_by_class( $img_html, $orig_html ="", $src ="" ){
$r = $img_html;
if( defined( 'KTAI_IMG_TO_ALT_CLASS' ) ){
if( preg_match( '/class=[\"\']?([^>\"\']*)/i', $img_html, $m ) ){
if( strpos( " ".$m[1]." ", " ".KTAI_IMG_TO_ALT_CLASS." " ) !== false ){
preg_match( '/alt=[\"\']?([^>\"\']*)/i', $img_html, $m );
$r = $m[1] ? $m[1] : "";
}
}
}
return $r;
}
// ktai styleにフィルタを設定する
add_filter( 'ktai_image_to_link', 'ktai_img_to_alt_by_class', 10 );
Ktai Styleが出力するimg画像のタグをフィルターで書換えています。
(フィルター解説の$imageは$orig_htmlのことだと思いますが、$orig_htmlと$srcはテスト時に値が一度も入っておらず謎でした。今回$orig_htmlを使う方が確実だと思ったのですが)
使い方
上記ソースを、使用テーマのfunction.phpなどに入力します。
記事内で、テキストに置き換えたいimg画像にclassとalt属性を指定します。
↓
<img src="…" class="ktai-alt" alt="携帯では画像ではなくこの代替テキストを表示します" />
もちろんKtai Styleプラグインを有効にしていないと意味がありません。
以上。
その他、つらつらと
最初、見出しにはimg画像を使わず、CSSで背景画像による画像置き換えをしていました。ちゃんとHTMLでも見出しの文字を入れつつ、背景画像と表示が重なるのでCSSで文字を非表示に。するとCSSの違うKtai Styleでは文字のみで表示出来ます。スマートではないのですが問題はありませんでした。しかしテキストを非表示にするのはSEO対策的には良くないかもしれない…ということで、見出しに画像を使うことになったという経緯です。
SEO対策的にというのはわかるけど、CSS的には勿体ない話です。デザインを変更する場合、CSSなら一気にデザインを変更できるのに、img画像を使っちゃったらHTMLのコーディング変更も必要です。デザインとロジックを分けるCSSの役割が台無しです。更にこれからHTML5でアプリ的な使い方が増えると、非表示も多用されると思うのですが、どう折り合いをつけることになるのでしょう。このような問題の原因は、検索アルゴリズムというより、非表示などを悪用してスパムサイトを作る人たちにあるのでしょうね。
…とまぁ、携帯用CSSや画像を全部作れって話でもありますが(汗)。しかし、優秀なプラグインを使わせて頂くことも含めて、そもそもコンピューターってある程度楽をする為にあると思いません???
見出しの見栄えとSEO対策を合わせて考えると、今回の機能は既にプラグインにあるか誰かがやっていると思いましたが、検索してもほとんど該当しないのは意外でした。どうか誰かのお役に立ちますように。
ちなみに見出しに画像を使っているのは、このサイトのことではありません。執筆現在、このサイトのデザインはほとんど手つかずです。いずれなんとかしなきゃ…。(^_^;)
お付き合いありがとうございました。読んでくれてありがとう!
ビワをはこぶね計画
凄く私的な記事です。
引っ越してから約1年半経つですが、前の家にはビワの木がありました。毎年6月頃にはわんさかとビワの実がなり、たくさんの鳥が食べにきました。剪定したときは若干実が大きくなり、手前味噌ですがその周辺のビワの木では一番甘い実がなっていました。かといってガツガツ食べた訳でもないのですが、家族の思い出の一つでした。
今の家から近いので、妹と妹の子どもの散歩ついでにビワの様子を見に行きました。この写真の印象よりもう少し大きい木です。もう実は付いていませんが、今回は目的があるのです。ありました、ありました!
ビワの芽です。やっぱり生えていました。(芽というには育ち過ぎているかな?)
ビワの木を背景に。
この辺りはもうそろそろ立ち入り出来なくなるのでは…と思って、芽を頂いてきました。今の家には植えるところがないので、とりあえず持ってきただけです。どこかに植えさせてもらえないか模索中。
妹は茨城から遊びに来ていたので、帰るときに持って行ってもらうことになりました。嬉しかったのですが、渡し忘れてそのまま茨城に帰ってしまいました(汗)。
そのうち持って行くことになると思いますが、今は植木鉢のままで水をやっています。巨大化する前になんとかせねば(笑)。数年前の種もあるんですが、水をやったらまだ芽が出るのかな??
形あるものはいつか壊れる…ということでどうなるかわかりませんが、未来に「このビワの木は…」なんて話が出来たらちょっと楽しいなと思っています。
今日は、そんな私的なお話でした。みてくれてありがとう!
心菜ちゃん7ヶ月ちょっと
茨城へ嫁いだ妹が子どもの
心菜ちゃん誕生から7ヶ月ちょっと経ちました。更に顔つきがしっかりしてきました。また随分とコロコロしてきましたね(笑)。最近は少し我が出てきたそうです。
ボール遊びで気合いをためる心菜ちゃん。
ママとボール遊びをしてご機嫌です。
よく泣きますが、よく笑います。とはいえ夜泣きなどは少なく手のかからない子のようです。 このときはご機嫌モードでした。
電話のおもちゃをかじる心菜ちゃん。電話は食べ物ではないよ〜。
ママと一緒にご機嫌です。
お迎えに来たパパと一泊して、家族で帰って行きました。パパが来たときも心菜ちゃんはご機嫌でした。
同じような写真なのに5枚も載せちゃいました。私バカよね〜。
最後までみてくれてありがとう!