TOPページ

新着WEB関連エントリー

WEB制作システムについて

WEB制作システム(WEB PRODUCTION SYSTEM)とは、WEBサイト作成に関するさまざまなデザイン手法やマークアップ技術、プログラミングやデータベースに関する知識や、ActionScriptなどを利用したリッチコンテンツの作成、オープンソースを利用したコンテンツマネジメントシステム、コーポレートアイデンティティ(CI)制作から、検索エンジン最適化やリスティング広告などを利用したWEBマーケティングやブランディングに至るまで、WEB制作に関する総合的な情報ポータルサイトです。

各項目は、それぞれの制作業務内容に応じてカテゴリー分けが行われており、各カテゴリー内でも、技術情報や知識などをさらに細分化して、WEB制作に関わる作業や業務に関する記事を個別に閲覧、参照することができます。

そして、WEBサイト制作についての優良なサービスサイトや、有効な情報源となるブログサイトなど、専門的かつ体系別に制作依頼から見積もり、技術情報や知識を得るための推奨サイトへもリンクを設置、関係するニュースについては、さまざまな専門的な最新ニュースを網羅したWEB関連ニュースをジャンルごとに分類して一覧することが可能です。

WEB制作について

WEB制作とは、いわゆるホームページ制作とかWEBサイト制作とほぼ同意とされ、ホームページを作成する作業、もくしは業務を意味します。

しかし、WEB制作=ホームページを作成するといっても、その意味合いや作業範囲は画一的なものではなく、視覚的な作業であるデザインやビジュアル設計や、情報構築やユーザビリティ、検索エンジン対策でのマークアップ構造の設計、WEBマーケティングを…
>>詳細はこちら

システム開発について

システム開発とは系統だてて、かつ組織的な方法や方式をコンピュータを使用して処理する仕組み、その仕組み自体を制作、開発する作業や工程、業務のことです。

一般的な解釈をすると、パソコンを利用することで業務改善や効率化が行われ、従来の方法では実現が難しいことを、プログラム言語とデータベースやサーバーなどの…
>>詳細はこちら

モバイルについて

今日モバイルとは、携帯電話やスマートフォン、モバイルPCなどの総称として使用されることが多く、特にケータイはモバイルフォン、iPhoneやAndroid(アンドロイド)搭載端末をスマートフォンとし、区別している。

携帯電話とスマートフォンの大きな違いは、機能性やプラットフォームにあり、携帯電話が通話やメール、専用ブラウザでの情報閲覧に比べ、スマートフォンは、通話やメール以外に豊富なアプリケーションが使用でき、モニタサイズも携帯に比べて大きいため、映像メディアやWEBブラウズにも適している。
>>詳細はこちら

CMSサイトについて

CMSサイトとは、WordPressなどのコンテンツマネジメントシステム(Content Management System,CMS)で構築されたWEBサイトで、統合的かつ体系的に管理することが可能なPHPなどで制作されたプログラムで統制されるWEBサイトです

コンテンツ管理システムという名称通り、ページ追加や記事の修正、WEBデザインの編集やサイト構成の管理も、プログラムとSQLなどのデータベース連携で記事の内容や…
>>詳細はこちら

SEO対策について

SEO対策とは、WEBサイト自体やページを検索エンジンで上位に表示させるための手法や施策のことで、検索エンジンのプログラム(クローラ)のアルゴリズムに対して効果ある作業を実施すること。

2011年国内ではGoogleとYahoo検索がシェアの大半を占めているといわれているが、Yahoo検索は検索エンジン自体をGoogleとの提携・採用によりGoogleに対しての施策が、結果的にYahoo検索のSEO対策となっている。
>>詳細はこちら

CSSflexboxのimg画像下余白を消去する方法

Web制作の工程でレイアウトモジュールflexboxで、イメージ画像したの空白の編集が必要になったので、CSS3のレイアウトモジュールflexboxのイメージ画像したの空白を消去してみます。

はじめに最初の手順としては、まずCSSセレクタ指定をします。

余白が出ているimgタグの親要素タグにCSSセレクタを指定
ここではclass=””del_img_pad””と指定します。

 

その次に、確認用の背景色指定をします。

imgタグの余白をわかりやすくするために親タグのセレクタに背景色赤を指定
.del_img_pad{
background:red;}をします。

最後の手順としては表示確認と背景色の消去で、

さらにCSSプロパティと値をvertical-align: bottom;で指定し表示確認後、余白が消えていたらbackground:redを削除
.del_img_pad{
vertical-align: bottom;}。という方法で完了します。

 

この手順の流れで気を付けたい事が、ブラウザのバグによる余白の隙間がでるのでfont-size:0でも対処可能だが他のフォント表示に影響等があるためvertical-align: bottom;での設定を推奨という点について注意する必要があります。

DreamWeaver設定情報のサイトの管理をバックアップする方法

Web制作の工程でファイル管理-サイト定義で、サイトの管理データすべてのデータ保存が必要になったので、ドリームウィーバーのファイル管理-サイト定義のサイトの管理データすべてをバックアップしてみます。

 

はじめに最初の手順としては、まずレジストリエディター起動をします。

コマンドラインからレジストリエディターを起動して『コンピューター\HKEY_CURRENT_USER\Software\Adobe\Common\バージョン\Sites』を表示します。

 

その次に、レジストリデータのエクスポートをします。

該当するレジストリのフォルダをエクスポートし保存したい場所に保存をします。

 

最後の手順としてはバックアップの完了で、

レジストリデーターを保存して、レジストリエディターを終了したらデータ保存の完了。という方法で完了します。

 

 

この手順の流れで気を付けたい事が、一度、DreamWeaverのサイトの管理から必要のないサイト定義を削除して、レジストリエディターでバックアップデータをインポートして復元できたら、バックアップが正常にできているのを確認した方がよいという点について注意する必要があります。

Outlook2007でメールアカウントのバックアップをする方法に関する情報

Web制作のOffice Outlook2007にかかわる内容で、バックアップ保存について方法に関する事を情報として記録しておいた方が良いと考えたので、電子メールアカウントバックアップのことについて解説しています。

 

》ひとつめの情報-バックアップ保存機能。

結論からいうとOutlook2007ではメールアカウント設定をバックアップしたりエクスポートする機能は非対応という事があります。

 

 

》ふたつめの情報-非公式な方法。

HKEY_CURRENT_USER\Software\Microsoft\Windows NT\CurrentVersion\Windows Messaging Subsystem\Profiles\Outlookのレジストリ情報をバックアップ保存という事があります。

 

》みっつめの情報-その他。

ジャストシステム 手裏剣などのメールソフトを利用して、設定を吸い出して改めてバックアップ保存する方法などがあるとの事という事があります。

 

 

その他の情報については、Outlook2007以前のバージョンではアカウント情報のバックアップ機能が実装されているということがあります。

SEOやめた結果こうなった

Webサイトやページコンテンツ制作時には、どうしても無意識的に

検索エンジンに対してどうだろうか?

評価されるだろうか?

みたいなことばかり気にして文言や情報の設計をほぼ無意識にしていたので、TOPページのアクセスよりも各ページ単位でのアクセスが多いWebサイトを、思い切ってUI中心のWebサイトに作り変えてみました。

 

そもそも、検索エンジンを念頭に文字を不自然に配置したり伝達したいことを歪曲したりする習慣がついていたことにとても違和感があり、むやみに文章を増やしたりして、なんら疑いを持たずに従属していることに疑問がありました。

SEOを考えてWebコンテンツを作らされることに嫌悪感を覚えていたので、検索エンジンの評価を無視してUIのみを意識してリニューアルしてみたのでした。

そう、SEOを捨ててみた。

 

結果、しばらくするとGoogleではTOPページのインデックスは外されほぼ圏外に。

また、それまで1000ページぐらいウェブマスターツールでインデックスされていたのが700ページ以上解除されている。

盲従しているひとだと軽いパニックになるかもしれませんが、冷静に考えると全体のアクセス数などはその後もあまりかわらず、結果としてウェブマスターツールアカウントを削除したらなんかすっきりした。

そして中途半端にSEOを意識するぐらいなら、アナリティクスなんて見るのも時間の無駄だったと痛感しました。Jetpackでおおよその解析はできるし。

そもそもSEOにかける時間や資源がないWebサイトなどに、アクセスやUUが増えた減ったを見てもほとんど有効な施策はできないし。

ちなみにBingではしっかり上位表示がキープされていました。

SEOで労力対効果を考えた場合、Googleの場合は徒労に終わる(わりにあわない)キーワードも多いから、イメージ通りのコンテンツを制作して流入はすくなくなるもののBingからの確度の高いアクセスを中心にWebコンテンツ展開するのも、ひとつの考え方じゃないかと再考しました。

 

 

 

WordPressプラグインのRedirectionsを設定する方法

Web制作の工程でプラグイン機能で、リダイレクトの設置が必要になったので、ワードプレスのプラグイン機能のリダイレクトを設定してみます。

 

はじめに最初の手順としては、まず新規インストールをします。

ダッシュボードのプラグイン、新規追加からRedirectionと検索してプラグインが出てきたら、インストールして有効化します。

 

 

その次に、プラグインの設置をします。

ダッシュボードのツールから、設定画面を表示させて、リダイレクトの設定を行う。全ページリダイレクトの場合は、ワイルドカードを利用した正規表現チェックを入れ、/(.*)$とURL/$1と設定することで全ページのリダイレクトが可能をします。

 

 

最後の手順としては表示確認で、

Webサイトの表示で以前のページから希望するページにリダイレクトされることを確認。という方法で完了します。

 

 

この手順の流れで気を付けたい事が、設定順番や設定のキャッシュが残る場合があるので、新しいリダイレクト設定時は、キャッシュクリアが必須という点について注意する必要があります。

WordPressプラグインのGoogle Language Translatorを設定する方法

Web制作の工程でプラグイン機能で、自動翻訳機能の設置が必要になったので、ワードプレスのプラグインの自動翻訳機能を設定してみます。

 

はじめに最初の手順としては、まず新規インストールをします。

ダッシュボードのプラグイン、新規追加からGoogle Language Translatorと検索してプラグインが出てきたら、インストールして有効化します。

 

その次に、プラグインの設置をします。

ダッシュボードのウィジェットから、プラグインを追加設定をします。

 

最後の手順としては表示確認で、

設定からプラグインの言語設定がjapaneaseであることを確認しWebサイトの表示を確認。という方法で完了します。

 

この手順の流れで気を付けたい事が、トラフィックブロックのアドオンなどでGoogle翻訳の制限をしていると正常に表示されないという点について注意する必要があります。

CSSでプロパティ値の%、em、remを違いを理解する情報

Web制作のCSS(カスケードスタイルシート)にかかわる工程で、パーセントやemまたはrem指定についてそれぞれの相違点を情報として記録しておいた方が良いと考えたので、プロパティ値%、em、remの違いを理解することについて解説しています。

 

》ひとつめの情報-%(パーセント)。

親タグ要素のフォントサイズを相対的に参照。指定がない場合はデフォルトで16px=100%でサイズ指定という特徴があります。

 

 

》ふたつめの情報-em(エム)。

文字の高さを1emとして親タグ要素のフォントサイズを相対的に参照。%とほぼ同義でデフォルトでは16px=1emでサイズ指定という特徴があります。

 

 

》みっつめの情報-rem(root em)。

CSS3から実装された値で絶対的にrootタグであるhtmlの指定していされた値を参照。デフォルトでは16px=1remでサイズ指定という特徴があります。

 

 

その他の情報については、emやremは小数点以下が換算しずらくなるので、参照親要素の指定値を62.5%とすることで1em=10pxなどに暗算しやすくなるが、煩雑になるだけなのであまり推奨できない点という特徴があります。

WordPressでテーマを導入する時に注意したいこと

オープンソースCMSのワードプレス制作にかかわる工程で有料・無料のテンプレートを利用時に注意したい点について紹介しています。

 

はじめ注意点としては、まずデザインとテーマのマッチングになります。

イメージするWebサイトのデザインイメージと導入したいテーマファイルのレイアウトやデザイントーンが似ていること。大きくレイアウトなどが違っていると編集にとても手間がかかる事があります。

 

 

その次の注意点は、情報配置とテーマの構造になります。

コンテンツの情報配置のレイアウトとテーマファイルのデザインがあまり異なっていると、内部のレイアウト編集やコーディングによっては、レイアウト崩れやデザイン崩れの原因になる事があります。

 

 

最後の注意点としては機能仕様とテーマ特長になります。

WordPressはプラグインなどを利用することで様々な追加機能を実装することができますが、反面テーマファイルのカスタマイズが必要になります。有料のテーマテンプレートには、JavaScriptやPHPで簡易的なプログラムが組み込まれているので、カスタマイズにとても費用や時間がかかる場合がある事があります。

 

以上のようなことが今回の記事内容についての注意点です。

 

今回の補足注意点としては、見た目がかっこいい手頃な価格の有償テーマ購入後、編集やカスタマイズができなくなる場合があり、結局余計な費用がかかる場合がある事という点について注意しておくとよいでしょう。

WordPressのプラグインTheme My Loginで会員制サイトを制作する

Webの制作過程で会員サイトの作成が必要になったので、ワードプレスのTheme My Loginで制作してみます。
いきなり有料版で希望するものでなかったり、カスタマイズができないと困るので無料プラグインTheme My Loginで設置しています。

 

はじめに

最初の手順としては、まずTheme My Loginをダッシュボードの[プラグイン]の[新規追加]よりインストールします。

 

その次に、

ダッシュボードの[設定]⇒[一般]から、[だれでもユーザー登録ができるようにする]にチェック。
権限は[購読者]のままでよいでしょう。(必要に応じて変更する)

 

最後の手順としては

固定ページで、設定時は各ページが自動生成され、紹介文やショートコードはページ内に記載されているので、それらを確認することで今回は完了です。

 

この工程の流れで気を付けたい事が、設置自体はわりとスムーズにできるが、設定項目が以外とあったりするので、用途に応じてしっかり設定が必要という点について注意する必要があります。

WordPressプラグインで会員制サイト制作のおすすめと参考

WordPressにて会員制サイト、いわゆるユーザー登録して、ユーザーのみ閲覧できるページや編集できる権限などをコントロールする機能をくっつけたい場合におすすめしたいプラグインを検討してみます。

 

ユーザー権限の制御は基本的にワードプレスに付属していますので、単体ページの編集制限や閲覧パスワードの設定は簡易的な機能が付属していますが、すべて手作業で登録管理しなくてはいけないので、自動化されたワードプレスの会員制サイトを制作するうえで便利なプラグインを必要機能などに応じて比較表も作成してみました。

 

実際にはを導入してみましたが、シンプルでわかりやすくてよかったです。

はじめて導入する場合は半日ぐらいは見ておいたほうがよいかもしれないですね。

 

Simple MembershipWP-MembersTheme My Login
ユーザー登録フォーム
ログインフォーム
限定公開
会員レベル個別設定××
有効期限設定××
会員専用ページ
会員情報編集
パスワードリセットページ
承認方法変更×
ショートコード
有料化決済機能
Paypal
××
日本語化
導入費用無料無料無料
総評
ところどころ日本語化が難しかったりフォームのカスタマイズが困難。
さまざまな設定がわりと手間なく導入できる。他のプラグインとの組み合わせで機能性が拡充可。
導入から設定までとてもわかりやすく親切な作り。
他のプラグインとの併用でかなり良くなる。

 

当記事独自の判断によるものなので、これ以外のプラグインが推奨されないというわけではありません。