Word Press アップデート

Word Press はスマホのシステム更新のように、不定期でアップデート作業が必要になります。
昔はhtmlやcssで作られていたシンプルな構造のサイトとは異なり
お客様ご自身がブログ感覚でサイトを修正・更新することができる仕組みを取り入れているため

スマートフォンのようにシステムの更新は不可欠となります。
しかしながら自動更新ではなく基本的にサイトを管理する人が手動で行わなければならない項目も多々あります。
慣れている方はご自身でプラグイン(オプションの様なもの)やシステム・サーバーメンテナンス等も行われる様ですが

作ったら作りっぱなしにしてシステムの更新を怠ると…
表示されなくなる場合もあるのでご注意ください。
ネットで調べれば更新方法なども簡単に見つけることはできると思いますが
操作に不安や何をすれば良いのかすらさっぱりわからないという方…

プロの手を頼って、時間をかけずWebサイトを保持していきましょう

bdesignではサイト制作だけでなく、その後のアフターフォローも有料にはなりますが
比較的安価な価格帯で管理させていただいております。

個人事業者向け Webサイトの管理プラン ※ 法人/ページ規模により金額が変動します

その中でカートをつける場合「Welcart」か「Woocommerce」を採用。
このプラグインの使い分けは使用するテーマや環境・操作される方のパソコンスキル等に合わせて変更しています。
今回はそんな中「Woocommerce」を使用したサイトのカスタマイズ方法の一部を業務記録としてアップしています。

Woocommerceをコード操作でカスタマイズする場合

Woocommerceのカスタマイズする前に

レイアウトやデザイン等はプラグインエディターより該当するプラグインの内部を変更することにより
cssやphp編集をおこなうことで実施が可能ですがここで一手間かけることで、リスクを回避することができます。

Woocommerceをプラグインを使用してカスタマイズする場合

Booster for WooCommerce -導入方法-

直接カスタマイズする場合は上記でコピーしたWooCommerceの「templates」を変更しますが、細かな設定を実施する場合プラグインを活用するのも有効です。
今回は１００以上の設定が1つのプラグインで変更可能な「Booster for WooCommerce」を導入しました。

Booster for WooCommerce「Admin Products List」 -商品管理画面の一覧をカスタマイズする-

「Admin Products List」を適用することで商品管理がグッと楽になります。自分の使いやすいように表示を変更して商品のスムーズな管理を実現します。

bdesignでWebサイトをご依頼いただいた方へのフォローアップ講習。無料でインストールできる「画像編集ソフトGIMP使い方講習会」を実施いたしました。こちらの記事では2020年4月11日に開催した内容を一部公開しております。

SNS講習会は必要な方に必要なタイミングで、ZoomまたはSkypeを使用し、30分程度(準備等含め60分)でご自身でできなかった箇所をピックアップしながら使い方をマスターしていただく講習内容となっています。

無料画像編集ソフトGIMPのインストール方法

制作時にはAdobeのPhotoshopを使用して画像編集・加工を行っておりますが、実際にWebサイトを運営される店舗・企業・個人様が同じソフトをお持ちでない場合が多くあります

そのため、同じように編集作業ができ、WindowsやMacintoshどちらのOSにも無料でインストールできる画像編集ソフト「GIMP」の導入をご案内しております

使い方になれるまで少し大変ですが
慣れてしまえば画像の合成やサイズ変換・画像と文字の調整など細かく編集できるので、パソコンをお持ちで、尚且つ投稿記事等のクオリティを磨きたい方におすすめです

限られた時間の中でできないことができるようになるために、GIMP使い方講習会の前にご自身でパソコンの種類に応じて無料ソフトを事前にインストール&少し触っていただくことをお願いしております

ご希望の方には投稿用のレイアウトが完了した編集データファイルをお渡ししております※受講者様のレベルに応じてデータ内容を変更しております

GIMPインストール方法はこちらをご参照ください
初心者でもできる画像編集+加工
“GIMPの最新版をダウンロードしよう【初心者ナビ】”

新しく画像をつくる

まずは作りたい画像サイズを決めましょう。Webなどに掲載する画像はMax1200px程度がお勧めです。縦横幅などを決定し、投稿画像は同じサイズで掲載することでレイアウトを美しく表示することができます。

新しい画像の作成

①画像の枠をつくる

GIMPソフトを立ち上げ、上部メニューバーの「ファイル」>「新しい画像の作成」をクリック

②画像サイズと解像度を指定する

「新しい画像の作成」をクリックしたら上記のような画像が表示されるので
作りたいサイズの横幅・縦幅を赤枠に入力

「詳細設定」の箇所に水平/垂直解像度の入力枠が表示されるので
Web用画像なら72:72もしくは144:144の数値を黒枠入れます
基本的に水平/垂直は同じ数値を入力してください

①画像の枠をつくる

GIMPソフトを立ち上げ、上部メニューバーの「ファイル」>「新しい画像の作成」をクリック

この枠内で写真を追加して配置し、保存することで簡単に縦横比を固定した画像を掲載することができます。

枠の中に写真を配置する

①写真を追加する

作成した枠の中に取り込みたい写真をドラッグ(選択して入れる)

②選択ツールで場所を決定する

矢印がクロスしたアイコンをツールボックスより選択
「選択」アイコンを選択した状態で、先ほど追加した画像の位置を調整する

③中央に配置したい場合はガイドラインを利用する

メモリはデフォルトの場合25px間隔で表示されているので、制作した縦横幅÷2の数値の箇所にガイドを設置します

赤い上・左部分の定規箇所からマウスをドラックするとガイドラインをひくことができます※ガイドラインとは:保存する際には表示されない、配置等する際の目安として利用できる線

今回の講習会で使用した画像と投稿記事をご紹介

投稿見本

例(W1200×H752px)
投稿見本ページ：フットケアサロン花ゆかり 様

上記のページのように複数の画像を投稿する際
全てを同じサイズで統一して加工・ロゴ掲載・リンク掲載することにより
統一性の取れた記事を制作することが可能です

同じような投稿を実施する場合、画像サイズや画像デザインの一定のルールを決め
統一性のある画像を掲載することでユーザーからも見やすく、安定し、信頼したサイトだと印象付けることができます

今回のケースはすでにドメイン取得が完了している方
ドメイン取得済みのお客様からのWebサイト代行制作のご依頼で
実際に検討した内容・流れをメモしています。

・独自ドメイン有り
・新規サーバー契約
・メールをOffice365 Exchange Online プラン1にて使用中

ドメインとExchange Online プラン1を契約しているお名前.comでのサーバー契約も検討しましたが
電話や問い合わせサポートなどあまり丁寧な対応が望めなかったため

XseverのX10プランの新規サーバー契約を実施する際に
キャンペーンドメイン(契約期間中ドメインが実質無料で使える)を利用して、現行のドメインを移管手配することにしました

お名前.comのドメイン無料キャンペーン

お名前.comでのサーバー契約を検討していた際に、こちらでも契約期間中ドメインが実質無料で使えるキャンペーンがあり
既存契約しているドメインを無料に切り替えられないか調べてみたところ

残念ながら、新しく取得するドメインのみ対象とのこと

お客様は複数ドメインを保有されるメリットがなかったため
お名前.comでのサーバー契約を見送りました

お名前.com継続とXsever移管後の年間維持費用比較

設定自体は乗り換えをしない方が安全かつスムーズではありましたが
年間維持費用を計算してみたところ、Xseverのサーバー契約の方がメリットがあると判断しました

ドメイン移管の流れ

ドメイン移管手続きにかかる期間は２週間目安

今回のケースでは4/13が更新期限となる.com独自ドメインの移管でしたが
実際には7日前までに完了していないと移管ができなくなっていたので最終期限は4/6でした。
クライアントに申請手続きをしてもらわなければならない場面やエラー対応もあり、
少しタイムロスもありましたが実質5日間で作業を完了しています。

Webサイトとは企業や個人がインターネット上に情報を公開しターゲットに閲覧してもらうためのページ。
サーバー(ネット上の家)とドメイン(ネット上の住所)があれば情報掲載することができる。
通常PCにインストールされたWebブラウザーを使用して閲覧します。

ウェブサイト（英: website）は、World Wide Web (WWW) 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。
ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。また、ウェブサイトのトップページのみをさしてホームページと呼ぶ場合もある。
Wikipediaより

2-Webブラウザーとは

Google ChromeやMozilla Firefox、Safari、Internet ExplorerやMicrosoft Edgeなど、検索して情報を取り出すためのツール。
まず自分が何のブラウザーを利用しているのか認識することが大切。
Webサイトを制作する前にスマートフォンやPCのブラウザを確認しましょう。
＊ブラウザによって表示方法や効果・文字適用などが異なります＊

3-サーバーについて

Webサイトに必要なのはWebサーバー(ネット上の家)というソフトウェア。
サーバーを借りるという認識で大きく分けて４種の選択肢がある。

レンタル専用サーバ(家に例えるなら一戸建)

CPUやメモリ、ソフトウェアを自由に使うことができるサーバーのため企業向け。
さくらの専用サーバ・GMOクラウド 専用サーバなど(月額8,000円程度〜)
管理者権限が手に入る為、自由にカスタマイズできOSやアプリケーションのインストトールなども自由度が高い。
ある程度の知識・スキルが必要な為メンテナンス担当者などを配置できる企業向け。



VPS (Virtual Private Server) (家に例えるならマンション)

ユーザーに仮想サーバーが割り当てられ、専有して仮想サーバーを使うことができる。
共有部分はカスタマイズできない。
ホストOSがクラッシュやメンテナンスに入るとサーバーダウンが生じる可能性がある。
さくらのVPS・カゴヤ・クラウドVPSなど(月額600円程度～)

パブリッククラウド(家に例えるならバーチャルの家)

月額利用以外にも使用した時間やスペックで料金が決まることも多くコスト面の調整が可能。
アクセス数が集中するとコストがかかる可能性も。

共用サーバ(家に例えるならシェアハウス)

さくらのレンタルサーバ・ロリポップ！レンタルサーバなど(月額100円程度〜) おすすめ 他者・複数ユーザーと共有して使うため安価だが制限がある。
速度制限や容量制限があるがプランによって上限も調整できるため一般ユーザー向け。
自分たちのサイト意図とは関係なく他のサイトにアクセスが集中した際などにも速度が遅くなる場合もあるため、低価格プランはビジネス向きではない。

bdesignではお客様に共用サーバーのご契約をおすすめしています。
用途によって価格帯や機能が異なる為、ヒアリングのちおすすめのレンタルサーバーとプランをご案内しています。
＊bdesignにてWebサイトをご依頼orWeb講習をご利用の方が対象:希望の方のみご案内しています＊


サーバーとはクライアントであるウェブブラウザのURLにて指示された、Webサーバ内に存在するHTMLドキュメントの各種情報を、クライアントから接続されたHTTPに則ったTCP/IPソケットストリーム（HTTPコネクションと呼ぶ）に送信する。多くの場合、クライアントのウェブブラウザとの間に複数のコネクションを張り、HTMLドキュメントとその配下の個々の情報ファイル（画像ファイル情報など）を並列して送り、処理時間を短縮してサービスを提供している。Wikipediaより

4-1-ドメインについて

Webサイトに必要なドメイン(ネット上の住所)というネットワークを識別するための名前。
インターネット閲覧時に表示されるURL(このページは””)
この住所さえわかれば何度でも同じページに戻ることができる。
ドメインはページの先頭部分(このサイトドメインは”bdeisgn.top”)
ドメインは大きく分けて２種類ある。

サブドメイン(住所でいうとレンタル住所・バーチャルオフィス)

独自ドメイン(住所でいうとあなただけの住所)

”com”は維持費用も低価格なうえ日本で浸透しているため、人気ワードは入手が困難
欲しい文字列で空きがあるか確認したい場合はこちらで検索

4-2-ドメインの種類

.com .jp .net .biz など様々なドメインがあるがそれぞれに意味があるそうです。

.com = 商業組織用(世界の誰でも登録可能)
.net = ネットワーク用(世界の誰でも登録可能)
.org = 非営利組織用(世界の誰でも登録可能)
.info = 制限なし(世界の誰でも登録可能)
.biz = ビジネス用(ビジネス利用者)
.jp = 日本のサイト(日本のサイト利用者全般)
co.jp = 日本のサイト(株式会社・合同会社・有限会社など)
日本ネットワークインフォメーションセンター｜ドメイン名の種類より

金額はドメインごとに異なり、契約する取得サービス先によっても異なります。ドメインは契約した人の所有物(権利)となるため、ご自身で契約されていない場合は権利譲渡等に費用が発生する場合もあります。制作会社にお任せしている方は権利の有無を確認しておくと後々トラブルを回避することが出来ます。

Webサイト制作のご依頼について

bdesignでは用途に合わせたWebサイトの制作を行っております。
ご希望の方はメールフォームよりお問い合わせください。

＊bdesign(びーデザイン)は広島のデザインとWeb制作事務所ですが、全国のご依頼に対応可能です
＊受注順に対応しておりますのでお時間をいただく場合がございます

Webと名刺でビジネスを応援するbdesign(びーデザイン)をご利用のお客様に質問されるWebサイト制作の基礎知識をブログ記事にてご紹介しています。
主に引用を用いてご案内していますが、簡単にお伝えするため省略・印象などでお伝えしている情報になります。
正しくはご自身でご確認いただきますようお願い申し上げます。