SEOマスターツールのsitemap.xml追加警告対処法

SEOに有効なsitemap.xml

の作り方です。

htmlのなかに、[サイトマップ]として「sitemap.html」ファイルがあると

sitemap.xmlとsitemap.htmlがコンフリクトを起こしてうまく表示されません、

「sitemaps.html」とか他の名前に変えておきましょう。

 

******************************************************************

静的サイトの場合通常の作り方

コーディングが終わり、全データを本番サーバにアップしたらこちらのサイトにURLを入力。

自動生成してくれるので最上階層にアップする。

http://www.sitemapxml.jp/

index数、(ページ)を増やしたときはまた生成してアップしなおす。

 

******************************************************************

wordpressを使ったサイトの場合

[Google XML Sitemaps]プラグインを検索し、有効化する。これはページが増えた時も自動で

更新してくれるので、どのサイトにも必須プラグインと言えるそうです。

設定の所でGoogle XML Sitemapsがあるので、サイトマップを構築するには「こちらをクリック」という文章を見つけます。クリックすれば完了。

******************************************************************

wordpressを使っているけど

sitemap.phpページがすでに上がってしまっている場合

そのままsitemap.xmlをアップするとコンフリクトを起こすので

ファイル名をsitemaps.phpに直します。パーマリンクもhttp://**********/sitemapになっていると思うので

http://**********/sitemapに直す。

ルートの直下に生成ツールで作成したsitemap.xmlをアップロード。これもページ増やすたびに

生成しなおしてアップしなくてはならないです。

wordpress(パーマリンク設定)

WordPressでホームページ制作をする際、投稿機能を使用することがあるかと思
います。
URLは都度手動にて任意で変更することができますが(タイトル欄のすぐした、
パーマリンクの欄に「編集ボタン」があります)、自動で「投稿日」を 反映させ
ることも可能です。

管理画面の「設定」→「パーマリンク設定」で、投稿日や数字といった様々な設
定が可能ですので試してみましょう。

例えば投稿日をアドレスに自動設定する場合
例)http://www.aaa.com/blog/2013/08/27/
パーマリンク設定の「日付と投稿」を修正するか、「カスタム構造」で以下を入
力します。
/%year%/%monthnum%/%day%/

こうすることで、投稿すると自動で日付となります。
そのほかにもタイトル名の設定、数字ベースなど様々な設定が可能です。

WordPressで構築されたサイトに新規ページ追加する

phpの知識がないデザイナーでも、手順を覚えればページの追加や修正ができます

該当サイトのftpにログインする

/wp-content/themes ? ?から適当な.phpファイルをデスクトップにダウンロード

これをベースにしたいので名前を書き換える

(menu.phpだとしたら、sitemap.phpなどにリネームする。)

リネームしたのをもとの場所にアップロード。wordpressにログインすると、外観のテーマ編集の所にsitemap.phpが表れているのが分る。

コードの中の一行のtempletename:menuという所をtempletename:sitemapと修正。

wordpressの「投稿」に行き、新規追加ボタンをクリック。タイトル欄にsitemapを入力。右のサイドメニューのテンプレートからプルダウンでsitemapを選ぶ。

これでページが追加できました。

?ホームページ制作を一度完了しても、あとから追加する機会はたまにあるので、方法を忘れたら自分もこのブログを見直そうと思っています。

20130805-Webコーディングはドリームウィバーを極めるべし ショートカット編

WEBデザイナーはHTML&CSSコーディングをする際は

必ずといっていいほど、アドビのdreamweaver(ドリームウィバー)を使用しますよね。

同じく、HTMLオーサリングソフトでホームページビルダーという素晴らしいソフトがありますが

残念ながら、プロのWEB制作会社の標準ソフトはアドビのドリームウィバーとなります。

これからWEBデザイナーを目指すという方はソフトの使用には十分気を付けて下さい。

実は私も右も左もわからない頃はホームページビルダーを使用していました・・・笑

確か、バージョン8か9だったと思います。

そう情報は知っているか、知らないかになりますのでまず始める前に先人の先輩に相談することをオススメします。情報は命です。

もう一つ少々余談になりますが

パソコンスクールで標準デザインソフトとして、

ファイヤーワークスを推奨していましたが

プロのWEBデザイナーが使用している標準ソフトは

アドビのフォトショップですよ。

これも貴重な情報ですよね。

そのファイヤーワークスはCS6をもちまして終了となること、ご存じでしょうか?

情報が貴重です。

さて、余談となってしまいしたが

本題の今回ドリームウィバーのショートカットをご説明します。

ctr+S 保存

ctr+Shift+s  名前を付けて保存

ctr+A すべて選択

ctr+alt+i イメージ画像の挿入

ctr+1 H1

ctr+2 H2

ctr+3 H3

ctr+4 H4

ctr+5 H5

ctr+6 H6

ctr+L リンク先の設定

ctr+shift+P Pタグの挿入

F5 更新

ctr+Z 戻る

ctr+Y やり直し

ctr+P 印刷

ctr+U 環境設定

とりあえずこれぐらい覚えておけばOKだと思います。

あとは自分で探してみて下さい。

 

 

 

 

 

「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-2

前回「「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1」で基本的な導入方法をお伝えしましたが、今回は簡単なカスタマイズについてお伝えします。

ホームページ制作の多くは「和文」サイトのため、曜日などの表示も「和文」に合わせます。

修正前
06032

 

修正後
06031

?今回はhtmlのheadタグ内に直接scriptを記載しました。
(外部スクリプトを読み込んでいる場合はそちらに記載するほうがベターです)

もともとhead内に以下のscriptがデフォルトで記載されていましたので
$(‘#calendar’).fullCalendar({
ここの直下に以下を追加しました。

dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
buttonText: {today: ‘今日’,},

これで和文表記となりました。
ちなみにデフォルトではhtmlのエンコード宣言がされていませんのでちゃんと宣言しましょう。
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

 

 

 

 

 

.dwtを更新したらCSSがリンク切れになった時

 

ホームページ制作の効率化のためにサイドバーやヘッダー、フッターをテンプレート化することがあります。
更新すると全部のページに反映されるはずですが、されないときの対処法は以下です。

もっと詳しい説明を見る

———————————————————————
ftpから最新ファイルを全部ローカルに落としてくる

「サイトの管理」ルートフォルダを選択しなおして正しいディレクトリを認識させる

「ファイル名.dwt」その他「ファイル名.html」cssを修正。
ここで
「ファイル名.dwt」を保存すると、ファイル名.htmlが更新される。
されない場合は修正メニュー→テンプレート→テンプレートをページに「適用」

完成したら、この時点でファイルサーバーに保管する。
ファイルサーバーで作業すると、パスが複雑過ぎて壊れ、リンク切れなどを起こしてしまいます。

———————————————————————

しかし、テンプレートを更新して、htmlを全部書き換えるのには成功したら、画像やcssがリンク切れを起こした!
ときの対処法です。

?やり直しになるので、サーバーからローカルにデータをコピーしなおして始めます。

→テンプレート.dwtを作業します。出来たら保存します。ここで、一気に反映させない。
保存した瞬間このテンプレートを使うローカルサイト内部の全ドキュメントを更新しますか?とウィンドウがでるので
「いいえ」にしておく。
→そのあと個別にhtmlを開いて、一個一個テンプレートを更新して、反映させる。
これならうまくいきます。

Dreamweaver-パネルでcssを作成しよう!-カテゴリ「ボックス」

「Dreamweaver-パネルでcssを作成しよう」第4回目はカテゴリ「ボックス」プロパティを見直していきます。
(前回のカテゴリ「ブロック」はこちら)

width
横幅を指定します。
height
高さを指定します。
Float
配置を指定します。

left
左寄せの指定をします。またはその後に続く要素に関しては、左寄せに指定した要素の右に回り込みをするよう指定します。

right
右寄せの指定をします。またはその後に続く要素に関しては、右寄せに指定した要素の左に回り込みをするよう指定します。

none
特に何も指定しません。

clear
回り込みの解除を行います。

left
左寄せされた要素の回り込み解除を指定します。

right
右寄せされた要素の回り込み解除を指定します。

both
右又は左寄せされた全ての要素の回り込み解除を指定します。

none
回り込み解除はしません。

padding
余白の指定をします。marginはある領域とある領域の間の余白であるのに対し、paddingはひとつの領域の中での余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

margin
余白の指定をします。paddingはひとつの領域内での余白であるのに対し、marginはある領域とある領域の間の余白です。

top
上の余白を指定します

right
右の余白を指定します

bottom
下の余白を指定します

left
左の余白を指定します

img01_02

marginやpaddingはショートハンドプロパティを使用することで表示を簡潔に整理することができます。
padding: {10px 20px 30px 40px;} (左側(10px)から、上右下左)
padding: {10px 20px 40px;} (左側(10px)から、上・左右・下)

ちなみに、divなどで囲ったおおきなボックス(くくり)を、web上の画面内で
左右に対しまん中表示させる際には、
margin:0 auto; (上下は0、左右はauto)指定をします。
webサイト全体が画面の左寄せで表示されているサイトが今でもよくみられますが最近では画面センターで表示されるよう設定するのが通常です。

カラーミーの価格表示設定

カラーミー(ECサイト)で、通常価格よりも商品をお安く販売をする際、
例えば「本来は20,000円だけど、今は15,000円でオトクに販売しています!」
という時、その値引き額(「5,000円も安くなってるんですよ!」ということ)をユーザーに知らせたいですよね。

そんなときは、商品登録の際、「定価」と「販売価格」の両方に入力すれば自動で2つの価格が表示されるわけですが、
「定価」に打ち消し線をつけ、かつ、線の色だけ赤にしたい!
というお声がございましたので、その際のコーディング方法をお伝えします。

カラーミーの
「お店を作る」「デザインを設定する」→「商品詳細」html編集をクリックし、以下の箇所を探しましょう。

htmlサンプル1—————————-————————–

<tr>
<th>定価</th>
<td><{$product.price}></td>
</tr>

————————————————————————

ここに定価表示の設定がされているため、スタイルをかけて調整していきます。

tdタグの欄に以下を追加し、CSSで打ち消し線の色を設定します。
定価の数字も赤で問題ないかたは、spanタグの設定は不要です。

htmlサンプル2————————————

<tr>
<th>定価</th>
<td><p class=”line-red”><span><{$product.price}></span></p></td>
</tr>

CSSサンプル——————————————————–

p.line-red{text-decoration:line-through;color: red;}

p.line-red span{color:#000;}

————————————————————————

これで定価の数字は黒色、打ち消し線のみ赤、の設定ができました。
↓↓↓こんな感じ

sample_1

「定価」と「販売価格」を設定した商品については、基本的には全ページ共通の表示となりますのでご注意くださいませ。

それでは~

wordpressで普通のサイトを作るメモ

wordpressでブログじゃないサイトを作る時の初心者メモです。
画像に関しては2か所に格納する。
1.コンテンツ領域の画像→メディア→新規追加→アップロード
2.共通領域(header footer sidebarなど)→ftpでimgフォルダに格納。 htmlは「外観」の「テーマ編集」に入れる。

 

下書きを保存するとプレビューして完成ページの確認ができる。

画像は「メディア」に保存した物の絶対パスをコピーし、テーマ編集のコードに一個一個ペーストする。

headerやfooterなどの共通領域は「テンプレート」として読み込みます。書くコードは標準的には次の通り。

 

<!–?php /* Template Name: なまえ */ ?–>

<!–?php get_header(); ?–>

<ul id=”pankuzu”>
<li><a href=”<?php echo home_url(); ?>”>トップ</a></li>
<li> ? について</li>

</ul>

<!– sec01 start –>
<p>ここにdivで囲んだhtmlソースがはいります。</p>

<!– sec01 end–>

<!–?php get_footer(); ?–>

cssも、外観のテーマ編集に入っています。 cssの背景画像設定は2.の所でアップしましたので、background: url(img/********.jpg) no-repeat;になります。

SYNKA SYSTEMの使い方:2

では前回の一覧の画面より、「操作」欄から編集を押して、編集画面に入った時の操作方法です。

synka3
■挿入した画像に入れ替えの指示が来た時の作業方法

その画像を選択して色を反転させた状態にする→
画像アイコンを押す。新しい画像をフォルダから選択しアップロードすると
上書きしてくれます。
トップページやバナー用にアップした画像も同じでで、SYNKAは画像に関しては全て古いのを削除する必要がなく便利です。

ここにアップする画像は多少ぼやけていても平気です。スマホで見ると縮小されてきれいに見えることがあるので、実機で確認してください。

■スマホでみたら文字と文字の間が狭かった!

行間を開けるにはカーソルを普通に持ってきてenterを押せばOKです。

■でも、やはりhtmlで編集したい。

一番右の[html]アイコンをおすと、ポップアップで出てきます。

synka4

上手くいかないこともあるのでソースをバックアップとしてコピーしてから作業します。

cssはspanで区切った内部cssで。

tableはwidth:800位が良かったです。tdの幅も直接指定していました。

ここの画面を主に使うのはtableで組みたい時やfloatをかけたい時です。

やりづらいのでそれ以外はあまり使わないほうが良いです。