Author Archives: 管理者

CSSの達人

CSSの達人になりたいと思っているのとは別に、WPを触っていて、時々そのページだけCSSを編集したい、という場合に、重宝する機能
カスタムCSS custom CSS

これは便利です。こちらから引用(Thanks!)

下記のデータをfunction.phpに書き込む

[php]
//Custom CSS Widget
add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
function custom_css_hooks() {
add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_css_input() {
global $post;
echo ‘<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="’.wp_create_nonce(‘custom-css’).’" />’;
echo ‘<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">’.get_post_meta($post->ID,’_custom_css’,true).'</textarea>’;
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST[‘custom_css’];
update_post_meta($post_id, ‘_custom_css’, $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ‘<style type="text/css">’.get_post_meta(get_the_ID(), ‘_custom_css’, true).'</style>’;
endwhile; endif;
rewind_posts();
}
}
[/php]

ついでにJSも

[php]
JavaScriptを追加できるようにする場合は、以下をfunctions.phpに記述します。
//Custom JS Widget
add_action(‘admin_menu’, ‘custom_js_hooks’);
add_action(‘save_post’, ‘save_custom_js’);
add_action(‘wp_head’,’insert_custom_js’);
function custom_js_hooks() {
add_meta_box(‘custom_js’, ‘Custom JS’, ‘custom_js_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_js’, ‘Custom JS’, ‘custom_js_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_js_input() {
global $post;
echo ‘<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="’.wp_create_nonce(‘custom-js’).’" />’;
echo ‘<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">’.get_post_meta($post->ID,’_custom_js’,true).'</textarea>’;
}
function save_custom_js($post_id) {
if (!wp_verify_nonce($_POST[‘custom_js_noncename’], ‘custom-js’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_js = $_POST[‘custom_js’];
update_post_meta($post_id, ‘_custom_js’, $custom_js);
}
function insert_custom_js() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ‘<script type="text/javascript">’.get_post_meta(get_the_ID(), ‘_custom_js’, true).'</script>’;
endwhile; endif;
rewind_posts();
}
}
[/php]

mysql 拡張がありません。PHP の設定をチェックしてみてください

XAMPPのローカル画面(http://localhost/xampp/)から、
phpMyAdmin のログイン画面(http://localhost/phpmyadmin/)に行けていたのですが、行けなくなりました。

思い当たる節は、
・サイドバーの言語エラー表示を変更した事。
・php.ini を触った事

大した変更はしていないはずですが、今まで出来ていたのにできなくなった。
大した事はしていないので、大したことない解決方法でできるはず。。

出てきたエラーのメッセージの先から、phpMyAdmin画面に行けたので違いを見ると、
index.phpにgetでtokenを設定しているみたい
ですので、
a href=”” のリンク先を
http://localhost/phpmyadmin/
から
http://localhost/phpmyadmin/index/php
に変更したら行けた。
セキュリティー対策の設定を変えてしまったのか??
今まで、行けたのは なぜ???

とりあえず解決したのでφ(..)メモメモ

Facebookページを作りました

MySQL 文字化け対処

テーブルの照合順序
Latin1から
「utf8_unicode_ci」にする

まずは確認
SQL文を打ってみる
[php]SHOW VARIABLES LIKE ‘char%'[/php]

Xammpで動かしていたので、文字コードをutf8にする
xampp\mysql\bin内のmy.ini
[mysqld]
てあるとこに追加
character-set-server = utf8 を有効にする(#をはずす)

※「xampp_path/mysql/bin/my.ini」に以下の項目を追加・修正の記載ありますが、自分のパソコンの
「mysqld」項目に「default-character-set=utf8」と追加だけど、
MySQL 5.5以降は「default-character-set」が使えなくなっていて、変わりに「character_set_server」を使う。

——————–
引用させてもらいました

phpMyAdminで文字化けしたデータの修正方法
MySQLインストール時にmy.cnfの編集を行っていないとphpMyAdminでデータを参照した際に日本語の部分が訳の分からない文字になってしまいます。こんな時の処理方法を記載します。

●まずはMySQLにある全てのデータベースをバックアップしておきましょう。phpMyAdminのダウンロードでOKです。
このときに日本語は文字化けしていますが気にせずバックアップを取ります。

●さて、本題の文字化けしたデータベースの中身を修正します。

1.phpMyAdminでダウンロードした[—.sql]を秀丸などテキストエディッタで開きます。

2.「名前を付けて保存」で、エンコードの種類を「欧文」にして保存。 「変換できない文字~」と出ますが「保存できない文字を”?”などに置き換えて保存する」のままで保存します。

3.上記で保存したファイルを開き直します。 これでデータ部分の文字が読める文字に修正されていると思います。 このとき「-」で始まるコメント部分の日本語が文字化けしてると思いますが、 これはコメントなので気にしなくて大丈夫です。

4.上記1~3までの処理を文字化けしているデータベース分行います。

5.文字化けを修正したデータベースを一つphpMyAdminでアップロードして問題が無ければ 全てのデータベースを書き換えます。 ※書き換えただけで完了するとまた文字化けしますので、次の作業を行います。

●次から文字化けしないようにMySQLをいじります。
my.cnfの編集# vi /etc/my.cnf以下6行を最終行に追加します。
———————————–
[mysqld]
default-character-set=utf8
character_set_server=utf8
skip-character-set-client-handshake

[mysql]
default-character-set=utf8
———————————–

●上記データベースの準備が整ってから再起動しましょう。
※まともに見れているものも文字化けしちゃいます。
MySQLを再起動
# /etc/init.d/mysqld restart

以上で完了です。

※これは私の環境で行った場合の記述です。
同じように行って問題が出ても責任は負えませんので自己責任にて実行されてください。

CSS3と均等貼り付け

出来ない現時点でできないようです。IE以外
CSS3.0に実装予定だという情報があふれているが、Chromeでも効きません
こんな風にかくらしいがIE以外効かないのでサイト作成には残念ながら使えません
[css]
text-align: justify;
text-justify: distribute-all-lines;
text-justify: inter-ideograph;
line-break: strict;
[/css]

均等貼り付けする必要があったので、フォントファミリーを、等幅フォントに指定して対応しました
[css]
font-family: Consolas, ‘Courier New’, Courier, Monaco, monospace;
[/css]
通常は日本語のサイト(欧文と日本語が混ざるので)は、等幅フォントは使わず、pro、P のつくプロポーショナルフォントを使っています。

WPデータ移行

WordPress サイト作成時に 仮の領域でサイト作成し、本番環境に移すことが多々あるのですが、
お客様の状況により、仮領域と本番環境間でデータ移行を何度か繰り返す事がありました。

その際、移行時の手続きはバッチしOKと思ったのですが、うまくいかない時がありました。
その時に行った対応をφ(..)メモメモ

1.カスタムメニューを使っている場合は、メニューを保存を再度押す
(メニュー部がおかしいので気づきやすい)

2. ページ・記事が表示されない現象が起こった時は、パーマリンク設定の保存ボタンももう一度押す。
(TOPだけは正常に表示されたりするので気づきにくい。しかもTOP以外が表示されないので移行のミスかと思う)

Media Queries まとめ

href=”http://katoshun.com/blog/rwd-20130127.html
ここから引用
ものすごくまとめられているのでそのまま引用させてもらいます

レスポンシブWebデザインのサイトを作るときのMedia Queriesの順番を考えてみた

2013年01月27日
Webデザインお役立ち情報

ちょうど今レスポンシブWebデザインのサイトを制作しているのですが、Media Queriesで画面サイズ別にCSSを記述していくときにどのような順番で記述すればよいのか、改めて調べてみたらいろいろ迷ってしまいました。

今までいろいろなやり方を試してきたのですが、一度整理してみたいと思います。

記述方法の種類

一般的なMedia Queriesの記述の方法としては、以下のようなやり方があります。(ブレイクポイントを480px、768px、980pxとした場合の例です)

1. PCのスタイルから記述していく方法

デフォルトでPC用のスタイルを定義し、タブレット/スマートフォン用のスタイルはMedia Queriesを使って上書きしていくPCファースト的な方法です。
[css]
/* デフォルト:980px以上用(PC用)の記述 */
@media screen and (max-width: 979px) {
/* 979px以下用(タブレット用)の記述 */
}
@media screen and (max-width: 767px) {
/* 767px以下用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用(スマートフォン用)の記述 */
}
[/css]

2. スマートフォン用のスタイルから記述していく方法

デフォルトでスマートフォン用のスタイルを定義し、タブレット/PC用のスタイルをMedia Queriesを使って上書きしていくモバイルファースト的な方法です。
[css]
/* デフォルト:479px以下用(スマートフォン用)の記述 */
@media screen and (min-width: 480px) {
/* 480px以上用(タブレット/スマートフォン用)の記述 */
}
@media screen and (min-width: 768px) {
/* 768px以上用(タブレット用)の記述 */
}
@media screen and (min-width: 980px) {
/* 980px以上用(PC用)の記述 */
}
[/css]

3. それぞれの画面幅個別に指定する方法

それぞれの画面幅毎に全く別のスタイルを定義する方法です。
[css]
@media screen and (min-width: 980px) {
/* 980px以上用(PC用)の記述 */
@media screen and (min-width: 768px) and (max-width: 979px) {
/* 768px – 979px用(タブレット用)の記述 */
}
@media screen and (min-width: 480px) and (max-width: 767px) {
/* 480px – 767px用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用(スマートフォン用)の記述 */
}
[/css]

実際には、部分的に3を用いつつも、1か2のどちらかを選択することになるかと思います。

実際どれがいいの?

モバイルファースト的な観点では、スマートフォンのスタイルから定義する2の方式が良いかと思います。ただ、IE8以下の対応を考えた場合、つまずいてしまいます。

IE8以下では、Media Queriesは使えませんでの、以下のいずれかの対応をする必要があります。
Respond.jsやcss3-mediaqueries-jsを使って、IE8以下もレスポンシブ対応を行う
IE8以下はPCでの表示はサポートするが、レスポンシブ対応はしない
IE8以下は完全除外!

完全除外は現状のIE8のブラウザシェアから考えて、制作の現場では取りにくい選択肢です。Respond.jsやcss3-mediaqueries-jsを使う手法はよくとられていますが、そもそも古いIEでのスマートフォンサイズの表示は、ごく一部のWindows Phoneを除いて想定しにくく、サポートすべきかについては疑問が残ります。

現状のブラウザシャアや制作の効率性を考えると、IE8以下でのレスポンシブ対応はしないというのが現実的ではないかと考えています。

ただ、IE8以下では、Respond.jsやcss3-mediaqueries.jsを使わないと、Media Queriesは解釈されず、デフォルトの記述のみが適用されます。つまり、モバイルファースト的な記述をすると、IE8以下ではモバイル用の表示がされてしまうのです。さすがにこれではプログレッシブ・エンハンスメントの範疇も超えています。

Respond.jsなどを使えばきちんと表示されるのですが、今度はすべてのMedia Queriesが読み込まれるため、IE8以下でも画面幅ごとの対応が必要となってしまいます。

一つの解決策として、HTMLで分岐させて、モダンブラウザ用とIE8以下用とでCSSを分けてしまうという方法も考えられます。

[html]
<link href="common.css"type="text/css" media="all" />
<link href="modern.css"type="text/css" media="all and (min-width: 100px)" />
<!–[if lt IE 9]>
<link href="ie8.css"type="text/css" media="all" />
<![endif]–>
[/html]
まず、基本的なスタイルを定義したcommon.cssを読み込ませます。
次にレスポンシブ対応のCSSを記述したmodern.cssをMedia Queriesを使って読み込ませます。Media QueriesはIE8以下では解釈されないため、IE8以下には読み込まれません。
一方、ie8.cssにIE8以下用のスタイルを定義し、分岐させてIE8以下のみに読み込ませます。

これであれば、モバイルファースト的な記述でも古いIEに対応させることができますが、PC用の表示をmodern.cssにもie.cssにも記述しなければならず、制作面・運用面で効率的とは言えません。

まとめ

これらのことを考慮すると以下のようになります。
基本的には、PC用のスタイルから記述していく
IE8以下のブラウザにもレスポンシブ対応する場合には、スマートフォン用のスタイルから記述してもOK

ただ、「これがベストの解だ!」ということではなく、現状のブラウザシェアやMedia Queriesへの対応状況、制作面・運用面での効率性を考えると、消去法的に今のところこれがマシなんじゃない?程度のものです。
現在はHTML5やCSS3への移行期で、ブラウザの対応状況もマチマチです。またレスポンシブWebデザイン自体、まだ手法が確立したとは言えず試行錯誤が続いている状況です。ベストな手法というのはその時々によって変わっていくものですので、機会がありましたら、また整理してみたいと思います。

文字化けメモ

メモ φ(..)メモメモ
Terapadで文字コードを変換(utf-8)にすればOKだったのですが・・・
Wpへの移行作業で、どうしても一部(日本語表記の部分)が文字化けする・・・・

flashバリバリのサイト。

Terapadの「ファイル」⇒ 「文字コードして再読み込み」でなく、
「文字/改行コード指定保存」で utf-8N を選ぶと文字化け消えました・・・・

Nありかなしかは、ボムありかなしかってヤツですね。。。
φ(..)メモメモ