現役WEBコーダーのコーディングテクニックをまとめていますので参考にしてみてください。現役WEBコーダーのコーディングテクニックをまとめていますので参考にしてみてください。メニューコンテンツへ移動ホームSEOマスターツールのsitemap.xml追加警告対処法SEOに有効なsitemap.xmlの作り方です。「sitemaps.html」とか他の名前に変えておきましょう。******************************************************************静的サイトの場合通常の作り方コーディングが終わり、全データを本番サーバにアップしたらこちらのサイトにURLを入力。自動生成してくれるので最上階層にアップする。http://www.sitemapxml.jp/index数、(ページ)を増やしたときはまた生成してアップしなおす。Sitemaps]プラグインを検索し、有効化する。これはページが増えた時も自動で更新してくれるので、どのサイトにも必須プラグインと言えるそうです。Sitemapsがあるので、サイトマップを構築するには「こちらをクリック」という文章を見つけます。******************************************************************wordpressを使っているけどsitemap.phpページがすでに上がってしまっている場合そのままsitemap.xmlをアップするとコンフリクトを起こすのでファイル名をsitemaps.phpに直します。パーマリンクもhttp://**********/sitemapになっていると思うのでhttp://**********/sitemapに直す。ルートの直下に生成ツールで作成したsitemap.xmlをアップロード。これもページ増やすたびに生成しなおしてアップしなくてはならないです。Bw46MtQGL5Lewordpress(パーマリンク設定)WordPressでホームページ制作をする際、投稿機能を使用することがあるかと思います。反映させることも可能です。定が可能ですので試してみましょう。/%year%/%monthnum%/%day%/こうすることで、投稿すると自動で日付となります。そのほかにもタイトル名の設定、数字ベースなど様々な設定が可能です。?から適当な.phpファイルをデスクトップにダウンロードこれをベースにしたいので名前を書き換える(menu.phpだとしたら、sitemap.phpなどにリネームする。)リネームしたのをもとの場所にアップロード。wordpressにログインすると、外観のテーマ編集の所にsitemap.phpが表れているのが分る。コードの中の一行のtempletename:menuという所をtempletename:sitemapと修正。wordpressの「投稿」に行き、新規追加ボタンをクリック。タイトル欄にsitemapを入力。右のサイドメニューのテンプレートからプルダウンでsitemapを選ぶ。これでページが追加できました。?ホームページ制作を一度完了しても、あとから追加する機会はたまにあるので、方法を忘れたら自分もこのブログを見直そうと思っています。ショートカット編コメントをどうぞWEBデザイナーはHTML&CSSコーディングをする際は必ずといっていいほど、アドビのdreamweaver(ドリームウィバー)を使用しますよね。HTMLオーサリングソフトでホームページビルダーという素晴らしいソフトがありますが残念ながら、プロのWEB制作会社の標準ソフトはアドビのドリームウィバーとなります。これからWEBデザイナーを目指すという方はソフトの使用には十分気を付けて下さい。バージョン8か9だったと思います。情報は知っているか、知らないかになりますのでまず始める前に先人の先輩に相談することをオススメします。一つ少々余談になりますがパソコンスクールで標準デザインソフトとして、ファイヤーワークスを推奨していましたがプロのWEBデザイナーが使用している標準ソフトはアドビのフォトショップですよ。これも貴重な情報ですよね。そのファイヤーワークスはCS6をもちまして終了となること、ご存じでしょうか?情報が貴重です。余談となってしまいしたが本題の今回ドリームウィバーのショートカットをご説明します。環境設定とりあえずこれぐらい覚えておけばOKだと思います。あとは自分で探してみて下さい。Bw46MtQGL5Le「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-2コメントをどうぞ前回「「FullCalendar.js」を使用して、Googleカレンダーをもっと美しく-1」で基本的な導入方法をお伝えしましたが、今回は簡単なカスタマイズについてお伝えします。ホームページ制作の多くは「和文」サイトのため、曜日などの表示も「和文」に合わせます。修正後?今回はhtmlのheadタグ内に直接scriptを記載しました。(外部スクリプトを読み込んでいる場合はそちらに記載するほうがベターです)もともとhead内に以下のscriptがデフォルトで記載されていましたので$(‘#calendar’).fullCalendar({ここの直下に以下を追加しました。‘今日’,},これで和文表記となりました。ちなみにデフォルトではhtmlのエンコード宣言がされていませんのでちゃんと宣言しましょう。Bw46MtQGL5Le.dwtを更新したらCSSがリンク切れになった時コメントをどうぞホームページ制作の効率化のためにサイドバーやヘッダー、フッターをテンプレート化することがあります。更新すると全部のページに反映されるはずですが、されないときの対処法は以下です。「ファイル名.dwt」その他「ファイル名.html」cssを修正。ここで「ファイル名.dwt」を保存すると、ファイル名.htmlが更新される。完成したら、この時点でファイルサーバーに保管する。テンプレートを更新して、htmlを全部書き換えるのには成功したら、画像やcssがリンク切れを起こした!ときの対処法です。?やり直しになるので、サーバーからローカルにデータをコピーしなおして始めます。→テンプレート.dwtを作業します。ここで、一気に反映させない。保存した瞬間このテンプレートを使うローカルサイト内部の全ドキュメントを更新しますか?とウィンドウがでるので「いいえ」にしておく。→そのあと個別にhtmlを開いて、一個一個テンプレートを更新して、反映させる。これならうまくいきます。Bw46MtQGL5LeDreamweaver-パネルで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左の余白を指定しますmarginやpaddingはショートハンドプロパティを使用することで表示を簡潔に整理することができます。(上下は0、左右はauto)指定をします。webサイト全体が画面の左寄せで表示されているサイトが今でもよくみられますが最近では画面センターで表示されるよう設定するのが通常です。「本来は20,000円だけど、今は15,000円でオトクに販売しています!」という時、その値引き額(「5,000円も安くなってるんですよ!」ということ)をユーザーに知らせたいですよね。「定価」に打ち消し線をつけ、かつ、線の色だけ赤にしたい!というお声がございましたので、その際のコーディング方法をお伝えします。カラーミーの「お店を作る」「デザインを設定する」→「商品詳細」html編集をクリックし、以下の箇所を探しましょう。ここに定価表示の設定がされているため、スタイルをかけて調整していきます。↓tdタグの欄に以下を追加し、CSSで打ち消し線の色を設定します。定価の数字も赤で問題ないかたは、spanタグの設定は不要です。これで定価の数字は黒色、打ち消し線のみ赤、の設定ができました。↓↓↓こんな感じ「定価」と「販売価格」を設定した商品については、基本的には全ページ共通の表示となりますのでご注意くださいませ。Bw46MtQGL5Lewordpressで普通のサイトを作るメモコメントをどうぞwordpressでブログじゃないサイトを作る時の初心者メモです。画像に関しては2か所に格納する。sidebarなど)→ftpでimgフォルダに格納。htmlは「外観」の「テーマ編集」に入れる。下書きを保存するとプレビューして完成ページの確認ができる。画像は「メディア」に保存した物の絶対パスをコピーし、テーマ編集のコードに一個一個ペーストする。headerやfooterなどの共通領域は「テンプレート」として読み込みます。書くコードは標準的には次の通り。–><p>ここにdivで囲んだhtmlソースがはいります。?–>cssも、外観のテーマ編集に入っています。no-repeat;になります。SYSTEMの使い方:2コメントをどうぞでは前回の一覧の画面より、「操作」欄から編集を押して、編集画面に入った時の操作方法です。新しい画像をフォルダから選択しアップロードすると上書きしてくれます。トップページやバナー用にアップした画像も同じでで、SYNKAは画像に関しては全て古いのを削除する必要がなく便利です。ここにアップする画像は多少ぼやけていても平気です。スマホで見ると縮小されてきれいに見えることがあるので、実機で確認してください。■スマホでみたら文字と文字の間が狭かった!行間を開けるにはカーソルを普通に持ってきてenterを押せばOKです。■でも、やはりhtmlで編集したい。右の[html]アイコンをおすと、ポップアップで出てきます。上手くいかないこともあるのでソースをバックアップとしてコピーしてから作業します。cssはspanで区切った内部cssで。tableはwidth:800位が良かったです。tdの幅も直接指定していました。ここの画面を主に使うのはtableで組みたい時やfloatをかけたい時です。やりづらいのでそれ以外はあまり使わないほうが良いです。