web用に保存で色々違い

文字など(特に細かい)のweb用に保存・書き出しする場合
色々と差がでるので
ここで4年目のフリーWEBデザイナーとしてまとめ

細い文字を奇麗に出すなら下記比較してみるといい。
全て同じデータである!

【結果:
本気出すなら【アウトライン化してフォトショ】にもっていって web用保存
イラレでもいい感じなので大丈夫なのは
細いのは【アウトラインせずにアートに最適】
もしくは太くなるが【アウトライン化してアートに最適】

イラレではアートに最適を使い
太くしたいときはアウトライン化する的に覚えておこう!

ぐちゃぐちゃっぽいのは
アウトラインせずに文字に最適となりました。

(イラレでアウトライン化したら アートも文字もほぼ同じ)

【極細】

アウトライン無し
イラレでweb用に保存
アートに最適 

overview-06

【細い】
アウトライン無し
イラレ書き出し保存
アートに最適

page-06

【ナチュラル】
アウトライン化
フォトショにコピペしてweb用に保存

名称未設定-1-2

【太い】
アウトライン化
イラレでweb用に保存
アートに最適 文字に最適

page2

まだあった
====
アウトライン化
イラレ書き出し保存
文字に最適 (アートに最適 同じ)
page-06
アウトライン化
イラレ書き出し保存
アートに最適 (文字に最適 同じ)

page-06
=====
【駄目な例】
アウトライン無し
イラレでweb用に保存
文字に最適  

page

アウトライン無し
イラレ書き出し保存
文字に最適

page-06

アウトライン無し
フォトショにコピペしてweb用に保存

名称未設定-2

バックグラウンドモノグラムの作り方 web背景

まず基本
パターン作成
サイズは240 240くらいの6角形縦 画像1個

その場合
 h240 w360の四角でパターンがとれる。

ヤサカは背景グレーで ロゴ白 ストライプ白
ボディーにストライプと背景色

コンテンツバッグにロゴ センター トップにて
イラレで書き出す際
2つのロゴに真ん中でとると
背景がちょうど真ん中になるよ。

これが新しくみつけたブラッシュアップ

それとストライプの大きさが
3_3のやつを使ったから

4_4_のやつと共に原型をおいときます。
斜めストライプ背景用少し大きめ

サイト

http://www.stripegenerator.com/#Zm9yZT1GRkZGRkY7aD0zMDt3PTM7cD0zO2JhY2sxPTAwMDAwMDtiYWNrMj1mZjAwMDA7Z3Q9MDtkPTA7c2hhZG93PTA7

ちなみに
メインコンテンツのサイドにボーダーを入れて
普段はパディングを広くみせ
幅が狭まると
ボーダーが消えるcssも

#d_contents_width {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 25px;
	border-left-width: 25px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFF;
	border-left-color: #FFF;
}

@media screen and (max-width: 1050px){
	
#d_contents_width {
	border-right-width: 0px;
	border-left-width: 0px;	
	}	
	
}

flickrを使って写真整理

yahoo 登録
http://flickr.no-tsukaikata.com/kihon/flickr_account_registration/

フリーカー使い方参考

http://number333.org/2013/05/24/how-to-use-flickr/

非公開
http://takaslife.com/2013/08/13/webservice-flickr-privatesetting/

rssについて活用

クローム機能拡張
RSS Feed Reader
説明 http://www.barnetshenkinbridge.com/browser/1944/
要約 クローム専用で スマフォは機能拡張できないので
PC専用になる。サイトブックマーク 記事ブックマークのように使えそう

feedly

スマフォアプリあるから
共有可能
ただ 登録する際 いかないとできない。
それと登録する際できない場合は
URL検索 ▶ ドロップダウン ▶ フィード一覧が出た後の上のボタンで登録

wordpressの設定なのか?
LIGはそれじゃなくてもできたもんで
設定あるのか?

その他

WordPressとプラグイン「RSSImport」で自分だけのアンテナサイトを構築しよう

http://design-plus1.com/tcd-w/2014/08/rssimport.html

今回発見した分岐の際の注意点 同じroop phpでh3 h4使い分け

//この際 分岐のコードをまとめて
分岐させたいページのヘッダーもしくは上部でインクルードさせた方が速いわ
上記やってみたが!is_tax(¥¥)の解釈がまちごうとったわ これだと 多分それ以外全てを指示しとるわ
is_single(ポストタイプ)も出来んくて
is_singlar(‘ポストタイプだな’)

一応 d_h_3_4.php 作って

  <?php include("d_h_3_4.php"); //hタグ分岐用?>

こうやったよ

内容は

<?php

if(is_page(787) || is_singular('jirei')):
$h = '<h4 class="jirei_sub_title">';
$h_e = '</h4>';

elseif(is_home() || is_tax()):
$h = '<h3 class="jirei_sub_title">';
$h_e = '</h3>';


endif;
?>

こんだけ

以上追記

ループ内でif(is_home())

ははホームとみなされない
ループ内の記事とされるっぽい

または
アーカイブページや固定ページで
クエリポスト後
(多分..タックスクエリ指定後)
ループ前に
if(is_tax())
if(is_page())

などやると

その指示をまともに受けない

タックスクエリでタクスを指定した場合そのis_tax(¥¥)
が指示される。

応用例として
カスタムポストで
どのアーカイブでも
同じ表示をさせるが
ページによってhタグのマークアップがh3とh4に分かれる

コンテンツは
roop_jirei.php
を読み込ませる

今回やった例は

クエリポストまでは各ページ
インクルードでroop_jirei.php

ページナビ

リセットクエリ

という感じ

もちろんタクソノミーアーカイブには
クエリポストはない

カスタムポストのTOPページは固定ページに
フォーチ{クエリポスト}にて各記事を表示
タックスクエリはcate_jirei

今回はこの固定ページのみループ内のタイトルがh4
他はh3がよかった
ホームにも新着カスタムポストを表示

そのため

ループ事例にはこう書いた

<?php
if(is_home() || !is_tax('cate_jirei')):
$h = '<h3 class="jirei_sub_title">';
$h_e = '</h3>';
else:
//タクスかてじれい はページ409とtaxに直書き
endif;
?>

ループコードは

<?php echo $h; ?>
<i class="icon-dot-circled"></i>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a>
<?php echo $h_e; ?>

こうしてエコーでドルを出す。

固定ページには

タックスクエリ前に

<?php
$h = '<h4 class="jirei_sub_title">';
$h_e = '</h4>';

タクスには
ループインクルード前に

<?php
if(is_tax('cate_jirei')):
$h = '<h3 class="jirei_sub_title">';
$h_e = '</h3>';
else:
//タクスかてじれい はページ409とtaxに直書き
endif;
?>

とした

めんどくセー

だでhtml5はすべてh1から始まるのかと思った。
セクションで区切りゃいいもんで

要素の高さ揃える ブログ一覧

牧野でテンパったメモ 覚え直し書き
ローカルでうまくいっても アップするとうまく行かなかった。

なんとか機能した方法 ラグは読み込み直しでたまにあるかな?

完成系はWP Headの前に

<script type="text/javascript" src="/js/jquery.tile.js"></script>

<script type="application/javascript">
$(function(){
    $('.blog_box').tile(3);
});
</script>

jquery.tile.jsともういっこあったが
これだけのようだ。

http://liginc.co.jp/web/js/jquery/22340

http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html

http://blog.webcreativepark.net/2007/07/26-010338.html

http://file.urin.take-uma.net/jquery.tile.js-Demo.html

http://raining.bear-life.com/jquery/%E3%80%8Cjquery-tile-js%E3%80%8D%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E6%8F%83%E3%81%88%E3%82%8B

http://cappee.net/coding/jquery/height-jquery-tile

Parent Category Toggler 親カテゴリ自動チェック

基本的にそうしても問題ない場合が多いから
大丈夫だろう。いれれば

後に
プラグイン デフォルト まとめ
ファンクションまとめ
分岐まとめ

ワードプレスコードまとめ
ターム タクソノミー

カスタムフィールドまとめ

などかいたるわ!

デフォルトワードプレスを最強にしたい。

説明項目で関連制作事例の記事があれば 制作事例をみる と出す 新規コード 

<?php
$tarmname = '金銀プリント(メタリック)';
$taxonomy_name = 'make_cate';

$args = array(
'slug' => $tarmname
);

 $taxonomy_term = get_terms($taxonomy_name,$args);
 if(!is_wp_error( $taxonomy_term) && count( $taxonomy_term)):
 $url = get_term_link($tarmname, $taxonomy_name);
?>  

<div style="text-align:right; padding-top:15px; padding-bottom:15px; padding-right:30px;">
<a href="<?php echo $url; ?>" style="color:#FF3300; font-size:13px;">制作事例を見る ▶▶</a>
</div>

<?php
endif;
?>

説明すると
タームネームを入れ替えるだけで(タクソノミーも指定)
使えるコード

タームスラッグ タクソノミーを入れて
get_tarmsでターム情報を取得
フォーチでまわすのが面倒なので
count()で記事があれば となってるのかな?
タームアーカイブurlはget_term_linkで直接入れてとる

タクソノミー ターム別 記事一覧  記事件数で全て見る

http://naoyu.net/wordpress/tax_query/583/
ここに感謝

そもそもタクソノミーのタームを全て取得するコードが
あまりメジャーじゃないから悩んだ。
これでカスタムポストの全記事をターム別に一覧表示できる。

【備考】
アーカイブページで表現できるのはポストタイプのみで
タクソノミーページの全記事アーカイブはタクソノミー – タクソノミー名では
そのテンプレートが使われなかった。
つまりそんな表示はできない
/タクソノミー名/ではぺーじがありません。
/タクソノミー名/ラベル名/で一覧が表示されたようにみえたが
タクソノミーphpで表示されただけで ラベル名の部分は適当なもじでも同じように全部でた。
つまりないからタクソノミーページを表示してるだけだ。

つまり
固定ページに書いて表現する。

デフォルトで この表現であったら良いのに。
そのうちなるかな?

タクソノミーのタームを全て取得するコード

$args = array(
'parent'       => 0,
'hierarchical' => 0,
'orderby'      => 'term_order', // Category Order and Taxonomy Terms Order を使用
'order'        => 'ASC'
);
    $taxonomy_name = 'cate_jirei';
    $taxonomys = get_terms($taxonomy_name,$args);
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy_term):
        $url = get_term_link($taxonomy_term->slug, $taxonomy_name);
?>



<h3><div class="jirei_title"><i class="icon-doc-inv"></i>
<a href="<?php echo $url; ?>">
<?php
echo $taxonomy_term->name;
?>
</a>
</div>
</h3>

<?php endforeach; endif; ?>
 
$taxonomy_name = 'cate_jirei';
$taxonomys = get_terms($taxonomy_name,$args);

これだろう

あとは
フォーチでさらにクエリポストでまわした。





<?php
$args = array(
'parent'       => 0,
'hierarchical' => 0,
'orderby'      => 'term_order', // Category Order and Taxonomy Terms Order を使用
'order'        => 'ASC'
);
    $taxonomy_name = 'cate_jirei';
    $taxonomys = get_terms($taxonomy_name,$args);
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy_term):
        $url = get_term_link($taxonomy_term->slug, $taxonomy_name);
?>



<h3><div class="jirei_title"><i class="icon-doc-inv"></i>
<a href="<?php echo $url; ?>">
<?php
echo $taxonomy_term->name;
?>
</a>
</div>
</h3>










<!----------------------BOX ALL----------------------------->

<div class="jirei_box_all">
<?php
$args = array(
		'posts_per_page' => -1,
//'orderby' => 'menu_order',
//'order' => 'ASC',
'tax_query' => array(
			'relation' => 'AND',
			array(
				'taxonomy' => $taxonomy_name,
				'field' => 'slug',
				'terms' => array( $taxonomy_term->slug ),
//'operator'=>'NOT IN'
				),
),
//カテ例 'cat'=> 4,
//カテ複数例	'cat'=> array(4,6)

	);
?>

<!----/宣言----->
<!----宣言2----->
<?php
	query_posts( $args );
?>


<!--★★★ループ基本-->
<?php
if ( have_posts () ) :
    while ( have_posts() ) :
        the_post();
?>



<div class="jirei_box">



<div class="jirei_box_img" style="height:210px;">

<a href="<?php the_permalink(); ?>">
 <?php
$title= get_the_title();
echo wp_get_attachment_image(get_post_meta($post->ID,"jirei_gazou",true),W210,0,array('alt'=>$title,'title'=>$title)); ?>
</a>

<?php //new
$days=30;
$today=date('U'); $entry=get_the_time('U');
$diff1=date('U',($today - $entry))/86400;
if ($days > $diff1) {
echo '<div class="new_icon"><img src="/img/new_icon/rainbow1.gif" width="31" height="12" alt="愛知春日井ホームページ制作NEW記事"></div>';
}
?>

</div>

<h4><div class="jirei_sub_title"><i class="icon-dot-circled"></i>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a></div></h4>


</div>
<?php
    endwhile;
endif;
?>
<?php wp_reset_query(); ?>


<div style="clear:both"></div>



</div class="jirei_box_all">

<div style="padding-top:30px;"></div>






<!----------------------BOX ALL----------------------------->















 
 
 
 
<?php endforeach; endif; ?>

原文はこうだ

<?php
$args = array(
'parent'       => 0,
'hierarchical' => 0,
'orderby'      => 'term_order', // Category Order and Taxonomy Terms Order を使用
'order'        => 'ASC'
);
    $taxonomy_name = 'item_category';
    $taxonomys = get_terms($taxonomy_name,$args);
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy):
        $url = get_term_link($taxonomy->slug, $taxonomy_name);
        $tax_posts = get_posts(array(
            'post_type' => get_post_type(),
            'posts_per_page' => 5, // 表示させたい記事数
            'tax_query' => array(
                array(
                    'taxonomy'=>'item_category',
                    'terms'=>array( $taxonomy->slug ), 
                    'field'=>'slug',
                    'include_children'=>true,
                    'operator'=>'IN'
                    ),
                'relation' => 'AND'
                )
            ));
    if($tax_posts):
?>
<h2 id="<?php echo esc_html($taxonomy->slug); ?>" class=""><a href="<?php echo $url; ?>"><?php echo esc_html($taxonomy->name); ?></a></h2>
<ul>
    <?php foreach($tax_posts as $tax_post): ?>
    <li>
        <span class="thumb">
            <a href="<?php echo get_permalink($tax_post->ID); ?>">
            <?php if(has_post_thumbnail($tax_post->ID)) {
                echo get_the_post_thumbnail($tax_post->ID,'post-thumbnail');
             } ?>
            </a>
        </span>
        <span class="title"><?php echo get_the_title($tax_post->ID); ?></span>
    </li>
    <?php endforeach; ?>
</ul>
<?php
        endif;
endforeach;
endif;
?>

さらにタクソノミー シーズンで表現

<?php
$args = array(
'parent'       => 0,
'hierarchical' => 0,
'orderby'      => 'term_order', // Category Order and Taxonomy Terms Order を使用
'order'        => 'ASC'
);
    $taxonomy_name = 'item_category';
    $taxonomys = get_terms($taxonomy_name,$args);
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy):
        $url = get_term_link($taxonomy->slug, $taxonomy_name);
        $this_term = get_query_var( 'term' );
        $tax_posts = get_posts(array(
            'post_type' => get_post_type(),
            'posts_per_page' => 5, // 表示させたい記事数
            'tax_query' => array(
                array(
                    'taxonomy'=>'item_category',
                    'terms'=>array( $taxonomy->slug ), 
                    'field'=>'slug',
                    'include_children'=>true,
                    'operator'=>'IN'
                    ),
                array(
                    'taxonomy'=>'season',
                    'terms'=>array( $this_term ),
                    'field'=>'slug',
                    'include_children'=>true,
                    'operator'=>'AND'
                    ),
                'relation' => 'AND'
                )
            ));
    if($tax_posts):
?>
<h2 id="<?php echo esc_html($taxonomy->slug); ?>" class=""><a href="<?php echo $url; ?>"><?php echo esc_html($taxonomy->name); ?></a></h2>
<ul>
    <?php foreach($tax_posts as $tax_post): ?>
    <li>
        <span class="thumb">
            <a href="<?php echo get_permalink($tax_post->ID); ?>">
            <?php if(has_post_thumbnail($tax_post->ID)) {
                echo get_the_post_thumbnail($tax_post->ID,'post-thumbnail');
             } ?>
            </a>
        </span>
        <span class="title"><?php echo get_the_title($tax_post->ID); ?></span>
    </li>
    <?php endforeach; ?>
</ul>
<?php
        endif;
endforeach;
endif;
?>

さらにこの記事に書くが
何件以上あった場合には 全て表示を表示したい

まずタームなので

上記コードの

$taxonomys = get_terms($taxonomy_name,$args);
を使い

$count = $taxonomy_term->count;

とし

それで分岐 wp_reset_queryの前

リンク先は

$url = get_term_link($taxonomy_term->slug, $taxonomy_name);

を使いそのままえこー

演算子はここを参照
http://www.tohoho-web.com/js/operator.htm

<?php if($count > 9):
?>

<div style="text-align:right; padding-top:0px; padding-bottom:15px; padding-right:30px;">
   <a href="<?php echo $url; ?>" style="color:#FF3300; font-size:13px;">すべて見る ▶▶</a>
    </div>
    
<?php
endif;
?>

参考

タームIDで記事数取得:
get_term( $chosen_id, 'タクソノミースラッグ' )->count

タームスラッグで記事数取得:
get_term_by( 'slug', 'タームスラッグ', 'タクソノミースラッグ' )->count

参照:codex.wordpress.org
get_term
get_term_by

カテゴリは

get_category($id)->category_count;

これらしい
未検証

わかった事 記事並び替え

まず
検索結果を並び替える場合

if ($query->is_search() ) ://method=”post” URLが動的
$sortset = (string)filter_input(INPUT_POST, ‘sort’);

としなかん 
つまり 
新しく覚えた get と post の違いがあり
getはページ送りできて
postはできやん

じゃあgetでいいやんと思うが
検索結果のURLは動的URLだで

getじゃとれんみたい
だでpostならとれた

だで
ファンクションのgetもサーチだけポストにしたらできた

試しにテキストだけで400件位読み込んでみたげ大丈夫か
画像は徐々に読み込ますjsいれるか?

つまり全件表示
もしそうでないくて良い場合
できるなら
検索結果のURLを変更 最後/にする

method=”post” でページ送り クッキーつかうとできるとかできんとかな?
そんぐらいか?

スクロールで車どんどんだすなら

Infinite-Scroll

簡単

こいつ入れて
設定するだけ

コンタクトフォームにメルアド確認 追加

cssにinput[type=’email’]も追加 

input[type='text'], textarea, .wpcf7-select,input[type='email']

ファンクションに
// Contact Form 7 に確認用メールアドレス入力欄を実装する
add_filter( ‘wpcf7_validate_email’, ‘wpcf7_text_validation_filter_extend’, 11, 2 );
add_filter( ‘wpcf7_validate_email*’, ‘wpcf7_text_validation_filter_extend’, 11, 2 );
function wpcf7_text_validation_filter_extend( $result, $tag ) {
$type = $tag[‘type’];
$name = $tag[‘name’];
$_POST[$name] = trim( strtr( (string) $_POST[$name], “\n”, ” ” ) );
if ( ‘email’ == $type || ‘email*’ == $type ) {
if (preg_match(‘/(.*)_confirm$/’, $name, $matches)){
$target_name = $matches[1];
if ($_POST[$name] != $_POST[$target_name]) {
$result[‘valid’] = false;
$result[‘reason’][$name] = ‘確認用のメールアドレスが一致していません’;
}
}
}
return $result;
}

コンタクトに

<tr><th>※メールアドレス確認</th>
  <td> [email* your-email_confirm]</td>
</tr>

Contact form 7 のフォームに自動的に記事タイトルを入れる方法

function my_form_tag_filter($tag){
  if ( ! is_array( $tag ) )
  return $tag;
 
  if(isset($_GET['carname_title'])){
    $name = $tag['name'];
    if($name == 'carname_title')
      $tag['values'] = (array) $_GET['carname_title'];
  }
  return $tag;
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);

carname_titleを変える。

コンタクトに作成

<a href='/?page_id=9&carname_title=<?php the_title(); ?>'>

二つの場合

//Contact form 7 のフォームに自動的に記事タイトルを入れる方法
function my_form_tag_filter($tag){
  if ( ! is_array( $tag ) )
  return $tag;
 
  if(isset($_GET['carname_title'])){
    $name = $tag['name'];
    if($name == 'carname_title')
      $tag['values'] = (array) $_GET['carname_title'];
  }
  
      if(isset($_GET['car_url'])){
    $name = $tag['name'];
    if($name == 'car_url')
      $tag['values'] = (array) $_GET['car_url'];
  }
  
  return $tag;
 
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);

曲げる 回転 css

-webkit-transform: rotate(-3deg) skew(-3deg);
	-moz-transform: rotate(-3deg) skew(-3deg);
	-o-transform: rotate(-3deg) skew(-3deg);
	-ms-transform: rotate(-3deg) skew(-3deg);
	transform: rotate(-3deg) skew(-3deg);

その他
http://squeeze.jp/blog/web-design/heading-design-border-css/