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

 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ブラウザに対応しているみたいです。

ol li　でリストを表示したら、本来数字で1.2.3とリストとなるはずが、全て「・」になる。 そこで、  cssで *{ font-size:1.1em; } を *{ font-size:1em; } にするとなぜか「1.2.3」に直る…意味不明　解析中 ★解決 実は見えていたのは1.の「.」の部分だった ul,olに対して padding-left:2rem;としていたが、padding-left:5rem;にしたら数字が表示された…なんかもう嫌！

※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 = $(...

 contactform7でお問い合わせフォームを送信する際、入力必須項目が空だとエラー分が自動的に表示されるが、その表示位置や見栄えの調整をキレイにするためのスタイルシートをメモ。 ■フォーム上部にエラー文が並ぶので削除 /*上部のエラー文を消す*/ .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: 0; padding: 0; border: 0; } ■各フォームの右側にエラー文が表示されるので、フォームの下に表示されるよう調整 　＆赤文字で表示する /*各場所のエラー文位置調整*/ .wpcf7 span.wpcf7-not-valid-tip { display: block; position: static; top: 0; left: 0; border: none; color: red; } ■メールフォーム送信 /*最下部のメッセージ装飾*/ .wpcf7 .wpcf7-response-output { margin: 20px 0 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .wpcf7 .wpcf7-validation-errors { color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7; } .wpcf7 .wpcf7-mail-sent-ok { color: #3A87AD; b...

プラグインを使わずに、自作のパンくずリストを表示させます。 投稿ではカテゴリーの親、タグの親。固定ページでは固定ページの親も表示させます。 そして見た目はbootstrapのスタイルを使用します。 できれば子テーマの ■function.php /* パンくずリスト */ function mytheme_breadcrumb() { //HOME>と表示 echo '<ol class="breadcrumb">'; echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>'; //投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示 $cats = ''; $cat_id = ''; if ( is_single() ) { $cats = get_the_category(); if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id; } else if ( is_category() ) { $cats = get_queried_object(); $cat_id = $cats->parent; } $cat_list = array(); while ($cat_id != 0){ $cat = get_category( $cat_id ); $cat_link = get_category_link( $cat_id ); array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' ); $cat_id = $cat->parent; } foreach($cat_list as $value){ echo '<li>...

wordoressテーマのアクセシビリティに対応した「basicstore」というテーマを導入し、子テーマを作ろうとしてつまずいたのでメモ。 ※basicstoreの子テーマを作るときは、通常のfunction.phpだと親のスタイルシートが反映されない！ 子テーマのテンプレートをダウンロードしても、本家や作成元を見ても駄目…。 そこで試行錯誤した結果、やっと怪しいエラーが出ずに親テーマのスタイルシートが反映出来るようになりました・ ①子テーマのフォルダ「basicstore-child」を作成 ②function.phpを作成 <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'style', get_template_directory_uri() . '/../basicstore/assets/css/basicstore.css' ); wp_enqueue_style( 'basicstore-main-style', get_template_directory_uri() . '/../basicstore/assets/css/theme.css' ); wp_enqueue_style( 'basicstore-wp-style', get_template_directory_uri() . '/../basicstore/assets/css/wp.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css'); } これは、親テーマのfunction.phpを覗いた時に「basicstore.css」と「theme.css」と「wp.css」を読み込んでいる箇所から引用し、かつ子テーマから見たときの階...

①親テーマのフォルダ名＋「-child」のフォルダを作成する 場所はwordpressをインストールしているディレクトリの「wp-content」＞「themes」の中。 親テーマと同じ階層。 「coldbox」なら「coldbox-child」 「basicstore」なら「basicstore-child」 ②function.phpとstyle.cssを作成する ■function.phpの中身は <?php add_action( 'wp_enqueue_scripts', '***_enqueue_styles' ); function ***_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); } // テーマフォルダ直下のeditor-style.cssを読み込み add_action('admin_init',function(){ add_editor_style(); }); ?> エディタcss の読み込み前までで問題ないが、エディタでもサイトと同じ見栄えにする為、エディタ用のスタイルシートも読み込む設定をしておくと便利。 「***」の部分は親のテーマの名前を入れる。 ※親テーマによっては、funciton.phpに記載する方法が異なる事があります。 よく子テーマ作成で紹介されているのは、「theme_enqueue_styles」ですが、 「coldbox」の場合は「coldbox_enqueue_styles」になります。 「basicstore」の場合は「my_theme_enqueue_styles」になります。 「テーマ名　wordpress　child」で検索をかけると、子テーマファイルがDL出来るサイトが表示されるので、探してみましょう。 ■style.cssの中身は /* Template: *** Theme Name: ***-Child */ 「***」の　部分には親テーマの名前を入れる。 ③wordpressの...

wordpress「habakiri」テーマの固定ページに、「お知らせ」のように投稿一覧を表示する方法です。 ①news.phpを用意します。 <?php $posts = get_posts('numberposts=5&category=1'); global $post; ?> <?php if($posts): foreach($posts as $post): setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <?php the_time('Y/m/d'); ?> <span class="label label-<?php $label = get_the_category(); $label = $label[0]; { echo $label->category_nicename; } ?>"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span><br /> <?php the_title(); ?> </a> <?php endforeach; endif; ?> ■内容の説明 numberposts=表示する件数。 category=表示したいカテゴリー番号。 （カテゴリー編集画面に入った時にURLに書いてあるtag_ID=*←の数字） 指定しない場合は全カテゴリーが表示される。 the_timeで年月日を指定。 class=label　habakiriテーマはbootstrapを使用しているので、ラベルのクラスを使って見栄えをつける <span class="label label-...

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

habakirriの子テーマにウィジェットエリアを追加して、ページフッターにメニューを表示するようにできました。 こちらのページ参照 引き続き、メニューを横並び表示にしていきます。 ①追加したフッターのclassにCSSを適用していきます。 style.css /*右詰めにします*/ .footer-menu-area{    text-align:right; } /*リストの上下に余白を取ります*/ .footer-menu-widget ul{ margin-top: 1em; margin-bottom:1em; } /*リストを横並びにして、リスト同士の間隔を開けます*/ .footer-menu-widget li{ display:inline-block; margin-left:1em; } /*ついでに、各リストの頭に矢印（＞）アイコンをつけちゃいます*/ .footer-menu-widget a::before{  font-family: "FontAwesome";  content: "\f138"; padding:4px 0; margin-right:10px;   -webkit-font-smoothing: antialiased;   display: inline-block;   font-style: normal;   font-variant: normal;   text-rendering: auto;   line-height: 1; } 以上。 habakiriテーマはfontawesomeを使用しているので、公式サイトにアクセスして、表示したいアイコンを選択すると、その詳細ページにアイコンを直接表示する方法（ ■補足■ display:inline-block;　その要素をインラインブロック（横に並ぶブロック）になります。 a::before　aタグの直前にcontentの中にある文字などを追加できます。

トップページと固定ページはデザインが異なるが、一つのデザインだけでなくページごとにレイアウトや色、cssを切り替えたい！（テンプレートを変えたい）という場合は、カスタマイズする必要があります。 今回は、デザインは同じだけどCSSで色だけ変更したいよ！という場合を紹介します。 大きな流れは以下です。 ①専用のphpを作る ②固定ページ内で「テンプレート」から任意のものを選択 ※子テーマの作成を前提としていますが、直接habakiriテーマ内に作っても大丈夫です ①専用のphpを作る habakiri子テーマフォルダの中に、親フォルダ内から「page.php」をコピーしてきます。 １のファイル名を「page-test.php」（testは任意）と変更します。 サーバーのharakiri子テーマフォルダ直下にアップロードします。 ②固定ページでテンプレートを選択する 「page-test.php」で作った場合は、テンプレート一覧に「test」というものが追加されているはずなので、それを選択します。 以上になります！

wordpressのテーマ「Twenty Seventeen」を使ってみたのですが、ヘッダー画像（カスタムヘッダー画像）のサイズが、トップページと他のページではサイズが異なり、画像を上下左右最大限まで表示する必要があったので、その設定方法と苦労をメモしておきます。 １．まずは子テーマを作成します（これについては別途記載） ２．子テーマの「function.php」に以下を追加します。 // Eliminate twentyseventeen-front-page home css // フロントページのヘッダー画像を他のページと統一する add_filter( 'body_class', 'my_body_class',20 ); function my_body_class( $classes ) { unset($classes[array_search("twentyseventeen-front-page",$classes)]); unset($classes[array_search("home",$classes)]); return $classes; } フロントページの画像を表示するプログラムを、他ページと同様の扱いにしてしまいます。 最初はトップページ、サブページのヘッダー画像をそれぞれCSSを探って変更したのですが、 IEと他のブラウザで見え方が違ったりと色々苦戦しました。 ３．子テーマの「style.css」に以下を追加します。 .site-branding{ padding:30% 0 !important; height: calc(100vh - 104px); } .panel-image { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: 100%; position: relative; } .has-header-image.twentyseventeen-front-page .custo...

■リンクがクリック出来なくなる件 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(...