スマホサイトをデザインするとき、どのくらいのサイズ(キャンパス)で作成すればいい?ファーストビューは?
iPhone4/4S: 640×960(ファーストビュー) iPhone5/5S/5C: 640×1136( 〃 ) iPhone6 : 750x1334( 〃 ) なので、 幅640ピクセルでデザイン作成していただけるとちょうど良い感じになります。
カスタム投稿でアイキャッチを使う
何度か失敗したので、うまくいったときの記事を引用してメモ。
▼ついでに
表示するためのタグも
カスタム投稿でアイキャッチを使う方法
上の記述をしていても、カスタム投稿ではアイキャッチが利用できませんでした。
どうやら、カスタム投稿の設定で、引数?「supports」に『アイキャッチ使えるように』って値を与えてあげないといけないらしい。
▼
'supports' => array( 'title', 'editor', 'thumbnail')
これだと、タイトルと編集とアイキャッチ画像。という意味ですね。
例えば、『blog』というカスタム投稿タイプでアイキャッチを使えるように設定する場合、
------------------------------------------------------
add_action( 'init', 'blog_init' );
function blog_init() {
$args = array(
'supports' => array( 'title', 'editor', 'thumbnail')
);
register_post_type( 'blog', $args );
}
------------------------------------------------------
これでカスタム投稿でアイキャッチが使えるようになりました。
これでカスタム投稿でアイキャッチが使えるようになりました。
あと注意しないといけないのは、register_post_type()は'init'アクションから呼び出さないといけないということでしょうか。
私は「information」という名前のカスタム投稿を追加してて、出来上がりは
▼
私は「information」という名前のカスタム投稿を追加してて、出来上がりは
▼
------------------------------------------------------
add_action( 'init', 'information_init' );
add_action( 'init', 'information_init' );
function information_init() {
$args = array(
'supports' => array( 'title', 'editor', 'thumbnail')
);
register_post_type( 'information', $args );
}
------------------------------------------------------
supportsを変更したくなりがちだけど、違うみたいね。
------------------------------------------------------
supportsを変更したくなりがちだけど、違うみたいね。
▼ついでに
表示するためのタグも
<?php if(get_the_post_thumbnail( $id )): //アイキャッチあれば ?>
<?php echo get_the_post_thumbnail( $id,'サイズ名' ); ?>
<?php else: //無い場合の処理 ?>
<?php endif; ?>
レスポンシブに最適なフォントサイズ
文字サイズの単位、迷いますよね~~
font-size:2.7vw;
↑ vwを使ってから、さらにその子孫に%やemを使えば、
相対的に、デバイスサイズに合わせて伸び縮みしてくれます。
font-size:2.7vw;
↑ vwを使ってから、さらにその子孫に%やemを使えば、
相対的に、デバイスサイズに合わせて伸び縮みしてくれます。
jquery で、inputのvalueが空の場合、要素を非表示
$("ul li:has(input[value==''])").addClass("disnon");
今日かけた、一押しコード!
今日かけた、一押しコード!
PHP を使って現在開いているページの URL をウェブページ上に表示する方法を使って、OGタグに利用
■PHP を使って現在開いているページの URL をウェブページ上に表示する方法を使って、OGタグに利用
<meta property="og:url" content="<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" />
アメブロ→Wordpressに引越するとき全記事日付が1970年1月1日になっちゃった人へ
アメブロ→Wordpressに引越(データ移行・インポート)するときの注意
blog toolを使ってやると思いますが、
詳しくはこちら
日付の表示形式の設定が(アメブロ側の)
2013年04月03日(水) 07時19分12秒
と言ったような表示形式なっていると、
コンバータするときにうまくいかず、
全記事日付が1970年1月1日になっちゃいます!!
これを、
2013-02-16 12:51:13
とかにしておけば、
うまくいきましたよー。
wordpress 個別記事でアイキャッチをOGP画像に指定したい
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>" />
画像imgをボタン扱いにするHTMLとCSS
■HTML
<form target="_blank" action=" method="post">
<input type="hidden" name="items[0].itemCd" value="522790000">
<input type="hidden" name="items[0].color" value="10001">
<input type="hidden" name="items[0].size" value="20001">
<input type="hidden" name="items[0].quantity" value="1">
<input type="hidden" name="items[0].researchCd" value="550">
<input type="hidden" name="researchCd" value="030">
<button type="submit" name="addToCart" value="注文する">
<img src="" alt="注文する" border="0">
</button>
</form>
■CSS
button {
border:none;outline:none; background-color:transparent;
margin:0; padding:0; cursor:pointer;
}
↑余白とかボーダーとかボタンクリックしたあと、青い枠線が出たりするのを消したり。
PC、SP、TB振分けの覚書
◆PC(iPad含む) or スマホ(iPhone/Android)
<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
if ($browser == true){
$browser = 'sp';
}
?>
<?php if($browser == 'sp'){ ?>
<?php }else{ ?>
<?php } ?>
-------------------------------------------------------------------
◆PC or スマホ(iPad含む/iPhone/Android)
<?php if ( wp_is_mobile() ) : ?>
<?php else: ?>
<?php endif; ?>
※Wordpressの場合のみ適用
functionsの設定も必要です
※Wordpressの場合のみ適用
functionsの設定も必要です
-------------------------------------------------------------------
◆TOPページを別ページ(別ディレクトリ)へ転送する
<script type="text/javascript">
var userAgent = window.navigator.userAgent.toLowerCase();
if((navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') == -1) || navigator.userAgent.indexOf('iPad') > 0){
location.href = 'tb;//iPad
} else if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
location.href = 'sp/';//iPhone android
}
</script>
サイト名やカテゴリー名や投稿記事に「日本語」を入力して保存しようとすると
wordpressインストールして、
サイト名やカテゴリー名や投稿記事に「日本語」を入力して保存しようとすると
文字化けしたり、文字が消えてしまったりするバグに遭遇したら、
htaccessを、WPをおいてるディレクトリに設置したら直るかもよ。
サイト名やカテゴリー名や投稿記事に「日本語」を入力して保存しようとすると
文字化けしたり、文字が消えてしまったりするバグに遭遇したら、
htaccessを、WPをおいてるディレクトリに設置したら直るかもよ。
というワンポイントアドバイスでした。