ウェブデザイナーの問題解決メモ

 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し！！ …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント：☑を使用「2」「スペース」 ・タブサイズ：「２」☑スペースとして挿入 ・TDタグ：□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行：タグの前後 コンテンツ：フォーマットおよびびインデントあり divの設定 改行：前、中間、後 コンテンツ：フォーマットおよびびインデントあり buttonの設定 改行：前、中間、後 コンテンツ：フォーマットおよびインデントあり headの設定 改行：前、中間、後 コンテンツ：フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了！

 最近１ページもののHPが増えているが、ページ内リンクしたときに、スクロールした飛び先のコンテンツがヘッダーに隠れてしまう現象に悩まされてた。 その度に、目的のエリアよりも上にわざわざaタグを置いて対処していたが、CSSで対応できることが判明！ html {   scroll-padding-top: 100px; /* 固定ヘッダの高さ分 */ } これだけ！素敵！ スマホや大体のPCブラウザに対応しているみたいです。

※jqueryが必要  ■js //画面のロード、タブレットの縦横切り替えで動く $(window).on("load orientationchange resize", function() {   scroll_effect();   scroll_effect2();   //画面のスクロール、タッチによるスクロールで動く   $(window).on("scroll touchmove", function(){     scroll_effect();     scroll_effect2();   });   //フェードイン   function scroll_effect(){     $('.fadein').each(function(){       var elemPos = $(this).offset().top;       var scroll = $(window).scrollTop();       var windowHeight = $(window).height();       if (scroll > elemPos - windowHeight){         $(this).addClass('scrollin');       }     });   }   //スライドイン   function scroll_effect2(){     $('.slidein').each(function(){       var elemPos = $(this).offset().top;       var scroll = $(window).scrollTop();       var windowHeight = $(...

modxでページタイトルを表示したい場所に[*pagetitle*]と表示しますが、そのページタイトルをキリの良い所で改行して表示したい、という時は、そのまま改行したい場所に＜br＞を入力します。 しかし、それだと「改行しないでタイトルを表示したい場所」でも、改行されて表示されます（当たり前だけど…） そこで、 ①strip_tags関数を使用する $str = [*pagetitle*]; echo strip_tags( $str, '<br>'); これをスニペットに登録し、表示したい場所に[[スニペット名]]としてみたのだが、どうしてもBRが消えてくれない。 ②正規表現で削除する ③modxのタグを使用する【これが正解！】 pagetitleを出力するリソースを以下にするとbrタグを削除してくれる [*pagetitle:strip_tags:hanzen*]

カスタムフィールドを作成して、その中身をDBに登録→取得して画面に表示するだけなら「Advanced Custom Fields」のプラグインだけで可能。 ■Advanced Custom Fieldsのプラグインで中身を取得・表示 １．プラグインをインストール ２．メニューの「カスタムフィールド」から新規追加 ３．投稿画面に表示するための「ラベル」とそれを格納・取得するための「名前」等を決める ４．画面に表示する際には「content.php」等、表示した場所で $shop_name = get_field('shop_name',$post_id); get_field(名前,ページID)として取得可能。 自分の場合は上記のように一度関数に代入してから、表示した場所で <?php echo $shop_name; ?> としている。 ★今回、管理画面上の投稿でカスタムフィールドにて登録した内容をあとからCSV一括登録・変更などでいじりたい、というのがあったが、このプラグインを追加って登録した内容は、DBのpostの中に１つのカスタムフィールド項目に対して必ず２つの内容が登録されることが発覚。 【DB内】wp_postmeta meta_id post_id meta_key meta_value 1 1 shop_name ○○商店 2 1 _shop_name field_****←英数字の羅列 この２行が無いと中身を取得出来ないようで、特に２行目の内容を持って別のカテゴリーやタグ、post_idと紐付けを行っているようだったので CSVからの登録プログラムを作成することがかなり困難に。 そこで、カスタムフィールドを自作し、かつDBも自作し、そこへ内容を登録する方法へ変更。 ■自作のDBを作成し、カスタムフィールドから登録するプラグイン ・wordpressに自作DBを追加する方法は以下サイトを参考に https://www.webopixel.net/wordpress/637.html １．Gistにアップされていたソースを丸々コピーして、「custom-meta-table.php」の名前で保存 ２．自分環境に合わせてカスタムフィールドを作成（html手作業） ...

htmlのhead内に書きます！ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">

ウェブページが表示される画面サイズによって自動的に数値を入れるjavascriptを作成したのだが、androidタブレットのアプリ内webviewで表示した時に見栄えがどうもおかしかった。 androidのバージョンを調べたところ、4.2だった。 どうやら、4.2だとCSS3が使えないとのこと…。 更に、document.writeが対応しないという記事も見つけたので、代替え案を模索。 document.write(s); ↓ document.getElementById("WinSize").innerHTML = s; とすることで、無事表示される。 HTML側では、 <div id="WinSize"></div> とすることで、解決しました！

FTPでmodxと同階層にフォルダを作成してindex.htmlを配置しても、管理画面側でエラーページのリダイレクト設定をしているせいか、 ページにURL打ち込んでアクセスしようとするとhtmlページをファイルとしてダウンロードしようとしてしまう。 方法を模索中… 【解決！】 そもそも普通に階層を作っても読み込んでました。 じゃあなんで今回おかしくなったかというと、htmlファイルの中でinclude()を使ってました。 これはphp.iniの設定でallow_url_includeがonになっていないとダメなんだそうで。 なんだよー、普通に使えるのかー！ というか何故modxとhtmlの共存ってキーワードで「普通に使えるよ！」というページがヒットしないのだろうか… CMS使ってるのにHTMLページを配置するなんてことはそうそうないのかな。 とにかく長いこと悩んだ事象が解決！

■メタタグとして以下を設定すると、スマホ側で勝手に画面の大きさとかを調整されなくなる <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">

■リンクがクリック出来なくなる件 HTMLソース↓ <div class="test"> <a href="#">リンク</a> </div> スタイルシート↓ .test { z-index:-1; } 上記の場合、HTML内のリンクにマウスオーバーしても、リンクとして反応してくれない。 z-indexが原因のようだ。

■googlemapsをiframeを使わないで表示する 【HTML】 <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function map() { var latlng = new google.maps.LatLng(35.711783,139.796686); //緯度経度の初期値 var opts = { zoom: 17, //初期の拡大値（大きいほど拡大） mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); //id="map"のところに表示しますよー // Marker var markerOpts = { position: new google.maps.LatLng(35.711844,139.796444), //マーカーを表示する緯度経度 map: map, title: "マーカーですよー" //カーソルを合わせたら表示される文字 }; var marker = new google.maps.Marker(markerOpts); } //]]> </script> </head> <body onload="map(...

■通常のアナリティクスの記述に加えてこれを書く ■実際にリンクを貼る時 ※でもコレだと別ウインドウで開く為のtarget blankが効かない ※ちなみに、  XHTML 1.0 Strict では target = blank が利用できないらしい。 ■別ウインドウで開く方法 setTimeout('document.location = "' + link.href + '"', 100)　の部分を setTimeout('window.open("' + link.href + '", "_blank")', 100)　とすると別ウインドウで開けるようになった…。 でも、ポップアップブロックにひっかかる。 引き続き調査。 ポップアップブロックされた時に別ウインドウで開く方法 function openWindow( url,name,option ) {     if( !window.open( url, name, option ) ) {         location.href = url;     } } ■別ウインドウで開く方法その２ これは、scriptの方には何も書かなくていい方法…。試し中。 テストページ 別ウインドウでは開くから、無事イベントを拾ったら入れ替える予定

突然Dreamweaverでコピペができなくなりました！ 具体的にどうなったかというと、ソースをコピー（Ctrl＋C）、そしてペースト（Ctrl＋V）のショートカットを使用したところ、何故かペーストした時に、その直前にコピーしていた情報がペーストされる！ いろんな情報サイトで問題解決方法を検索したが、どうも違うらしい。 で、結果何をして解決したかというと、 ★沢山表示していたページ（タブ）を減らしてみた★ えっ？これだけで解決した…！？ どうやらメモリを沢山食ってた？？のかもしれない。 とにかく、この方法でとりあえずは解決したのでオッケー！ ということで、メモを残してみました。 ドリームウィーバーで突然コピペが出来なくなった！という方がいたら、試してみてくださいね！