リスト横並びで画像を並べた時の隙間を消す

リスト横並びで画像を並べた時、display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。
これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。

1. <li>タグを改行せず、一行に並べる

2. <li>タグの間にコメントタグを入れる

3. </li>の閉じタグを途中で区切る

4. display:inline;をやめて、float:left;で横並びにする

5. display:table-cell;で横並びにする

display:table-cell;はIEでは対応していない為、モダンブラウザとIEで記述を分けなければならない。

6. font-sizeで隙間を消す

横並びの要素を包括する要素にfont-size:0;を指定すれば、隙間は消えます。<li>を横並びにするなら、<ul>にfont-size:0;

WordPressの「メディアの追加」トラブル時の対処

すべてのプラグインを無効化し、同時にテーマをデフォルトのテーマに戻して再度試してみましょう。それで正常に動くなら一つずつ元に戻してみて、どれが問題を引き起こしているか絞り込むことができるはずです。 キャッシュが問題に関係している場合があります。フラウザのキャッシュを削除して再度試してみてください。また、WordPress のキャッシュプラグインを使用している場合はそれを停止し、キャッシュファイルをクリアして試してみましょう。 ログインしている場合とログインしていない場合で現象に違いが出るでしょうか。また、使用するブラウザを変えてみてはどうでしょうか。ブラウザに保存されている Cookie が関係している場合もあるので、それをクリアして再度試してみてください。

対処はたったひとつ wp-config.php に以下を追加。

define('CONCATENATE_SCRIPTS', false);

WordPress Codex日本語版によると

管理画面のスピードアップのため、JavaScript ファイルはすべてひとつの URL に連結されます。管理画面で JavaScript がうまく動作しない場合、この機能を以下のようにして無効化できます。

WordPressの管理画面のカスタマイズ

ビジュアルエディターを非表示

funsctions.phpに上記のコードを追加で、固定ページのエディター切替を

出来ないように設定する。

 

function disable_visual_editor_in_page(){ global $typenow; if( $typenow == 'page' ){ add_filter('user_can_richedit', 'disable_visual_editor_filter'); } } function disable_visual_editor_filter(){ return false; } add_action( 'load-post.php', 'disable_visual_editor_in_page' ); add_action( 'load-post-new.php', 'disable_visual_editor_in_page' );

 

自動で挿入される<p>タグを排除

remove_filter('the_content', 'wpautop');

記事を出力する the_content() 関数の前に、

remove_filter(‘the_content’, ‘wpautop’) を追加

プラグイン更新通知を非表示

remove_action( 'load-update-core.php', 'wp_update_plugins' );
add_filter( 'pre_site_transient_update_plugins', create_function( '$a', "return null;" ) );

 テーマ更新通知を非表示

remove_action( 'load-update-core.php', 'wp_update_themes' );
 add_filter( 'pre_site_transient_update_themes', create_function( '$a', "return null;" ) );

 WordPress本体のバージョン更新を非表示

add_filter('pre_site_transient_update_core', create_function('$a', "return  null;"));

 

 

 

新着情報や更新情報を静的HTMLのトップページに表示する

既存のindex.htmlにワードプレスの新着情報や更新情報を出力する
index.htmlの一行目に以下のコードを追記。

 

<?php require_once('wp/wp-load.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

 

wordpressをインストールしたディレクトリ名が「blog」の場合

<?php require_once('blog/wp-load.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

「wp-load.php」を読み込むことでワードプレスの関数などが利用できるようになります。

新着記事を取得して静的HTMLに表示してみる。

<ul>
<?php
$myposts = get_posts('numberposts=5&orderby=post_date');
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><?php the_time('Y/m/d') ?>&nbsp;<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

静的HTMLでの表示が文字化けする場合【mb_convert_encoding】

<ul>
<?php
$myposts = get_posts("numberposts=5&category=&orderby=post_date&offset=0");
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><a href="<?php the_permalink(); ?>"><?php echo mb_convert_encoding(get_the_title($post->ID), 'shift_jis', 'UTF-8'); ?></a></li>
<?php endforeach; ?>
</ul>

スマートフォンでPCサイトを表示 [EC-CUBE 2.11.5]

data/class/SC_Display.php の 144行目をコメントアウトし DEVICE_TYPE_PC を返すよう定義する。

function detectDevice(){
$nu = new Net_UserAgent_Mobile();
$su = new SC_SmartphoneUserAgent_Ex();
$retDevice = 0;
if ($nu->isMobile()) {
return DEVICE_TYPE_MOBILE;
} elseif ($su->isSmartphone()) {
//return DEVICE_TYPE_SMARTPHONE;
return DEVICE_TYPE_PC;
} else {
return DEVICE_TYPE_PC;
}
}

全ての端末でPCサイトを表示したければ、端末による条件分岐をやめて、常にDEVICE_TYPE_PC を返せばよい。

function detectDevice(){
return DEVICE_TYPE_PC;
}

スマートフォンかどうかはどこで判断しているのか
data/module/Net/UserAgent/Mobile.php の 400行目付近にある isSmartphone。
$_SERVER[‘HTTP_USER_AGENT’] を取得して、各スマートフォン固有の文字列とマッチするかどうかを調べてる。

// }}}
// {{{ isSmartphone()

/**
* Checks whether or not the user agent is Smartphone by a given user agent string.
*
* @param string $userAgent
* @return boolean
* @since Method available since Release 0.31.0
*/
function isSmartphone($userAgent = null)
{
if (is_null($userAgent)) {
$userAgent = @$_SERVER['HTTP_USER_AGENT'];
}

$useragents = array(
'iPhone', // Apple iPhone
'iPod', // Apple iPod touch
'Android', // 1.5+ Android
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);

$pattern = implode("|", $useragents);
return preg_match('/'.$pattern.'/', $userAgent);
}

htmlをiPhoneに対応させる

・縦:portlaitモード(320px)約1/3
・横:landscapeモード(480px)約1/2

(1)metaタグにviewportを使う

<meta name=”viewport” content=”[プロパティ]=[値](, [プロパティ]=[値])”>

initial-scale 倍率の初期値 乗数で指定(例:120%の場合は1.2)
minimum-scale 倍率の最小値 乗数で指定
maximum-scale 倍率の最大値 乗数で指定
user-scalable 拡大縮小の可否 (ye/no)

<meta name=“viewport” content=”width=device-width” />

デバイスにあわせる(スクロール分の余白ができてしまう)

<meta name=”viewport” content=”width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;” />

iPhone用

<meta name=”viewport” content=”width=320; minimum-scale=1.0; maximum-scale=2.0;” />

ベスト

<meta name=”viewport” width=”480, user-scalable=no, maximum-scale=0.6667 />

作りこんだ通りのサイズで、そのまま表示させたい場合

WordPressでトップページ・固定ページに最新記事リスト表示 

wordpress固定ページに最新記事リストを表示する場合、投稿欄でPHPを書き込むことが出来ないのが問題点である。
そこでwordpressプラグインを導入し、投稿(固定ページ編集画面)でPHPを書きこめるようにする。
【プラグイン】
こちらを導入する事で、wordpress固定ページ編集画面にPHPソースを書き込むことが出来るようになる。
以下のソースをwordpress固定ページの編集画面の表示させたい部分に挿入。
<ul>
  <?php query_posts('posts_per_page=5'); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li>
  <span class="date">
  <?php the_time('Y年n月j日'); ?>
  <?php
    $days=30;
    $today=date('U'); $entry=get_the_time('U');
    $diff1=date('U',($today - $entry))/86400;
    if ($days > $diff1) {
  echo '<img src="images/new.gif" alt="New" />';
  }
  ?>
  </span>
    <a href="<?php the_permalink(); ?>"><?php the_title();?></a>
  </li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>
</ul>

さくらインターネット www付きドメイン .htaccessリダイレクト

さくらインターネット Internal Server Errorがでる場合は、保存方法(文字コード)が原

.htaccessの保存方法は utf8N LF (BOMなしで保存)

これで下記の記述をすれば、OK

www.ありで統一

RewriteEngine on RewriteCond %{HTTP_HOST} ^(fogburden.com)(:80)?
RewriteRule ^(.*) http://www.fogburden.com/$1 [R=301,L]

www. なしで統一

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www.fogburden.com)(:80)?
RewriteRule ^(.*) http://fogburden.com/$1 [R=301,L]

サブドメインで運用する場合のリダイレクトも設定。http://wordpress.fogburden.com/でもhttp://www.fogburden.com/wordpress/でも
ディレクトリの方をサブドメインの方にリダイレクトさせます。

Redirect permanent /wordpress http://wordpress.fogburden.com/

こうすると気になるのがhttp://www.fogburden.com/wordpress/about/など第二階層以下の/aboutでもサブドメイン/aboutにリダイレクトしてくれます。

www.付きドメインとサブドメインも運用する場合の
.htaccessリダイレクト設定

RewriteEngine on
RewriteCond %{HTTP_HOST} ^(fogburden.com)(:80)?
RewriteRule ^(.*) http://www.fogburden.com/$1 [R=301,L]
Redirect permanent /wordpress http://wordpress.fogburden.com/

ECCUBE 海外サーバーのタイムゾーン対応

EC-CUBEバージョン     2.11.5
PHPバージョン     PHP 5.2.17
DBバージョン     MySQL 5.1.66-community-log

受注日時が日本時間でなく海外の時間帯(time zone)などになってしまう場合。

 

海外のサーバーなどで、権限の都合でSQLを使えない場合の対処。

 

/data/class/SC_Query.php 内の73行目以下 3か所に
$this->conn->query(“SET time_zone = ‘Asia/Tokyo'”);
を追加したら、受注日などが修正されました。

——————————————————————-
if ($new) {
$this->conn = MDB2::connect($dsn, $options);
$this->conn->query(“SET time_zone = ‘Asia/Tokyo'”);
} else {
$this->conn = MDB2::singleton($dsn, $options);
$this->conn->query(“SET time_zone = ‘Asia/Tokyo'”);
}
if (!PEAR::isError($this->conn)) {
$this->conn->query(“SET time_zone = ‘Asia/Tokyo'”);
$this->conn->setCharset(“utf8”);
$this->conn->setFetchMode(MDB2_FETCHMODE_ASSOC);
——————————————————————-