カスタム投稿のページが表示されないとき

「functions.php」へ設定を追記してカスタム投稿用のページを開いてみても、404エラーで表示されないときがあります。
ページが存在しないことになっています。

カスタム投稿タイプの設定が正しいのに表示されない場合は下にあるコードを「functions.php」へ記載して対応します。

global $wp_rewrite;
$wp_rewrite->flush_rules();

WordPress自体がURLの構造をデータベースに保存しているため、カスタム投稿タイプのURLが存在していないことなってしまっていることです。
そのため、上記のコードでリセットする必要があります。

ピクセルグリッドに整合

abobe CCは、ピクセルグリッドに整形という機能が加わり、端数を直す作業を軽減してくれます。
上段メニューの「選択したアートをピクセルグリップに整合」というボタンをクリックすると、オブジェクトの位置、サイズを整数へ変換してくれます。

複数のレイヤーを選択してまとめてピクセルグリップに整合させることもできます。

「ピクセルにスナップ」を有効の状態にしておけば、移動時や拡大・縮小などすべてにおいてオブジェクトがピクセルにスナップしてくれます。

「ピクセルにスナップ」の詳細オプションから、下の項目は必要に応じて有効化・無効化できます。
■拡大・縮小時にピクセルにスナップ
■描画時にピクセルにスナップ
■移動時にピクセルにスナップ(パス・セグメント・アンカーポイント)

CSS三角形作成してくれるツール

ウェブ制作のときに、画像を使用せずに、cssだけで三角形を作るときがありますが、ジェネレータを使用すればあっという間にできてしまいます。

IE6対応にもさせることができ、サイズと高さを指定するだけで、簡単に制作できてしまいます。

またカラーも、パレットから制作することができるのでとても便利です。

三角形ジェネレータ

長いコンテンツなどをまとめる

テーブルや長文など長いコンテンツは、スクロールするときなど、サイト全体の縦幅が長くなってしまい、閲覧者も利用しづらいものになってしまいます。
そんなときにはアコーディオンなどで、コンテンツをまとめることによって見やすいサイトにすることができます。

■html

タイトル

アコーディオンで表示したい内容

■js $(document).ready(function(){ $(".cont").hide(); $("h2").click(function() { if($(this).is(".selected")){ $(this).removeClass("selected"); }else { $(this).addClass("selected"); } $(this).next().stop(true,true).slideToggle("fast"); }); });

background画像をレスポンシブ対応

スマホ対応でbackgroundを指定するとき高さがないと表示されません。

背景画像をサイズを可変させて表示したいだけなのですが、backgroundで指定した画像はheightがないと高さが0になって表示されません。
ですが、高さの指定をするとウィンドウサイズの拡大縮小時に余白や画像が見切れたりなどがおきます。

高さが与えられない場合、paddingで余白をあけます。
拡大縮小させるためにpadding-topかpadding-bottomを%指定で設定します。

%の計算方法は

高さ÷横×100=です。

WordPressに新着情報を取り入れる

WordPressに新着情報を取り入れる方法を説明します。


    post_date)); ?>
    

numberposts=3 記事数
category=5 カテゴリーナンバー

5のカテゴリーナンバーの記事から3つ表示させるというものです。

 ・記事のタイトル
  記事本文の表示
 記事へのパーマリンク
 ・・・ カテゴリー

使われているコードは上記のように、カテゴリー内のタイトルや本文、パーマリンクなどを収得して表示させるものです。

ファイル名一括変換

ウェブサイトのコーディングをしていると同じ種類の名前の画像ファイルなど、リネームしていくのが大変だと思いますが、
今回はweb制作で、役に立ちそうな、ファイル名一括変換ソフトを紹介して以降と思います。

お~瑠璃ね~む

ファイル名を変換したいファイルをそのままドラッグ&ドロップで、実行ボタンを押すだけで変換してくれます。
また、誤ってファイル名を変換してしまったとしても、元に戻せる機能があるので便利です。

変換方法では詳細な設定も可能です。全角から半角へ変換するときには、変換対象の文字をカタカナ、英字、数字に絞って変換も可能です。

WordPressのスラッグで動的にCSSを変更

WordPressでサイトを制作する上で、特定のカテゴリーに対して違うレイアウトにしたりなど、色々あると思います。
スラッグを利用してCSSを適用すれば固定ページ作成の際に設定する
出し分け以外にも色々応用できます。

スラッグの取得

post_name; 
?>

<?php echo $slug; ?>

上記では、h2のtittleのところにページのスラッグ名が出力され、親要素のclassにスラッグ名が付与されます。

フォントのレタープレス表現

グラデーションや影などCSS3だけで表現できるようになり、
画像のみで表現していたものを、簡単に設定することができるようになりました。

CSS3を使用すれば、誰でも簡単に高級感のある表現ができるようになります。

今回は、スタンプを押したような文字(レタープレス)をCSSで簡単に表現すり方法を紹介します。

レタープレスはtext-shadowを使用することで表現ができます。
text-shadowのカラーは白なので、背景が白だとうまく表現できません。黒に近い色であるとうまく表現されます。

text-shadow: 0 -1px 1px #888, 0 1px 1px #fff;
background-color:#555;
font-weight:bold;
color:#aaa;