px*blog

スマホサイトをデザインするとき、どのくらいのサイズ（キャンパス）で作成すればいい？ファーストビューは？

2016.12.19

iPhone4/4S: 640×960（ファーストビュー）
iPhone5/5S/5C: 640×1136（　〃　）
iPhone6 : 750ｘ1334（　〃　）

なので、
幅640ピクセルでデザイン作成していただけるとちょうど良い感じになります。

カスタム投稿でアイキャッチを使う

wordpress 2016.12.16

何度か失敗したので、うまくいったときの記事を引用してメモ。

カスタム投稿でアイキャッチを使う方法

上の記述をしていても、カスタム投稿ではアイキャッチが利用できませんでした。

どうやら、カスタム投稿の設定で、引数？「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」という名前のカスタム投稿を追加してて、出来上がりは
▼

------------------------------------------------------
add_action( 'init', 'information_init' );

function information_init() {

$args = array(

'supports' => array( 'title', 'editor', 'thumbnail')

);

register_post_type( 'information', $args );

}
------------------------------------------------------
supportsを変更したくなりがちだけど、違うみたいね。

▼ついでに
表示するためのタグも

<?php if(get_the_post_thumbnail( $id )): //アイキャッチあれば ?>

<?php echo get_the_post_thumbnail( $id,'サイズ名' ); ?>

<?php else: //無い場合の処理 ?>

<?php endif; ?>

レスポンシブに最適なフォントサイズ

font-size 2016.12.14

文字サイズの単位、迷いますよね～～

font-size:2.7vw;

↑　vwを使ってから、さらにその子孫に％やemを使えば、
相対的に、デバイスサイズに合わせて伸び縮みしてくれます。

jquery で、inputのvalueが空の場合、要素を非表示

2016.11.24

$("ul li:has(input[value==''])").addClass("disnon");

今日かけた、一押しコード！

PHP を使って現在開いているページの URL をウェブページ上に表示する方法を使って、OGタグに利用

wordpress 2016.03.23

■PHP を使って現在開いているページの URL をウェブページ上に表示する方法を使って、OGタグに利用
<meta property="og:url" content="<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" />

アメブロ→Wordpressに引越するとき全記事日付が1970年1月1日になっちゃった人へ

2016.03.14

アメブロ→Wordpressに引越（データ移行・インポート）するときの注意

blog toolを使ってやると思いますが、
詳しくはこちら

日付の表示形式の設定が（アメブロ側の）
2013年04月03日(水) 07時19分12秒
と言ったような表示形式なっていると、

コンバータするときにうまくいかず、

全記事日付が1970年1月1日になっちゃいます！！

これを、
2013-02-16 12:51:13
とかにしておけば、
うまくいきましたよー。

wordpress 個別記事でアイキャッチをOGP画像に指定したい

wordpress 2016.01.25

<?php

$image_id = get_post_thumbnail_id();

$image_url = wp_get_attachment_image_src($image_id, true);

画像ｉｍｇをボタン扱いにするＨＴＭＬとＣＳＳ

2015.12.11

■HTML

</button>

</form>

■CSS

button {

border:none;outline:none; background-color:transparent;

margin:0; padding:0; cursor:pointer;

}

↑余白とかボーダーとかボタンクリックしたあと、青い枠線が出たりするのを消したり。

PC、SP、TB振分けの覚書

2015.09.18

◆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の設定も必要です

-------------------------------------------------------------------

◆TOPページを別ページ（別ディレクトリ）へ転送する

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 2015.09.16

wordpressインストールして、
サイト名やカテゴリー名や投稿記事に「日本語」を入力して保存しようとすると
文字化けしたり、文字が消えてしまったりするバグに遭遇したら、
htaccessを、WPをおいてるディレクトリに設置したら直るかもよ。

というワンポイントアドバイスでした。

前の10件 1 2 3 4 5 6 7 8 9 10 11 次の10件