http://blog.jab-net.com/nc Webビジネス系のニュースサイトやメルマガからビジネスの参考になりそうなニュースや記事を勝手にクリッピング。 Thu, 12 Jan 2012 12:26:02 +0000 ja hourly 1 http://wordpress.org/?v=3.0.4 http://blog.jab-net.com/nc/archives/2011/10/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%90%91%e3%81%91%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%83%a1%e3%83%a2.html http://blog.jab-net.com/nc/archives/2011/10/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%90%91%e3%81%91%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%83%a1%e3%83%a2.html#comments Wed, 26 Oct 2011 01:22:34 +0000 hatto http://blog.jab-net.com/nc/?p=2421 続きを読む →]]> 先週、突貫でbikesnapのスマホサイトを作ったのでポイントを忘れないようにメモ。
しかし、CSS3ってすごいですね。
これまでは汎用性などの問題もあり避けていましたが、今回はスマホ、特にiPhoneに割り切っていたのでトライしてみました。



http://m.bikesnap.com/


1.iPhoneに適したサイトを作るために「viewport」の設定

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /;>
設定方法はこんな感じ。
・width=device-width…ウィンドウの横幅をデバイスの横幅（iPhoneの場合は320px）と指定
・initial-scale=1 … 表示倍率の初期値
・maximum-scale=1 … 表示倍率の最大値
・user-scalable=no … ユーザー側の操作で、拡大／縮小を出来るようにするかの可否

ちなみに、スマホサイトをPCで見た場合に確認しやすいように以下の設定を追加しています。

<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="http://m.bikesnap.com/stylesheets/pc.css" /;>
PCで見た際に、サイト画面が広がらないようにPC用のCSSを読み込ませています。
http://m.bikesnap.com/


2.WebClipアイコン

ブックマークをホーム画面に追加した際のアイコンの指定方法。
サイズによって指定方法を変えられるようですね。

iPhone3Sまでは57px / 57px
<link rel="apple-touch-icon" href="apple-touch-icon.png" /;>
iPhone4以降は114px / 114px
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" /;>
iPadは72px / 72px
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" /;>
エンボス効果をかけたくない場合は、アイコン名をapple-touch-icon-precomposed.pngというように「precomposed」を追加すればよいとのこと。


3.アプリっぽいスタートアップ画面

サイトが立ち上がる時にアプリっぽいスタートアップ画面を表示させたりステータスバーの表示方法も設定できます。
ただし、これはブックマークをホーム画面に追加し、ホーム画面からサイトを表示させたときのみ反映されます。

ページの全画面表示
<meta name="apple-mobile-web-app-capable" /;>
ステータスバーの色
<meta name="apple-mobile-web-app-status-bar-style" content="black" /;>
・default：不透明（デフォルト色）
・black：不透明（黒）
・black-translucent：半透明

スタートアップ画面のイメージ指定
<link rel="apple-touch-startup-image" href="http://m.bikesnap.com/images/img_startup.jpg" /;>
設定するとこんな感じに。
起動するとスタートアップ画面。
全画面でステータスバーが黒の表示に。アプリっぽいｗ



しばらくしてトップページが表示されます。




4.アドレスバーの非表示

上のスタートアップ画面からサイトの中に入ると通常の表示に切り替わってしまうため、ページ上部にはアドレスバーが表示されたままになってしまいます。これを非表示にするには以下のjavascriptでOK。

<script type="text/javascript";>
window.onload = function() {
setTimeout(doScroll, 100);
}
function doScroll() {
if (window.pageYOffset == 0) {
window.scroll(0, 1);
}
}
</script;>

5.ヘッダ固定

ヘッダを固定できるとアプリ感がアップしますよね。これまでiPhoneのサファリではposition:fixedが効かないために「iScroll」や「jQueryMobile」などのJavaScriptライブラリが必要で、何度か試してみましたがどうもしっくりした動きができません。
「iScroll」はページ下部に無駄なスペースが出来てしまったり、「jQueryMobile」では他の要素にいろいろと影響が出てしまうので、最初から組み込みを考慮して設計しないと難しい。

無理に固定させなくても良いかと思っていましたが、最近リリースされたiOS5ではposition:fixedが有効になったので、そのまま使うことに。

twitterやGmailなどのサイトでは完全にアプリのような動きが実装されていますね。
一体どうやっているのか。。。


6.PC版へのリンク

スマホだからといってもPC版のページで見たい場合もあります。
そこで、フッタ部分に以下のリンクを掲載。
userAgentでiPhoneを判定してリンクを表示させています。
location.pathnameで現在のURLを取得しているのでPC版とサイト構造が同じ場合は見ているページで切り替えできます。

<script type="text/javascript";>
if (navigator.userAgent.indexOf('iPhone') != -1) {
document.write('スマートフォン版　|　<a href="http://bikesnap.com' + location.pathname + '";>PC版</a;>');
}
</script;>
ほんとはPC版でも同様の処理を使いクッキーを利用すれば次回アクセス時の表示も制御できますが、今回はそのままに。（これだとただリンクを出すだけで済むのですが。。。）


7.CSS3

今回、実用でははじめてのCSS3。
なんとなく触っているうちにCSSだけで複雑な表現もカンタンにできるのを知り驚きました。

と言っても今回は基本的な表現のみ。

グラデーション
background: -webkit-gradient(linear, left top, left bottom,
from(#555),
color-stop(0.05, #666),
to(#222)
);
角丸
-webkit-border-radius: 5px;
テキストシャドウ
text-shadow: #000 -1px -1px 0;

これらを使うだけでヘッダ部分の表示がこんな感じに。
ロゴと左右のボタンのみ画像で後はすべてCSSです。



そんな感じのコーディングメモ。
まだまだ取り組み始めたばかりなので、これからいろいろと深めていこう！

]]> http://blog.jab-net.com/nc/archives/2011/10/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e5%90%91%e3%81%91%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0%e3%83%a1%e3%83%a2.html/feed 0 http://blog.jab-net.com/nc/archives/2011/03/wordpress-3-1%e3%81%8c%e5%88%a9%e7%94%a8%e5%8f%af%e8%83%bd%e3%81%a7%e3%81%99%e3%81%ad%ef%bc%81.html http://blog.jab-net.com/nc/archives/2011/03/wordpress-3-1%e3%81%8c%e5%88%a9%e7%94%a8%e5%8f%af%e8%83%bd%e3%81%a7%e3%81%99%e3%81%ad%ef%bc%81.html#comments Wed, 02 Mar 2011 03:42:27 +0000 hatto http://blog.jab-net.com/nc/?p=1980 続きを読む →]]> WordPress 3.1 が日本語版も理由可能になってますね。
さっそく、テスト用のWPをアップデート。

なにやらヘッダーにメニューバーが出るようになってます。



ログイン中にブログのページ内にも表示されるようです。
便利なような、じゃまなような。。。

]]> http://blog.jab-net.com/nc/archives/2011/03/wordpress-3-1%e3%81%8c%e5%88%a9%e7%94%a8%e5%8f%af%e8%83%bd%e3%81%a7%e3%81%99%e3%81%ad%ef%bc%81.html/feed 0 http://blog.jab-net.com/nc/archives/2011/01/facebook%e3%81%ae%e3%83%95%e3%82%a1%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%a7%e3%81%a8%e3%82%8a%e3%81%82%e3%81%88%e3%81%9a%e3%82%84%e3%81%a3%e3%81%a6%e3%81%8a%e3%81%8d%e3%81%9f%e3%81%84%e3%81%93.html http://blog.jab-net.com/nc/archives/2011/01/facebook%e3%81%ae%e3%83%95%e3%82%a1%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%a7%e3%81%a8%e3%82%8a%e3%81%82%e3%81%88%e3%81%9a%e3%82%84%e3%81%a3%e3%81%a6%e3%81%8a%e3%81%8d%e3%81%9f%e3%81%84%e3%81%93.html#comments Fri, 28 Jan 2011 23:17:28 +0000 hatto http://blog.jab-net.com/nc/?p=1871 続きを読む →]]> Facebookのファンページを以前いくつか作っていましたが、あまりカスタマイズしていなかったので、とりあえずそれっぽい感じにしてみました。

有名なファンページとか観るとなかなか凝ってますね。










どれも紹介用のページを用意してきれいに飾っていますね。
で、これをどうしたらできるか調べてみると、「ファンページの編集＞アプリ」の中にある「FBML」を使えばHTML編集できるページを設置できるみたい。



さっそく設定。とりあえずそれっぽい感じに。。。




せっかくページを作ったので、デフォルトでこのページを見せるようにしたいですよね。
これも調べてみると、すでにファンの人が訪れた場合はウォールが最初に表示されますが、まだファンではない人が訪れた際のページは設定で選べるようです。

が、しかし、いくら探してもその設定が見当たらない＞＜

しばらく格闘してみると、なんとファンページにはコミュニティと公式ファンページの二種類があり、Default Landing Tabという初期のページを設定できるのは公式ファンページのみらしい。。。

しかたがないのでファンページを作り直し。



作成画面の右側の公式ファンページより再作成。
もろもろの設定をし直して、あらためて「ファンページの編集＞権限の管理」を開くとメニューを発見！



難なく設定完了！

ここまではやっておけばなんとなく形になりますね。
あとは25人集まればURLを好きな形に変更できますが、ちと先になるかな。。。

]]> http://blog.jab-net.com/nc/archives/2011/01/facebook%e3%81%ae%e3%83%95%e3%82%a1%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%a7%e3%81%a8%e3%82%8a%e3%81%82%e3%81%88%e3%81%9a%e3%82%84%e3%81%a3%e3%81%a6%e3%81%8a%e3%81%8d%e3%81%9f%e3%81%84%e3%81%93.html/feed 1 http://blog.jab-net.com/nc/archives/2010/09/twitter%e3%81%ae%e6%96%b0%e3%81%97%e3%81%84ui.html http://blog.jab-net.com/nc/archives/2010/09/twitter%e3%81%ae%e6%96%b0%e3%81%97%e3%81%84ui.html#comments Wed, 15 Sep 2010 01:38:12 +0000 hatto http://blog.jab-net.com/nc/?p=1357 続きを読む →]]> twitterが新しいUIを発表しましたね。
iPad用のデザインをPC向けにも反映させた感じです。



タイムラインのツイートをクリックすると、右側に詳細が開きます。
画像や動画もそのまま見れるようになりますね。



実際に触っていないので何とも言えませんが、使いやすそうなUIですね。
ミニブログ系のUIは自分でもすごく悩むところで、タイムラインとそれ以外の情報をどうまとめるのかなかなか難しいです。
流れが重要なのでページ遷移も極力避けたいので、このUIは早く試してみたい。

Timelogでも、常にいろんなUIを検討しては躊躇する日々が続いています。
いくつかプロトタイプがあり、

たとえば、タイムライン重視の1カラムの表示とか。



右側の出っ張りをクリックするとサイドメニューが表示されます。



タイムラインのみでシンプルなのですが、なんとなくしっくりこなくてボツに。。。
Timelogのアカウントがあればこちらで試せますよ。

これはOEM先のデザインで使っています。




他にも、これはボツデザインを流用したりとか。


とくに最近は様々なデバイスが存在するのでなかなか難しいですね。

]]> http://blog.jab-net.com/nc/archives/2010/09/twitter%e3%81%ae%e6%96%b0%e3%81%97%e3%81%84ui.html/feed 0 http://blog.jab-net.com/nc/archives/2010/09/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e8%a6%8b%e3%82%8b%e3%81%a8%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%81%95%e3%82%8c%e3%81%a6%e3%81%97%e3%81%be%e3%81%86%e4%b8%8d%e5%85%b7%e5%90%88.html http://blog.jab-net.com/nc/archives/2010/09/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e8%a6%8b%e3%82%8b%e3%81%a8%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%81%95%e3%82%8c%e3%81%a6%e3%81%97%e3%81%be%e3%81%86%e4%b8%8d%e5%85%b7%e5%90%88.html#comments Thu, 02 Sep 2010 12:06:53 +0000 hatto http://blog.jab-net.com/nc/?p=1135 続きを読む →]]> 8月末に、「JAB-NETWORK」のサイトデータを別のレンタルサーバに移設したのですが、それ以降、ページを表示しようとするとページ自体がダウンロードされてしまう不具合が発生。

アクセスログにももろ影響が出ています。。。



しばらく悩んでいたのですが、どうやら古いサーバで使っていた.htaccessの記述が新しいサーバ側に対応していなかった様子。

これまで、SSIをhtmlやhtmの拡張子でも有効になるように.htaccessに

AddType text/x-server-parsed-html .html .htm

を記述していました。
これが、どうやらApache2から記述方法が下記に変更されたみたいです。

AddHandler server-parsed .htm .html

これに変えると無事に動作しました。

と思いきや、http://www.jab-net.com/index.htmlでは正常に表示されますが、http://www.jab-net.com/では相変わらずダウンロードされてしまったりとなんだかよくわからない状況に。

いろいろと試してみて、先ほどの一文を下記に変更。

AddOutputFilter INCLUDES .shtml .html .htm

なんとか無事に動いている様子。。。
まだ不安なので不具合あれば教えてください＞＜

]]> http://blog.jab-net.com/nc/archives/2010/09/%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e8%a6%8b%e3%82%8b%e3%81%a8%e3%83%80%e3%82%a6%e3%83%b3%e3%83%ad%e3%83%bc%e3%83%89%e3%81%95%e3%82%8c%e3%81%a6%e3%81%97%e3%81%be%e3%81%86%e4%b8%8d%e5%85%b7%e5%90%88.html/feed 1 http://blog.jab-net.com/nc/archives/2010/09/wordpress%e3%81%a7%e6%8a%95%e7%a8%bf%e5%86%85%e3%81%ae%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%ae%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%82%92%e8%87%aa%e5%8b%95%e3%81%ab%e8%b2%bc%e3%82%8a.html http://blog.jab-net.com/nc/archives/2010/09/wordpress%e3%81%a7%e6%8a%95%e7%a8%bf%e5%86%85%e3%81%ae%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%ae%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%82%92%e8%87%aa%e5%8b%95%e3%81%ab%e8%b2%bc%e3%82%8a.html#comments Thu, 02 Sep 2010 11:22:13 +0000 hatto http://blog.jab-net.com/nc/?p=1122 続きを読む →]]> 最近、クリッピング専用のカテゴリにPress This（ブックマークレット）を利用して気になるニュースなどを投稿しています。
ただ、内容がリンクとコメントだけのシンプルなものだったので、見栄えを考えてリンク先のサムネイルを表示させようかと。

サムネイルを作成するサービスやAPIなどを利用しようかと思いましたが、投稿の手間が多かったりしそうで悩んでいたところ、よさげなプラグインを発見！

bm-shots

WordPressでは、元々テーマの一覧などでサムネイルを取得する隠しAPIが実装されているらしく、それを活用したプラグインです。
そのため、APIが停止されたりすれば利用できなくなるリスクが生じます。

使い方はいたってシンプル。
プラグインをダウンロードして設置します。

表示させたい部分に次の一文を追加

［browsershot url="リンク先のURL" width="サムネイルのサイズ"］

それだけで、自動でサムネイルを表示してくれます。



これは便利ですね。


ただ、この一文のタグを追加するのをもっと簡単にしたいと思い、「AddQuicktag」というプラグインも追加。

これは、入力フォームに自由なタグを追加できるプラグインです。


設定画面で上記のようにラベル名や入力するタグを記入すると


入力フォームに「サムネイル」というボタンが追加され、クリックすると先ほどのサムネイル生成用の一文が自動で記入されます。

この二つのプラグインでリンク先のサムネイルを簡単に追加できるようになります。
なかなか便利ですよ。

]]> http://blog.jab-net.com/nc/archives/2010/09/wordpress%e3%81%a7%e6%8a%95%e7%a8%bf%e5%86%85%e3%81%ae%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%ae%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%82%92%e8%87%aa%e5%8b%95%e3%81%ab%e8%b2%bc%e3%82%8a.html/feed 0 http://blog.jab-net.com/nc/archives/2010/09/jquery-lazy-load-plugin%e3%81%ae%e5%b0%8e%e5%85%a5%e3%81%a8%e6%80%9d%e3%82%8f%e3%81%ac%e4%b8%8d%e5%85%b7%e5%90%88%e3%81%b8%e3%81%ae%e5%af%be%e5%bf%9c%ef%bc%81.html http://blog.jab-net.com/nc/archives/2010/09/jquery-lazy-load-plugin%e3%81%ae%e5%b0%8e%e5%85%a5%e3%81%a8%e6%80%9d%e3%82%8f%e3%81%ac%e4%b8%8d%e5%85%b7%e5%90%88%e3%81%b8%e3%81%ae%e5%af%be%e5%bf%9c%ef%bc%81.html#comments Wed, 01 Sep 2010 03:31:44 +0000 hatto http://blog.jab-net.com/nc/?p=1089 続きを読む →]]> 「jQuery lazy load plugin」というWordPress用のプラグインを利用すると、画像などがフワッとした感じでスクロールに応じて表示されるようになります。

プラグインを入れるだけなので、とても手軽なのですが、いくつか気になる点も。

・サイドバーの画像にも影響してしまい、ページ下部までスクロールしないと表示されない
・「WPtouch iPhone Theme」プラグインを利用しているとiPhone等で画像が見れなくなる

で、これらを解決するには、「jQuery lazy load plugin」の編集をクリック。



「jquery-image-lazy-loading/jq_img_lazy_load.php」を開きます。



この中に

jQuery("img").lazyload({

という一文がありますので、そこの「img」の部分に、この機能を反映させたいIDやCLASSを追加します。
このブログの場合は、記事内の画像だけに反映させたかったので、「.type-post」を追加しました。

jQuery(".type-post img").lazyload({

これだけで、サイドバーの画像やiPhoneでの動きが治ります。
かゆいところに手が届く感じてスッキリ！

]]> http://blog.jab-net.com/nc/archives/2010/09/jquery-lazy-load-plugin%e3%81%ae%e5%b0%8e%e5%85%a5%e3%81%a8%e6%80%9d%e3%82%8f%e3%81%ac%e4%b8%8d%e5%85%b7%e5%90%88%e3%81%b8%e3%81%ae%e5%af%be%e5%bf%9c%ef%bc%81.html/feed 1 http://blog.jab-net.com/nc/archives/2010/08/twenty-ten%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%81%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%99.html http://blog.jab-net.com/nc/archives/2010/08/twenty-ten%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%81%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%99.html#comments Fri, 27 Aug 2010 10:18:11 +0000 hatto http://blog.jab-net.com/nc/?p=1024 続きを読む →]]> WordPressのテーマをTwenty Tenに移行してから、テーマファイルの記述がこれまでと微妙に異なるので戸惑っていましたが、トップページの表示方法を少しカスタマイズしてみました。

通常の投稿だけでなくニュース等のクリッピング記事も記録していきたいと思っていたのですが、そうするとトップページを埋め尽くしてしまう為、特定のカテゴリの記事だけを表示しないようにしてみました。

トップページの新着は、index.phpのこの部分で動いています。

get_template_part( 'loop', 'index' );

これを以下のように書き換えます。
（この場合、カテゴリ18以外を表示）

query_posts('cat=-18');
get_template_part( 'loop', 'index' );
wp_reset_query();

すると、トップの新着にクリッピング関連の記事が表示されなくなります。

ただ、そのままだとクリッピング関連の記事がまったくわからなくなってしまうので、これらはサイドバーに出してみることに。

新着記事は、「loop.php」で動いているので、これをコピーして「loop_side.php」を作成。余分なコードを取り除いてシンプルな新着表記にします。

で、これを「sidebar.php」の中で呼び出せばいいのですが、サイドバーはウィジェットで全て管理したいので、「Executable PHP widget」というプラグインをインストール。

ウィジェットにPHPを含むコードを自由に追加することができます。
そこで、以下のソースを追加。

query_posts('cat=18&showposts=5');
get_template_part( 'loop_side', 'index' );
wp_reset_query();

カテゴリ18の記事を5件だけ「loop_side.php」に書かれた内容で表示するようになります。



デザインはまだ調整が必要ですが、動作は思い通りになったと思います。
これを流用すれば、特定のカテゴリのサムネイル写真だけを表示したりするのも簡単そうですね。
今度やってみます。



※追記

上記の方法だと、2ページ目以降に移動した場合でも常に最新の記事しかでなくなっていました。
そこで、

query_posts('cat=-18');

の部分を

query_posts('cat=-18&paged='.$paged);

のように変えることで2ページ目以降の動きが正常に直りました。

]]> http://blog.jab-net.com/nc/archives/2010/08/twenty-ten%e3%83%86%e3%83%bc%e3%83%9e%e3%81%ae%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba%ef%bc%81%e3%83%88%e3%83%83%e3%83%97%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%99.html/feed 0 http://blog.jab-net.com/nc/archives/2010/08/%e8%a4%87%e6%95%b0%e3%81%aewordpress%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ab%e8%a8%ad%e7%bd%ae%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%81.html http://blog.jab-net.com/nc/archives/2010/08/%e8%a4%87%e6%95%b0%e3%81%aewordpress%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ab%e8%a8%ad%e7%bd%ae%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%81.html#comments Wed, 11 Aug 2010 10:53:46 +0000 hatto http://blog.jab-net.com/nc/?p=874 続きを読む →]]>

会社の同僚に、Wordpressを複数設置するにはどうしたら良いか聞かれ、ブログで返事してと謎の指令？ｗをもらったので、簡単にメモしておきます。

Movable Typeなどは元々複数のブログが運営できるシステムですがWordPressは個別のブログのシステムとなっています。
WordPress3.0になってから「マルチサイト」というこれまでWordPressMUで提供されていた機能が使えるようになっているようですが、この「マルチサイト」は、あまりメリットを感じられないので自分は昔ながらの方法で個別に管理しています。

その方法をちょこっとまとめ。

レンタルサーバなどでデータベースを利用する際、いくつもデータベースを利用できる所はいいのですが、一つしか使えない場合、そのままではWordPressは一つしか利用できません。

で、複数設置したい場合は、「wp-config.php」の中身を変更します。
ページの下の方に「WordPress データベーステーブルの接頭辞」という項目があります。

通常は

$table_prefix = ‘wp_’;

という記述になっていますが、二つ目以降のWordPressを設置する際は、この「wp_」の部分を変更していきます。

例えば

$table_prefix = ‘wp_new_‘;

のように。

これでインストールを行うと、データベースに登録されるテーブルの頭文字を区分けする事ができ、複数のWordPressを一つのデータベースで共存できるようになります。

簡単なので是非お試しあれ！

]]> http://blog.jab-net.com/nc/archives/2010/08/%e8%a4%87%e6%95%b0%e3%81%aewordpress%e3%82%92%e4%b8%80%e3%81%a4%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9%e3%81%ab%e8%a8%ad%e7%bd%ae%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95%ef%bc%81.html/feed 0 http://blog.jab-net.com/nc/archives/2010/08/wordpress3-0%e3%81%ab%e7%a7%bb%e8%a1%8c%ef%bc%81twenty-ten%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba.html http://blog.jab-net.com/nc/archives/2010/08/wordpress3-0%e3%81%ab%e7%a7%bb%e8%a1%8c%ef%bc%81twenty-ten%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba.html#comments Sun, 08 Aug 2010 00:37:46 +0000 hatto http://blog.jab-net.com/nc/?p=829 続きを読む →]]>

一月程前に、Wordpress3.0に移行しました。
現在は3.0.1-jaになっています。

アップデートするにあたり、これまでのデータやテーマなどにいろいろと支障があるのか不安でしたが、まったく問題なくあっさり 完了。
いくつかのサイトで試してみましたが、大丈夫そうですね。

Wordpress3.0のデフォルトのテーマは「Twenty Ten」というものに変わっています。
これまで、このブログはWordpressのデフォルトテーマを使っていましたが、変わってしまったので、「Twenty Ten」でコーティングをし直してみました。

Wordpress3.0で実装されたメニュー機能などはこのブログでは不要なので、バッサリと切り捨て。
全体のカラムのサイズとか調整するだけですんなり完成。

で、そのままではなんなので、トップページの表示を少し変えてみました。

Wordpress2.9から「投稿サムネイル画像」、3.0では「アイキャッチ画像」と名称変更された機能を利用し、トップページに各記事のサムネイルを表示。



掲載方法はすごく簡単。
記事を投稿する際に、右下にある「アイキャッチ画像」から画像を選択するだけ。



ページへの表示は「loop.php」の中のトップページに関するソースの部分に、

<?php the_post_thumbnail(‘thumbnail’); ?>

を追加するだけ。

これまで、トップページには記事の内容を全て掲載していたので、かなりスクロールの長いページになっていましたが、これでかなりスッキリしました。

想定外の効果としてブログ全体のPVが3割以上もアップしていました。
トップページから個別のページへの流入が増えたのでしょうかね？

]]> http://blog.jab-net.com/nc/archives/2010/08/wordpress3-0%e3%81%ab%e7%a7%bb%e8%a1%8c%ef%bc%81twenty-ten%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%ba.html/feed 11