HCDコンサルティング

カテゴリー: 未分類

  • Google検索窓導入時に窓枠の下部が消えた場合はCSSで対処

    Google検索窓の下の枠線が消えていました
    先日、とあるサイトにグーグル検索窓を導入したはいいものの、検索窓の下の枠線が消えていました。修正するのに1時間ほどかかってしまったので、今後の自分のためにメモします。 (さらに…)

  • TitleロゴにWeb fontを利用してみました-WordPress Twenty Twelveカスタマイズ

    Twenty Twelveを使うにあたって、タイトルロゴをどうするかとても悩みました。HTML5+CSS3らしくウェブフォントを使おうとしたのですが、日本語で無料で安心して使えるWebフォントの中には、お気に入りのデザインがなかったからです。 (さらに…)

  • WordPress Twenty Twelveの管理バーを非表示にする

    管理バーいらない
    ページ上部のグレー部分を削除した後、ログイン時にグレー部分よりさらに上にあるadmin barを消してみました。はっきり言ってこれは簡単です。 (さらに…)

  • WordPress Twenty Twelveのページ上部のグレー部分を削除

    ページ上部のグレー部分を削除　Wordpress Twenty Twelve カスタマイズTwenty Twelveでは、PC閲覧時にページの上部にグレー部分が出現します。ウェブシュフとしては真っ白のほうが好みなので、このグレーの部分を削除しました。 (さらに…)

  • TwentyTwelveのheader,articleの構造

    Twenty Twelveのレイアウト構造の記事ではスペースがなくて書けなかったので、header,article,の内部の構造を図に表してみます。 (さらに…)

  • 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内で構築するときには、気をつけないと大変面倒な作業をするはめになります。今回、うっかり失敗したので、今後のためにメモします。 (さらに…)