MMB » web http://mmb.glow-g.net Miyu's Mobile Blog Tue, 07 Feb 2012 08:58:26 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 リニューアルしました！ http://mmb.glow-g.net/2011/0504/202343.html http://mmb.glow-g.net/2011/0504/202343.html#comments Wed, 04 May 2011 11:23:43 +0000 miyu http://glow.daa.jp/glow/wp/?p=7031 ブログをリニューアルしました！ 今回は、サーバー移転のため、ネームサーバの変更も。 なんかめっちゃ大掛かりなのにやり始めちゃったので途中でやめられず大惨事になっていますが、ぼちぼちGW中に引っ越ししちゃおうと思います。 [...]]]>

ブログをリニューアルしました！

今回は、サーバー移転のため、ネームサーバの変更も。
なんかめっちゃ大掛かりなのにやり始めちゃったので途中でやめられず大惨事になっていますが、ぼちぼちGW中に引っ越ししちゃおうと思います。

今後とも、MMBをよろしく御願いたします。

]]> http://mmb.glow-g.net/2011/0504/202343.html/feed 0 wordpressへのogp追加とソーシャルブックマークボタンの追加。 http://mmb.glow-g.net/2011/0412/181335.html http://mmb.glow-g.net/2011/0412/181335.html#comments Tue, 12 Apr 2011 09:13:35 +0000 miyu http://mmb.glow-g.net/?p=6840 ソーシャルブックマークボタンを設置するという機会があったので、調べてみました。 facebook、mixi、グリーなどはリンクを押すと、画像やテキストなどの情報が出ます。 ↓こんなの これを追加するメモ！ これは、設定を [...]]]>

ソーシャルブックマークボタンを設置するという機会があったので、調べてみました。
facebook、mixi、グリーなどはリンクを押すと、画像やテキストなどの情報が出ます。

↓こんなの

これを追加するメモ！

これは、設定をしてあげる必要があって、何でもかんでも自動的に出ているわけではありません。
もちろん、ある程度のものは出ますが、意図しない画像やテキストが出てしまったりしてしまう場合もあります。
これを回避するためにプログラムで読ませる。というような感じです。

その設定はmetaでOGPというものを設定します。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

wordpressではOGPをプラグイン一撃で入れることが出来るのですが、画像が意図したものにならない様子。
でもチョーーーー簡単に設定ができるので、興味のある人は入れてみてください。
有効化するだけで、OGPが追加されます。
WP-OGP

画像が意図したものにならないのが気に入らない場合には、headのmeta部分に、下記を追加します。

<meta property="og:title" content="<?php the_title(); ?>">
<meta property="og:type" content="blog">
<meta property="og:description" content="サイト説明">
<meta property="og:url" content="<?php the_permalink() ?>">
<meta property="fb:admins" content="アプリID" />
<meta property="fb:appid" content="アプリID" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["'])(.+?)1.*?>/i';
if ( preg_match( $searchPattern, $str, $imgurl ) ) {
	echo '<meta property="og:image" content="'.$imgurl[2].'"/>';
} else {
	echo '<meta property="og:image" content="DEFAULT_IMAGE"/>';
} ; ?>

<meta property="og:site_name" content="サイト名">

facebookではアプリIDを登録しておく必要がありますので、facebookにログインをして、アプリIDを取得して下さい。
※5～6行目のアプリIDを知る方法
１つめは
http://apps.facebook.com/what-is-my-user-id/　から登録したアプリIDを入力します。
２つめは
http://www.facebook.com/developers/createapp.php　から登録したアプリID

※7～14行目は画像の自動出力です。
一番最初にある画像を自動で読み込んでくれるようになります。

head部分のmeta登録が終わったら、アップ！
ソースを確認する。

OGPがうまいこと追加になったら次はソーシャルブックマークを自動でいれちゃうプラグイン。
WP Social Bookmarking Light

こんな感じで設定が出来ます。
ただ一つ問題は、設定のところで、TOPにブックマーク配置を持ってきてしまうと最初にある画像を読み込んでしまうので
普通に写真を読み込んでくれないのでbottomに設定する必要があります。

facebookにどういう感じで出るのかを確認できるところ。
http://developers.facebook.com/tools/lint/

チョーーー簡単に配置するのはこれが早いかと思います。
とりあえず、メモとして。

参考リンク：
http://www.hide10.com/archives/14684
http://www.ninxit.com/blog/2010/06/13/wp-social-bookmarking-light/

]]> http://mmb.glow-g.net/2011/0412/181335.html/feed 0 今日の名言。 http://mmb.glow-g.net/2011/0224/190002.html http://mmb.glow-g.net/2011/0224/190002.html#comments Thu, 24 Feb 2011 10:00:02 +0000 miyu http://mmb.glow-g.net/?p=6703 d41d8cd98f00b204e9800998ecf8427e.PNG]]> d41d8cd98f00b204e9800998ecf8427e.PNG

]]> http://mmb.glow-g.net/2011/0224/190002.html/feed 0 ustライブ。 http://mmb.glow-g.net/2010/1208/202438.html http://mmb.glow-g.net/2010/1208/202438.html#comments Wed, 08 Dec 2010 11:24:38 +0000 miyu http://mmb.glow-g.net/?p=6526 宇多田ヒカルのライブをUSTで生中継。 すごい～。]]>
宇多田ヒカルのライブをUSTで生中継。
すごい～。

]]> http://mmb.glow-g.net/2010/1208/202438.html/feed 0 デコもじを試してみました。 http://mmb.glow-g.net/2010/0922/180031.html http://mmb.glow-g.net/2010/0922/180031.html#comments Wed, 22 Sep 2010 09:00:31 +0000 miyu http://mmb.glow-g.net/?p=6232 ウェブフォントのサービスがいよいよ出始めました。 使い方は簡単です。 ウェブフォントを表示させるブログを登録して、発行されるjavascriptをhead部分に記載し、使用したいフォントを選んでどこの部分をそのフォントに [...]]]> ウェブフォントのサービスがいよいよ出始めました。
使い方は簡単です。
ウェブフォントを表示させるブログを登録して、発行されるjavascriptをhead部分に記載し、使用したいフォントを選んでどこの部分をそのフォントにしたいか選んで保存するだけ。
CSSがわからない人向けにエディターも用意されています。
お試しフォント使ってみました。

無料ではお試しフォントが１つ使えます。
月額で315円とかで3つまでなど、使用が可能です。

ウーン…。
無料の英字WEBフォントがたくさん出ている中、日本語フォント、有料。

世知辛いのぅ。

ブログを可愛くしたァい★な人は是非。
デコもじ

]]> http://mmb.glow-g.net/2010/0922/180031.html/feed 0 ADOBEのブラウザチェックツール Browser Lab http://mmb.glow-g.net/2010/0902/173611.html http://mmb.glow-g.net/2010/0902/173611.html#comments Thu, 02 Sep 2010 08:36:11 +0000 miyu http://mmb.glow-g.net/?p=6169 さすがADOBE。 すばらしーチェックツールです。登録をすると無料で使えます～！ こんな感じでズレを確認できたり、ブラウザチェックをしたりできますYO! IE Testerだとバグがあったりしてウーンと思ってたんですが、 [...]]]> さすがADOBE。
すばらしーチェックツールです。登録をすると無料で使えます～！


こんな感じでズレを確認できたり、ブラウザチェックをしたりできますYO!

IE Testerだとバグがあったりしてウーンと思ってたんですが、こっちの方が確実っぽい。
最近だとIE6と7が一番見たいところだったのでスゴクイイ。
今作ってるサイトで見てみたらIE TesterのIE6でなぜか表示されなくなってしまったサイドバーとフッターがこっちのADOBEのチェックツールのIE6で見ると見られる。
どっちがほんとなのかな・・・ｗ

ちなみに・・・OS Xも見られます。
OS Xのふっるーいブラウザでテストをしてみて愕然としました…
見なきゃよかった…ｗ

使用できるブラウザはこんな感じ。

■Browser Lab

]]> http://mmb.glow-g.net/2010/0902/173611.html/feed 0 知らない間に！ http://mmb.glow-g.net/2010/0827/151012.html http://mmb.glow-g.net/2010/0827/151012.html#comments Fri, 27 Aug 2010 06:10:12 +0000 miyu http://mmb.glow-g.net/?p=6095 知らない間に2000投稿突破！スゴイー。 おめでとうございますー！ありがとうございます。 2005年の11月9日からはじめ、今年の11月で6年目を迎えます。 そりゃーこんなちっさくてかわいかったちょこさんも こんなおっさ [...]]]> 知らない間に2000投稿突破！スゴイー。
おめでとうございますー！ありがとうございます。

2005年の11月9日からはじめ、今年の11月で6年目を迎えます。

そりゃーこんなちっさくてかわいかったちょこさんも

こんなおっさんになっちゃう。

色々あった6年ですが経験値はスゴイです。
この調子でダラダラやっていきたいと思いますので、今後ともMMBをよろしくお願いします。

]]> http://mmb.glow-g.net/2010/0827/151012.html/feed 2 PHPSESSIDを削除する方法 http://mmb.glow-g.net/2010/0826/154730.html http://mmb.glow-g.net/2010/0826/154730.html#comments Thu, 26 Aug 2010 06:47:30 +0000 miyu http://mmb.glow-g.net/?p=6083 メモです。 phpinfo.phpでsession.use_trans_sidがoffになっているか確認。 onだった場合、.htaccessに php_value session.use_trans_sid off の [...]]]> メモです。
phpinfo.phpでsession.use_trans_sidがoffになっているか確認。
onだった場合、.htaccessに

php_value session.use_trans_sid off

の1行を追加してあげる。

]]> http://mmb.glow-g.net/2010/0826/154730.html/feed 0 HTML5のメモ http://mmb.glow-g.net/2010/0819/181619.html http://mmb.glow-g.net/2010/0819/181619.html#comments Thu, 19 Aug 2010 09:16:19 +0000 miyu http://mmb.glow-g.net/?p=5976 色んなサイトさんで記述方法が書かれてきているHTML5ですが、ざっくりまとめていこうと思います。 ざっくりすぎてわかりにくいと思いますけどー！ ■宣言は1行でOK ざっくりとした話、 を記載するだけでHTML5になる。（ [...]]]> 色んなサイトさんで記述方法が書かれてきているHTML5ですが、ざっくりまとめていこうと思います。
ざっくりすぎてわかりにくいと思いますけどー！

■宣言は1行でOK

ざっくりとした話、

<!DOCTYPE html>

を記載するだけでHTML5になる。（大文字小文字どちらでもOK）
ブラウザでは標準準拠になるので書いても古いブラウザ向けにも問題ないと思います。

head部分のお決まりで必要になるもの

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="" rel="stylesheet" type="text/css" media="all">
<script src="" type="text/javascript"></script>
</head>

■新要素

HTML5では新要素が適用できます。
bodyとかheadとか使ってたみたいに使えます。
なので、

<div id="header"></div>

みたいなdivで囲む記述をすることは必要ありません。

html記述

<header></header>

と書いてbodyみたいにダイレクトでCSSで指定させることができます。
#とか.とかは必要ありません。

CSS記述

header { background-color: #ccc; }

↓新要素（他にもあります。）
header　（ヘッダー）
footer　　（フッダー）
section　　（項目のまとまりごとに）
nav　　　　（ナビ）
article　　　（記事）
dialog　　　（チャット等のログ）
audio　　　(音）
video　　　（動画）
canvas　　（描画）

■新要素はIEでは認識してくれない

そんな場合は、下記を書いてあげて、新要素の適用をさせておきます。
↓htmlで反映させたい新要素を書く。

<script type="text/javascript">
    document.createElement( 'header' );
    document.createElement( 'section' );
    document.createElement( 'nav' );
    document.createElement( 'aside' );
    document.createElement( 'footer' );
    document.createElement( 'article' );
</script>

8/26追記：
IE対応させるための一行のgooglecodeちゃんがありました。なので、上もわかりやすい方法のひとつですが、下記の1行で済ませることも可能です。
※CSSの前に記述。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

ちなみに、section や nav といった HTML5 の新しい要素タイプのうち、ブロックボックスとしてレンダリングしたいものについて CSS で明示する手順も必要。

section, nav, article, aside, hgroup, header, footer, figure, figcaption {
  display: block;
}

br要素も、スラッシュとかいらなくなった！

<br>


HTML5のタグは簡単になったというものの、DWでタグ候補が出ないから割と不便なので、タグライブラリーをサクっと登録。ありがとうございますー！

■HTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた

ということで、色々他にもちょいちょいまとめていこうと思います。
自分のサイトもそろそろhtml5にしよー！

■参考サイト：
WordPress で HTML5 を書くための準備
HTML5 へ移行
他。

]]> http://mmb.glow-g.net/2010/0819/181619.html/feed 0 XPでフォントをキレイに表示させる方法 http://mmb.glow-g.net/2010/0817/102439.html http://mmb.glow-g.net/2010/0817/102439.html#comments Tue, 17 Aug 2010 01:24:39 +0000 miyu http://mmb.glow-g.net/?p=5940 先日、XPでメイリオのフリーダウンロードが出来るという記事を書きましたが、小さい文字がガジガジになってる方に朗報です！ ↓こんなん メイリオは標準だと、大きな文字はアンチエイリアスがかかってキレイに見えるのですが、小さな [...]]]> 先日、XPでメイリオのフリーダウンロードが出来るという記事を書きましたが、小さい文字がガジガジになってる方に朗報です！
↓こんなん


メイリオは標準だと、大きな文字はアンチエイリアスがかかってキレイに見えるのですが、小さなフォントはガジガジに見えてしまう場合があります。この場合、小さいフォントにもアンチエイリアスをかけてあげることができます。

1.デスクトップで右クリック→プロパティ→デザインタブ→効果を開く

2.次の方法でスクリーンフォント～～にチェックと標準をClearTypeに変更。

これでブラウザを開いていた人は一端とじて開きなおしてあげるとガジガジが直っていると思います！

ちなみに、フォントがメイリオに指定されているサイトではメイリオでキレイに見えますが、ゴシック指定されているサイトでは、普通にゴシックで表示されます。yahooやmsnなどはTOPページはゴシック表示です。

フォント指定されてないものや、メイリオが含まれているものは、メイリオで表示されます（たぶん）

ブラウザデフォルトのフォントはゴシックになっていると思いますが
オプション等でフォントをゴシックからメイリオに変えてあげると全般的にキレイに見えて素敵な感じになりますよっ。

]]> http://mmb.glow-g.net/2010/0817/102439.html/feed 1