はてなブックマーク

カスタムフィールドに住所を入力するだけで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フォントアイコンを使うメリットWebフォントアイコンを使用する事でこのようなメリットがあります。 いくらでも大きくできる。Retinaディスプレイにも問題無しCSSを使えばサイズ・色も簡単に制御可能CSS3でリッチな表現も簡単。画像でアイコンを制作した時と比べると修正が必要となった時の手間が段違いです。 WebフォントであればCSSで色・サイズを変更できるので調整がしやすい。 そして昨今、Retinaディスプレイによってデザイナーが泣かされている中でWebフォ

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

Macのプレビューアプリといえば画像を見る為のビューワー的存在ですが、ただ単に画像を表示させるだけではありません。 意外と知らない「プレビュー」のポテンシャルに迫ってみたいと思います。 プレビューのポテンシャルはスゴかった標準アプリだからと完全にナメてました。 有料アプリにも負けない”使える”機能があったのですね。 注釈を入れられる画像に説明文を入れたり、一部分を囲ったりとした事を手軽にできちゃいます！ そしてプレビューで注釈を入れた画像がこちら！ Skitchの方がクオリティが高いのは内緒だ！ 複数ページのPDFが簡単に作れるPDFファイルを複数用意すれば簡単に複数ページのPDFファイルを作る事ができます。 作り方も簡単画像は先日行った竹谷隆之の仕事展より サイドバーを表示させてまとめたいPDFファイルをドラッグ&ドロップしていくだけ。 順序の入替も後から可能なのでかさばっているファイル