HCDコンサルティング

ブログ

  • TwentyTwelveのレイアウト構造


    Twenty Twelveをカスタマイズするなら、レイアウトのおおよその構造を把握しないと始まりません。そこで、TOPページ・カテゴリページ・個別記事ページについて、ざっくりとボックスの構造を書いてみました。 (さらに…)

  • 「Twenty Twelve」をインストール


    このブログでは、twentyelevenのカスタマイズをまるでライフワークみたいにやってきました。しかし、今後はTwenty Twelveのカスタマイズに軸足を移そうと思い、ダウンロードしてローカルで実験を始めました。

    インストール

    テーマのインストールの画面でTwenty Twelveで検索すると、一番最初にヒットします。

    ここで、「いますぐインストール」をクリックするとインストール完了。楽勝です。

    ウィジェットが空だとワンカラム

    インストールして取りあえずTOPページに行ってみると、サイトの表示がワンカラムになっていました。2カラムだと思っていたので「アレッ！？」と思いましたが…。

    ウィジェットに何かしらのメニューを設定すると、2カラム（左カラム）になりました。

    twentyelevenを改造した感じ

    全体的な印象はtwentyelevenを改造した感じです。ですから、twentyelevenになれていればとても扱いやすいと思いました。

    しかし、スタイルシートに使われている、セレクタなどはtwentyelevenからかなり変わっているので、注意が必要です。

  • [所要時間20分]IEにもHTML5・CSS3を反映させる3step

    最近は、wordpressのテーマなど、様々なテンプレートに当たり前のようにHTML5とCSS3が導入されつつあります。

    しかし、IEでは、IE9まではHTML5とCSS3への対応がとても遅れていて、HTML5とCSS3でデザインされたサイトは表示が崩れてしま

    html5shiv

    html5shivはhtml5特有のタグをIEで使えるようにするためのツールです。

    これについては、簡単です。以下の内容を<head>～</head>に書けばいいだけです。

    <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    なお、wordpressデフォルトテーマのtwentyelevenとかtwentytwelveでは、デフォルトでIEにhtml5特有のタグを読ませる仕様になっているので、上記の内容は必要ありません。

    2017/3/21　html5shivはgooglecodeのサービスが終了しているようです。

    Selectivizr

    SelectivizrはCSS3のセレクタをIEでも使えるようにするツールです。

    まず、以下のサイトに行って、とてもわかりやすいダウンロードボタンをポチっ。
    [img-link url=”http://selectivizr.com/” title=”Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8″]

    ダウンロードされたzipファイルを解凍して、サイト内の任意の場所にselectivizr.jsをアップロードします。

    そして、<head>～</head>にselectivizr.jsへのパスを記入します。ドメイン直下にselectivizr.jsを置いた場合、以下のようになります。

    <!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="/selectivizr.js"></script>
<![endif]-->

    IE6、IE7、IE8のみに適用させるのでif文が使われています。

    ところで、このselectivizr.jsは以下のjavascriptのライブラリのうちどれかがないと動きません。

    「ライブラリなんてよくわからない」という場合は、Google Libraries APIのjQueryを使っておきましょう。以下のコードを<head>～</head>に貼り付ければOKです。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    CSS3PIE

    CSS3PIEはcss3のプロパティーの一部を、IE6以降IE9以前のIE全てで有効にするツールです。具体的には次の5つプロパティーが使えるようになります。（順次拡張中だそうです。）

    • border-radius
    • box-shadow
    • border-image
    • multiple background images
    • linear-gradient as background image

    まず、下記のサイトに行って、右サイドバーの「→download」をクリックします。
    [img-link url=”http://css3pie.com/” title=”CSS3 PIE: CSS3 decorations for IE”]

    次に、ダウンロードされたzipファイルを解凍して、サイト内の任意の場所にPIE.htcをアップロードします。

    そして、CSS3特有のプロパティーを使ってstyleを指定したときには、最後の行に

    behavior: url("PIE.htcへのパス");

    を記入します。

    PIE.htcをドメイン直下に置いた場合は、以下のようになります。

    .shampoo-r{
color:white;
background-color:green;
margin:2px;
padding:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 10px;
box-shadow: 1px 1px 1px lightgray;
behavior: url(/PIE.htc);
}

    これで、上にリスト表示した5種類のプロパティーについてはうまくいくはず、なのですが…

    linear-gradient

    linear-gradientでグラデーションの背景を表現しようとすると、

    -pie-background: linear-gradient(…,…,…);

    という記述が必要です。

    その他うまくいかないとき

    グラデーション背景以外でも、何故か表示がうまくいかないときがあります。そんなときは、

    position:relative;

    を追加するとうまくいきます。

  • 5分でできるコメント欄の撤去～WordPress Twenty Elevenカスタマイズ


    twentyelevenのコメント欄は、デフォルトでは、固定ページや投稿の添付画像を表示しているページにまで表示されます。ですが、ウェブシュフとしては投稿ページ以外のコメント欄はとてもジャマです。そこで、コメント欄を全て取りました。 (さらに…)

  • wordpressテスト環境のXAMPP内構築時の.htaccessとwp-config.phpの取り扱い

    wordpressテスト環境を構築するとき、.htaccessとwp-config.phpを安易に元サイトから移し変えると、痛い目に遭います。特に、XAMPP内で構築するときには、気をつけないと大変面倒な作業をするはめになります。今回、うっかり失敗したので、今後のためにメモします。 (さらに…)

  • Windows,XAMPPを利用してWordPressのローカルテスト環境を作る

    このたび、友人からウェブサイトの制作を請け負ったのを機に、ローカルにワードプレスのテスト環境を構築しました。WindowsにXAMPPという結構定番の組み合わせです。ウェブ上にテスト環境を作るよりとても効率的なことを実感しました。 (さらに…)

  • 「このページにアクセスするための十分なアクセス権がありません 」の原因


    先日、とあるwordpressサイトのリニューアルを請け負ったときに、テスト環境を作成してログインしようとすると、タイトルに表記のエラーが出ました。原因は、元サイトのデータベースのtableの接頭辞がwp_であったのに、これにきちんとした対応をせずにデータベースを取り扱ったためでした。同じ失敗を繰り返さないためにメモします。 (さらに…)

  • WordPressのプライバシー設定変更がgoogleに反映されるまで

    先日、wordpressでプライバシー設定を「検索エンジンによるサイトのインデックスを許可しない。」にして、テスト環境を作らず本番環境でサイト制作をしました。制作終了後、プライバシー設定を「検索エンジンによるサイトのインデックスを許可する。」に変更しましたが、google検索に引っかかるまでにかなり時間がかかりました。 (さらに…)

  • 所要時間1分!グーグルマップ埋め込み時に吹き出しを削除する方法

    グーグルマップを埋め込むときに、デザイン的に吹き出しが邪魔になることがありませんか。でも、吹き出しは、コードを少し改変するだけで、あっという間に消えます。 (さらに…)

  • WordPressでパンくずリストを設置するコード・プラグインまとめ

    2018-02-18_1000-wordpress
    パンくずリストは、ユーザビリティーにも、SEOにも欠かせないものです。WordPressではプラグインを利用してパンくずを入れることも出来ますが、簡単なコードをコピペして設置するのがオススメです。 (さらに…)