はてなブックマーク

以前紹介した記事「可変スタイルとMedia Queriesの組み合わせは便利だけど難しい」にも書いていましたが、css3 Media Queriesのみでスマートフォン対応にすると不都合があります。 css3 Media Queriesのみでの不都合点 Google AdSense広告の表示方法とサイズの問題 スマートフォンサイズになった時に表示させたくないブロック（サイドバーなど)をdisplay: noneで見えなくしてもhtmlコード自体は残っているので不要なコードが残る PC用の大きい画像サイズがcssによって小さく見せるだけなのでスマートフォンでは重くなる このような感じでPCよりも通信速度や CPU のパワーの劣るスマートフォンではcss3 Media Queriesのみだとかなり不都合があります。 しかしWordPress3.4以降使えるようになっている関数wp_is_mob

2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ

JQueryで背景画像のアニメーション効果を紹介しているサイトはいくつかありますが、webOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」が一番分かりやすく勉強になりました。 この記事を元に少しアレンジしてサンプルを作成したので紹介します。 これから紹介するサンプルはwebOpixelさんの記事「jQueryで背景画像をアニメーションで無限ループさせる」とアメブロで使用してあるスクロールで背景画像を別々に動かすパララックス効果のコードをプラスしてサンプルを作成してあります。 それではサンプルを紹介していきます。 雲の背景画像をループさせアニメーション 雲の背景画像をループさせ、まるで雲が動いているかのようなアニメーション効果をもたらします。 コードは下記のような感じになります htmlコード <div class="skinBody"> この中が記事などの

通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果のある2種類のサンプルとコードを紹介します。 スクロールすると雲の背景画像が横に動く 元のコードはアメブロのデザイン「気球に乗って」のコードを元に少アレンジして紹介してあります。 サンプルを見ていただけば分かるとおりスクロールすると雲の背景画像が横に動きます。 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。 このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。 スクロールすると背景が右に2pxづつ移動します。 htmlコード htmlのコードは記事の外側

WordPressで新着記事を表示するにはウェジェットの最近の投稿を使う方法や、月別アーカイブ（更新履歴ページ）wp get archivesのテンプレートタグを使い表示できる方法があります。しかしこの２つの方法では、表示の仕方が限られています。そこで便利なテンプレートタグがget postsです。今回はget postsを使い色んな表示の仕方を紹介します。 年月日とタイトルを一緒に表示しさらに表示する数を指定する 下記のコードで年月日とタイトルを一緒に表示しさらに表示する数を3件表示できます。 numberposts=3と言うコードが表示される数になります。 <ul> <?php global $post; $tmp_post = $post; $myposts = get_posts('numberposts=3'); foreach($myposts as $post) : setu

背景にYouTubeを設置するとインパクトあるサイトが簡単に作成できます。 YouTube動画は自動再生になってますのでサイトが表示したら動画が自動で再生されます。又記事をスクロールしても動画は移動されないので常に動画が背景になります。 背景にYouTubeを設置する方法 背景にYouTubeを設置する方法はgoogleなどで検索するとjQueryプラグインなどを使った方法とか色々あるみたいですが、ここではjQueryプラグインは使わずに 単純にスタイルシートだけで設置する方法を紹介します。 まずはYouTubeに行き設置したい動画を探します。 設置したい動画のアドレスの所に動画のIDがあるのでそれをコピーしてメモ帳などに貼り付けて置いてください。 下記のコードをコピーしてbodyタグのすぐ下に貼り付けてください。 <iframe style="z-index: -1;min-width:

住所からGoogle Mapsを表示させるにはプラグインを使ったやりたかなどがありますが、ここではプラグインは使わずにカスタムフィールドに登録した住所データを元にものすごく簡単に表示させる方法を紹介します。 一度設定しておけば、カスタムフィールドに住所を入力するだけでGoogle Mapsが表示されますので便利です。 カスタムフィールドに登録した住所データ まずはカスタムフィールドを作成する必要があります。カスタムフィールドを現に使っている方はこの項目は必要ありません。カスタムフィールドを使用したことない方はよかったらカスタムフィールドに関してはWordPress 初めてのカスタムフィールドを参考にしてみてください。 カスタムフィールドに登録した住所データを呼び込むコードは下記のような感じになります。’所在地’の所はfieldnameで名前がちがってきます。 <?php echo get_

色んな方法があると思いますがスタイルシートでmin-widthを使い簡単に出来ます。通常のホームページレイアウトは大きく分けると、全体を囲むボックス、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスになっています。 このレイアウトを全体を囲むボックスを無くし、ヘッダー用ボックス、メイン用ボックス、フッター用ボックスに変えさらにヘッダーを幅いっぱいにする為のボックス（仮名称headerbg）とフッターを幅いっぱいにする為のボックス（仮名称footerbg）を加えます。 ここではメインの幅を940pxで作成した例で説明していきます。ヘッダーボックス（仮名称header）の幅を940px、メインボックス（仮名称container）の幅を940px、フッターボックス（仮名称footer）の幅を940pxにします。そこにヘッダーフッターをブラウザ幅いっぱいにするボックスが入っています。下記の

このプラグインは記事内にphpを使えるようになるプラグインExec-PHPを導入されている方にはとってもありがたいプラグインです。WordPress は通常pタグやbrタグが記事を改行させたりする時に自動で挿入されます。通常の記事だけを書くのにはタグの書き忘れがない為とても便利なんですが、記事にphpタグを使った場合だとこれが迷惑になります。変なところでpタグが入ってしまいレイアウトが崩れてしまうからです。 pタグを自動挿入させないプラグインps-disable-auto-formattingは日本語のため設定もしやすくなってます。 ps-disable-auto-formattingをダウンロードして解凍します。解凍してできたps-disable-auto-formattingフォルダをpluginsフォルダにアップロードします。プラグインメニューにいきPS Disable Auto F

ページを開くたびに自動で違う記事を表示できれば、古い記事の紹介や、ピックアップしたい記事を紹介したい場合の手間も省けるし色んな記事を知ってもらうことも出来ます。 目的以外の記事にも目を向けてもらう為にもランダムに記事を表示させ沢山の記事を知ってもらいましょう。 new WP_Query を使い記事をランダムに表示する WordPressで記事をランダムに表示するコードの記事は2011年1月20日に一度公開していましたが下記のコードの方が使いやすいと思いますので記事を更新しました。 <ul> <?php $loop = new WP_Query( array( 'posts_per_page' => 4, 'orderby' =>rand ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <li><a href="<?php

Yahoo! Pipes（ヤフー　パイプス）は、IT の深い知識がなくても、既存の Webサービスを組み合わせて、短期間でアプリケーション開発ができ、RSSフィードや外部のサービスなどの様々な情報をまとめたりすることが出来ます。Yahoo! Pipes（ヤフー　パイプス）を実際に使ってみてどんなことが出来るかを簡単に試してみましょう。 Yahoo Pipesを試してみよう Yahoo! Pipes（ヤフー　パイプス）を使うには、Yahoo! USAのIDが必要になります。もしも取得されていなくて、この記事をはじめてご覧になる方は「Yahoo! USAのIDを取得してみよう」の記事と「Yahoo!Pipesの紹介」ご覧頂くと参考になると思います。 それでは、Yahoo! Pipes（ヤフー　パイプス）にアクセスしてみます。一番上のメニューのCreate a pipeをクリックします。 すると

EC-CUBEはディフォルトでは「ショップ名/ページタイトル」になっています。 これを「ページタイトル/ショップ名」にする方法はものすごく簡単です。ちなみにEC-CUBE2.11で試しています。 タイトル変更方法 下記の位置にあるsite_frame.tplを変更するだけでタイトルの順番が変更できます。 /data/Smarty/templates/使用しているテンプレートフォルダ/site_frame.tpl site_frame.tplを開いたら<title>～</title>の部分を下記の用に書き換えます。 <title> <!--{if $smarty.server.PHP_SELF=="/index.php"}--><!--{$arrSiteInfo.shop_name|h}--> <!--{elseif $tpl_subtitle|strlen >=1}--><!--{$tpl

今回私はWordPressをマルチサイトにする為に新たにロリポップをレンタルしました。当然ロリポップをレンタルされている方は新たにレンタルしなくても出来ます。 ここでは新たにロリポップをレンタルして、一からWordPressをマルチサイトにした方法を紹介します。 ロリポップでWordPressをマルチサイトにするメニュー一覧 独自ドメイン取得 サブドメイン取得 WordPressのマルチサイト設定 ネットワークの作成 マルチサイト設定の最終設定 独自ドメイン取得 ロリポップに申し込んだらまず、ムームードメインで独自ドメインを取得しました。 独自ドメインの設定が１時間 ほどかかるので、ホームページは作成しないで、まずは独自ドメインの設定取得をしました。 独自ドメインについては、ロリポップの独自ドメイン / ドメインについてを見てください。詳しく書いてあります。 ※独自ドメインを取得しなくても

iPhone、Android、Galaxyなどスマートフォン向けにサイトを作成した場合にスマートフォンが手元にあればそれを使いレイアウトを確認できますが、スマートフォンがない場合でもパソコンからレイアウトは確認することは出来ます。Google Chromeやアップル – Safariで簡単に確認することが出来ますので、その方法を紹介します。 Google Chromeでパソコンでスマートフォン画面を確認する Google Chromeブラウザをインストールして、ブラウザをAndroid Mobileとして表示できるように設定します。 Google Chromeでインターネットを開いたらブラウザ内で右クリックをすると下記図のようにメニューが現れますので、そこで「Developer Tools」をクリックします。 すると下記図のようにDeveloper Toolsが開きますのでそこで右下にある

通常ナビゲーションメニュー（横並びのメニュー）などはマウスをメニューの上に重ねると背景画像などが変わり選択していることが見た目でも分かりやすく作成してあります。マウスを重ねると背景画像が変わる表示の仕方をロールーバーと言いますが、その作成方法はjavascriptで作成した方法と、CSS(スタイルシート)のみで作成する方法があります。今回はよく使われるであろうと思うロールオーバー系の横並びメニューを３パターン紹介したいと思います。 CSS(スタイルシート)によるロールオーバー効果 下記のスタイルはテキスト文字＋CSS(スタイルシート)で背景画像が変わるようにして有ります。 CSS(スタイルシート)で背景が変わるための背景画像は下記の図で説明してあるとおりセット画像にして用意しておきます。 ここで使用しているソース htmlソース <ul id="navi"> <li><a href="#"

通常サイズの画像とその下にサムネイル画像をセットで表示していて、サムネイル画像にマウスが触れると通常サイズで画像が表示するようにしてみます。 この方法を使うことで、ショッピングサイトなどで、よく見かける一つの商品を色んなアングルから見れるような商品の紹介が出来ると思います。 オンマウスで商品画像を切り替えるサンプル 下記がサンプルになります。サムネイル画像の上にマウスを置くと画像が切り替わります。 下記のhtmlコードとcssコードで作成していますが、必要なところをサイトに合わせて書き直しお使い下さい。 htmlのコード <div class="imgonmouse"> <!--一番最初に表示される画像--> <img src="画像1アドレス" name="imgonmouse" width="300" height="300" /> <ul> <li><img src="画像1アドレス

WikipediaによるとFacebook（フェイスブック）は現在、日本国内のユーザー数は約180万人で世界中に5億人を超えるユーザーを持つ世界最大のSNSだそうです。このユーザー数からも見てFacebookのいいねボタン（Like Button）の設置は是非設置しておきたいツールの一つだと思います。 いいねボタン（Like Button）-Facebook開発者に行きコードを取得する まずはLike Button-Facebook開発者に行きコードを取得する必要があります。Like Button-Facebook開発者であなたのホームページアドレスを入力し、お好みのスタイルを選んでGet Codeを押しコードを取得します。 コードはiframeとXFBMLの２種類のコードが出てきますがここではiframeのコードを使って説明していきます。 上記の画像のコードは当サイトのアドレスを入力した

WordPressの移動方法はいくつかあると思いますが今回私が行った方法はツールのインポート、エクスポートを使い移動を行いました。 この機能でページ、記事、コメント、投稿タグが移動できますが、カテゴリーと画像のURLを修正する必要があります。 WordPress移動前の下準備 移動元のサーバーから画像のファイル、プラグインファイルをパソコンにダウンロードして移動先のサーバーに各ファイルをアップロードします。画像ファイルに関しては、以前のサーバーで日付毎のフォルダに画像ファイルが入っていた場合には、それと同様にフォルダを作りアップロードさせます。これで下準備は完了です。 WordPressの移動元からエクスポートを行う WordPress移動元の投稿編集画面のツール→エクスポートがありますのでそれをクリックして、エクスポートファイルをパソコンにダウンロードします。 WordPressの移動先

めちゃくちゃ簡単で、しかも凄い機能が備わっているGoogle AJAX Feed APIのDynamic Feed Control Wizard。難しいプログラムは必要ありません。必要なのは複数表示させたいRSSフィード（ホームページ）の名前だけです。ちなみにこのDynamic Feed Control Wizardはスマートフォンでも表示されます。 下記のDynamic Feed Control Wizardが完成サンプル（携帯では表示されませんがご了承下さい）です。 複数RSS作成方法 Dynamic Feed Control Wizardに行き必要項目を入力するだけです。 feedのStyle（スタイル）を選択。ちなみに上記サンプルのスタイルは、Vertical Stackedを選択して作成してあります。 feedのTitle（タイトル）を入力 Feeds Expression（RS