htkでpdfと画像が同じとこにアップして 両方共ライトボックス風に表示させたい がpdfのみFancyBoxで画像はいままで通り表示させたいが、jpgは他のjpgとスライドショーさせたくない。
FancyBoxでPDFをチェック
pdfのところに勝手になるが
jpgはならないので
jpgの場合ライトボックスを足してやる。
その際、ライトボックスのグループを毎回ちがうものにしてやる必要がる
カウントを使う
まとめ
<?php
$i = 0;//セット
$args = array(
'posts_per_page' => -1,
'post_type' => 'cast', //カスタム投稿名
'orderby' => array('menu_order'=> 'DESC','date'=> 'DESC'),
);
$myposts = get_posts( $args );
if(! $myposts){ echo '<div style="margin-left:20px;">記事はまだありません。</div>';}
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<div class="shutuen_maru_box">
<?php if(post_custom('cast_pdf')):
//pdfか画像か 画像なら入る
$img_url =wp_get_attachment_image_src(get_post_meta($post->ID,"cast_pdf",true),'full');
?>
<a href="<?php echo $cfs->get('cast_pdf'); ?>" <? if($img_url):?>rel="lightbox[<? echo $i; $i++?>]"<? endif;?>>
<?php endif; ?>
<div class="shutuen_sam">
<?php
$cast_photo = wp_get_attachment_image($cfs->get('cast_img'),'thumbnail',array('alt'=>$title,'title'=>$title));
echo $cast_photo;
?>
</div>
<div class="shutuen_name">
<?php the_title(); ?>
</div>
<?php if(post_custom('cast_pdf')): ?>
</a>
<?php endif; ?>
<?php edit_post_link('編集', ' <div style=" text-align:center">', '</div>'); ?>
</div>
<?php endforeach;
wp_reset_postdata();?>
ポイントは
$i = 0;//セット //pdfか画像か 画像なら入る $img_url =wp_get_attachment_image_src(get_post_meta($post->ID,"cast_pdf",true),'full'); <? if($img_url):?>rel="lightbox[<? echo $i; $i++?>]"<? endif;?>
スケジュールは
ループ内にるーぷがあるで
セットが一番最初のループの前にする
‘, ‘‘); ?>
ID,”cast_img”,true),’cast_sam’); ?>
post_title; ?>
cast_info); ?>
cast_pdf):
$img_url =wp_get_attachment_image_src(get_post_meta($value->ID,”cast_pdf”,true),’full’);//pdfか画像か 画像なら入る
?>
; ?>/d/img/d_site/man.jpg” width=”180″>
</div>
<div class=)
No date..
schedule_comment); ?>
is_main_query で簡単に過去のスケジュールまとめ 管理画面も同じくしは公開済みを過去のスケジュールにする。
ファンク
//スケジュールの並び替え
function SortArchive( $query ) {
//管理画面スルー
if ( is_admin() || ! $query->is_main_query() )
return;
//こっから
// if ( $query->is_category() || $query->is_archive() || $query->is_tax() || $query->is_search() ) {
if($query->is_post_type_archive( 'schedule' )) {
$query->set( 'posts_per_page' , 12);
$query->set('meta_key', 'schedule_day');
$query->set('orderby', array( 'meta_value' => 'ASC') );
$query->set('meta_compare' , '>=');
$query->set('meta_value' , date("Y年m月d日"));
$query->set('type' , 'DATE');
//$query->set( 'meta_key', 'item_sta' );
//$query->set( 'orderby', array( 'meta_value' => 'DESC', 'date' => 'DESC' ) );//新しい デフォ
return;
}
}
add_action( 'pre_get_posts', 'SortArchive' );
//過去の記事の並び替え urlに/?sort=backとする あえて2にして もっかい書く
function SortArchive2( $query ) {
//管理画面スルー
if ( is_admin() || ! $query->is_main_query() )
return;
if ( $query->is_category() || $query->is_archive() || $query->is_tax() || $query->is_search() ) {
if ($query->is_search() ) ://method="post" URLが動的
$sortset = (string)filter_input(INPUT_POST, 'sort');
else : //method="get"//urlが静的
$sortset = (string)filter_input(INPUT_GET, 'sort');
endif;
if ( $sortset == 'back' ) {
//$query->set( 'orderby', 'date' ); //新しい デフォ
$query->set('meta_compare' , '<'); //今日より古い記事
$query->set('orderby', array( 'meta_value' => 'DESC') ); //今日より並べる
}
return;
}
}
add_action( 'pre_get_posts', 'SortArchive2' );
アーカイブースケジュール
<?php $sortset = (string)filter_input(INPUT_GET, 'sort'); if ( $sortset !== 'back' ) :?> <a href="/スケジュール/?sort=back" style="color:#FFF600">◀ 過去のスケジュールはこちら</a> <?php endif; ?>
//スケジュールの管理画面の並び替え
function order_posts_in_admin($wp_query) {
if ( is_admin() && $wp_query->is_main_query() && 'schedule' == $wp_query->get('post_type') ){
// if('draft' == $wp_query->get('post_status')){
$wp_query->set('orderby', 'ID');
$wp_query->set('meta_key', 'schedule_day');
$wp_query->set('orderby', array( 'meta_value' => 'ASC') );
$wp_query->set('meta_compare' , '>=');
$wp_query->set('meta_value' , date("Y年m月d日"));
$wp_query->set('type' , 'DATE');
// }
}
}
add_action('pre_get_posts', 'order_posts_in_admin');
//スケジュールの管理画面の並び替え urlに/? post_status=publish の場合 公開済みの場合に 過去の記事をもってく あえて2にして もっかい書く
function order_posts_in_admin2($wp_query) {
if ( is_admin() && $wp_query->is_main_query() && 'schedule' == $wp_query->get('post_type') ){
$sortset = (string)filter_input(INPUT_GET, 'post_status');//post_status=publishをゲット
//$sortset = (string)filter_input(INPUT_POST, 'post_status'); //INPUT_POSTではないらしい
if ( $sortset == 'publish' ) {
$wp_query->set('meta_key', 'schedule_day');
$wp_query->set('orderby', array( 'meta_value' => 'DESC') );
$wp_query->set('meta_compare' , '<');
$wp_query->set('meta_value' , date("Y年m月d日"));
$wp_query->set('type' , 'DATE');
}
}
}
add_action('pre_get_posts', 'order_posts_in_admin2');
カスタムアドミンで調整
.post-type-schedule .subsubsub .count{ display:none}/*カウント消す*/
.post-type-schedule .subsubsub .mine{ display:none}/*所有消す*/
スムーズスクロール こぴぺ
<script>
//スムーズスクロール
jQuery(function(){
// #で始まるアンカーをクリックした場合に処理
jQuery('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= jQuery(this).attr("href");
// 移動先を取得
var target = jQuery(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
のみ あとJS
固定ページの内容をトップページなどに表示 特定の固定ページのみユーザーに編集
<?php $page_id = xxx; //xxxに 固定ページIDを入力 $content = get_page($page_id); echo $content->post_content; ?> タイトルを表示 $content = get_page($page_id); echo “<h2>” . $content->post_title . “</h2>n”; タイトル＋内容 <?php $page_id = xxx; //xxxに 固定ページIDを入力 $content = get_page($page_id); echo “<h2>” . $content->post_title . “</h2>n”; $content = get_page($page_id); echo $content->post_content; ?>
http://golden-monkey.info/?p=1193
管理画面
まず、htkのやつはロールエディターとか user role editer とかでおかしくなっちゃったかもしれんで
最初からこのやり方でいく
インフォページをクライアントユーザーにして更新
権限は編集者
ureで
edit_others_pages //他のページは見えない 編集できない
publish_pages //新規ページを公開できない。
のチェックをはずす
以上
あとは管理画面にそのページのダイレクトのリンクをいれてやればOK
メニューエディタで指定のページ
llaでオフセットで ページ送りできんかったり ２ページ目は違う表示さしたいときとか
クエリポストで ぺーじで いっこめにオフセットかけて
２ページ目から 通常表示
<?php
$page = (get_query_var('paged'));
if($page == 0):
?>
<?php endif; ?>
これ基本
クエリポスト分岐させるだけ
<?php
$page = (get_query_var('paged'));
//echo $page;
if($page == 0){
query_posts($query_string . '&post_type=post&offset=1&paged='.$paged);}
else{ query_posts($query_string . '&post_type=post&paged='.$paged);}
?>
あと２ページ目だけスタイル変更
<?php
$page = (get_query_var('paged'));
//echo $page;
if(!$page == 0){
echo '
<style>
.new_d{ display:none}
</style>';
}
?>
htkスケジュール まとめはじめ
ポストタイプ schedule
ポストタイプ cast
schedule のタイトルをデイトピッカーで
自動入力
ファンク
/カスタムポストでタイトル自動挿入 日付
function update_schedule_title($title) {
global $post;
$type = get_post_type($post->ID);
if ( 'schedule' == $type) {
$title = get_field('schedule_day');
}
return $title;
}
add_filter ('title_save_pre', 'update_schedule_title');
function filter_handler( $data , $postarr )
{
global $post;
$id = $post->ID;
if('schedule' == $data['post_type'] && isset($data['post_type']))
if($id) {
$title = $_POST['fields']['field_578f45508fd17'];
$data['post_title'] = $title.'の出演予定';
}
return $data;
}
add_filter( 'wp_insert_post_data' , 'filter_handler' , '99', 2 );
get_field(‘date’); はAdvanced Custom Fields 使用のため。
field_537b99df4ade1 のところは投稿欄のフィールドの要素を確認。
とのこと
http://web-taiyo.com/works/140522.html
下記できんかった でいとだからかな？
http://com4tis.net/wordpress-title-auto-create/
アドバンスで関連入れて
必須以外にして
日付でソート
https://ja.forums.wordpress.org/topic/22997 参考
ちなみに
https://wordpress.org/plugins/easy-fancybox/
でpdfを見る
http://m.grow8.com/wp/?p=115
さて二日目
ゲットポストで
出力
ポイントは３つ
アドバンスで関連を出す場合
のるーぷにすべて書いてあるが
返り値オブジェクト
返り値をフォーチして そこから取り出す
acfコードは使わず 普通にカスタムポストを質力するコードを書く
添付フィアルのURLにしているのにファイルIDかえってくるので改めて下記で取る
<?php
$args = array(
'posts_per_page' => 6,
'post_type' => 'schedule', //カスタム投稿名
);
$myposts = get_posts( $args );
if(! $myposts){ echo '<div style="margin-left:20px;">記事はまだありません。</div>';}
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<div class="shutuen_box">
<div class="shutuen_day fri">
<?php the_title(); ?>
</div>
<?php //関連(返り値は「Post Objects」)
$day_cast = get_field('day_cast');
if($day_cast): ?>
<?php foreach((array)$day_cast as $value):?>
<!-- -->
<div class="shutuen_one_box">
<div class="shutuen_sam">
<?php //画像ファイルにクラスをつけて表示 mediumを任意のサイズへ 最後array(120,240)など
$title= get_the_title();
$img_url2 =wp_get_attachment_image_src(get_post_meta($value->ID,"cast_img",true),'medium'); ?>
<img src="<?php print $img_url2[0]; ?>" class="vv" alt="<?php echo $title ?>" title="<?php echo $title ?>" />
</div>
<div class="shutuen_name">
<?php echo $value->post_title; ?>
</div>
<div class="shutuen_come">
<p><?php echo nl2br($value->cast_info); ?></p>
</div>
<?php if($value->cast_pdf): ?>
<div class="shutuen_click">
<a href="<?php
$full = wp_get_attachment_url($value->cast_pdf);
echo $full;
?>" target="_blank">
詳しく見る ▶
</a>
</div>
<?php endif; ?>
</div>
<!-- -->
<? endforeach; ?>
未定
<? else: endif; ?>
</div>
<!-- oneday -->
<?php endforeach;
wp_reset_postdata();?>
ライフハウジング イベント 出現 まとめ
まず AddQuicktag（アドクイックタグ） を有効化
シングルで まずベースとなる記事を書く
ポイントとしてはdiv の使い方をうまくやらないと ワードプレスに入れた時に 勝手にpとか入れられて改行させられちゃうから
注意するべし
div でも spanでも おんなじだったで普通に書くべし
投稿画面で 入れ替え時のコツは
————
画像だと
サンプル画像選択 ▶ キーボードの右を押す ▶ そこの部分に画像を追加
▶ その後、元のサンプルを消す
（画像サイズはサムネイル300×300を選ぶ リンクはありなしどちらでもよい）
文字だと最初の文字を消しさずに 2文字目などの部分にカーソルをあわせ 正しい情報を入力してから サンプルの文字を消す。
※先にサンプル文字を消して入力すると、スタイルが消えてしまう場合ある
————
まずファンクションにてエディタースタイルを読み込ます。
今回
例scripts.php内
//エディターCSSを差し込む ビジュアルエディタを同じデザインに
add_editor_style( get_stylesheet_directory_uri()
. '/d/css/editor_style4.css' );
そんで 投稿画面 はレスポンさせんかったで
そのままブートcssにモバイルも書いた
AddQuicktag（アドクイックタグ）
の設定で
開始タグに 書いたコードを挿入 最後にpタグを入れとくと 次を選択しやすい
最初にあるビジュアルエディタ ポストタイプを選択する
インフォループのコードだが
どうやら
ドルcat にインフォカテを入れていたのだが
ループの際 ドルカテを$info_catも使っているにで おかしくなってるようだから 使わんほうがいいかも
とりあえず ゲットポスとにして
< こういうふうに 直接書いた やっぱそうだ インフォループを変更してうまくいった
モバイルメニュー 上から 出てきて スクロール 問題点 と施工
問題点は 一番上にある時にクリックスクロールする際、意図したマージンがとれず、コンテンツにくいこんでくる。そしておなじボタンをおすと 正解のところまで移動、
一度移動すればほかはぼぼ正解に止まるが たまに変なところでとまるな。
topまで戻った際、 また同じ症状がでる。
さらにヘッダメニューひっつきスタイルで ロゴ 大きいから小さい にしてるため
topの部分でtopをおすと うろうろなる
ヘッダめにゅーをfixedさせなず すくろーるでfixeｄから
さいしょからfixed でスライダーにマージん に変更
ヘッダーちいさくなったら マージンも変更ッて感じ
ほかのスクロール探す
google map レスポン ＋ スクロール禁止 iframe
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d816.1081975464564!2d139.0712520292517!3d35.09590249605063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6019be66262bc83f%3A0x5f2ad31ffc354390!2z44CSNDEzLTAwMTUg6Z2Z5bKh55yM54ax5rW35biC5Lit5aSu55S677yR4oiS77yX!5e0!3m2!1sja!2sjp!4v1468472429941" width="600" height="450" frameborder="0" style="border:0;pointer-events: none;" allowfullscreen></iframe>
</div>
pointer-events: none;
こいつが結果
.google-maps {
position: relative;
/*padding-bottom: 36%;*/
padding-bottom:500px;
height: 0;
overflow: hidden;
margin-top:-88px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
http://blog.ddwnet.com/archives/1213.html
//管理者以外 iframe
function allow_iframe_tag($content){
global $allowedposttags;
$allowedposttags['iframe'] = array('class'=>array() , 'src'=>array() , 'width'=>array(), 'height'=>array() , 'frameborder'=>array() , 'scrolling'=>array() , 'marginheight'=>array(), 'marginwidth'=>array() , 'allowfullscreen'=>array());
return $content;
}
add_filter('content_save_pre','allow_iframe_tag');
slick 詳細設定
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-slick.html
http://cly7796.net/wp/javascript/plugin-slick/
OPTION
| accessibility | キーボード操作 初期値はtrue。 |
|---|---|
| adaptiveHeight | スライドの高さ揃え？ 初期値はfalse。 |
| autoplay | 自動切り替え 初期値はfalse。 |
| autoplaySpeed | 自動切り替えの待ち時間 初期値は3000。 |
| arrows | 前後ボタンのナビゲーションの有無 初期値はtrue。 |
| asNavFor | 他のスライダーのナビゲーションを設定する 初期値はnull。 |
| appendArrows | 前後ボタンのナビゲーションの場所移動？指定した要素内にbuttonタグが入る 初期値は$(element)。 |
| prevArrow | 前ボタンのナビゲーションのタグ変更 初期値は<button type=”button” class=”slick-prev”>Previous</button>。 |
| nextArrow | 次ボタンのナビゲーションのタグ変更 初期値は<button type=”button” class=”slick-next”>Next</button>。 |
| centerMode | 要素を中央揃え 初期値はfalse。 |
| centerPadding | 要素を中央揃えにした時の左右のパディング設定 初期値は’50px’。 |
| cssEase | CSSでアニメーションさせる場合のイージング 初期値は’ease’。 |
| customPaging | ページ送りのカスタム？ 初期値はn/a。 |
| dots | 黒点の表示 初期値はfalse。 |
| draggable | マウスドラッグを有効にするかどうか 初期値はtrue。 |
| fade | 切り替えをフェードで行うかどうか 初期値はfalse。 |
| focusOnSelect | クリックした要素のフォーカスを有効にする？ 初期値はfalse。 |
| easing | イージング 初期値は’linear’。 |
| edgeFriction | ループでないカルーセルの端での抵抗処理？ 初期値は0.15。 |
| infinite | スライドをループさせるかどうか 初期値はtrue。 |
| initialSlide | スライダーの初期表示要素の指定 初期値は0。 |
| lazyLoad | 要素のロードするタイミングをずらすかどうか 初期値は’ondemand’。 |
| mobileFirst | レスポンシブの設定でモバイルの計算を優先させる？ 初期値はfalse。 |
| pauseOnHover | 自動切り替え設定時に、オンマウスで一時停止させるかどうか 初期値はtrue。 |
| pauseOnDotsHover | 自動切り替え設定時に、黒点にオンマウスで一時停止させるかどうか 初期値はfalse。 |
| respondTo | レスポンシブの反応する項目？ ‘window’ か ‘slider’ か ‘min’ 初期値は’window’。 |
| responsive | breakpointの幅を指定して、画面幅がbreakpoint以下の時のオプションを設定 初期値はnone。 |
| slide | スライドする要素の指定 初期値は”。 |
| slidesToShow | 表示する要素の数 初期値は1。 |
| slidesToScroll | 1回のスライドで動かす要素数 初期値は1。 |
| speed | スライド(フェード)のスピード 初期値は300。 |
| swipe | スワイプでのスライドを有効にするかどうか 初期値はtrue。 |
| swipeToSlide | マウスドラッグやスワイプ時に、slidesToScrollで設定している以上に移動させるかどうか 初期値はfalse。 |
| touchMove | スワイプ中のスライダーの移動を有効にするかどうか 初期値はtrue。 |
| touchThreshold | (1/touchThreshold) * スライダーの幅だけスワイプするとスライドするみたいな設定？ 値を小さくするほどスライドするのに必要なスワイプ距離が増えるっぽい 初期値は5。 |
| useCSS | CSSトランジションを有効にするかどうか 初期値はtrue。 |
| variableWidth | 要素の幅が異なるときにtrue？ 初期値はfalse。 |
| vertical | 垂直方向のスライドにするかどうか 初期値はfalse。 |
| rtl | スライダーの移動方向 初期値はfalse。 |
EVENT
| afterChange | slick, currentSlide スライド変更後に発火 |
|---|---|
| beforeChange | スライド変更前に発火 |
| edge | slick, direction ループでない時に、端より先へ移動しようとした際に発火 |
| init | slick 初期化完了後に発火？ |
| reInit | slick 全ての再初期化完了後に発火？ |
| setPosition | slick 位置やサイズの変更後に発火 |
| swipe | slick, direction マウスドラッグやスワイプ後に発火 |
METHODS
| slickCurrentSlide | 現在のスライドのインデックス番号を返す |
|---|---|
| slickGoTo | 指定したスライドへ移動 |
| slickNext | 次のスライドへ移動 |
| slickPrev | 前のスライドへ移動 |
| slickPause | 自動切り替えの停止 |
| slickPlay | 自動切り替え開始 |
| slickAdd | スライド要素の追加 |
| slickRemove | スライド要素の削除 |
| slickFilter | フィルターでスライド要素の絞り込み |
| slickUnfilter | フィルターの解除 |
| slickGetOption | オプションの値を取得 |
| slickSetOption | オプションの値を設定 |
| unslick | 脱構築 |
| getSlick | 要素の取得？ |
orderby複数指定
http://chaika.hatenablog.com/entry/2015/12/25/154244
http://chaika.hatenablog.com/entry/2015/06/05/120000
http://chaika.hatenablog.com/entry/2015/12/25/154244
orderby複数指定
geto post
結果
<?php
$args = array(
'posts_per_page' => 9,
'post_type' => 'cast', //カスタム投稿名
'orderby' => array('menu_order'=> 'DESC','date'=> 'DESC'),
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<?php include( get_stylesheet_directory() . '/roop/cast_roop_box.php'); ?>
<?php endforeach;
wp_reset_postdata();?>
//function.php
function change_posts_query( $query ) {
if( is_archive() ) {
$query->set('meta_key', 'release_time');
// orderby に orderby => order 形式の配列で条件と並び順を渡してあげればOK
$query->set('orderby', array('meta_value_num' => 'ASC', 'date' => 'DESC') );
// order は不要
// $query->set('order', 'DESC');
}
}
add_action('pre_get_posts', 'change_posts_query');
白黒 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