2011年 6月 の投稿一覧

WordPressでプラグインを使わないカスタマイズ

WordPressにはたくさんの便利なプラグインがある。

しかし、なるべくプラグインを使わずにWordPressをカスタマイズする方法第2弾。
今回は「カスタムメニュー」。

カスタムメニュー

こちらも、最近お気に入りでWordPressでのサイト制作では毎回使用するようになった機能だ。

functions.phpの編集

まずは「functions.php」。
以下のコードを追加する。

register_nav_menus( array( '○○○' => __( '×××' ) ) );

「○○○」と「×××」の部分に任意で名前を付ける。
「×××」の部分がテーマ内のメニューの場所となる。
複数つくることもできる。

テンプレートファイルの編集

そして、テーマ内のカスタムメニューを表示させたい場所に以下のコードを追加。

wp_nav_menu();

様々なパラメータが設定できる。
詳細はこちらからを参照。

メニューの作成

管理画面内の「メニュー」から、メニューを作成する。

メニュー作成

作成したメニューを先程作った場所に設定すれば完成。

メニュー作成

以前ならテンプレートタグで作っていたメニューも管理画面から行えるようになる。

WordPressでなるべくプラグインを使わずカスタマイズする

WordPressにはたくさんの便利なプラグインがある。
昔のバージョンと違い管理画面内から手軽に追加することもできるようになった。
しかしテーマによってデザインがまとまらなかったり無駄なコードが増えてしまったり思うようにいかないこともある。
そこで、今日はなるべくプラグインを使わずにWordPressをカスタマイズする方法第1弾。

アイキャッチ

今や最初から実装されているテーマがほとんどだが管理画面内の一覧でも設定したアイキャッチが確認できれば、なお便利だ。

functions.php

まずはfunctions.php。

add_theme_support( 'post-thumbnails' );

これでとりあえずはアイキャッチが使えるようになる。

ループ内にコードを記述

if ( has_post_thumbnail() ) {
<?php the_post_thumbnail(); ?>
}

管理画面の一覧にも


/* 投稿とページ一覧にもアイキャッチをサムネイル表示 */
if ( !function_exists('fb_AddThumbColumn') && function_exists('add_theme_support') ) {

// for post and page
add_theme_support('post-thumbnails', array( 'post', 'page' ) );

function fb_AddThumbColumn($cols) {

$cols['thumbnail'] = __('Thumbnail');

return $cols;
}

function fb_AddThumbValue($column_name, $post_id) {

$width = (int) 35;
$height = (int) 35;

if ( 'thumbnail' == $column_name ) {
// thumbnail of WP 2.9
$thumbnail_id = get_post_meta( $post_id, '_thumbnail_id', true );
// image from gallery
$attachments = get_children( array('post_parent' => $post_id, 'post_type' => 'attachment', 'post_mime_type' => 'image') );
if ($thumbnail_id)
$thumb = wp_get_attachment_image( $thumbnail_id, array($width, $height), true );
elseif ($attachments) {
foreach ( $attachments as $attachment_id => $attachment ) {
$thumb = wp_get_attachment_image( $attachment_id, array($width, $height), true );
}
}
if ( isset($thumb) && $thumb ) {
echo $thumb;
} else {
echo __('None');
}
}
}

// for posts
add_filter( 'manage_posts_columns', 'fb_AddThumbColumn' );
add_action( 'manage_posts_custom_column', 'fb_AddThumbValue', 10, 2 );

// for pages
add_filter( 'manage_pages_columns', 'fb_AddThumbColumn' );
add_action( 'manage_pages_custom_column', 'fb_AddThumbValue', 10, 2 );
}

以上、最近お気に入りのカスタマイズでした。

facebookユーザーが企業のページに求める物とは?

企業のfacebookページからユーザーはどんなアクションを?

like
facebookユーザーが企業のページになにを求めているのでしょうか?企業のfacebookページからどんなアクションをおこすのでしょうか?
「Facebookにおける企業の公式ページに対するユーザー意識調査」からわかることがあります。
facebookにおける企業の公式ページに対するユーザー意識調査»
日本でも多くのfacebookユーザーがすでにfacebook内の企業公式ページを活用し、
ページの「いいね!」ボタンを押している。
そしてユーザーの約7割がその企業に対して何らかのアクションを起こしているという調査結果。

さらには、Facebook内の企業公式ページに「いいね!」を押した人の3割以上は、実際に売上に貢献ともあります。

「いいね!」から売上に!

企業のfacebookページで価値のある情報やfacebookユーザーに限定したサービス等を提供することで、ファンを増やし売上につながる事が確立されたのではないでしょうか?
「いいね!」を押したくなるコンテンツがもちろん必要ではあるが、
facebookとビジネスの連動・企業のfacebookページ構築はビジネスを大きく発展させるものでしょう。

松本市のホームページ制作会社のSEO対策からfacebookアプリ開発まで

松本市でホームページ制作して多くのクライアント様と知り合いました。そして、WEBに理解のあるクライアント様は、ホームページ運営担当を設置して確実に売上を伸ばしていただいてます。見込み客を呼び込むホームページは、私たちのようなクリエーターだけがいくら頑張っても不可能です。日々のクライアント様の努力が必要となります。しかし、全ての業態が売れるホームページを作ったからと言ってビジネスが成果が顕著に現れるわけではありません。

行列の出来るホームページとfacebookについて

実績の上がるホームページの業態

ホームページを利用して販売実績が上がりやすい業態は以下の通りです。

  • 建設会社
  • リフォーム会社
  • 全国をターゲットにした物販店
  • オーダーメード店
  • 旅館ホテル
  • 観光スポット
  • 特殊なサービス
  • 不動産サービスなど

地域に根ざしたビジネスで例えば飲食店などは、宴会や結婚式の二次会などをするお店なら効果は期待できます。

もし、あなたのビジネスが上記になくても
もし、あなたのビジネスが上記にあってもそれなり効果が感じられないのなら
私たちにご相談ください。現在より10〜20%の売上拡大を目指してサイトを構築致します

全国のホームページを制作・コンサルティングを行なっている私たちがご相談にのります。

SEO対策について

Googleが以下のようにSEO業者選びについて警告をしています。私たちは以下の項目をほぼ満たしています。
SEO 業者に確認すべき質問には次が挙げられます。

過去の事例のサンプルを見せてもらい、成功事例を紹介してもらう。
Google のウェブマスター向けガイドラインに従っているか。
通常の検索を補完するオンライン マーケティング サービスやアドバイスを提供しているか。
期待される結果とその日程、成果を測定する方法。
同業種での実績。
国内/地域での実績。
外国語サイトの開発経験。
最も重視している SEO 技術。
創業年数。
連絡方法。サイトに加えたすべての変更に関する情報、およびアドバイスの内容に関する詳しい情報とその理由を伝えてくれるかどうか。

Facebook T-shirt

facebookアプリ開発!

この記事の当初で紹介したホームページで売上を拡大したクライアント様は、先日お会いしたときにfacebookに強い興味を抱いていました。私たちは、すべにfacebookのアプリを開発し、全国向けのECサイト(ショッピンサイト)を運営しているクランアント様の一部においては、facebookページのアプリ構築も行っております。ローカルを主体としたビジネスや上記のホームページを作っても効果が得にくいサービスのビジネスであってもfacebookのページの構築はビジネスの発展に大きな意味を果たします。

後記:
ホームページ担当まで用意してホームページを作成されたクライアント様は多くの利益を上げておられます。また、忙しいなか経営者様自らブログを更新されているクライアント様もいらっしゃいます。私たちの仕事は、WEBに詳しくないクライント様にWEB威力としうものを知ってもらうことが大事な仕事だと感じました。

WordPressのビジュアルエディタと実際の表示を合わせる

WordPressのビジュアルエディタと実際の表示を合わせる

WordPressのビジュアルエディタは実際の表示をプレビューしながら投稿や固定ページを作成できるわけですが、スタイルシートも編集に反映されたらより便利です。
特にクライアントに納品するWordPressサイトであれば、使える機能かもしれませんね。
今日はその方法を紹介します。

functions.phpを編集

functions.phpに以下のコードを記述をします。(※<>は全角で書いています。実際は半角にします。)

<?php
add_editor_style(‘editor-style.css’);
?>

ビジュアルエディタ用のCSSの設置

上記コード内の「editor-style.css」がビジュアルエディタに適用させるスタイルシートです。
テーマディレクトリ直下に「editor-style.css」を作成するとビジュアルエディタに反映されるというわけです。

CSSを編集

作成した「editor-style.css」に、通常どおりスタイルを記述するとビジュアルエディタに反映されます。
ビジュアルエディタ用に独立したCSSなので好きに記述して構いませんが、実際の表示に合わせる目的であれば…

<?php
php the_content();
?>

…に適用させているスタイルに近い記述が必要になります。
是非お試しください。

これからのWebサイトはFacebookの連動が必須?

Webサイトの用途や利用方法によりサイト構築は様々なのだが、近年の企業のWebサイトでは、クライアントが自由に更新できるCMSを使用したWordpressやMovable Type等が一般的なサイト構築になっている。
SEOや更新の利便性に優れたCMSを使ったサイトだが、これからのWebサイトはどのように変わっていくのだろうかを考える。
スマートフォンやタブレット等の普及によりWebというもの自体が数年前よりかなり身近になった。外出先や通勤時間などでもfacebookやTwitterなどSNS楽しむ人も格段に増えた。
WebサイトもTwitterでのツイートがサイトに反映されたりfacebookの「いいね!」などがついたサイトも、もうめずらしくはない。
「ユニクロ」がfacebookと連動
Uniqlooks iPhone App Screenshots
また今年の2011年2月17日に「ユニクロ」がfacebookと連動したファッションコミュニティサイト「UNIQLOOKS(ユニクルックス)」を公開した。ユニクロの商品を身に付けたユーザーが投稿するスナップ写真を通じ、情報を共有することができるファッションコミュニティサイトだ。
このようなSNSとの連動や商品をfacebookユーザーに楽しみながら効果的にピーアールしてもらうスタイルが中小企業のWebサイトにも必要とされる時代ももうすぐそこなのであろう。

ギターづくりの思いを載せたWEBサイトづくり

ギター作りの街、長野県松本市のとなりの塩尻市にあるカスタムメードギターショップT’s Guitarsのサイトが完成した。T’s Guitarsの代表の高橋さんは過去のサイトでは1日の半分を顧客のメールの返信に使っていたらしい。時間を簡易見積りシステムの導入でお問合せメールが激減したらしい。多くのサイト構築では、お問合せメールを如何に多く得ることが出来るかを工夫するのだが、その逆となった。

WEBサイトを構築してビジネスが簡素化して便利になることを目的にサイト構築をする場合は少なくない。しかし、このサイト作りの最終的な目標はそこにない。私がこのサイトでアピールしたいのは、このサイトのクライアントであるT’s Guitarsの仕事へのこだわりである。カスタムメイドする顧客と代表である高橋さんがエレキギターに使われる木材や部品一つ一つを顧客と打合せするスタイルにある。人気の国外モデルではないのに多くのミュージシャに愛されるその理由を言葉ではなくサイト全体でアピールしたかったのです。

カスタムメイドギターという世界のコンテンツを十分に発信でききるようCMSのシステムをWordPressにし、Flashを使用せず(一部サイドバーに使用)、スマートフォンやiPadにも最適化した。そして、T’S Guitarsの若きスタッフのギターづくりの想いが届けらればと制作をした。

私のホームページ作りは、クライアントの思いや情熱をデジタル化することにある。

T's Guitars

ティーズギターWEBサイト

@importは時代遅れだって?

これまで様々なサイトに携わってきたが、CSSファイルの細分化には気を使ってきた。
なぜなら、圧倒的に管理が楽だからだ。

制作中もさることながら、再び改修する際も自分が見て分かるようにマークアップし、IDやクラスのネーミングも統一化させ自分の中で定義付けを行うことで、久しぶりに覗く自らが書いたコードにもすんなり順応できる。

@import

その際に多用してきたのが「@import」。
CSSを細分化し(要するにブロックごとに分けたり、用途によって分けたり…)読み込ませることで、加筆や削除を容易にさせておくことができる。全体的には変えないが、ちょっと大がかりに変えるなどという場合に、他の部分に影響なすることなくスムーズな改修ができる。

しかし、@importはレンダリングが遅いのも事実だ。おそらくPHPやCGIを使ったサイトだと軽く不愉快なほど遅く、昔のWordPressやXoopsではかなり体感できるほど読み込みスピードが遅い。

Object Oriented CSS

最近では「Object Oriented CSS」という手法が採用されているとのことだが、調べてみると既に自分も少し導入していた手法であった。
IDにスタイルを定義付ける手法が一般的だ。つまりロケーション(ヘッダやフッタ…)ごとにスタイルを作る。しかし、Object Oriented CSSとはサイト全体クラスを付けて、必要なプロパティを「パーツ」のように付けていく。
簡単に言うと、よく使うプロパティは色々なところで再利用できるということだ。サイト全体をObject Oriented CSSで作ったことはないが、パフォーマンスも向上するのだろうか?
初動制作時の工数はかかりそうだが、これも自分の中のスタンダードを徐々に構築しておくことで、再び改修する時に手間がかからなそうだ。

Object Oriented CSS

CSS3でテキストを効果的に!

CSS3で再定義されたtext-shadow。通常のtextにちょっとしたアクセントがほしい時に効果的だ。見出しやタイトルなどにさりげない「少しのアクセント」として使うことでサイトのクオリティをあげることができる。
あまり強調しすぎると逆に一昔前のWebサイトのようなコテコテ感がでてしまうので注意。

サンプル

WebAthlete

text-shadow: 1px 1px white, -1px -1px #444;

WebAthlete

text-shadow:1px 0 #333,0 1px #333,-1px 0 #333,0 -1px #333;
WebAthlete
text-shadow: 1px 1px 0 #e4f1ff;

さらにCSS3のtransitionで装飾

※マウスオーバーでズーム!

Web Athlete

CSS3のtransitionはアニメーションを設定できるプロパティだが、ここまでくると少し遊びがでてしまう。しかしタイトルロゴ・バナー・メニューなど使いどころを考えてサイトのクオリティアップを。

CSSのcontentプロパティ

CSSの擬似セレクタである「:before」と「:after」はcontentプロパティというものが使える。
これがまたWEBを彩る要素として非常に便利で、最近多用する。
最初は、IE7以下が未対応ということもありリストにちょっとしたアイコンを付けたくても避けてきた手法だが、数々のモダンブラウザの台頭により、そろそろ使っても問題ないだろうと思い、今では躊躇なく使っている。

16進数値文字も挿入可能

contentプロパティ

contentプロパティで挿入出来るものは画像やテキスト。よく使うのは「»」や「«」。リストやボタンに使うことが多い。テキストは2バイト文字でも表示されるようだが、16進数値文字が推奨されている。
ただし、以下の様な一定の規則がある。

  • セミコロンを削除
  • #とxは削除するか0に変換
  • &を¥に変換する

使いようによっては非常に便利で、テキストにオススメアイコンやNew!アイコンをつけたり、ダウンロードリンクにexcelやPDFのアイコンをつけたり、印刷リンクにプリンターのアイコンをつけたり…。用途は様々。
ただし冒頭で話したとおりIE7以下は無視されるので、無くても意味は通じる程度の使い方が今の段階では無難である。

Javascriptの外部化

Javascriptは咋今のWEBをダイナミックなものにした。
Ajaxという言葉が聞かれ始めたころ、本当にWEBが変わり始めたと思ったものだ。

Googleパーソナライズドホーム

Googleパーソナライズドホーム(現iGoogle)がリリースされ初めて見たときに、「何かグリグリ動く!」と衝撃を受け、これがAjaxかと度肝を抜かれた。
あれから、WEBが本当に必要な情報を収集することに便利なものとなり、知人にGoogleパーソナライズドホームをブラウザのホームに設定することを勧めていたのを思いだす。
公開されているJavascriptには便利なものがたくさんあり、今やJavascriptは「これを実現するために使う」という観点だけでなく、WEBを彩る重要な要素の一つだと感じる。

膨大になっていくJavascriptファイル

最近Javascriptを外部化しているライブラリをよくみかける。Javascriptの外部ファイル化自体は昔からあるが、ファイル自体を外部サイトから参照しているのだ。
Javascriptも進化し、当然記述も膨大になっていく。中にはテキストファイルにもかかわらず100KBもあるものがあるそうだ。

google

Google Ajax Libraries API

GoogleはGoogle Ajax Libraries APIというJavascriptライブラリを公開していて、Googleのサーバを使って配布しているそうだ。GoogleはWEBを高速化することを目的としているので、自社の強力なサーバを使って配布している。なんともWEB開発者やWEB管理者にとってうれしいツールだ。自分の制作したサイトを振り返ってみると、知らず知らずのうちにGoogle Ajax Libraries APIを使っていたりする。
JQueryもGoogle Ajax Libraries APIで配布されており、多くのサイト利用されているためキャッシュが効いてWEBページを高速化できるとのこと。
みんなで使うことで相乗効果ということだろうか。Googleはやっぱりすごい。

グローバルメニュー構築の効率化!

Webサイトを制作していくなかでグローバルメニューのデザイン・機能はサイトのナビゲーションとして使いやすく分り易くなくてはならない。マウスオーバーなどで画像を変えたり、ドロップダウンメニューを加えたり閲覧頂くユーザーに簡単に直感的に扱えるメニューでなくてはならない。

グローバルメニューを構築するのに便利なツールの紹介

画像のマウスオーバーを簡単にするJavaScript
JavaScriptのダウンロードはこちら»
便利な点は、上記のスクリプトを記述すると、マウスオーバーで変更したい画像の名前の最後に「_off」「_on」を付け加えるだけ!
2_off
「2.jpg」をマウスオーバー画像にする場合は、
通常時の画像「2_off.jpg」
オーバーの画像「2_on.jpg」
2つを同じディレクトリに置くだけなのだ。

とても簡単なスクリプトなのだが、画像ファイルにスクリプト書く必要もなくソースもシンプル、導入が非常に簡単なので多くの場所で使用することができる。
もっと詳しくはソースがシンプルなJSによるロールオーバー»で紹介されています。

簡単でデザインのいいjqueryドロップダウンメニューscript

JavaScriptでのメニュー機能で参考になるサイト
jQueryプラグイン サンプル(メニュー系):skuare.net
jQueryプラグインを使ったドロップダウンメニューやメガメニューなどが数多く紹介されているサイト。デザインや機能の実装に困った際に参考に。
こちらもJQueryで簡単に作るドロップダウンメニュー紹介
JQueryで簡単に作るドロップダウンメニューいろいろ

JavaScript・jQueryをつかってクオリティの高いグローバルメニューデザインでユーザビリティーをアップ!

まずは、お電話・メールで
ご相談ください。

「ホームページ制作成功の秘密」の
DVDと資料をお届けします。

Web制作に関する相談専用ダイヤル
メールアドレスだけでお問い合わせ
小さな会社のマーケティングとは