WEBページにスタイルシート（CSS）を適用するには３つの方法があります。
（１）HTMLタグに直接書く方法
▼例
＜h1 style='margin-top:10px'＞
（２）HTMLファイルの先頭にまとめて書く方法
▼例
＜style type='text/css'＞
h1 {margin-top:10px;}
＜/style＞
（３）外部ファイルを読み込む方法
▼例
＜link rel='stylesheet' href='default.css' type='text/css' /＞
世の中のほとんどのサイトは（３）の外部ファイルを読み込む方法をとっています。
これには明確な３つの理由があります。
（理由１）
コンテンツ（HTML）とデザイン（CSS）が分離されてコードが見やすい。
（理由２）
コーダーとデザイナーが分業しやすい。
（理由３）
そうしないとSEO的に不利だから。
３つ目の理由について解説します。
検索エンジンはWEBサイトのHTMLを読み取って、文書構造が適切か、
コンテンツの内容と量、キーワードの出現位置が適切かどうか、
など、検索順位を決めるために重要な要素を解析します。
ですから、もしCSSがHTMLファイルの中に混在していると、
検索エンジンから見て重要ではないデザイン的な要素が邪魔をして、
マイナス要素となってしまいかねません。
JavaScriptも同様です。
なるべくHTMLの中には書かず、外部ファイルにしましょう。
追伸：
残念ながら、ホームページ制作ツールには、手軽に使えることを重視
するあまり、上記のような内部SEOに関わることをあまり考慮していない
ものもあります。
もしあなたがSEO対策をきちんとやりたいのであれば、
HTMLやCSSそれぞれの細かな文法知識だけでは不十分です。
検索エンジンの立場でHTMLを眺める観点をもって
取り組む必要があるでしょう。
サンプルサイトを参考に、アニメーションバナー（広告）を
作ってみました。
参考にしたのはこれです。
Flashアニメーションを作ったことがある方には馴染みやすい
オーサリングツールかも知れません。
間違って理解してはいけないのは、オーサリングツールだから
WEBページにアニメーションがつけられるのではないということ。
ツールで編集した結果は最終的にHTML/CSS/JSとして出力されますので、
原理的にはJavaScriptでアニメーションを実現しています。
しかし、JavaScriptでアニメーションを実現するためには、
1枚1枚の画像等（オブジェクト）をプログラムで操作して
イベント（アニメーションが始まるきっかけ）を割り当て、
タイマー関数等で表示位置（ピクセル）を加算または減算
しなければなりません。
「X座標とY座標を・・・」
という算数をプログラミング言語に置き換えてやるわけです。
これはプログラミング経験がない方にはハードルが高いです。
なので、オーサリングツールがその「難しい部分」を
肩代わりしてくれているわけですね。
しかし、困ったことがあります。
▼オーサリングツールが出力したHTML
めちゃくちゃ複雑ですよね。
プログラム歴20年の私でも、これを解析するのは無理です。
なぜなら、ファイルの容量を小さくするためにJavaScript
のプログラム部分が圧縮されているからです。
人の目にわかりやすい変数名ではなく、e や x などの
単独で意味をなさない変数名に置き換えられ、字下げなども
ありません。
これは、
「もう人の手でメンテナンスする必要ないよね！？」
「いつでもツールの画面から編集すればいいからね！」
「だから人の目に分かりやすいHTMLを出力したりしませんからね！」
と宣告されているに等しいのです。
慣れれば作るのは早いかも知れませんが、
作ったときと同じツールを持っていないと誰にもメンテナンスができない
というのは困りますね。
今日はスケルトン（アプリケーションの型枠のみ）を作成しました。
▼作成するプロジェクトの種類から「HTML（ページ）」を選ぶ
空っぽのHTMLファイルが生成されました。
ここに動画や画像を配置したり、アニメーションの定義を
追加したりするようです。
▼プロジェクトフォルダの中身を見てみる
HTMLとCSSとJSの基本セットが自動生成されました。
これらが Google Web Designer に備わっているテンプレートですね。
オーサリングツールの画面でいろいろと編集すると
これらのファイルに反映されるのでしょう。
▼どんなテンプレートなのか、開いて見る
テンプレートはレスポンシブ対応しているらしく、
viewportの定義がありますね。
ページ内のコンテンツエリアを装飾するCSSがHTML内に
べた書きされているのが不本意ですが。。。
明日以降で時間を見つけてサンプルを作ってみようと思います。
▼作成するプロジェクトの種類から「HTML（ページ）」を選ぶ
空っぽのHTMLファイルが生成されました。
ここに動画や画像を配置したり、アニメーションの定義を
追加したりするようです。
▼プロジェクトフォルダの中身を見てみる
HTMLとCSSとJSの基本セットが自動生成されました。
これらが Google Web Designer に備わっているテンプレートですね。
オーサリングツールの画面でいろいろと編集すると
これらのファイルに反映されるのでしょう。
▼どんなテンプレートなのか、開いて見る
テンプレートはレスポンシブ対応しているらしく、
viewportの定義がありますね。
ページ内のコンテンツエリアを装飾するCSSがHTML内に
べた書きされているのが不本意ですが。。。
明日以降で時間を見つけてサンプルを作ってみようと思います。
Webオーサリングツールというものを初めてマジメに調べました。
▼Googleの無料オーサリングツール
Google Web Designer
どれくらいすごいのかは、
自分で使ってからレビューを書こうと思います。
ところで、Web制作者さんがよく使われているDreamweaverやHomePageBilderも
実はオーサリングツールの一つですが、今までどちらも使ったことありません（笑）
HomePageBilderはちょっと触った程度で
「プロがいきなりこういうものに頼ってはいけない」
とバッサリ切り捨てました。
Win95の頃からWindows標準のメモ帳（notepad）で１からコーディングしてきた
アナログ職人ゆえ、ツールを嫌っていたという理由ではありません。
ホームページ制作ツールを使うとワードで書くのと同じような感覚でHTMLが作れる反面、
ツールが自動的に吐き出すHTMLがいかに煩雑で可読性が悪いかを知っていたからです。
「人間にとっても読みづらいHTMLだと、 あとあと誰がメンテナンスするんですか？」
「１から作り直すほうが安いと言われたら高い制作費を払って毎回作り直すんですか？」
「最初から綺麗なコーディングができるフロントエンジニアに任せたほうが、
トータルコストが抑えられるのでは？」
というのが、プログラマー的な視点です。
制作をご依頼くださるお客様のためを考えると 結局はそうなるのです。
Webオーサリングツールを使っても使わなくても 結局はWebページを表示
させているのはHTML・CSS・JavaScript・動画等のメディア です。
オーサリングツールは、これらを直にプログラミングする代わりに
グラフィカルで直観的な操作によって「ツールに翻訳を任せる」ものだと言えますが、
与えた指示に対してオーサリングツールがどんなアウトプットをしてくれるのかを
理解する基礎力がなければ、ツールでできる範囲のことしかできないでしょう。
というわけで、何事も基礎が大事ですね。
でも、基礎だから簡単という意味ではありません。
人に教えられる程度にまで習熟してはじめて
「私は基礎ができている」
と言えると思います。
▼ホームページ制作の基礎からカスタマイズまでHTML歴20年のプロがスカイプでマンツーマン
＞＞【1時間無料】スカイプ相談のお申し込みはこちらからどうぞ
▼Googleの無料オーサリングツール
Google Web Designer
どれくらいすごいのかは、
自分で使ってからレビューを書こうと思います。
ところで、Web制作者さんがよく使われているDreamweaverやHomePageBilderも
実はオーサリングツールの一つですが、今までどちらも使ったことありません（笑）
HomePageBilderはちょっと触った程度で
「プロがいきなりこういうものに頼ってはいけない」
とバッサリ切り捨てました。
Win95の頃からWindows標準のメモ帳（notepad）で１からコーディングしてきた
アナログ職人ゆえ、ツールを嫌っていたという理由ではありません。
ホームページ制作ツールを使うとワードで書くのと同じような感覚でHTMLが作れる反面、
ツールが自動的に吐き出すHTMLがいかに煩雑で可読性が悪いかを知っていたからです。
「人間にとっても読みづらいHTMLだと、 あとあと誰がメンテナンスするんですか？」
「１から作り直すほうが安いと言われたら高い制作費を払って毎回作り直すんですか？」
「最初から綺麗なコーディングができるフロントエンジニアに任せたほうが、
トータルコストが抑えられるのでは？」
というのが、プログラマー的な視点です。
制作をご依頼くださるお客様のためを考えると 結局はそうなるのです。
Webオーサリングツールを使っても使わなくても 結局はWebページを表示
させているのはHTML・CSS・JavaScript・動画等のメディア です。
オーサリングツールは、これらを直にプログラミングする代わりに
グラフィカルで直観的な操作によって「ツールに翻訳を任せる」ものだと言えますが、
与えた指示に対してオーサリングツールがどんなアウトプットをしてくれるのかを
理解する基礎力がなければ、ツールでできる範囲のことしかできないでしょう。
というわけで、何事も基礎が大事ですね。
でも、基礎だから簡単という意味ではありません。
人に教えられる程度にまで習熟してはじめて
「私は基礎ができている」
と言えると思います。
▼ホームページ制作の基礎からカスタマイズまでHTML歴20年のプロがスカイプでマンツーマン
＞＞【1時間無料】スカイプ相談のお申し込みはこちらからどうぞ
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
 |  |
GPLライセンスのWordPressテーマを使うなら、
次の３つのルールを守らなくてはなりません。
(1)著作権表示は維持せねばならない。
(2)自由に改変して良い。
(3)改変いたものもまたGPLライセンスが適用される。
この3つ目が大事なんです。
WordPressの無料テーマ配布サイトには、BizVectorなどの
有名どころがありますが、無料で使えるGPLライセンスの
テーマは、自由にカスタマイズしても良いのですが
「フッターなどに付いている著作権の表示は外してはいけない」
ということです。
じゃあ結局、無料テーマは使わないほうが良いのか？
その一つの答えをWebサイト専門プログラマーの視点から
まとめてみましたので、ぜひご参考にしてください。
＞＞WordPressサイトのテーマ選びの考え方
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
| |
WordPressのカスタマイズは難しいという方が多いのですが、
「どのファイルのどこを編集すればよいのか分からない」
というのが最たる理由ではないでしょうか？
WordPressはヘッダーやフッター、サイドバーなど
ホームページを構成する部分ごとにテンプレートファイルが分かれています。
しかも、無数にあるデザインテンプレート（テーマと呼びます）によって
さらに細かくファイルが分かれていますので、なおさら難解です。
HTMLサイトを作ったことがあってもWordPressになると途端に
手が出せなくなる原因はここにあるのではないでしょうか。
でもご安心ください。
プロのWEBデザイナーでも使いこなせている方が少ないある「ツール」を使えば、
初心者でも十分に自力でWordPressのカスタマイズができるようになります。
ほとんどのブラウザについている標準ツールですので、
WEB系のシステム構築の現場でも使うことが可能です。
WordPressだけでなく、Webサイト制作全般に使えます。
ぜひこのツールを使いこなせるようになりましょう。
▼WordPress初心者でもカスタマイズできる開発ツール
＞＞続きはサイトで
「どのファイルのどこを編集すればよいのか分からない」
というのが最たる理由ではないでしょうか？
WordPressはヘッダーやフッター、サイドバーなど
ホームページを構成する部分ごとにテンプレートファイルが分かれています。
しかも、無数にあるデザインテンプレート（テーマと呼びます）によって
さらに細かくファイルが分かれていますので、なおさら難解です。
HTMLサイトを作ったことがあってもWordPressになると途端に
手が出せなくなる原因はここにあるのではないでしょうか。
でもご安心ください。
プロのWEBデザイナーでも使いこなせている方が少ないある「ツール」を使えば、
初心者でも十分に自力でWordPressのカスタマイズができるようになります。
ほとんどのブラウザについている標準ツールですので、
WEB系のシステム構築の現場でも使うことが可能です。
WordPressだけでなく、Webサイト制作全般に使えます。
ぜひこのツールを使いこなせるようになりましょう。
▼WordPress初心者でもカスタマイズできる開発ツール
＞＞続きはサイトで
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
| |
今日の生徒さんは２名でした。
合計３時間ほどのスカイプでしたが、
通話機能を使ってご説明をしつつ、
画面共有機能を使って同じパソコン画面を見ながら実演させていただきました。
人前で話すのは苦手ですが、
教えるのは大好きなので苦にはなりません。
私の生徒さんはプロのデザイナーさんから
個人で趣味サイトを運営されている方までさまざまですので、
レベルに合せたカスタマイズ方法をお教えさせていただいております。
きちんと自分で理解して、
同じカスタマイズなら自分でできるようになりたい方には
オリジナルの講義ノートをお作りしております。
これがけっこう好評のようです。
レッスンの内容を忘れてしまっても、
講義ノートがあればいつでも思い出せると思います。
遠方の方や、本業が忙しくて直接お会いできない方にも、
授業料以上の価値を提供できていると自負しております。
＞＞忙しい方のためのWordPressオンラインレッスン
合計３時間ほどのスカイプでしたが、
通話機能を使ってご説明をしつつ、
画面共有機能を使って同じパソコン画面を見ながら実演させていただきました。
人前で話すのは苦手ですが、
教えるのは大好きなので苦にはなりません。
私の生徒さんはプロのデザイナーさんから
個人で趣味サイトを運営されている方までさまざまですので、
レベルに合せたカスタマイズ方法をお教えさせていただいております。
きちんと自分で理解して、
同じカスタマイズなら自分でできるようになりたい方には
オリジナルの講義ノートをお作りしております。
これがけっこう好評のようです。
レッスンの内容を忘れてしまっても、
講義ノートがあればいつでも思い出せると思います。
遠方の方や、本業が忙しくて直接お会いできない方にも、
授業料以上の価値を提供できていると自負しております。
＞＞忙しい方のためのWordPressオンラインレッスン
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
| |
裏技を使わないSEOで上位表示を狙うための
キーワード選定方法を紹介します。
あなたのホームページを誰がどんなキーワードで検索するかを
予測できる力をみにつけて、効率的なSEO対策をしましょう。
▼キーワード探しのポイントはこちら
＞＞SEOキーワードの探し方
キーワード選定方法を紹介します。
あなたのホームページを誰がどんなキーワードで検索するかを
予測できる力をみにつけて、効率的なSEO対策をしましょう。
▼キーワード探しのポイントはこちら
＞＞SEOキーワードの探し方
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
| |
何人かのWEBデザイナーさんにお教えさせていただいたのですが、
みなさんが行き詰る原因は２つです。
１．PHPという得体のしれない恐怖
２．CSSの基礎力不足
WEBデザイナーとして何年も仕事してきた方でも、
CSSの基礎力がまだまだ足りていないことが多いようです。
Dreamweaver等のHP制作ソフトにHTMLやCSSのコードを書く作業を
任せてこられたからだと思います。
この本質的な弱点が克服できれば、
デザインからコーディングまで一括受注することも可能になります。
受注単価のアップです。
今までコーディングは外注してこられた、
コーディングが苦手なWEBデザイナーさんにぜひ克服して欲しい弱点です。
そのお手伝いをさせていただくのが、
私のようなWEBサイト専門プログラマーの役割だと思っています。
ソフトが奪ってきたCSSの基礎力を取り戻す最適な方法をお教えします。
本質を身につける目が決して曇ることのない方法です。
＞＞HPソフトが決して教えてくれないこと
みなさんが行き詰る原因は２つです。
１．PHPという得体のしれない恐怖
２．CSSの基礎力不足
WEBデザイナーとして何年も仕事してきた方でも、
CSSの基礎力がまだまだ足りていないことが多いようです。
Dreamweaver等のHP制作ソフトにHTMLやCSSのコードを書く作業を
任せてこられたからだと思います。
この本質的な弱点が克服できれば、
デザインからコーディングまで一括受注することも可能になります。
受注単価のアップです。
今までコーディングは外注してこられた、
コーディングが苦手なWEBデザイナーさんにぜひ克服して欲しい弱点です。
そのお手伝いをさせていただくのが、
私のようなWEBサイト専門プログラマーの役割だと思っています。
ソフトが奪ってきたCSSの基礎力を取り戻す最適な方法をお教えします。
本質を身につける目が決して曇ることのない方法です。
＞＞HPソフトが決して教えてくれないこと
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
| |
まさかとは思いますが、あなたもSEO対策を誤解しているのではないでしょうか？
・本業が忙しいから今日はできなかった
・そんなにSEOに時間は割けない
・これをやるとSEOになるって聞いたんだけど
そんなことを口にしているうちは効果は出ません。
SEO対策は片手間にやるものではありません。
本業と同レベルの意識で取り組まなければ、
仮に効果が出たとしてもすぐに効果が消えます。
あなたはWordPressがSEO対策に強いと信じておられるかも知れませんが、
決して、WordPressのサイトだからSEOに強いのではありません。
SEO対策を講じれば効果が出やすい仕組みをWordPressが備えているというだけです。
その仕組みをちゃんと使ってあげなければ
効果なんてでるはずがないのです。
ろくに対策をしていないWordPressサイトよりも、
しっかり内部SEO対策をしているHTMLサイトのほうが
よっぽど検索エンジンに評価されます。
そろそろ目を覚ましませんか？
WordPressだからSEOは大丈夫だろうという発想は、
おいしそうな話にすぐ飛びついて安心感を得たがる
ノウハウコレクターと同じです。
まだ勘違いされているかもしれませんのでもう一度言います。
SEO対策は、
何かをやったら必ずすぐ効果がでる
という性質のものではありません。
私はSEOについて、ある基本的なことを知ってから、
Facebookやアメブロ、そしてWordPressとの付き合い方が180度変わりました。
SEOに対する考え方（マインド）がまだ十分備わっていないうちは、
いきなり全部を対策しようとするのは難しいと思います。
ですから、簡単に設置できるWordPressを練習台にして、
まずは内部SEO対策の基本とも言える「あること」を
1週間に1回だけやってみませんか？
1週間に1回なら土日の空き時間にでもできそうな気がしませんか？
私は現在、WordPressのオンラインレッスン講師として
常時4～5名の生徒を抱える身ですが、
1週間に1回なら無理なくお付き合いさせていただけます。
お試しの無料相談1時間を利用してみませんか？
▼お気軽にメッセージを下さい。
＞＞スカイプで1時間の無料相談受付中♪
・本業が忙しいから今日はできなかった
・そんなにSEOに時間は割けない
・これをやるとSEOになるって聞いたんだけど
そんなことを口にしているうちは効果は出ません。
SEO対策は片手間にやるものではありません。
本業と同レベルの意識で取り組まなければ、
仮に効果が出たとしてもすぐに効果が消えます。
あなたはWordPressがSEO対策に強いと信じておられるかも知れませんが、
決して、WordPressのサイトだからSEOに強いのではありません。
SEO対策を講じれば効果が出やすい仕組みをWordPressが備えているというだけです。
その仕組みをちゃんと使ってあげなければ
効果なんてでるはずがないのです。
ろくに対策をしていないWordPressサイトよりも、
しっかり内部SEO対策をしているHTMLサイトのほうが
よっぽど検索エンジンに評価されます。
そろそろ目を覚ましませんか？
WordPressだからSEOは大丈夫だろうという発想は、
おいしそうな話にすぐ飛びついて安心感を得たがる
ノウハウコレクターと同じです。
まだ勘違いされているかもしれませんのでもう一度言います。
SEO対策は、
何かをやったら必ずすぐ効果がでる
という性質のものではありません。
私はSEOについて、ある基本的なことを知ってから、
Facebookやアメブロ、そしてWordPressとの付き合い方が180度変わりました。
SEOに対する考え方（マインド）がまだ十分備わっていないうちは、
いきなり全部を対策しようとするのは難しいと思います。
ですから、簡単に設置できるWordPressを練習台にして、
まずは内部SEO対策の基本とも言える「あること」を
1週間に1回だけやってみませんか？
1週間に1回なら土日の空き時間にでもできそうな気がしませんか？
私は現在、WordPressのオンラインレッスン講師として
常時4～5名の生徒を抱える身ですが、
1週間に1回なら無理なくお付き合いさせていただけます。
お試しの無料相談1時間を利用してみませんか？
▼お気軽にメッセージを下さい。
＞＞スカイプで1時間の無料相談受付中♪
よろしければ読者登録やランキング「ポチッ」とお願いします♪ | |
| |