web制作 教える メモ

html と css の関係

htmlの基礎
cssの基礎

html5の全体

画像を作成して配置する
画像をフロートさせて文字を回り込ませる
altの説明

リンクの説明
リンクテキスト noflow seoについての簡単な説明

レスポンシブルに備え、パーセンテージを意識する作り方を軽く説明するが
まずはピクセルで作る

簡単なサイト作成
1ページのトップページ 従来通り サイドバー メインコンテンツ があるページ
スライダーは一枚ペラ
※コンテンツベースは寸法を指示して、そのとおり作らせる。まずは基本をなぞる

freee ローン 記載方 融資も(金融公庫)

https://support.freee.co.jp/hc/ja/articles/203480134-%E5%9B%BA%E5%AE%9A%E8%B3%87%E7%94%A3%E3%82%92%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%A7%E8%B3%BC%E5%85%A5%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AE%E8%A8%98%E5%B8%B3%E6%96%B9%E6%B3%95#1

https://support.freee.co.jp/hc/ja/articles/203059914#2

固定資産には10万以上
少額減価償却資産は30万未満 年300万まで 1年で償却

金融公庫はこれ
https://support.freee.co.jp/hc/ja/articles/204753184-%E5%80%9F%E5%85%A5%E9%87%91%E3%81%AE%E5%80%9F%E5%85%A5%E3%81%A8%E8%BF%94%E6%B8%88%E3%82%92%E8%A8%98%E5%B8%B3%E3%81%99%E3%82%8B#section1

サムネイルを上つら 中心 切り抜き ファンクション

//サムネイルを上つら 中心
function my_awesome_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){
    if( false ) return $payload;
 
    if ( $crop ) {
        $aspect_ratio = $orig_w / $orig_h;
        $new_w = min($dest_w, $orig_w);
        $new_h = min($dest_h, $orig_h);
 
        if ( !$new_w ) $new_w = intval($new_h * $aspect_ratio);
        if ( !$new_h ) $new_h = intval($new_w / $aspect_ratio);
 
        $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
        $crop_w = round($new_w / $size_ratio);
        $crop_h = round($new_h / $size_ratio);
 
        $s_x = ($orig_w - $crop_w) / 2;
        $s_y = 0;
    } else {
        $crop_w = $orig_w;
        $crop_h = $orig_h;
 
        $s_x = ($orig_w - $crop_w) / 2;
        $s_y = 0;
 
        list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );
    }
 
    if ( $new_w >= $orig_w && $new_h >= $orig_h ) return false;
    return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
}
add_filter( 'image_resize_dimensions', 'my_awesome_image_resize_dimensions', 10, 6 );

custom.phpにあるみたい

管理画面のメディアの切り抜きに無理やり説明文 置き換えjs

//管理画面のメディアの切り抜きに無理やり説明文
//クォーテーションの入れ子にポイント
add_action( 'admin_head', 'change_text2' );
function change_text2() {
    $echo1 = "<table style='font-size:80%'><tr><td><span style='font-weight:bold'>サムネイル</span></td><td>制作事例・ブログサイドバーなどのサムネイル</td></tr><tr><td><span style='font-weight:bold'>d_blog_sam</span></td><td>ブログの小さい横長サムネイル</td></tr><tr><td><span style='font-weight:bold'>d_blog_sam</span></td><td>ブログTOPの1記事目のでっかいサムネイル</td></tr></table>";
      echo '
      <script type="text/javascript">
      jQuery(document).ready(function($){

	$("#aspect-ratio-selector").html("'.$echo1.'");
        });
 
      </script>
      ';
}

管理画面(投稿画面)とブログ記事表示画面の固定スタイルをファンクションで管理

エディタースタイルcss
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/d_admin/editor-style.css

ブログ表示css
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/d/less/parts/blog_con.less

ファンクション
/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/func/scripts.php

を全部かえた

/Volumes/D-Marking Design SSD960G 20150712/my_server/client/format3/gotoda2/wp-content/themes/D2/d_edit
以下に

TinyMCE スタイルを追加

http://nelog.jp/wordpress-tinymce-custom

ファンクションのコードは難しいので理解しようとせず
ただ書いて

クラスと タイトルを増やす

そして

ブログ表示css  

lessで管理 .blog_con{ の中身はレスしない}

.blog_con
{
	
	h2,h3,h4,h5{margin-bottom:24px; margin-top:36px; font-weight:bold}
	
	h2{ background-color:#000; color:#fff; padding: 15px 30px; font-size:24px; }
	h3{font-size: 23px; border-bottom: 5px solid #e7e7e7; padding: 10px 0; }
	h4{font-size: 20px; border-bottom: 5px dashed #eee; padding: 8px 0;}
	h5{font-size: 20px; padding: 8px 0;}
	
	.box_ivory{background-color: #F8EEDA;
    padding: 20px; margin:12px 0px;}
	
	.box_gray{background-color: #e7e7e7;
    padding: 20px; margin:12px 0px;}
	
	
		.box_sky{background-color: #C5EAFF;
    padding: 20px; margin:12px 0px;}
	
	}

エディタースタイルcss 

.blog_con{ の中身のみコピペ追記}

	h2,h3,h4,h5{margin-bottom:24px; margin-top:36px; font-weight:bold}
	
	h2{ background-color:#000; color:#fff; padding: 15px 30px; font-size:24px; }
	h3{font-size: 23px; border-bottom: 5px solid #e7e7e7; padding: 10px 0; }
	h4{font-size: 20px; border-bottom: 5px dashed #eee; padding: 8px 0;}
	h5{font-size: 20px; padding: 8px 0;}
	
	.box_ivory{background-color: #F8EEDA;
    padding: 20px; margin:12px 0px;}
	
	.box_gray{background-color: #e7e7e7;
    padding: 20px; margin:12px 0px;}
	
	
		.box_sky{background-color: #C5EAFF;
    padding: 20px; margin:12px 0px;}

に共通のスタイルを記入すればよい
 

editor-style.css」に

@import url('blog_con.css');
//エディターCSSを差し込む	ビジュアルエディタを同じデザインに
add_editor_style('d_edit/editor-style.css');


//TinyMCE追加用のスタイルを初期化
//http://com4tis.net/tinymce-advanced-post-custom/
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => '太字',
      'inline' => 'span',
      'classes' => 'bold'
    ),
    array(
      'title' => '赤字',
      'inline' => 'span',
      'classes' => 'red'
    ),
    array(
      'title' => 'グレーボックス',
      'block' => 'div',
      'classes' => 'box_gray'
    ),
	
	    array(
      'title' => 'アイボリーボックス',
      'block' => 'div',
      'classes' => 'box_ivory'
    ),
  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);
  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

//TinyMCEにスタイルセレクトボックスを追加
//https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4
if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
function add_styles_to_tinymce_buttons($buttons) {
  //見出しなどが入っているセレクトボックスを取り出す
  $temp = array_shift($buttons);
  //先頭にスタイルセレクトボックスを追加
  array_unshift($buttons, 'styleselect');
  //先頭に見出しのセレクトボックスを追加
  array_unshift($buttons, $temp);

  return $buttons;
}
endif;
add_filter('mce_buttons_2','add_styles_to_tinymce_buttons');

//END --TinyMCE追加用のスタイルを初期化

ファンクに

require_once locate_template('d_edit/edit_style.php');      // ブログエディット

追記

メディアサイズを ファンクション function で管理する 

G2でサイズ
MAX 781px wide
640 640 大
400 400 中
サムネイル 300 300 正方形

プラグSimple Image Sizes


//サムネイルサイズ増やす trueが強制切り抜き
add_image_size( ‘midashi’, 720, 999 );

こういれてたが 今は プラグイン

だが再度 ファンクションで管理しよう

検証の結果
ファンクションで同じ名前を入れれば
ダブらずに制御でいるようだ
そして
投稿にひょうじするかどうか

ぷらぐいんの表示するのチェックが優先
次に ファンクションのtrue が優先(投稿時の表示名がファンクションのnameになる OK)
って感じだったので

クロップも同じく プラグインが優先だわ
一回読み込まれると 後から帰れん?
一回プラグインの方で保存しちゃうと駄目みたい

今後は できるだけファンクのみにしたほうがいいな
でりーとすればなおるわ

基本プラグインでなく(チェクをはずし)
ファンクションで制御しよう

最後に
regenerate-thumbnailsでリセット

http://www.warna.info/archives/2270/

function add_custom_image_sizes() {
    global $my_custom_image_sizes;
    $my_custom_image_sizes = array(
        'x-small' => array(
            'name'       => '極小', // 選択肢のラベル名
            'width'      => 30,    // 最大画像幅
            'height'     => 30,    // 最大画像高さ
            'crop'       => true,  // 切り抜きを行うかどうか
            'selectable' => true   // 選択肢に含めるかどうか
        ),
        'x-large' => array(
            'name'       => '極大',
            'width'      => 1000,
            'height'     => 1000,
            'crop'       => false,
            'selectable' => false
        ),
    );
    foreach ( $my_custom_image_sizes as $slug => $size ) {
        add_image_size( $slug, $size['width'], $size['height'], $size['crop'] );
    }
}
add_action( 'after_setup_theme', 'add_custom_image_sizes' );
function add_custom_image_size_select( $size_names ) {
    global $my_custom_image_sizes;
    $custom_sizes = get_intermediate_image_sizes();
    foreach ( $custom_sizes as $custom_size ) {
        if ( isset( $my_custom_image_sizes[$custom_size]['selectable'] ) && $my_custom_image_sizes[$custom_size]['selectable'] ) {
            $size_names[$custom_size] = $my_custom_image_sizes[$custom_size]['name'];
        }
    }
    return $size_names;
}
add_filter( 'image_size_names_choose', 'add_custom_image_size_select' );

問い合わせフォームg2 チェックボックスでフォームを切り替える その時に必要なコードjs

参照
http://ryus.co.jp/blog/jquerycheckboxonly1/
チェックボックスを択一にするjQuery

http://ngns4.net/staff/contact-form7-%E3%81%A7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%E3%81%A8%E5%85%A5%E5%8A%9B%E6%AC%84%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B/
Contactform7 でチェックを入れると入力欄が表示されるようにする

http://oshiete.goo.ne.jp/qa/8908597.html
jQueryのhide,showで中の要素がスライドしてしまう

これではすらいどしてまう

<script type="text/javascript">
jQuery(document).ready(function($){
$(".show1").css("display", "none");
$(".show2").css("display", "none");
$("#show_info1").click(function(){
if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').show('fast');}else{$('.show1').hide('fast');}
});
$("#show_info2").click(function(){
if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').show('fast');}else{$('.show2').hide('fast');}
});
});
</script>

改造
アニメイト使う

<script type="text/javascript">
jQuery(document).ready(function($){
$(".show1").css("display", "none");
$(".show2").css("display", "none");
$("#show_info1").click(function(){
if($('#show_info1 [type="checkbox"]').is(':checked')) {$('.show1').animate({ height: 'show' }, "fast");}else{$('.show1').animate({ height: 'hide' },"fast");}
});
$("#show_info2").click(function(){
if($('#show_info2 [type="checkbox"]').is(':checked')) {$('.show2').animate({ height: 'show' }, "fast");}else{$('.show2').animate({ height: 'hide' },"fast");}
});
});
</script>

jクエリでチェックボックスを択一にするスクリプト

 <script type="text/javascript">
        jQuery(function($){
            $(function(){
              $('.colorGroup input').on('click', function() {
                if ($(this).prop('checked')){
                    // 一旦全てをクリアして再チェックする
                    $('.colorGroup input').prop('checked', false);
					//ここオリジナル ディスプレイnoneも入れる
					$(".show1").css("display", "none");
					$(".show2").css("display", "none");
					//ここまで チェックにて非表示領域と表示領域をかえるため
					//いっぱいあるならここに追加してく
                    $(this).prop('checked', true);
                }
              });
            });
        });
        </script>

シングルで親カテゴリ名を表示させる。例えば制作事例のh1では 毎度 親カテゴリ名にしたい。応援ユニフォーム刺繍・イベント服刺繍・学ラン刺繍 制作実績 など

制作事例の子カテゴリを使う場合に分岐が必要

<?php  
$term = array_pop(get_the_terms($post->ID, 'd_cate_jirei')); //array_popで配列の最後を取り出す
$term_p = $term->parent; //子か確かめる準備

if ( $term_p == 0 ): //取り出したのが親の場合

$term_oya = array_shift(get_the_terms($post->ID,'d_cate_jirei')); //array_shiftで先頭にある配列を取り出す
echo $term_oya->name;


else: //取り出したのが子の場合

//親のIDを取得してターム情報を引き出す。
$ido=$term_p;
$term2=get_term($ido,'d_cate_jirei');

echo $term2->name;

endif;


?>

一応これででた
但し、複数カテゴリを選択した場合は後のカテゴリ、 さらに子がある場合は 後の子の親が優先される

webカタログ html5 田畑さん

少々調べましたが、どうやら以前できるな、と思ったのでは、外部サイトで無料作成して、そのページへリンクさせてよんでもらうという すたいるのようでした。

それだと独自ドメイン以下で公開できず、外部サイトで閲覧する形となります。

このようなやつ
http://www.adjustbook.com/
http://kotori-blog.com/webservice/issuu/

実際、参考サイトでは
http://www.marukanet.co.jp/201516_winter_collection/
こちらのサービスを利用しているようです。
https://ebook.digitalink.ne.jp/service/

PDFからwebカタログを作成してもらって、
独自ドメインにアップする方でも
ただ置くだけでみれそうな感じです。

http://www.sezax.co.jp/denshi_catalog/

フラッシュ版無料作成
http://web-marketing.zako.org/web-tools/pdf-2-flash-page-flip.html

http://www.digital-catalog.jp/price/

少々調べましたが、どうやら以前できるな、と思ったのでは、外部サイトで無料作成して、そのページへリンクさせてよんでもらうという すたいるのようでした。

それだと独自ドメイン以下で公開できず、外部サイトで閲覧する形となります。

このようなやつ
http://www.adjustbook.com/
http://kotori-blog.com/webservice/issuu/

実際、参考サイトでは
http://www.marukanet.co.jp/201516_winter_collection/
こちらのサービスを利用しているようです。
https://ebook.digitalink.ne.jp/service/
(高そうですよね。。あまりおすすめ出来なさそうです)

調べた結果おすすめは

PDFからwebカタログを作成してもらって、
独自ドメインにアップする方でも
ただ置くだけでアクセスすればみれそうな感じです。

どうやら現在はフラッシュで作成するよりも 
HTML5という形式で作成するほうが 
スマホもそのまま見れるので主流なようです。

http://www.digital-catalog.jp/price/
http://www.digitalbook-meclib.jp/plan/data/

参考までに調べましたが、当方から発注も可能ですが、
結局、高くなるだけですので、
創工社さんで直接頼むか、
クライアントさんに直接教えて、サーバーにアップして貰う形の方が、いいのかなと思います。

それではよろしくお願い致します。

健康  集中力

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11121201781

コルサコフ症候群
https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%AB%E3%82%B5%E3%82%B3%E3%83%95%E7%97%87%E5%80%99%E7%BE%A4
https://welq.jp/39880

https://www.amazon.co.jp/%E3%80%90%E3%81%8A%E8%B2%B7%E5%BE%97%EF%BC%92%E5%80%8B%E3%82%BB%E3%83%83%E3%83%88%E3%80%91-%E3%83%9B%E3%82%B9%E3%83%95%E3%82%A1%E3%83%81%E3%82%B8%E3%83%AB%E3%82%BB%E3%83%AA%E3%83%B3-%E5%A4%A9%E7%84%B6%E3%83%93%E3%82%BF%E3%83%9F%E3%83%B3D-%E3%82%B5%E3%83%97%E3%83%AA%E3%83%A1%E3%83%B3%E3%83%88-%E9%9B%86%E4%B8%AD%E5%8A%9B%E3%80%81%E5%8F%97%E9%A8%93%E3%80%81%E8%A8%98%E6%86%B6%E5%8A%9B%E3%80%81%E7%9C%A0%E6%B0%97%E3%80%81%E5%A4%8F%E3%83%90%E3%83%86%E3%80%81%E3%83%AA%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B9%EF%BC%89%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AB%E3%80%82/dp/B009SS5YLK/ref=sr_1_2?s=hpc&ie=UTF8&qid=1473919744&sr=1-2&keywords=%E9%9B%86%E4%B8%AD%E5%8A%9B

ホスファチジルセリン
https://ja.wikipedia.org/wiki/%E3%83%9B%E3%82%B9%E3%83%95%E3%82%A1%E3%83%81%E3%82%B8%E3%83%AB%E3%82%BB%E3%83%AA%E3%83%B3

大豆レシチン
https://cafy.jp/21400

バイクバンクのSEO対策の見解

バイクバンクのホームページ  wwwありドメイン
http://www.819-bank.com/

バイクバンクブログ      wwwなしサブディレクト入り
http://819-bank.com/blog/

基本wwwあり なし は別サイト つまり サブドメインって感じ???

そしてブログ記事毎度最後に topへ促す

ありがとうございました。

地田

http://www.819-bank.com/ リンク

本体 トップページから どこへもリンクがない 
お問合せ・見積もりだけブログのページ内に飛ぶみたい??

ブログページ内にtopへのメニューはなく
記事内にホームページはこちら とあるだけ

これで順位があがったって 前は ブログも サイト内にみれたって!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-08-15-36-35

つまり topページは孤立していて、 お問合せページのみへリンク(これはtopはwordpressじゃないからかも)
ブログはwwwありなしのサブドメイン の ディレクトリ フォルダ階層へのワードプレスのインスト
で記事毎に孤立topへ移動リンク ブログtop(ルートドメイン)ももちろんこりつぺーじと全く同じものがインデックスはされてるが、
バイクバンクで検索してもでてコン

もし味噌が wwwありなしの サブドメイン化で  かたっぽの/blog/のトップも同じコンテンツってことなら
よくわからんが

ただサブドメインでの運営がいいのか
ディレクトリで リンクなしがいいのか。。。いや、site:ドメイン検索では表示されないから、これはただのディレクトリ型ではないのは確か、

サブドメインなのは確か。。

サブドメインで運営、サブドメイン記事から毎度リンクを送る 
本ページからはリンクしない。

以上 

top スクロール 完結編

<!--ページTOP-->
<style>
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: #000;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #ff0000;
}

</style>

<script>
$(function() {
    var topBtn = $('#page-top');    
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>


<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

ホバーで画像を大きくするのまとめ hover img

かこみ要素
.hover_big_img{
  transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	/*これを書かないと画像がちらつく*/
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
イメージ
.hover_big:hover .hover_big_img{ 

	
	 -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
	
	}

ちらつくさんこう
https://yumeirodesign.jp/blog/201312/csstransforms_fixed.html

css導入参考

http://raining.bear-life.com/css/css3%E3%81%AE%E3%80%8Ctransformscale%E3%80%8D%E3%81%A7hover%E3%81%97%E3%81%9F%E6%99%82%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E6%8B%A1%E5%A4%A7%E3%81%99%E3%82%8B

ファビコン favicon 流れ

参考http://www.02320.net/apple-touch-icon_for_android/

まず 152×152 png apple-touch-icon.pngを作成

http://ao-system.net/favicongenerator/index.php
ここにアップして
DL

favicon.ico が3種類はいっているのでそれを使う

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">

こいつをヘッダに
トップディレクトリにファイルをおく

MAMPでファビコンを確認したい場合

/Applications/MAMP/conf/apache/http.conf

Alias /favicon.ico “/Applications/MAMP/bin/favicon.ico”

#Alias /favicon.ico “/Applications/MAMP/bin/favicon.ico”

を込めあ

〒郵便番号自動入力 修正

https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js
廃止により

https://ajaxzip3.github.io/ajaxzip3.js

  <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script>
jQuery(function($) {
  $('#zip').change(function(event) {
    AjaxZip3.zip2addr(this, '', 'addr', 'addr');
  });
});
</script>

前回の続きで 効率化

コマンド シフト oで 書類
フォルダ作成
コマンド option ドラッグ&ドロップでエイリアス

lessを登録する際エイリアスではだめ

選択 コマンドRで元を表示できるよん

さらに

lessで .class{.class2}

とやった時

.class2がない(消しちゃったり)

すると詳細を教えてくれないバグになって保存できなくなるから注意
@もそうかもしれんで
インポートする倍きおつけて

 

そんでこんぎは

int.less mob.lessとして記述