はてなブックマーク

カスタムフィールドに住所を入力するだけでGoogleマップとGoogleストリートビューを表示させちゃいましょう！ 住所を入力するだけ！お店の紹介サイトなどでGoogleマップを使用して地図を表示させるなんてことをするサイトは多いと思います。 店舗が少なければGoogleマップにアクセスしてコードを取得してコピペすればいいですが… そんな面倒なことはやってらんない！って方は下記のコードを使ってみてください！ single.phpなどに仕込んでおくと住所を入力するだけでマップを表示してくれます。 手順1.カスタムフィールドを作成まずは「住所」を入力する項目をカスタムフィールドで作成します。 これはお好きな方法でOKです。 カスタムフィールドテンプレートなどのプラグインを使用するとさくっと作れますね。 2.single.phpなど表示させたい箇所に下記のコードを埋め込む カスタムフィールドで入

コンテンツとサイドバーをfloatしてレイアウトする際に、デザイン上でサイドバーがfooterまでついている場合があります。 その時にはサイドバーにmargin-bottom: -10000px;とpadding-bottom: 10000px;を書いてコンテンツにはoverflow:hidden;を書きます。 そうする事でサイドバーの高さをコンテンツと同じ高さにできるのでサイドバーの背景がずっとついてくる形にコーディングできます。 しかし、ここで問題が…ページ内リンク()を設定すると表示が崩れてしまいました！ 別ページへのアンカーリンクで不具合が発生jqueryのページ内スクロールを使用することでページ内でのスクロールは問題なく動いていました。 しかし、別ページのアンカーリンクの場所にリンクをつけた途端に挙動がおかしくなりました。 こんな感じの画像になる javascriptでのアンカー

[css] .kaerebalink-box{ position: relative; overflow: hidden; width:420px; height: 100%; } .kaerebalink-box a { text-decoration: none; } .kaerebalink-image{ float:left; overflow: hidden; margin: 0 10px 0 0; padding: 5px; width: 160px; height: 180px; vertical-align:middle; text-align:center; line-height:170px; } .kaerebalink-image img { vertical-align: middle; } .kaerebalink-info{ float: left; widt

画像を使わない事を心がけてデザインブログという形態である以上、画像を使用するページが多くなってしまいます。 そこでベースとなる部分にはサイトの軽さを意識して画像を使わずに表現しようと決めていました。 そこでWebフォントアイコンの登場です。 Webフォントアイコンを使うメリットWebフォントアイコンを使用する事でこのようなメリットがあります。 いくらでも大きくできる。Retinaディスプレイにも問題無しCSSを使えばサイズ・色も簡単に制御可能CSS3でリッチな表現も簡単。画像でアイコンを制作した時と比べると修正が必要となった時の手間が段違いです。 WebフォントであればCSSで色・サイズを変更できるので調整がしやすい。 そして昨今、Retinaディスプレイによってデザイナーが泣かされている中でWebフォントアイコンを使用すれば、Retinaなんて関係ないのです！ 今回はフラットデザインでの

XAMPPだとhtdocsフォルダに保存してあるファイルしかローカル環境が使えないのでMAMPに乗り換えました MAMPはどこに保存してあるフォルダでも選択可能以前、MAMPを使っていた時にMySQLサーバ接続エラーが酷かったので「XAMPPの方が良いよ」という言葉を聞いてXAMPPを使用していたのですが複数のPCを使う際のデータのやり取りがとっても面倒。 編集したと思っていたファイルが実は編集前のファイルで…なんてことがあったのでここはDropboxを使おう！と思い立ちMAMPだったら簡単に設定できるという事を思い出しました。 設定は簡単!3ステップです！まずはMAMPを起動して【環境設定】ボタンをクリック。 【Apache】タブを選択して、【参照】ボタンを押して任意のフォルダを選択します。 @sw2xはここでDropbox内のwebファイルが入っているフォルダを選択しました。 これで