大阪にてホームページ作成を手掛けるWEBデザイナー!アメブロカスタマイズ、スマートフォンサイト作成!
Wordpress|カスタムフィールドで値無記入の場合、項目非表示。

Wordpress|カスタムフィールドで値無記入の場合、項目非表示。

WordPressで不動産サイトでの物件情報、ネットショップでの商品紹介など、複数のデータ入力項目を必要とするサイトを作る時、カスタムフィールドが便利です。
デフォルトではまだまだ使いにくいですが、カスタムフィールドを利用することによってサイト更新の効率が上がります。

基本的には代表格の「Custom field Template(カスタムフィールドテンプレート)」プラグインを利用致します。ここではカスタムフィールの設定方法は省略し、カスタムフィールドで項目(フィールド)を設定したけど、記事によって項目の値を記入しなくても良い場合、ブラウザから項目の表示自体を消すIF文の設定をお知らせ致します。

・画像なしの場合は、画像フィールドごと非表示。
・テキスト無記入の場合は、項目とテキストごと非表示。

画像挿入用カスタムフィールドで、画像を選択していなければ、項目ごと非表示。
<?php if"get_post_meta"$post->ID, 'img02', true"": ?>
プロフィール画像:<img src="<?php $img02 = get_post_meta"$post->ID, 'img02', true"; ?> width='100' hieght='100'" />
<?php endif; ?>
img02=フィールド名
テキスト挿入用カスタムフィールドで、テキスト未記入の場合、項目ごと非表示。
<?php if"post_custom"'price'"": ?>
<div class="price">料金:<?php echo post_custom"'price'"; ?></div>
<?php endif; ?>
price=フィールド名


任意の変更箇所は、上記の写真を参照して下さい。

これを覚えておくとカスタムフィールドを使いこなしたも同然!サイト構築の幅や更新効率が上がります!

是非、お試し下さいませ。

2012年1月21日 |大阪のWEBデザイナー ホームページ作成 このエントリーをはてなブックマークに追加  
au春モデルスマートフォン5機種発表。

au春モデルスマートフォン5機種発表。

KDDI auが1月16日(月)に2012春モデルスマートフォンの新製品発表会を行いました。

昨年12月の発表では1機種の発表でがっかりしてしまいましたが、新年1発目は期待されていた通り、GALAXY S2 WiMAXやXperia acro HDの発表がありました。waimaxスマホをもっと選べるようにしていただければ嬉しいのですが、まぁ魅力的なラインナップと思います。

私個人としましては、Wimaxスマートフォンに機種変したら2台持ちのスマホを1台にしたいと思っております。
auでも電話番号を2個持てるすべを知りましたので。GALAXY S2 WiMAXに機種変しちゃおうかな~。運気上がるかな?

GALAXY S2 WiMAXは、android4.0にアップデートするのかな~?


♪ GALAXY S2 WiMAX by Samsung(ISW11SC)
Android 2.3を搭載。ディスプレイは約4.7インチ(1280×720)HD SUPER AMOLED(有機EL)で、カメラは約808万画素、サブカメラは約207万画素。重さ約139g。バッテリー容量1850mAh。au初のNFCを搭載。
FacebookやTwitterなどのSNS、PCメールを一元管理できる「Social Hub」により、大事な人とのコミュニケーションをサポート。SMS (Cメール) やキャリアメール (~@ezweb.ne.jp) に対応。
(2012年1月20日発売)

♪ Optimus X by LG(IS11LG)
Android 2.3を搭載。ディスプレイは約4.0インチ(480×800)で屋外でも見やすいISP液晶を搭載。カメラは約800万画素で、サブカメラは約30万画素。重さ約130g。ワンセグ対応。
(2012年1月20日発売)

♪ Xperia acro HD by Sony Ericsson(IS12S)
Android 2.3を搭載。ディスプレイは約4.3インチ(1280×720)TFT液晶を搭載。ワンセグ、赤外線通信、おサイフケータイ、防水と日本定番の機能に対応。重さ約149g。
(2012年3月上旬発売)

♪ Motorola RZAR by Motorola(IS12M)
ディスプレイ約4.3インチ(540×960)SuperAMOLED Advancedを搭載。赤外線通信に対応。重さ約127g。
(2012年3月上旬発売)

♪ INFOBAR by iida SHARP(C01)
Android 2.3を搭載。テンキーを搭載、ディスプレイ約3.2インチ、カメラ約804万画素。重さ約106g。
(2012年2月上旬発売)


アプリ取り放題のauスマートフォンパスも楽しみですね。

2012年1月16日 |大阪のWEBデザイナー ホームページ作成 このエントリーをはてなブックマークに追加  
無料通話アンドロイドアプリ「Viber」で経費削減。

無料通話アンドロイドアプリ「Viber」で経費削減。

アンドロイドスマートフォンを手にしたら真っ先にインストールしてほしい無料通話アプリ「Viber」を紹介します。

iPheneからはすでにリリースされておりますが、android版Viberも最初の設定さえ済ませれば、以後ログインの必要もなく、Viberアプリをインストールしているスマートフォン間で、無料通話(パケット代はかかる)やテキストチャット、SMSが利用できます。

auでは、skype auアプリや指定通話定額という指定した3件までのauケータイへの国内通話が24時間無料というサービスがありますが、Viberユーザーとは無料で何時間でも通話ができます。

普及している同じようなアプリでスカイプがありますが、常時ログインしていなければならないしでメモリを食い、バッテリーの消費も速くなる。

しかしViberは、タスクトレイに常駐していなくても電話がかかってきたら自動的にアプリが起動し着信が鳴るので、使い勝手は通常の通話機能と変わりません。

肝心の音声品質は、WiFi環境に限らず3GS環境でも通常の通話品質となんら遜色ないのでとても優れております。若干の若干、タイムラグがあるかな…。

---------------------
android版Viberをインストールした後、実際に使えるまでの方法を説明します。

1.アプリを起動してアドレス帳へのアクセスを許可する。
2.設定画面に入ったら自分の電話番号を入力。
2.コンティニューをタップするとしばらくしてショートメール(SMS)が送られてきます。
4.SMSに記載された番号を「Enter code here」というフォームに入力。
これで設定完了です。
---------------------

SMSが送られてこない人や国際SMSに対応していないIS03などのauスマホでは、コード入力画面下部の”click here”というリンクボタンを押し、英語の自動音声で4つの番号を教えてくれる流れになりますので、番号を覚えてコード入力を行いましょう。

自分の電話帳に入ってる友達の中に既にViberを使ってる人がいる場合、その人たち全員に「Viberを使い始めました」というお知らせが自動的に送られるので、こちらからアプリを登録した旨を連絡する必要は無いです。

電話帳のALL表示で全部が表示されていなければ、More→Settings→Show all contactsにチェックをにしたら全部表示されます。

無料なのでセキュリティー(プライバシー保護)に懸念はありますが、とても便利なアプリだと思います。
通話ができない状況であれば、テキストチャットも可能なのでテキスト伝言もできます。

Viberアプリ、通話料がかからないので電話会社は困ると思いますが、凄くおすすめです。

アンドロイドマーケット「無料通話アプリViber」

♪Skype
○メリット
普及している
音質が良い
ユーザー登録が必要な分、匿名的に使用する事が可能
×デメリット
3Gでは不安定
ユーザー登録が必要
常駐させなくてはいけない

♪Viber
○メリット
音質が良い
ユーザー登録が必要ない
電話帳と連携する
プッシュ通知対応のため、常駐の必要がなくバッテリーの持ちが良い
SMS認証でなりすまし不可
×デメリット
パケット代がかかる(定額だったら良いですが)
Viber社に連絡先データを送信する事になる。

2011年12月21日 |大阪のWEBデザイナー ホームページ作成 このエントリーをはてなブックマークに追加  
WEBアシスタント、プログラマー、弟分募集!

WEBアシスタント、プログラマー、弟分募集!

当方では、ホームページ作成やandroidアプリ開発などの業務において、開発のサポートをしていただける方を募集しております。

才能を眠ったままにしていませんか?

私自身は、どこかに就職をする事もなく鹿児島から大阪に上京してきて、なんとかかんとかWEBデザイナーとして活動をはじめ8年目になります。これからは私自身の経験やスキルを環境に恵まれず才能を眠らせている若者にアウトプットしたい気持ちがあり、共に面白いものを作り人間的にも大きく成長していければと考えております。

・明るく元気な人
・自分で考れる人
・九州男児(実家は九州)

実務がなくても当ホームページに共感してくれてる方、私に興味のある方(笑)、新しいWeb、アンドロイドスマートフォン、twitterやfacebookなどのソーシャルメディア、ものづくりが好きで向上心を持っている方であればお願いしたいと思います。

※ 会社など組織で働きたいと思ってる方は、この募集は向いていないと思います。

♪ 募集職種

WEBアシスタント
・Web標準(html5/XHTML/CSS)でのコーディングができる方・学びたい方
・MovableTypeまたはWordPressを利用したホームページの構築ができる方・学びたい方

WEBプログラマー
・PHP、Javaなどのプログラム言語がかける方(WEBサービスやandroidアプリ開発)

♪ 報酬

・即戦力の方は案件ごとに報酬
・実践で学びたい方は相談(スキルにより報酬)

願わくば、ある程度下記に当てはまる方を探しております(笑)

・ギターが弾ける(楽器が弾ける)
・スポーツが好き
・犬好き
・煙草を吸ってない人
・iPhoneよりAndroid
・原付以上車輌免許
・29歳以下

このホームページが好き(読者)で、チャンスが欲しい方は、
メールフォームより自己紹介facebookアカウントを添えて声をかけていただければと思います。

2011年12月 2日 |大阪のWEBデザイナー ホームページ作成 このエントリーをはてなブックマークに追加  
【最新】facebook いいねボタン設置時のOGP設定方法♪

facebook いいね!ボタン設置時のOGP設定方法♪

ホームページやブログにいいね!ボタンを設置しただけじゃ意味が無い!
何故ならば、いいねボタンを設置しただけじゃ友達のニュースフィード(ウォール)には表示されないからです!
これでは幾らいいねボタンをクリックしても(して貰っても)友達には何にも伝わりません(爆)

そこで対処法としまして、htmlを知らない人には難しいことかも知れませんがOGPタグをhtmlのmeta部分に挿入する必要があります。

OGPとは?

OGPの正式名称は "Open Graph Protocol" と言い、ホームページやブログの記事をソーシャルグラフに流すための規格というべきものです。
OGPは、facebookだけの規格というわけではなく、google+、gree、mixiなどでも使われております。

OGPのルール通りにhtmlを書かないとfacebookのシステムがホームページやブログの情報を上手く理解できず、いいねボタンをクリックされても記事が友達のニュースフィードに表示される事はありません。

OGP対応していないページ上のいいねボタンをクリックした時は、いいねボタンをクリックしてくれた人の"プロフィール"(個人のウォール)には表示されるのですが、"ニュースフィード"には表示されないという事です。
誰かが意図的にプロフィールページを見てくれない限り、いいねされた記事の内容には全く気が付きません。
せっかくいいねボタンをクリックして貰っても、他の人の目に触れる事が少ないので、拡散の確立はかなり少ないと言っていいでしょう。

しかし、OGPタグを挿入する事で、いいねボタンを押して貰った時にホームページやブログ記事がより多くの人の目に触れるようになります。

OGP設定方法

ホームページやブログのhtmlにOGPタグを挿入する事で対応できます。

先ずその前に、いいね!ボタンを設置して、且つアプリIDを取得する事をお忘れなく。
いいね!ボタン作成 - Facebook開発者
fb:app_id アプリ作成画面

1つは、<html>タグにxmlnsを追加します。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

もう1つは、<head>~</head>内にOGPタグを追加します。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" />
<meta property="og:description" content="記事の説明" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:locale" content="言語" />
<meta property="fb:app_id" content="facebookのアプリID" />

OGPタグについての詳細は、facebook developersページを参照にして下さい。
Open Graph protocol - Facebook開発者

”og:image”メタタグは、意図的に外しても良いです。
(facebookやgoogle+では、本文内やサイト内の画像を自動で取得する為)

OGPタグの動作確認

以前は「URLリンター」というページがあったのですが、現在では「Debugger」というネーミングに変わり、OGPタグが正しく認識されているかを確認できます。
Debugger

もし、必須になっているOGPタグが挿入されていないと"Required Property Missing"と警告が表示されます。

まとめ(OGPタグを挿入するメリット)

♪ 友達のニュースフィード(ウォール)に表示される。
facebookのいいね!ボタンを設置するだけでは、いいねボタンを押しても友達のニュースフィードには表示されないので、ホームページやブログのhtmlにOGPタグを挿入する事により、友達のニュースフィード(ウォール)にもいいねボタンがクリックされた記事が表示がされ、記事の拡散率も向上します。

♪ ニュースフィードでの表示内容を指定できる。
OGPタグを挿入する事で、記事の内容にそった表示が可能。

♪ いいねボタンをクリックしてくれたユーザーに記事の更新通知が送れる。
OGPタグを挿入すれば、普通のfacebookページとは違う、いいねボタンをクリックした(された)"記事専用のfacebookページ"が生成されます。記事を更新すれば、この記事にいいねをしてくれたユーザーに記事の更新通知が送信できます。

いいねボタンを設置するだけでは勿体無い!
是非、OGPタグ挿入のひと手間をお忘れなく!

※ facebookの仕様はよく変わるので、タイミングによってはOGPが反映されなかったりとエラーやバグがある時がよくあるかも知れません。

2011年11月20日 |大阪のWEBデザイナー ホームページ作成 このエントリーをはてなブックマークに追加  
Wordpress|アイキャッチ画像(サムネイル)を新着記事一覧に表示する方法

Wordpress|アイキャッチ画像(サムネイル)を新着記事一覧に表示する方法

WordPress(ワードプレス)のバージョン3.xから”アイキャッチ画像”という機能が追加されました。

”アイキャッチ”というネーミングは「愛を取る」という意味合いではなく(ある意味近いか?)、「ユーザーの目を惹く」という意味で、記事ひとつひとつの印象付けの為のサムネイル画像を表示させる機能です。

アイキャッチ画像を記事に設定(登録)しておけば、記事に関連するページのサムネイルやヘッダー画像としても利用が可能です。

ここではホームページのトップページやサイドバー(最新の投稿)などに表示するアイキャッチ画像付き記事一覧(エントリータイトルリスト)の表示方法を綴ります。カスタムフィールドやプラグインを使うことなく実装できますし、ポータルサイトなどにも使え、簡単シンプルかつ凄く使えるソースだと確信致します(笑)

ブックマークなどをしていただき辞書的にいつでも振り返り活用していただければと思います♪

縦横51pxのアイキャッチ(サムネイル)画像付きの新着記事を6件表示するソース
<ul class="blog">
<?php query_posts('showposts=6'); 
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" style="float:left; margin-right:10px;">
<?php the_post_thumbnail(array(51,51)); ?></a>
<a href="<?php the_permalink(); ?>" style="width:300px; padding-top:8px;"><?php the_title(); ?></a> 
</li> 
<?php endwhile; endif; wp_reset_query(); ?> 
</ul>

※ 数値は任意でお書き換え下さい。

”showposts=6”の数字を変更することで新着情報(新着記事)の表示件数が変更できます。
”(array(51,51)); ”は、縦51px、横51pxという数値です。

Wordpress管理画面(ダッシュボード)の”メディア設定”ページでのサムネイルのサイズの設定もお忘れなく。


<?php add_theme_support( 'post-thumbnails' ); ?>

”テーマ編集”画面にて、functions.php(テーマのための関数)に上記ソースの記入をお忘れなく。
functions.phpというファイルが存在しなかったら新たに作りましょう。

お試しくださいませ。

2011年11月17日 |大阪のWEBデザイナー ホームページ作成 このエントリーをはてなブックマークに追加  
1  2  3  4  5  6  7  8  9  10  11