Author Archives: 北川 哲平

【PubSubHubbub】Googleの検索エンジンに素早くインデックスさせる

27 2月 17
北川 哲平

No Comments

Googleの検索エンジンにサイトの記事をリアルタイムにインデックスさせる方法を紹介します。

通常、ページを公開してから検索エンジンにインデックス(認識)されるまでには時間がかかります。
この間に、同様の内容を投稿するパクリサイトの方が先にインデックスをされてしまう事を防ぐことができます。

1・ WordPressプラグイン「PubSubHubbub」をインストールします。
(インストール方法はこちら

2・有効化します。

これだけの簡単設定です!

【TinyMCE Aadvanced】記事の投稿・編集時のエディタに便利な機能を付ける(表の作成・動画の挿入等)

31 1月 17
北川 哲平

No Comments

プラグイン「TinyMCE Aadvanced」を導入して、ビジュアルエディタの機能を増やします。
表の作成、動画の挿入などが簡単に行えるようになります。

 

1. 「TinyMCE Aadvanced」をインストールします。

インストール方法は「プラグインのインストールと有効化」をご覧ください。

 

2.「管理画面 > 設定 > TinyMCE Aadvanced」をクリックします。

tinymce_advanced_02

 

3. 「エディターメニューを有効化する。」にチェックが入っていることを確認して下さい。

tinymce_advanced_04
「段落」「B」などのアイコンがあるエリアが、記事・ページ編集時のビジュアルアディタの上部に表示さるツールバーになります。

「使用しないボタン」から使いたいツールがあれば、ドラッグしてツールバーにドロップ。逆にツールバーに不要なアイコンがあれば、「使用しないボタン」にドラッグ&ドロップして下さい。

※ツールバー最上部の「ファイル」「編集」などのメニューは外せません。
しかし、「フォントサイズ」「フォントファミリー」以外のほとんどのツールが入っていますので、設定画面でボタンを網羅せずとも大丈夫です。

※ビジュアルエディターの画面ではアイコンの説明がありませんが、アイコンの上にカーソルを載せると、下の画像の様に説明が出てきます。分からないときはお試しください。
tinymce_advanced_01_c

 

4. 「設定」を施します。

tinymce_advanced_05_2

リストスタイルオプション → リストに付ける黒丸等の記号のスタイルを変更できる。

コンテキストメニュー → 右クリックするとエディタ独自のメニューが出るようになる。

代替リンクダイアログ → tinymce_advanced_05_3をクリックすると、リンク専用のダイアログが開くようになります。

フォントサイズ → ツールバーにある「フォントサイズ」で選択できるサイズ設定を変えます(通常は8pt 10pt 12pt…)

 

5. 「高度なオプション」の「段落タグの保持」にチェックを入れます。

tinymce_advanced_05_4
これは、テキストエディターにソースコードを記述した時、多くの改行を設けたい時に役立つ機能です。
こちらにチェックを入れていない状態ですと、保存時や、右上の「ビジュアル」「テキスト」タブを切り替えた時、文章の改行を意味する<p>や<br />タグが自動で削除されてしまうことがあります。それを防ぐための機能です。

下記は、それぞれ「ビジュアル」「テキスト」タブを切り替えた場合の検証結果です。

<段落タグの保存>にチェックを入れていない時
tinymce_advanced_06

<段落タグの保存>にチェックを入れている時
tinymce_advanced_06_02

 

6. 設定が終わりましたら変更を保存をクリックして終了です。

           

このテンプレートのおすすめ機能

 ★ テーブル(表)作成機能

tinymce_advanced_table01
ツールメニューの「テーブル」かtinymce_advanced_table02アイコンをクリックするとテーブルが作れます。

上の画像のように、マウスを載せるとボックスが青くなります。その分の数のセルがあるテーブルを作成できます。

tinymce_advanced_table03
表にカーソルを載せた状態で「テーブル→表のプロパティ」をクリックすると、ダイアログが開きます。
tinymce_advanced_table04
ここで、枠線の太さ、線や背景の色、文章の配置等を指定することができます。

また、「テーブル→セル→セルのプロパティ」、「テーブル→行→行のプロパティ」でも、背景色や文章の配置など、同様の設定を行うことができます。

tinymce_advanced_table05
セルを2つ以上またがって選択し(画像の青い部分が選択中のセル)「テーブル→セル→セルの結合」を選ぶと、セルを結合させることができます。
分割も同じように出来ます。

表そのものを削除したいときは、必ず「テーブル→表を削除」をクリックして下さい。
「バックスペース」キーを押しても消えないので、注意して下さい。

 

 ★ 動画の埋め込み

動画の埋め込みをビジュアルエディターから行えます。
htmlコードなどを見ながら埋め込む場所を探すなどしなくて済むので、記事の投稿もストレスレスになります。

tinymce_advanced_08
▲動画の挿入は「挿入→動画を挿入/編集」から行えます。

tinymce_advanced_0802
▲「一般」タブでは、ソースに動画のURLを、サイズに任意の数値を入れます。
▲動画の埋め込みコードが有る場合は、「埋め込む」タブの所にペーストしてください。
それぞれ上記の方法で記入し「OK」をクリックすれば、動画が埋め込まれます。

 

 ★ テキストの背景色・フォントサイズ・フォントファミリーの変更

WordPressの標準エディタには、テキストの色を変えたり、太字、斜体へ書式を変えることができます。
しかし、フォントや文字の大きさを変えたり、文字の背景に色を敷いてマーカーの様に見せるなどの効果を加えることは出来ませんでした。
プラグイン「TinyMCE Aadvanced」にはそれらの機能も備わっています。


テキストの背景色やフォントサイズの変更方法は、通常の書式設定変更の仕方と同様です。

※フォントファミリーは英字書体のみで日本語書体はありません。バージョンアップにより選べる様になるかもしれませんが、今のところ期待はできません。ご注意下さい。

【Welcartカスタマイズ】「商品」カテゴリー専用レイアウトを作る(PHP/上級者向け)

30 1月 17
北川 哲平
,
No Comments

「商品」カテゴリー専用レイアウト

「商品」カテゴリーや、その子カテゴリー(「新商品」等)だけ独自のレイアウトを使いたい、そんな時にはwordpress条件分岐を指定します。

<?php if (is_category(‘item’) || cat_is_ancestor_of(get_category_by_slug(‘item’)->term_id, $cat)) : //以下、商品カテゴリーの時 ?>
<!– ここに商品カテゴリー・その子カテゴリーに表示させる内容 –>
<?php else : //商品カテゴリーで無い時 ?>
<!– 商品カテゴリー・その子カテゴリーに表示させない内容 –>
<?php endif; //商品カテゴリーでない場合:終了 ?>

上記の「is_category()」「cat_is_ancestor_of()」というのが条件分岐タグです。
「if():」の括弧内に条件分岐タグを入れると、「もし【item】というスラッグ名のカテゴリーページだったら」という意味になります。

これを、既存のテーマに適用します。

1. 使用テーマの「category.php」又は「index.php」を開き、以下の部分を探します。

<?php while ( have_posts() ) : the_post(); ?>
~~ 中略 ~~
<?php endwhile; ?>

while ( have_posts() ) : ~~ endwhile; の部分はループと言って、記事を繰り返す部分になります。
この間に記事のタイトルや内容、投稿日等の情報が入っています。

2. (1)のループの間を囲うようにソースを追加します。

<?php while ( have_posts() ) : the_post(); ?>
<?php if (is_category(‘item’) || cat_is_ancestor_of(get_category_by_slug(‘item’)->term_id, $cat)) : //以下、商品カテゴリーの時 ?><!– ←この行を追加 –>
<?php else : //商品カテゴリーで無い時 ?><!– ←この行を追加 –>
~~ 中略 ~~
<?php endif; //商品カテゴリーでない場合:終了 ?><!– ←この行を追加 –>
<?php endwhile; ?>

これで、商品カテゴリーの時に「元々の記事レイアウト」が表示されないようになります。

3. 「//以下、商品カテゴリーの時」の直後の行に、商品記事専用レイアウトのテンプレートを作っていきます。
以下を、<?php if (is_category(‘item’) || cat_is_ancestor_of(get_category_by_slug(‘item’)->term_id, $cat)) : //以下、商品カテゴリーの時 ?>と<?php else : //商品カテゴリーで無い時 ?>の間に入れてください。

<?php if ( usces_is_item() ) : //以下、商品がある場合 ?>
<?php usces_remove_filter(); ?>
<?php usces_the_item(); ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(‘usces_item_article’); ?>>
<div class=”usces_item_content”>
<div class=”usces_item_photo”><a href=”<?php the_permalink(); ?>”><?php usces_the_itemImage(0, 150, 150); ?></a></div>
<h3 class=”usces_item_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<?php while (usces_have_skus()): ?>
<div class=”usces_item_price”><?php usces_the_itemPrice() ; ?>円<?php usces_guid_tax(); ?></div>
<div class=”usces_item_cart”>

<?php if(usces_sku_num()==1)://SKUが1つの場合 ?>
<?php if( usces_have_zaiko() ) :  //在庫がある場合 ?>
<form action=”<?php echo USCES_CART_URL; ?>” method=”post”>
<?php if (usces_is_options()) ://オプションを表示 ?>
<?php while (usces_have_options()) : ?>
<?php usces_the_itemOptName(); ?>:<?php usces_the_itemOption(usces_getItemOptName(),’ ‘); ?><br>
<?php endwhile; ?>
<?php endif;//オプションここまで ?>
<div class=”usces_item_skubtn_wrap”><?php usces_the_itemQuant(); ?><span class=”usces_item_quant”><?php usces_the_itemSkuUnit(); ?></span><?php usces_the_itemSkuButton(__(‘Add to Shopping Cart’, ‘usces’), 0); ?></div>
<?php echo apply_filters(‘single_item_multi_sku_after_field’, NULL); ?>
<?php do_action(‘usces_action_single_item_inform’); ?>
</form>
<div class=”usces_item_zaiko”><?php usces_the_itemZaiko(); ?></div>
<?php else : //在庫が無い場合 ?>
<div class=”usces_item_zaiko”><strong><?php usces_the_itemZaiko(); ?></strong></div>
<?php endif; //在庫有無の条件分岐:終了 ?>
<?php else://SKUが2つ以上ある場合 ?>
<a href=”<?php the_permalink(); ?>#itempage” class=”usces_item_cart_btn”>購入はこちら</a>
<?php endif; ?>
</div><!– end.usces_item_cart –>
<?php break; endwhile;?>
</div>
<p class=”usces_item_code”><?php usces_the_itemCode(); ?></p>
</div>

<?php do_action(‘usces_action_single_item_outform’); ?>

<?php else: //以下、商品が無い場合 ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(‘usces_item_article’); ?>>
<h3 class=”usces_item_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<div class=”usces_item_photo”><?php usces_the_itemImage(0, 150, 150); ?></div>
<div><?php echo $post->post_excerpt; ?></div>
<a href=”<?php the_permalink(); ?>” class=”usces_item_cart_btn”>詳細はこちら</a>
</div>

<?php endif; //商品がある場合:終了 ?>

4. 最後に、スタイルシート(style.css)に以下を追加すると、商品の横並びレイアウトが出来ます。

.usces_item_article{
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
width: 150px;
padding: 10px;
margin: 10px;
box-sizing: initial;
}
.usces_item_title{
font-size: 16px;
margin: 0;
padding: 0 0 0.5rem;
line-height: 1.5;
}
.usces_item_price{
color: red;
font-weight: bold;
}
.usces_item_cart{
border: #888 dotted 1px;
padding: 9px;
margin: 5px 0;
font-size: 90%;
}
.usces_item_zaiko{
font-size: 85%;
text-align: right;
}
.usces_item_skubtn_wrap input{
width: 17%;
text-align: center;
font-size: 14px;
}
.usces_item_skubtn_wrap input.skubutton{
display: inline;
display: inline-block;
width: 72%;
margin: 5px 0;
font-size: 13px;
}
.usces_item_quant{
font-size: 11px;
display: inline-block;
width: 8%;
line-height: 1.2;
}
.usces_item_code{
font-size: 11px;
opacity: 0.6;
}
.usces_item_cart_btn{
display: block;
text-align: center;
font-weight: bold;
}
.usces_item_cart .iopt_radio_label{
padding-left:0.5em;
}

 

【Welcartカスタマイズ】Welcart商品用のアーカイブページを作る(PHP/上級者向け)

25 1月 17
北川 哲平
,
No Comments
※この記事で解説する方法では、FTPソフト等でファイルをアップロードする環境が必要です。
※既存のテンプレートファイルを変更するので、子テーマの利用をお勧めします。

通常のアーカイブページに、価格等の情報を加える

商品一覧は、「商品」のカテゴリー専用アーカイブページを開くと表示されます。
(例:httpss://sample.com/category/item/ 等)
しかし、Welcart向けでない既存のテーマを使っている場合、ここに価格などの情報は表示されません。

なので、価格を表示させるためのカスタマイズを行います。

【今回利用するファイル】
wp-contnt/themes/<現在使用中のテーマ名>/category.php
または
wp-contnt/themes/<現在使用中のテーマ名>/index.php

1. 使用テーマの「category.php」又は「index.php」をダウンロードするか、【左サイドバー>外観>テーマの編集】の右エリアから選択します。

2. (1)のファイルを開き、「the_content();」と記述されている場所を探します。
※ テーマによって「the_content(‘more’);」等、括弧内に記述がある場合もあるので、検索するときは「the_content」と記号抜きで探して下さい。
※「the_content();」の記述が無いときは、「get_template_part」という記述を探して下さい。(詳細はこちら)

3. 以下の内容と(2)の部分を差し替えます。

<?php if ( usces_is_item() ) : //以下、商品がある場合 ?>

商品名  :<?php usces_the_itemName(); ?><br>
商品コード:<?php usces_the_itemCode(); ?><br>
<br>

<?php while (usces_have_skus()): //SKUの数だけその情報を呼び出します ?>

SKU名 :<?php usces_the_itemSkuDisp(); ?><br>
SKUコード:<?php usces_the_itemSku(); ?><br>
価格 :<?php usces_the_itemCprice(); ?>円<?php usces_guid_tax(); ?><br>
売値 :<?php usces_the_itemPrice() ; ?>円<?php usces_guid_tax(); ?><br>

<?php
break; //SKUを1回呼び出したら終了します。
endwhile; //SKU情報呼び出しを終了します。
?>

<br>
抜粋   :<?php echo $post->post_excerpt; ?><br>
画像   :<?php usces_the_itemImage(0, 150, 150); //’0’の数値を増やすことで、サブ画像を表示できます ?><br>
画像URL  :<?php usces_the_itemImageURL(0); //’0’の数値を増やすことで、サブ画像のURLを取得します ?><br>
本文   :<?php echo do_shortcode($post->post_content); ?><br>
<br>
<a href=”<?php the_permalink(); ?>#itempage”>購入はこちら</a>

<?php else : //以下、商品が無い場合 ?>

<?php the_content(); //(2)で探し出した「the_content();」の記述をそのままコピーするのが好ましいです ?>

<?php endif; //商品が無い場合:終了 ?>

価格以外にも、一通りの独自タグを掲載しました。
取捨選択してご利用下さい。

※SKU名・SKUコード・価格・売値は、の間でのみ取得することが出来ます。
正しくは、以下のコードの【この部分にSKU用 情報取得タグ】部分にのみ入れて下さい。

<?php while (usces_have_skus()): //SKUの数だけその情報を呼び出します ?>
【この部分にSKU用 情報取得タグ】
<?php
break; //SKUを1回呼び出したら終了します。
endwhile; //SKU情報呼び出しを終了します。
?>

通常のアーカイブページに、カートボタンも付ける

今度は、商品一覧ページに表示された個々の商品に、カートボタンを設置してみます。

前回の(3)においてコピペするコードに、以下のものを追加します。

<!– 購入ボタン・ここから –>
<?php if( usces_have_zaiko() ) ://在庫がある場合 ?>
<?php if(usces_sku_num()==1)://SKUが1つの場合 ?>
<form action=”<?php echo USCES_CART_URL; ?>” method=”post”>
<?php if (usces_is_options()) ://オプションを表示 ?>
オプション名:セレクト値<br>
<?php while (usces_have_options()) : ?>
<?php usces_the_itemOptName(); ?>:<?php usces_the_itemOption(usces_getItemOptName(),’ ‘); ?><br>
<?php endwhile; ?>
<?php endif;//オプションここまで ?>
購入ボタン:<?php _e(‘Quantity’, ‘usces’); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php usces_the_itemSkuButton(__(‘Add to Shopping Cart’, ‘usces’), 0); ?>
<?php echo apply_filters(‘single_item_multi_sku_after_field’, NULL); ?>
<?php do_action(‘usces_action_single_item_inform’); ?>
<?php usces_the_itemGpExp(); ?>
</form>
<?php else://SKUが2つ以上ある場合 ?>
<a href=”<?php the_permalink(); ?>#itempage”>購入はこちら</a><br>
<?php endif; //在庫があるかの分岐:終了 ?>
<?php endif; //SKUが1つか2つかの分岐:終了 ?>
<!– 購入ボタン・ここまで –>

上記のコードを、前回SKU名・SKUコード等のSKU情報を入れた場所に入れて下さい。

※商品ボタンは、商品登録の際にSKUを1つのみ登録している場合のみ表示しています。
これは、商品一件に対し【カートボタン】をひとつのみ表示するという体裁をとるためです。

※全てのSKUのカートボタンを表示させたい時は、【break; //SKUを1回呼び出したら終了します。】という行を削除してください。

Welcart専用ウィジェット

19 1月 17
北川 哲平

No Comments

Welcartを有効化すると、専用のウィジェットが追加されます。
ウィジェットの使えるテーマであれば簡単に使える機能です。

ここでは、Welcart専用ウィジェットについて、一つずつ解説します。

※ウィジェットはWordpressに搭載された機能です。
ウィジェットの使い方に関してはウィジェットの設定をご覧下さい。

Welcart お勧め商品

welcart_wiget_01_20170119
お勧め商品をランダムに表示します。
※このウィジェットに商品を表示させるには、カテゴリー「お勧め商品」に商品を登録する必要があります。
タイトル:表示されるタイトル文言
アイコンの表示:タイトルの文言の前にアイコンを表示するかしないかを選択
表示数:表示する商品の数

Welcart カテゴリー

カテゴリー一覧を表示します。
通常であれば全てのカテゴリーを表示しますが、このウィジェットでは特定のカテゴリーの子カテゴリーのみ表示することができます。

「タイトル」「アイコンの表示」はお勧め商品と同じです。
親カテゴリー(スラッグ) :表示したいカテゴリーの親カテゴリーをスラッグで指定します。

デフォルトでは「itemgenre」となっていますが、このカテゴリーはWelcart有効化の時に作られたカテゴリーの一つ「商品ジャンル」です。
「itemgenre」を指定すると、「商品ジャンル」を親(または先祖)として作成したカテゴリーが表示されます。

カテゴリの作成は、左項目の「投稿>カテゴリー」から行うことができます。
≫ 子カテゴリーについての詳しい作り方はこちら

welcart_wiget_02_20170119
↑の画像の様にカテゴリーを作成した場合、「食品」「雑貨」のリンクが一覧に表示されることになります。

また、「食品」の子カテゴリーを作り、親カテゴリー(スラッグ)を「foods」とすると、「食品」の子孫カテゴリーのみ表示することも出来ます。

※そのカテゴリーの商品の登録数が0の場合は、ウィジェットの一覧にもカテゴリーリンクは表示されません。

Welcart ログイン

welcart_wiget_03_20170119会員ログインのための小窓を表示します。
ログインすると、会員名が表示され、ログインしていることがひと目でわかります。

※「タイトル」「アイコンの表示」のみ指定します。詳細はお勧め商品と同じです。

会員システムを利用していなくても表示されますので、利用していない場合はこのウィジェットを取り下げましょう。
(会員システム利用の設定は左項目「Welcart Shop>基本設定」のショップ設定から行えます)

 

Welcart 営業日カレンダー

営業日カレンダーを表示します。
営業日の設定は左項目「Welcart Shop>営業日設定」で行ってください。

※「タイトル」「アイコンの表示」のみ指定します。詳細はお勧め商品と同じです。
k20170111_02

Welcert キーワード検索

キーワード検索と商品カテゴリー複合検索を行います。

※「タイトル」「アイコンの表示」のみ指定します。詳細はお勧め商品と同じです。
<表示されるウィジェット>

フリーワード検索エリア:WordPress標準のサーチ機能です。
商品ページだけではなく、投稿記事、固定ページなどの全ての記事が検索対象となります。
左項目「Welcart Shop>システム設定」ページの「表示モード」にチェックを入れると、検索結果から商品詳細ページが除外されます。

商品カテゴリー複合検索:複数のカテゴリーを指定して絞り込むサーチ機能が使えるようになります。

 

Welcert ベストセラー

売れ筋商品をランキング形式で表示します。
初期値では商品タイトルのみの表示になっています。

※「タイトル」「アイコンの表示」のみ指定します。詳細はお勧め商品と同じです。

表示数:ランキングに表示させる商品数

自動集計:
集計リスト → 過去30日の受注を集計して表示
手書き用リスト → 後述する「手書き用リスト」に登録した商品を表示

手書き用リスト:「自動集計」項目で「手書きリスト」を選択した場合に記述
任意の商品コード(商品登録の際に指定したもの)を記述し、最大10件まで登録できる

 

Welcert ページ

固定ページへのリンクを表示します。
(ページに階層をもたせて表示させたいときは、ウィジェット「カスタムメニュー」がオススメです)

※「タイトル」「アイコンの表示」はお勧め商品と同じです。

ページID(複数はカンマ区切り): 表示したいページのID番号をカンマ区切りで設定。ここが空白の場合は全ページを表示します。

 

Welcart ポスト

指定したカテゴリーの記事のタイトルと抜粋文を表示します。
例えば、「カテゴリー(スラッグ)」の所に「itemreco」と記入すると、おすすめ商品の一覧が表示されます。
その他「お知らせ」カテゴリーなどを用意して、お知らせ一覧を作る時にも役立ちます。

 

Welcart Blog Calender

商品以外の記事のみカレンダーで表示したい時に役立ちます。
通常のカレンダーウィジェットですと商品の記事もアーカイブされてしまうので、それを防ぐためのウィジェットになります。

 

Welcart Recent Posts

商品以外の記事を表示するウィジェットです。
記事のリンク付きタイトルがリストで表示されます。

※私が検証した環境ではうまく機能しませんでした。
ウィジェットを動かす為のphpファイルの以下の部分で商品カテゴリーに登録された記事を除外しているのですが、ここの「USCES_ITEM_CAT_PARENT_ID」という、商品カテゴリーのIDを読み込むための記述が機能していない模様です。
(phpファイルは /wp-content/plugins/usc-e-shop/widgets/usces_recent_posts.php です )

36行目  $r = new WP_Query(array(‘showposts’ => $number, ‘nopaging’ => 0, ‘post_status’ => ‘publish’, ‘ignore_sticky_posts’ => 1, ‘cat’=>-(USCES_ITEM_CAT_PARENT_ID), ‘order’=>’DESC’, ‘orderby’=>’date’ ));

どこかにエラーがあるのかもしれませんが、この原因を究明しようとすると大変なので、ここでは別の方法で商品カテゴリーのIDを取得し動くようにします。

1. 上記の36行目の直前に、以下の記述を追加する。

$cat_id = get_category_by_slug(‘item’);
$cat_id = $cat_id->cat_ID;

2. 上記の36行目の「USCES_ITEM_CAT_PARENT_ID」という記述を「$cat_id」に変更する。

これで正しく表示されます。

【Welcartカスタマイズ】商品説明文の幅を広くしたい(PHP/上級者向け)

18 1月 17
北川 哲平
,
No Comments

※ここでは「商品詳細ページのカスタマイズ(基本編)」において「wc_item_single.php」を作成したことを前提にお話します。

商品説明文の幅を広くしたい

Welcartの専用テーマ「welcart_default」では、商品説明部分が写真の右側にあり、幅が狭くなっています。
また、カートボタンが説明より下に来るため、説明部分が長くなると下までスクロールするまで購入できなくなり、ユーザビリティにもよろしくありません。

有名ショッピングサイトのように、商品写真や説明のための画像などを大きく載せる等、この部分を幅広く使いたい時に、この記事をお役立て下さい。

1. 「wc_item_single.php」を開きます。

2. 「<?php the_content(); ?>」を探します。2つあるのですが、これのどちらも削除します。

3. 「<?php usces_assistance_item( $post->ID, __(‘An article concerned’, ‘usces’) ); ?>」を探します。

4. (3)は関連商品一覧を表示するための記述です。
これよりも上に商品説明が欲しいので、この行の上に「<?php the_content(); ?>」を記述します。

5. 保存した「wc_item_single.php」を更新、またはアップロードして下さい。

 

2枚目以降の写真を、1枚目の写真の下に表示する

Welcartの専用テーマ「welcart_default」では、2枚め以降の写真をページの下部分に表示させています。

ただ、商品説明が長くなると1枚目の写真と間隔が空いてしまいます。

写真は写真、でまとめて見せるために、2枚め以降の写真を1枚目の写真の下に表示させるようカスタマイズします。

1. 「wc_item_single.php」を開きます。

2. 以下の部分を切り取ります。

<div class=”itemsubimg”>
< 中略 >
</div><!– end of itemsubimg –>

3. (2)を、以下の部分の</div>の直前に貼り付けます。

<div class=”itemimg”>
<a href=”<?php usces_the_itemImageURL(0); ?>” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
</div>

4. (3)の部分は、以下のようになります。

<div class=”itemimg”>
<a href=”<?php usces_the_itemImageURL(0); ?>” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
<div class=”itemsubimg”>
< 中略 >
</div><!– end of itemsubimg –>
</div>

 

【Welcartカスタマイズ】 商品詳細ページのカスタマイズ・基本編(PHP/上級者向け)

18 1月 17
北川 哲平
,
No Comments

※この記事で解説する方法では、FTPソフト等でファイルをアップロードする環境が必要です。

Welcartの商品詳細ページは、プラグインが自動的に書き出します。
記事の個別ページにおいて、通常の記事の内容が書き出される代わりに、商品情報が書き出される仕様になっている訳です。

そのため、プラグインの編集を行う必要があると思いがちですが、そうではありません。

この商品詳細ページのためのテーマファイルが存在します。

Welcartの専用テーマ「welcart_default」を利用する

「Welcart」を有効化すると、「welcart_default」というテーマも同時にインストールされています。
このテーマのファイルを一部利用してカスタマイズを行います。

【利用するのは以下のファイルです】
wp-contnt/themes/welcart_default/wc_templates/wc_item_single.php

※上記が無い場合は以下を探して下さい。
wp-contnt/plugins/usc-e-shop/theme/welcart_default/wc_templates/wc_item_single.php

1. FTPソフトを使い、この「wc_item_single.php」をローカルへダウンロード。

2. 「wc_templates」というフォルダを作り、(1)のファイルを入れます。

3. 再びFTPソフトを使い、「wc_templates」フォルダごと、以下のディレクトリにアップロードします。

wp-contnt/themes/<現在仕様中のテーマ名>

使用テーマに沿ったカスタマイズを行う。

このままでは、「wc_item_single.php」は「welcart_default」というテーマに合わせてある状態なので、これを「使用テーマ」に沿った物に変更します。

商品情報は記事の個別ページに書き出されますので、この個別ページのテンプレートファイルを利用します。

1. まずは、現在使用しているテーマの個別ページ用テンプレートファイルをダウンロード

wp-contnt/themes/<現在使用しているテーマ名>/single.php

2. Welcart専用のテーマファイル「wc_item_single.php」をテキストエディタで開き、以下の部分をコピーします。

<div class=”storycontent”> <?php usces_remove_filter(); ?> ~ 中略 ~ </div><!– end of itemspage –> </div><!– end of storycontent –>

3. 今度は(1)でダウンロードした「single.php」を開き、「the_content();」と記述されている場所を探します。
※ テーマによって「the_content(‘more’);」等、括弧内に記述がある場合もあるので、検索するときは「the_content」と記号抜きで探して下さい。

4. (3)に記述されている「the_content();」を削除し、(2)でコピーした内容を貼り付けます。

5. (4)で貼り付けた内容の直前に「 ?>」直後に「<?php 」を記述します。
※念のため、半角スペースも込でコピーペーストして下さい。


※テーマによっては「single.php」の中に「the_content();」が無いものも存在します。

その場合は「get_template_part」という記述を探して下さい。
この記述は、他のテーマファイルの内容を読み込むために使われており、ここで指定してあるテーマファイルに「the_content();」が記述してある可能性が高いです。

例えば、以下のような記述がある場合

get_template_part( ‘template-parts/content’, ‘single’ );

「template-parts」フォルダの中の「content.php」を読み込んでいます。

この「content.php」の内容を全てコピーし、「get_template_part( ~中略~ );」と差し替えて下さい。
上の(5)の様に、差し替えた部分の前に「 ?>」後に「<?php 」を入れるのを忘れずに。


 

動画制作マニュアル

07 4月 16
北川 哲平

No Comments

動画を撮影する際のポイント

 
 
目的(作成する意味)を決める
撮影の前に事前の準備をしっかり行う(環境構築、編集点を減らして時短化)
光に注意
音に注意
カメラに収まる画を想像する
撮影する
 

 

 
◆目的を決める

家族ビデオ・お祝いのメッセージビデオ・セールス動画・ノウハウ動画…
撮影する(見てもらう)目的によって、環境や準備に大きな差が出ます。
はっきりと目的を決めておくことで、撮影後の編集や撮り直しなどの余計な手間を省くことができるので、目的はきちんと決めておきましょう。
 

 

 
◆場所・時間

撮影環境は、平日・週末・早朝・お昼・深夜など、それぞれの撮影するに場所や時間によって変わってくる

神経質なセールス動画を撮影する時は、夜中に撮影する
23時過ぎると、東京でも静か(ただし、夜中のテンションに注意)

環境を構築する上で、物を動かしてはいけないなどの考えを捨てる
プロは環境を支配する

 

 
◆光

素人の方は、光を制御しようとすると「明るくすれば良い」と思いがち
明かりで問題になるのは、時間(朝・昼・夕方や季節などの変化)
カメラは、明るいものと暗いものがあった時、明るいものの方を絞ってしまう→暗い方に人がいた時に真っ暗になってしまう

明るくすることにこだわるのではなく、撮りたい場所にある光が平坦であることにこだわる!
光を考えるうえで大事なことは
・時間的変化をさせないこと
・空間的にムラがない

☆手元の撮影
撮影したものの影を消す、という方法ではなく、最初から光が当たる場所で撮影しておく
(例えば調理方法の説明などで、キッチンのまな板の上で切らないといけないという概念を無くし、光の当たる(影のできない)テーブルにまな板を置いて撮影する)
※手元のみの撮影の場合。引いて全体を撮影する場合は別。

 

 
◆音

撮影前に、必ずカメラを通した音(動画に残る音)で確認する
人の耳で話を聞く場合は、その人の声に集中して聞くことができるので騒がしい場所でも問題ないが、機械の場合は判別ができない
→カメラは機械なので、特にモーター音(室内であれば冷蔵庫やテレビ、レンジや空調)などの高い音をひろいやすい

・音が鳴るかもしれないもの→チェックリストを作り、管理する
・音が鳴っているもの→カメラを通して、音が鳴っていないか確認する

出来上がったもので確認するのではなく、カメラで撮影している状態の音を確認

※1人の場合と複数の場合で、集音する方法を考える

☆ピンマイク
演者の声量を考慮して、マイクの位置を決める
声量が多い方→口元から少し離した位置にしていないと、音が大きすぎて割れてしまう
声量が少ない方→マイクを口元に近い位置にするべき、ただし女性などの場合、マイクに髪の毛がかかってガサガサした音が入ってしまう可能性があるので注意

密閉した空間だと、反響して音にエコーがかかってしまう
→ドア(部屋・トイレ・クローゼットなど)を開けたり、環境が良ければ窓を開けたりして音を抜く

無線機を使っているマイクの場合、送信機と受信機を離していないと、「ビビビビ」などの機械音が入ってしまうことがある
→送信機を付けている位置を左右変えるだけでも音がなくなる可能性あり

外と室内では、室内の方が特に音を気にする必要がある
→外の場合は、見た画(外)でその他の音が聞こえてくるのは分かるが、室内の場合はその他の音が聞こえると気になってしまう

 

 
◆画

撮影をどれだけ完成品に近い状態にものにできているかで、編集の際の手間やストレスが大幅に軽減できる
→編集で直せば良いと考えるのではなく、準備に手間を惜しまない

固定カメラで撮影する場合は、撮影対象物の延長上にカメラを置く(カメラは水平に)
カメラの位置は撮りたい画の真ん中に置く
ルール(人の立ち位置や動かせないものの画面上の位置など)に則って仮決めをしていき、撮りたい画面(完成品)の真ん中にカメラを位置する
人が入る場合、カメラの高さ(目線の高さではなく、見下げたり・見上げたりしていないか)に注意
感じ得ぬ違和感(ストレス)を感じさせてはいけない
見る人の違和感は何と比べられているか→代表的なものがテレビ
つまりテレビと同じように作れば、違和感を感じさせることは少なくて済む

カメラの高さは顎の高さぐらいに水平にしておくとちょうどよい
家の少しの傾きで人の感覚が左右されるように、ノウハウ動画などを作る場合は、平行を取ることを意識することが重要

慣れていない間は、撮りたい画より少し大きめで撮影しておく
(撮れているものは使用サイズを小さくして消すことができるけど、撮れていないものは作れない)

mvm1

撮影する人物などに光を合わせ調整する(汗やテカリなどにも注意、本格的にやる場合はメイクでテカリを抑えたりする)

 

 
◆撮影

1本で撮る場合と、パートに分けて(開始・本編・締め)撮る場合を考える
同じ画の画面(セイムショット)の場合、1本で撮らずに切ると繋げた場合に違和感があるが、後に切り替え効果やサイズ変更などで違和感のないものにできる

コンテンツ(中身)はコンテンツで撮って置き、ターゲットに合わせて前後のみ変えれば、同じノウハウでも印象が変わる
身内やお客様に対してのメッセージ動画やビデオレターの場合は、パートを分けるのではなく1本撮りが基本

顔が大きくなればなるほど、視聴者に圧迫感を与えてしまうため、画の距離感を考える
(朝の番組など、引きで撮影されていることが多い)

mvm2mvm3

1年後フォローメール:【ホームページのほんまる】ホームページの運営はいかがでしょうか?

17 12月 15
北川 哲平
,
No Comments

** ** 様

お世話になります。
Reクリエイト株式会社、WEBマーケティング事業部の○○です。

いつも当社のホームページ制作サービス「ホームページのほんまる」をお引き立ていただき
誠にありがとうございます。

データの納品から約1年ほど経ちますが、
その後の運営状況はいかがでしょうか。

運営が上手いこと行っている方も、
運営が上手いこと行っていない方も、

今後のWEB作業に関しては、
お客様自身の、お客様の会社自身の『時間の価値』を基準にして頂き、

・やるべき範囲があれば「自社運用」
・作業レベルは「当社委託」(必要なときだけお願いできるWEBスタッフとして)
・クリエイティブレベルは「他社委託」
(当社ができる範囲でセンスが合うならやります。⇒できる範囲とその料金はメニュー表参照。https://honmaru.red/menu.html)

 
『自社+当社+他社』の組合せを前提とした機動的なWEB運用を提案致します。

***(ドメイン・サーバーパックを受けられていない場合)***
なお、
『ドメイン・サーバーパック』のサービスを受けられていないお客様につきましては、
納品時のデータ保管は、納品日より1年となっております。(当メール送信から7日間後まで)
今後もお客様のほうでのデータ管理を徹底頂きますようお願いいたします。

今後につきましても、
制作・更新、販促・運用の各種相談・オプションサービスを喜んでお受けいたします。
お気軽にお問い合わせ下さい。

今後もお客様のお役に立てるよう、
当社社員一同、日々精進してまいります。

いつも感謝しております。

それでは、今後ともよろしくお願いいたします。

———————————–
ホームページのほんまる
□□□□□□□□
Reクリエイト株式会社
兵庫県姫路市東駅前町63番地エスリード姫路13F-01
E-mail:info@honmaru.red
ホームページURL: https://honmaru.red
◆———————————◆

6か月後フォローメール:【ホームページのほんまる】ホームページの運営に関しまして

17 12月 15
北川 哲平

No Comments

** ** 様

お世話になります。
Reクリエイト株式会社、WEBマーケティング事業部の○○です。

いつも当社のホームページ制作サービス「ホームページのほんまる」をお引き立ていただき
誠にありがとうございます。

データの納品から約6か月程経ちますが、
その後の運営状況はいかがでしょうか。

制作・更新だけでなく、
販促や制作後の運用方法につきましても、各種マニュアルのほうを順次更新しておりますので、
ホームページの価値を最大化して頂くため、ぜひご活用下さい。

https://honmaru.red/category/top-manual/

また、
マニュアル記載の有る無しに関わらず、

制作後のアフターサポート・プロモーション支援・データの更新・編集など、各種オプションサービスもご用意しております。
下記メニュー表を参考に、ご活用下さい。

https://honmaru.red/menu.html

ご不明な点、ご質問等ございましたら、
お気軽に当メールに返信いただきますようお願い致します。

それでは、今後ともよろしくお願いいたします。

———————————–
ホームページのほんまる
□□□□□□□□
Reクリエイト株式会社
兵庫県姫路市東駅前町63番地エスリード姫路13F-01
E-mail:info@honmaru.red
ホームページURL: https://honmaru.red
◆———————————◆

1か月後フォローメール:【ホームページのほんまる】ホームページの運営に関しまして

17 12月 15
北川 哲平

No Comments

** ** 様

お世話になります。
Reクリエイト株式会社、WEBマーケティング事業部の○○です。

このたびは、
当社のホームページ制作サービス「ホームページのほんまる」をご利用いただき誠にありがとうございます。

データの納品から約1カ月程経ちますが、
その後の運営状況はいかがでしょうか。

先の案内と重なりますが、
一般的に頻度の高い更新・編集業務については、
下記マニュアルを参考に、随時更新・編集業務の際、ご活用頂ければと思います。

https://honmaru.red/category/top-manual/

また、
マニュアル記載の有る無しに関わらず、

制作後のアフターサポート・プロモーション支援・データの更新・編集など、各種オプションサービスもご用意しております。
下記メニュー表を参考に、ご活用下さい。

https://honmaru.red/menu.html

ご不明な点、ご質問等ございましたら、
お気軽に当メールに返信いただきますようお願い致します。

それでは、今後ともよろしくお願いいたします。

———————————–
ホームページのほんまる
□□□□□□□□
Reクリエイト株式会社
兵庫県姫路市東駅前町63番地エスリード姫路13F-01
E-mail:info@honmaru.red
ホームページURL: https://honmaru.red
◆———————————◆

販促活動におけるホームページの存在

28 10月 15
北川 哲平

No Comments

インターネットによるコミュニケーションが広がり、メディアが多様化している今、自社のホームページをマーケティングの中心に位置づける企業も増えています。特に、インターネットと定番メディアとを組み合わせた「メディアミックス」による戦略の必要性が高まりつつあるのです。
 

メディアミックスとは

 
メディアミックスとは、SNSを含めた他の「Web媒体」、雑誌やチラシ、フライヤー、ポスティングなどの「紙媒体」、そしてイベントやセミナー、個別面談などの「リアル媒体」といった、様々な特性を持つ媒体を組み合わせ、最大限の集客効果を得る広告戦略のことを指しています。
ホームページは、制作したら必ず集客に繋がるというものではありません。作ったホームページの効果を最大限に引き出し、集客に繋げるかは、定番であるメディア媒体の特性を活かすことも大切です。
 

メディアミックスによる販促活動

 
これまで「情報を受ける側」だったユーザーは、近年では自ら「情報を発信する側」へと変化していきます。その結果、企業には単に広告を行うだけの縦割りの活動ではなく、ユーザーとの関係性をいかにして構築するかを考える「CRM(カスタマー・リレーションシップ・マネジメント)」の視点が必要になってきたといえるでしょう。CRMで大切なのは、1つのメディア媒体だけで情報を完結させることなく、多くのユーザーと接点を持つこと、そして同じユーザーに対しても様々な場面から情報提供を行い、コミュニケーションを構築することです。
定番メディアの役割は、ホームページへの誘導だけに思われがちですが、実はそれだけではありません。質の高いメディアコンテンツからホームページへ訪れるユーザーは、ページの深い階層まで閲覧してくれる傾向にあり、優良顧客へと繋がる可能性も高いのです。それは、単に集客できるホームページ制作よりも効果的だといえるでしょう。
 

販促活動に欠かせないホームページの存在

 
ユーザーにとって企業ホームページの存在は、メディアミックスの情報の裏づけと確認が行えるもの、そして企業にとってホームページの存在は、より正確でタイムリーな情報の提供が行え、ユーザーとコミュニケーションを図るためのものではないでしょうか。
様々なメディア媒体によって、ユーザーへの認知度・情報の到達度を高めたとしても、実際に来店や消費行動を起こすまでには、企業への信頼や安心、情報の信憑性を高めるための後押しが必要です。そのためには、複数のメディア媒体とホームページをうまく連携させていくことがポイントです。
 

当社では、WordPressを活用した格安のホームページ制作、及び運営支援サービスを行っております。レスポンシブデザインで、タブレットやスマホ対応、独自のカスタムも容易なWordPressで、お客様の状況に応じて1万円コース・3万円コース・5万円コースからお選び頂けます。有料オプションも充実していますので、販促活動に欠かせないホームページ制作のご依頼は、お気軽にご相談ください。

HPのリニューアルについて

28 10月 15
北川 哲平

No Comments

今や企業にとってのHPは必要不可欠のものになり、多くの企業が会社設立と同時にHP作成をしています。そんなHPは企業の顔ともいえるため、魅力的な情報を掲載する必要があります。そして、今あるHPをさらに良いものにしたいという場合はリニューアルすることをおすすめします。
 

HPリニューアルの必要性

 
HPが完成して年月が経つと、掲載している情報もどんどん増え、前よりも見づらくなったり、見た目が古くなったりと運営上の課題や問題がいくつか出てきます。多くの方に見て頂くためには魅力のあるHPを維持しなければならないため、時代の流れに合わせてHPもリニューアルが必要となってくるのです。
 

HPリニューアルが求められるHPの特徴とは

 

○年数が経ちすぎている

ファッションにトレンドがあるのと同じようにHPのデザインにもトレンドがあり、デザインはどんどん変化を遂げています。デザインは閲覧者に大きな印象を与え、集客や売上にも直結する重要な要素でもあるため、HPを作成してから年数が経ちすぎている場合は、リニューアルを検討することをおすすめします。
 

○スマートフォンやタブレットに対応していない

スマートフォンやタブレットの普及に伴い、パソコンだけではなくスマートフォンやタブレットでもインターネットを利用する方が増えています。よって、HPもスマートフォンやタブレット対応にすることでパソコンを持っていない方にも、企業の情報を見てもらうことができます。
 

もしリニューアルの対応が自社でできないという場合は、業者に依頼すると良いでしょう。HPのリニューアルを検討なさっている方やHP作成のご依頼はぜひ、当社へご相談ください。WordPressを活用することで格安でHP作成を行うことができるサービスを提供しております。アクセス解析やSEO対策、スパム対策といった無料オプションも充実しておりますのでご安心ください。また、ページ編集や運営支援、コンサル対応といった有料オプションもあります。HPに関するご依頼ならお気軽にご相談ください。

広告戦略で欠かせないホームページの役割

28 10月 15
北川 哲平

No Comments

良いものを出せば売れる時代は終わり、IT化が進む現代は、豊富な情報を元に商品やサービスを選択できる時代に変わりました。そんな時代だからこそ、お客様に選んでもらうための戦略が必要なのです。その戦略の一つとして挙げられるのが、「広告戦略」です。
 

広告戦略とは

 
マーケティングにおけるコミュニケーションには、広告・PR・販売促進・人的販売・セールスなどの様々な手法があるのですが、その中でも広告戦略は、エンドユーザーの購買意欲を掻き立てて自社の商品やサービスび引き込むプル戦略の代表格です。
広告戦略は多様にあり、取り扱っている商品・サービス、企業の理念やビジョン、競合状況などによって行うべき手法は異なりますが、インターネットの普及が著しい現代では、ホームページを活用したインターネット戦略に期待が寄せられています。
 

今の時代に欠かせないWEB戦略

 
様々な情報が飛び交っている中で企業の独自性を打ち出し、エンドユーザーに選択して頂くためには、ホームページによる広告戦略が欠かせません。ホームページの存在をマーケティングの中核に据えているか否かで企業の将来を左右するといっても過言ではありません。そのため、会社設立時にHP制作を重視する企業が増えているのです。
 

良質なホームページがブランディング化に繋がる

 
「人の印象は第一印象で決まる」といわれているほど、第一印象が与えるインパクトは強く、それを覆すのには時間と労力がかかります。それでは、企業にとっての第一印象とは一体何を指すのでしょうか?
企業の存在を知ってすぐに店舗に足を運ぶ方は少なく、まずはホームページをチェックする方がほとんどです。そのため、企業の第一印象はホームページの良し悪しによって変わります。
印象の良いホームページを制作するためには、企業の理念や商品・サービスの魅力などを分かりやすく伝えられるデザインにするだけでなく、新鮮な情報を提供することも大切です。随時新しい情報が更新されているホームページは好感を持ってもらいやすく、信頼感や安心感を与えてくれます。
 

広告戦略に欠かせない良質なHPの制作のご依頼でしたら、当社にお任せください。
当社ではWordPressという便利なアプリケーションツールを活用することでHP制作を1万円、3万円と格安で行うことができます。
基本サービスは制作作業のみのご提供となりますが、デザインやコンテンツ、制作後のコンサルや運営支援などのオプションサービスのご依頼も承っておりますので、お気軽にお問い合わせください。

ホームページに掲載すべきこと

28 10月 15
北川 哲平

No Comments

ホームページ制作において大切なのが、相手が求めている情報を掲載することです。そうすることで、お客様の満足度も高まり、会社の認知度をより高めることに繋がります。ホームページ作成を依頼する前にはしっかりと掲載する情報をまとめておきましょう。
 

企業情報について

 
ホームページに企業の情報が掲載されていないと、お客様は不安に思うかもしれません。そんなお客様の不安を取り除くためにも、企業名をはじめ、代表者名や所在地、事業内容など、企業の情報を詳しく掲載することが大切です。企業の情報を明確に伝えることでお客様からの信頼度も高めることができます。また、代表者と社員、それぞれの写真やコメントを掲載することで、より身近に感じてもらうことができます。
 

内容が充実したコンテンツ

 
お客様は悩みや疑問を解決する情報を収集するためにホームページにアクセスしているため、見た人に対して役立つ情報を提供することが大切です。役立ちそうだと思ってもらってこそ、商品やサイト自体に興味を持ってもらうことができるため、内容が充実したコンテンツを掲載しましょう。
 
例えば単なる商品やサービス紹介をするのではなく、開発に携わった人の想いを伝えるコンテンツや、質問に答えるコンテンツ、この商品を使うことで得られるメリットを紹介するコンテンツなどがあると良いでしょう。このようにコンテンツの質を高めることで好印象を残し、ホームページの滞在時間にも良い影響を与えてくれます。
 

当社では1万円、3万円という格安でホームページを持って頂けるサービスを行っております。ホームページ作成のご依頼はぜひお任せください。オリジナルデザインや運営支援のアドバイス、コンサルといったオプションをつけることもできますので、クリエイティブな部分をお求めの方も安心してご依頼ください。企業の顔ともなるホームページだからこそ、失態は避けたいものです。ホームページに関することならお気軽にご相談ください。

ホームページ制作におけるビジネスモデル構築

28 10月 15
北川 哲平

No Comments

WEB投資を目的にホームページ制作をする上で重要なのは、制作前にビジネスモデルを明確にすることです。制作目的、ターゲット、どのような方法で利益を得るかなど、明確にしておかないと有益なコンテンツは作成できません。ビジネスモデルの主要素と、インターネットサービスにおけるビジネスモデルのパターンについて紹介します。
 

ビジネスモデルの要素

 
ビジネスモデルはビジネスを行う企業、取引先企業、消費者などそのビジネスに関わる関係者のためにも明確にしておく必要があるものです。
まずは、事業コンセプトとマーケティングモデルを決めなければいけません。それから消費者が何かに対してお金を払い、それをどのようにして受け取るのかといった収益モデルも考えます。さらには提供方法、財務計画などの構想も必要です。ビジネスの内容から収益を得るための手段までを明確にしておくことで事業の全体像がつかめ、効率的に運営することができるのです。
 

インターネットサービスの主なビジネスモデル

 
インターネットサービスにおけるビジネスモデルには、主に4つのパターンがあります。
1つは広告モデル。バナー広告やテキスト広告を表示させて広告料を収入源とするモデルです。他にはサービスの利用料を主な収入源とする安定性の高い課金モデルや、実際にモノを売って代金を得るECモデルなど。これらはサービスやモノを”売る”ことで収益を上げるモデルです。最後にサービス提供者と利用者を仲介して収益をあげる仲介モデル。不動産売買や人材斡旋などのように、仲介料や成果報酬を主な収益とします。
どのモデルにもメリット・デメリットがあるので、基本知識としてある程度把握しておいたほうがいいでしょう。そうすればいくつかのモデルを組み合わせて、収益をあげながら事業の継続が可能になると思います。
 

格安ホームページ制作を行っている当社では、制作前の企画支援やビジネスモデル構築などのご依頼も承っております。また制作後の更新や保守、コンサルティングなどの運営支援サービスも提供しております。これらは会社設立時のホームページ制作や既存ホームページのリニューアルなど、お客様の状況に応じてコースやオプションをお選び頂けるシステムです。ホームページ制作の依頼を検討されていましたら、お気軽にお問い合わせください。

【メディア(画像、動画)の利用】WordPressの機能を使ったギャラリーの作成

23 9月 15
北川 哲平

No Comments

WordPress(2.5以降)の標準機能に、サムネイル画像を並べて表示させる「ギャラリーを作成」という機能があります。
この機能を使うと、新たにギャラリー表示のためのプラグインを追加しなくても、簡単にギャラリーを作成することができます。
 

ギャラリーの作成

 
①まずは、作成したいページの、作成したい位置にカーソルを移動させてください。
 
wp-g1


②カーソルの位置が決まったら、
次に左上にある「メディアを追加」をクリック。
 
wp-g2


③左メニューの中から、「ギャラリーを作成」を選択してください。
 
wp-g3


④メディアライブラリから、ギャラリーに追加したい写真を選択してください。
1度のクリックで選択、選択したものの右上の「チェックマーク」をクリックすることで選択解除できます。
 
wp-g4


⑤今回は5枚の写真を選択しました。
選択が完了しましたら、右側にある「ギャラリーを作成」をクリックしてください。
 
wp-g5


⑥続いて、ギャラリーの編集画面に移ります。
各画像のキャプション(説明文)部分を入力してください。
説明を表示させたくない場合は、空白でもかまいません。
 
wp-g6


⑦ギャラリーの表示順を変更したい場合、移動させたい写真をドラッグさせれば、順番を変更できます。
 
wp-g7


⑧右側にある「ギャラリーの設定」では、サムネイル画像をクリックしたときの挙動やカラム数を設定できます。
 
リンク先は「添付ファイルのページ」「メディアファイル」「なし」の3つ。
「添付ファイルのページ」は画像用のページが別途開きます。
「メディアファイル」はアップされた画像がそのまま表示されます。
「なし」はサムネイルだけが表示されます。
 
「カラム」では、横並びで表示されるサムネイルの数を選択できます。
カラム数に合わせてカラムの幅は自動調整されますが、多すぎると見栄えが悪くなるので、適宜調整してください。
 
「ランダム」にチェックを入れると、画像の並びがランダムになります。
 
「サイズ」で、表示させたいサイズを選択してください。
「サムネイル」「中」「大サイズ」「フルサイズ」の4つのサイズから選択できます。
 
wp-g8


選択が完了しましたら、右下にある「ギャラリーを挿入」をクリックしてください。
ページの方へ、自動的にショートコードが挿入されます。
 
wp-g9


⑨ギャラリーが作成されました。
ページを表示させてみてください。
 
wp-g10


ギャラリーが作成されました。

【エディタを使った記事の作成】表の挿入

21 9月 15
北川 哲平

No Comments

文章の中に表を挿入したい場合、
<table>要素を使って、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素(th要素)で示します。
 
 

表を作成する際の基礎タグ

 
<table> 表示させたいテーブルの位置を決めるもの。
<tr> 一行に表示させたいデータを決めるもの。
<th> 見出しとして表示させたいもの。
<td> データとして表示させたいもの。

表の作成

 
表を作成する際は、作成したい場所に<table>タグを配置します。
その中に、まず<tr>タグを記載してください。
表の記載データは、一行ずつ横に記載していく形となります。
<tr>~</tr>で囲んだ間のデータが横に表示されていき、
次の<tr>~</tr>データが二行目、
三行・四行と記載していき、最後に</table>タグで閉めることにより、1つの表として認識されます。

例として、下記のようにサンプルコードを作成した場合、
実際に表示されるものがその下の表になります。

[サンプルコード]
<table>
<tr>
<th>肉</th>
<td>牛肉</td>
<td>豚肉</td>
<td>鶏肉</td>
</tr>
<tr>
<th>魚</th>
<td>イワシ</td>
<td>サンマ</td>
<td>アユ</td>
</tr>
</table>
 

 

牛肉 豚肉 鶏肉
イワシ サンマ アユ

 
こちらに表示されている表の<th><td>タグは、
利用しているテーマのデザイン(css)設定に依存しますので、
デザインを編集したい場合、別途<th><td>タグなどへの設定が必要となります。

【エディタを使った記事の作成】Youtubeのプライバシー設定(公開設定)について

08 9月 15
北川 哲平

No Comments

Youtubeで動画を公開する際、
動画のプライバシー設定として、『公開』『限定公開』『非公開』と、
3種類の設定が出来るようになっています。
設定した種類によって少々違いがあるため、
目的にあった公開設定にしておくようにしましょう。
 
1.公開
2.限定公開
3.非公開
4.アップロード時のプライバシー設定
 
動画画面


 

 

 

公開

 
公開設定とは、
名前の通り、アップロードした動画を全員が制限なく閲覧できる状態の設定を言います。
動画をアップロードしたユーザーのチャンネル、タイトルの検索、URLへの直接アクセス、関連動画など、
Youtube内に動画がある限り、誰でも閲覧して再生が可能です。
 
 

 

 

限定公開

 
限定公開とは、
動画のURLを知っていれば誰でも閲覧することができる設定を言います。
こちらの設定にしていれば、
URLを知っている方が直接そのURLにアクセスすることで動画を閲覧できますが、
動画をアップロードしたユーザーのチャンネルやタイトル検索、関連動画などには表示されないようになっています。
 

 

 

非公開

 
非公開設定とは、
直接閲覧の許可をもらえた人にのみ、動画を閲覧させることのできる設定を言います。
非公開設定の場合、
動画をアップロードしたユーザーのチャンネル、タイトルの検索、URLへの直接アクセス、関連動画などでは閲覧することができず、
動画の管理者に直接「共有」許可をもらう必要があります。
 

 

 

アップロード時のプライバシー設定

 
Youtubeにアクセスし、右上にあるログインから、動画をアップロードしたいアカウントにログインしてください。
※YoutubeはGoogleと連動しておりますので、アカウントの作成ができていない方は、
先にGoogleアカウントの取得を行ってください。
 
ログイン


 
googleアカウントログイン


②ログインが完了しますと、Youtubeのトップページに切り替わります。
右上にあるアップロードをクリックして下さい。
アップロード画面に切り替わります。
 
dm9


dm3


③アップロードの際、真ん中の「アップロードするファイルを選択」の下に、
プライバシーを設定する項目が表示されていますので、そちらの▼から『公開』『限定公開』『非公開』の設定を選択して下さい。
『公開』『限定公開』を選択した場合、「アップロードするファイルを選択」辺りをクリックしてファイルを選択するか、「ドラッグ&ドロップ」で動画をアップロードして下さい。
アップロード中の画面に切り替わります。
 
dm10


dm11


 
④『非公開』設定を選択した場合、選択下部に「共有先」という入力エリアが表示されます。
動画を「共有」したい相手がいる場合は、「共有先」に共有したい方のメールアドレスを入力してください。
※共有先に指定するメールアドレスは、そのメールアドレスでGoogleアカウントにログイン可能である必要があります。
 
dm4


dm5


⑤メールアドレスの入力が完了後、「アップロードするファイルを選択」辺りをクリックしてファイルを選択するか、「ドラッグ&ドロップ」で動画をアップロードして下さい。
アップロード中の画面に切り替わります。
これで、アップロード時のプライバシー設定(公開設定)が完了となります。
 
dm11


【テーマを使った外観の変更】ナビゲーションの階層化

31 8月 15
北川 哲平

No Comments

WordPressでは作成するナビゲーションのメニューに対して親となるメニューを設定し階層化することができます。
階層化することで、コンテンツの種類ごとに情報が整理され、閲覧や編集の際、便利になります。
navi_image_plus2

 

ナビゲーションの階層化

 
①まずは、ダッシュボードを表示していただき「外観」の「メニュー」をクリックして下さい。
 
navi_menu_del_1

②「メニュー構造」の中の移動させたい項目をドラッグし、移動完了後、クリックをお放し下さい。
 
navi_layer_1

navi_layer_2

③移動が終わったら、「メニューを保存」をクリックして下さい。
 
navi_layer_3

④ホームページを表示し、ナビゲーションのメニューにカーソルを合わせると階層化したメニューが表示されます。
今回の例としてメニュー1の下にメニュー2とメニュー3、メニュー4の下にメニュ-5を階層化しています。
 
navi_layer_4

navi_layer_5

このナビゲーションの階層化はテーマに依存するため、テーマによってはナビゲーションの階層化ができないものもあります。