doggstar – ページ 17 – MEMO GOLD ホームページ制作

白黒　css ホバーカラー

.c_prof_top_sl_img{
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
}
.c_prof_top_sl_img:hover {
-webkit-filter: grayscale(0%);
filter: none;
}

wordpress facebook 連動　jetpack メモ

まず　できてるか知らんが

jetpack インスト

そんで

ワードプレスと連携
英語だったら連携後
ダッシュ　更新　翻訳を更新

投稿ユーザーは察知されたくないからファンクション

//jetpack管理者のみ
add_action( 'jetpack_admin_menu', function() {
        if ( ! current_user_can( 'level_10' ) ) {
            remove_menu_page( 'jetpack' );
        }
    } );

プロフィールページに
いろんなのも出てくるから消す
画像遅くなるでOFF

オフに
シングルサインオン
スペルと文法
メール投稿

そんで
やっとFB

パブリサイズ
でFB

この時シークレットで
FBのあか　ログイン　しておく
そんで連携する

googleプラスモカ？？

以上

あとは実践

結果サイトマップ　と　宣伝みたいな奴以外すべて切った

そんでファンクションに追加

// delete JetPack OGP tags
add_filter( 'jetpack_enable_open_graph', '__return_false' );

カスタム投稿も自動投下更に追加ファンクション

//JetPack カスタム
function jet_custom_sns() {
    add_post_type_support( 'sekou', 'publicize' );
}
add_action( 'init', 'jet_custom_sns' );

新　topスライド画像　フェードイン　BOX要素の高さをのこしたまま

つまり　がちゃん　って高さがない部分がdisplay noe じゃ消えるから

フェードインを改造

<!--フェードイン-->
<script type="text/javascript">
$(document).ready(function() {
//$('#main_contents_top').fadeIn(0);
$('#main_contents_top').css({'visibility':'visible'}) 
      .animate({opacity: 1}, 200); 
});
</script>

cssにvisibility:hidden

#main_contents_top {
	width: 980px;
	position: relative;
	overflow: hidden;
	height: 343px;
	/*display:none;*/
	visibility:hidden;
	background-color: #FFF;

}

保護中: クレジット決済

保護中: vlc

アナリティクス文字化け　アドワーズ　エクセル　並び替え　

アドワーズ
ログイン　レポート　期間指定　フィルタ　で要らないの省く　DL
エクセル csvを選ぶ　
エクセル　開く

エクセル　並び替え　その値の列選択

拡張して並び替えで
その中でどれを基準に並び替えるか選んでGO

また　データ　並び替え　
選択範囲を拡張するでもいける

マンバイメニュー　覚えメモ　

あとでまとめろ

背景透明
http://qiita.com/mikuhonda/items/99a7a8acdb2921860ce0

jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
http://www.webopixel.net/javascript/1037.html

ポイントは

ボディーにして

<script>
(function($) {
    $(function() {
        var $header = $('body');
        $(window).scroll(function() {
            if ($(window).scrollTop() > 70) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
    });
})(jQuery);
</script>

<header id="top-head">

そいつにcssで調整これだけじゃないかも

/*transition*/
#top-head,#head_rogo img,#heder_right
{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
#top-head {
    }
	
	
.fixed #top-head {
	position: fixed;
	top:0px;
    padding-top: 0px;
     background-color: rgba(255,231,55,0.9);
	z-index:10000000000;
	width:100%;
	height:70px;
}

.fixed{#header_color { display:none} 
/*#d_header_all,#header_width,#d_header_in,*/
#head_rogo img{height:70px;
    padding-bottom:5px!important}
#top_caro{ margin-top:246px;}
#heder_right{padding-top:33px!important}
		}

#head_rogo img{ height:200px;}

そんでブートも調整

#head_rogo img{ height: auto}

@media (max-width: 640px) {
#heder_right3{
padding-top:0!important;
}

.fixed #heder_right3{ padding-top:12px!important}

#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ height: 390px}
}

@media (max-width: 480px) {
#heder_right3{
margin-top:-6px;
}
.fixed #heder_right3{ padding-top:19px!important;}

#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ height: 290px}
}

@media (max-width: 320px) {
#heder_right3{
}
.fixed #heder_right3{ padding-top:24px;}
#main_contents_top_fade, .viewer, .viewer ul, .viewer ul li{ height: 200px}
}

boxレイアウト flexbox

<script src="<?php echo get_stylesheet_directory_uri(); //flexbox?>/d/js/flexibility.js"></script>

 <div class="frex_box">

要素
要素
要素
</div>

less

/*フレキシブル　高さ揃える*/
.frex{
	-js-display: flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	}

.frex_box{ width:100%;
         .frex;
	justify-content: flex-start;
	flex-wrap:wrap}

ブートcss モバイル

.frex_box{ max-width:300px; margin-left:auto; margin-right:auto}

http://liginc.co.jp/web/html-css/css/21024

画像と文字を中心揃え

imgはインライン要素だから

ダメな奴

/*css*/
.anago{
 vertical-align:middle;/*middleは中央揃え*/
}

いいやつ

/*css*/
.anago img{
 vertical-align:middle;
}

その他参考
http://teamsanta.info/web/2399/

ie8 対応　画像　縦のび　backgroundSize

縦伸びは

max-width:〜;
width:auto; /* ie8 */

とする

backgroundSizeが使えない点は
そうしても対応できなかった

スライダーで

ただリビングみたら

画像サイズは小さかった
１１００

<!--[if lt IE 8]>
<div class="ie_viewer">
<![endif]-->

<!--[if (gte IE 9) |!(IE)]><!-->
<div class="viewer">
<!--<![endif]-->

こう書くと分岐できるよいうだが　めんどいのでやめ

xserver ssh ドメイン設定でのポイント

sshでは
たまにimacに戻ってる時がある

ワードプレスでtopページが表示されない場合

index.htmlが存在している疑いがあるので　消す！

SimpLESS 設定ファイル

/Users/doggstar/Library/Application Support/Titanium/appdata/com.wearekiss.simpless

更新して

/Users/doggstar/Library/Application Support/
内 lessで検索　更新順？変更順で発見

※simplessはファイルがなかったり　プラグイン　less css一覧画面に　なかったりすると　更新できなくなるよ

flexbox

<script src="<?php echo get_stylesheet_directory_uri(); //flexbox?>/d/js/flexibility.js"></script>

.container {
-js-display: flex;
display: flex;
align-contents: stretch;
}

具体

.before_after_box{
	-js-display: flex;
	 display: flex;

http://www.webcreatorbox.com/tech/ie8-flexbox/
http://www.webcreatorbox.com/tech/flexbox/
http://cosao.net/archives/8246

ワイドレスポンシブスライダのポイント

細かいのはソースを見てくれハウジング

ポイントは

画像は背景に設定

（ここは

align-items: center;

でいけたかも

あとは
画像を中心にしておおきくするにはなんとなくありだけど

文字がでかくなりすぎるので
小さくしなきゃいかんが

それじゃちいさすぎるで

もじだけうえからpngで重ねた

そんでmax-widhを設定してそれ以上おおきくせず

中心アプソルトで
ひだり3%でOK

/*追記文字　大きくなり過ぎないように*/
.sl_moji{max-width:1000px;
 position:absolute;
 top: 0;
	left: 3%;
	
	bottom:0;
	margin: auto;}
	/*ここだけ*/

<div class="viewer">
<ul>

<li class="sl3">

<!--*追記文字　大きくなり過ぎないように*-->
<img src="<?php echo get_stylesheet_directory_uri(); ?>/d/img/top-test4.png"    alt="エクステリア工事<?php include(get_stylesheet_directory() . "/d/word/5_shop_name.php") ?>｜スライド画像１" class="sl_moji"/>
<!---->

<img src="<?php echo get_stylesheet_directory_uri(); ?>/d/img/sl_0.png"    alt="エクステリア工事<?php include(get_stylesheet_directory() . "/d/word/5_shop_name.php") ?>｜スライド画像１" class="respo_img" />

</li>

保護中: nhk

WordPress Popular Posts ライフで作成

うち山から引用

まずウィジェット

ファンク追加

//サイドバー使える様にする
if ( function_exists('register_sidebar') )
	register_sidebar();
	register_sidebar(2);

ウィジェット

ポイントは
posted on|とかでるので
Stats
は表示せず
直接テンプレに書く

<h3 class="widgettitle"></div>

<div class="popular_one">
<div class="popular_sam">{thumb} </div>
<div  class="wpp-views popular_date">{views} views</div >
<div class="popular_date">{date}</div>
<div class="popular_title">{title}</div>
</div>

サイドバーに

 <?php dynamic_sidebar(2);?>

cssは既存のうちのやつを改造

メイン

.popular-posts{}
.popular_one{
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	clear: both;
	overflow: hidden;
}
.popular_sam{
	float: left;
}
.popular_sam img{
	float: left;
	background-color: #FFF;
	padding: 1px;
	border: 1px solid #CCC;
	margin-right: 12px;
	width:120px;
	height:120px
}
.popular_date{
	font-size: 12px;
}
.popular_title{
	font-size: 16px;
}

.wpp-views{
	color: #FF7737;
}

window.matchMediaでウインドウサイズでJSを読み込み変える

※ただまだいっこしか読み込ませ変えられませんから。
熟読しな！

ついに出来た、というか判明
上記window.matchMediaは
リロードすると変わることが判明

つまり　読み込み直せば　その処理がみれる。

リアルにウインドウサイズの拡大縮小で変更したい場合は
addListenerで対応するらしいがながくなるので未処理

最後にメモします
まずは
window.matchMedia

<script type="text/javascript">
jQuery(document).ready(function($) {
    //PC環境の場合
    if (window.matchMedia( '(min-width: 768px)' ).matches) {
        $.ajax({
            url: '<?php echo get_stylesheet_directory_uri(); ?>/d/js/side-fixed-comment.js',
            dataType: 'script',
            cache: false
       });
    //モバイル環境の場合
    } else {
        $.ajax({
            url: '',
            dataType: 'script',
            cache: false
        });
    };
});
</script>

そもそもそんあ処理が必要なのは
ひっついてくるサイドバーの処理が
モバイルで効くと
モバイルはサイドバーは＠メディアでcssを変更して
デザインを変えているので

処理がダブって不都合なため
ウインドウサイズが狭まった場合　つまりスマホでは　ひっつくサイドバーを実行させたくない。

そのため

上記処理

裏話では

実際読み込ますJSを変更するこーどなため

直接jsの最後に
実際の処理を書き込んだ

/*ウインドウサイズでスプリクトを読み込ますか分岐しているので（window.matchMediaで）そのためこのJSの最後に無理やり処理を追加
下記は　レスポンシブで
ひっつきサイドバーを維持するための処理*/

$(window).on('load resize', function(){
var w = ($(window).width() -56) * 0.24 ;
$('#d_sidenavi_in').width(w);
});

こんな感じ

そんで　ウインドウリロードで実行が変わるので
デザインの確認もし安い

リアルタイムに変更したい場合は
http://memocarilog.info/jquery/6500#sample
このページを理解して組み込めばできなくはなさそうだが。。

古いブラウザ位のばあい

<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>

こいつが必要らしい。

<h1>jQuery - matchMedia.matches</h1>
    <p id="test1">matchMedia で表示を変える。</p>
<hr>
     
<h1>JavaScript - matchMedia.matches</h1>
    <p id="test2">matchMedia で表示を変える。</p>
<hr>
     
<h1>JavaScript - matchMedia.addListener</h1>
    <p id="test3">matchMedia で表示を変える。</p>

<script src="matchMedia.js"></script>
<script src="matchMedia.addListener.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
     
// jQuery - matchMedia.matches ========================
 
$(function(){
    if(window.matchMedia('(max-width:2000px)').matches) $('#test1').text('2000px以下です。') ; 
 
    $(window).on('resize', function() {
        if(window.matchMedia('(max-width:800px)').matches) {
            $('#test1').text('モバイルサイズ時(800px以下)です。') ;
        } else {
            $('#test1').text('PCサイズ時(800px以上)です。') ;
        }
    });
});
     
// JavaScript - matchMedia.matches ========================
 
window.addEventListener('load', function(){
    if (window.matchMedia("(max-width:2000px)").matches){
        document.getElementById("test2").innerHTML = "2000px以下です。";
    }
}, false);
 
window.addEventListener('resize', function(){
    if (window.matchMedia("(max-width:800px)").matches) {
        document.getElementById("test2").innerHTML = "モバイルサイズ時(800px以下)です。";
    } else {
        document.getElementById("test2").innerHTML = "PCサイズ時(800px以上)です。";
    } 
 
}, false);
 
// JavaScript - matchMedia.addListener ========================
 
window.matchMedia("(max-width:800px)").addListener( myFunc );
     
function myFunc(){
    document.getElementById("test3").innerHTML = "モバイルサイズ時(800px以下)です。";
     
    if (window.matchMedia("(min-width:800px)").matches) {
        document.getElementById("test3").innerHTML = "PCサイズ時(800px以上)です。";
    }
}
     
</script>

youtube レスポンシブ

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

<div class="youtube">
  <iframe width="853" height="480" src="//www.youtube.com/embed/d6SSnbVCmEg" frameborder="0" allowfullscreen></iframe>
</div>

コンテンツ幅以上指定

参考
https://h2ham.net/youtube-responsive

料金表　プラグイン

Easy Pricing Tables

http://design-plus1.com/tcd-w/2016/03/easypricingtables.html

参考

ローカルサイトがうまくいかない場合はv-hostの調子が悪いことが多い　ちゃんと書いてあっても

今回　いや　前もあった気が、、
とにかくうまく行ってるやつ全てコピペして
変えたのに
うまくイカず

ファイルパスのみ
違うのからこぴぺしたら

違うサイトひらいたので
フォルダ変えたらいけた

改行とか
スペースとかおかしかったのかな。。

2025年10月
月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31