icomoonのアイコンフォントをIE7・IE6にも表示させる

「icomoon」というサイトで作成したアイコンフォントが、IE7以下で表示できなくてハマリまくった。
しょう~もないミスでしたが、忘れてしまいそうなのでメモ。
(アイコンフォントの作成方法はすっとばしますのでご了承ください

まず、「icomoon」にてIE7/IE6対応のファイルもダウンロードできるよう設定。

icomoom2

GenerateFont→Preferncesクリックで「Suport IE7 & IE6」をチェック。icomoom1

WEBフォントをダウンロードすると「ie7」というフォルダ(ie7.jsとie7.cssが入っている)も一緒にダウンロードできる。

Continue reading icomoonのアイコンフォントをIE7・IE6にも表示させる

mod_pagespeed設定でWEBサイト高速化

当サイトのレンタルサーバーはエックスサーバーを使用しているんですが、mod_pagespeedが設定できるよとのメール案内があったので早速試してみました。

まずは、このサイトに設定…
なにか変な影響あるかな~・・・とドキドキでしたが、何の問題もなく動作♪体感速度は、かなり早くなった気がッ

GTmetrixで計測してみると・・・

pagespeed1

トップページがA台に突入…!

※エックスサーバーは、「サーバーパネル」→「HOMEPAGE」メニューにある「mod_pagespeed設定」へ移動し、「ON」に変更するだけ。
詳しくはコチラ→エックスサーバーマニュアル

さらにもう一つ、画像が多くて重いサイトにもmod_pagespeedを設定。

pagespeed2

キャッシュ系プラグインなどいろいろ入れても、F~C台から改善できなかったトップページが・・・

ナント、B台!YSlowではA台!

今までの、プラグイン試行錯誤はなんだったんだ…(笑

Continue reading mod_pagespeed設定でWEBサイト高速化

投稿されたタクソノミーターム名を表示する

記事に投稿されているカスタム分類(タクソノミーターム)だけを表示するタグ。

taxonomyは表示したいカスタム分類のタクソノミー名を記入すること

リンク付きで表示

■カンマで表示

<?php echo get_the_term_list( $post->ID, 'taxonomy', '分類: ', ', ', '' ); ?>

■ulリストで表示

<?php echo get_the_term_list($post->ID, 'taxonomy', '<ul ><li>','</li><li>','</li></ul>');  ?>

Continue reading 投稿されたタクソノミーターム名を表示する

first-letter×letter-spacingでSafari4がクラッシュ?

レスポンシブウェブサイトを制作中、MacのSafari4.1.3にてサイトを確認したらクラッシュする…。

(´;ω;`)なんでよ

低スペックMacのせい?
と思ったものの画像やソースの容量はかなり抑えたし、しかも他の重いサイトは表示される。これはソースに問題ありと見てエラー箇所の洗い出し。

JSの動作、記述ミスなどチェック

jqueryを幾つか設定しているのでまずはそこから確認。

  1. jqueryを一ずつ外して動作確認
  2. 別ファイルでjqueryをセットし個別に動作確認
  3. JS・HTML・CSSの記述ミスがないか確認
  4. JS・HTML・CSSの文字コードを統一させる

が、なんの問題もないし変わらない。

Continue reading first-letter×letter-spacingでSafari4がクラッシュ?

HTML5のa要素(リンク)が便利

何が便利かというと…リンクできる範囲がかなり広がった点。

HTML 4/XHTMLまでは<a>要素はインライン要素であるため、ブロックレベル要素(p、div、ul、h1、h2…)などを囲んではいけなかった。

▽HTML4/XHTMLまでの<a>要素

<div class="box">
<p><a>ブロックレベル要素を囲んではいけない</a></p>
</div>

が、しかし!
HTML5ならブロックレベル要素も囲んでいいのです。

▼html5からの<a>要素

<a>
<div class="box">
<p>html5からのa要素は、様々なタグや複数要素を囲むことができる。</p>
</div>
</a>

html5はインライン・ブロックレベル要素という概念がなくなった

HTML5では、インライン要素とブロックレベル要素の分類は廃止されており、 段落・リスト・表などのセクションに対しても、全体を<a>~</a>で囲んでリンクを指定できるようになっています。 ただし、その中に他のリンクやフォームボタンなどのインタラクティブコンテンツが含まれる場合には、リンクを指定することはできません。
<a>-HTML5タグリファレンス

ということなので、HTML5ならDIVやP全体にリンク範囲を広げたい…とかでCSSやJSをいじくりまわす必要もないわけです。

ちなみに、SEO的にどうなのかはわからない。
なるべくは”文字にのみ”がいいのかもしれないが…構文的に問題ないわけだし、余計なソースも増やしたくないのでこれを推し進める(笑

ただし以下のようなやり方はダメ。

<p>
<a>
<h1>間違ったやり方</h1>
<p>html5からのa要素は、様々なタグや複数要素を囲むことができるが…</p>
</a>
</p>

<a>要素を削除してみるとわかりますが、<p>の中に<h1>があったり<p>があるのは間違っています。基本的な構文、正しいコンテンツ・モデルを意識したい。

Continue reading HTML5のa要素(リンク)が便利

Androidの標準ブラウザ、widthのバグ?

Androidには標準ブラウザがある。
その名も「ブラウザ」。

android_browser

スマホ操作をレクチャーしてもらったときには、二度聞きしてしまった。名前からしてふざけているというか、やる気のない感じがします…個人的に(笑

通常はChrome使いなものの、サイト制作時にこの「ブラウザ」でも確認しているんですが、IE以上のヤバイ子ちゃんッぽい。

文字要素の幅がおかしなことに

ハマったのが、文字のレイアウト崩れ。
スマホを縦から横に切り替えたときの動作を確認していたら、コンテンツ内容(たぶんP要素)が指定の幅に広がらず、狭まってしまう。他ブラウザでは何の問題もないし、CSSやHTMLなどプログラムソースにおかしなところはない…なぜ…?? Continue reading Androidの標準ブラウザ、widthのバグ?

WordPress3.9.1へアップグレードしてみた

wp3.9.1

3.9へのアップグレードを忘れてて、気づいたら3.9.1がでていた(笑
早いよWordpress!

3.9.1では34個のバグが修正されているようです。

で、とくに問題なくアップグレードが完了。
管理画面は3.8とほぼ同じ。

変わったのはメディア編集部分でしょうか。

Continue reading WordPress3.9.1へアップグレードしてみた

フィールド内容の有無で条件分岐(AdvancedCustomFields)

AdvancedCustomFieldsというプラグインを使用し、タクソノミーのアーカイブページで値があるかないかで条件分岐しようしたらハマッたのでメモ。

get_field(‘フィールド名’ ,$post_id)で条件分岐

カスタムタクソノミー(ターム)で、作成したフィールドタイプに記入がある場合は表示させ、記入がない場合は別の内容を表示する。

※動作確認はタクソノミーテンプレート(taxonomy.php)のみ

<?php
$term_id = get_queried_object()->term_id;
$post_id = 'タクソノミー名_'.$term_id;
?>
<!--条件分岐ココから-->
<?php if( get_field('フィールド名' ,$post_id)): ?>
<?php the_field('フィールド名' ,$post_id); ?>
<?php else: ?>
<p>フィールドに内容がない場合はこちらを表示</p>
<?php endif; ?>
<!--条件分岐ココまで-->

ちなみに、get_fieldは以下の記述では動作しませんでした。

×get_field('フィールド名')
×get_field('フィールド名',$post->ID)

はじめ$post_idを、$post->IDとしていたため表示されずかなりハマりました…(笑
the_fieldも同様に「$post_id」で動作。