ezorisu-web

ウェブサイトのデザインとかお仕事の効率化とか

Googleマップをスッキリ埋め込みたい

ブログ上にGoogleマップを <iframe> で埋め込んでみたんだけど、イマイチしっくりこない。主張が強すぎて、なじまない感じ。かと言って、デザイン的に色々しようと思っても、 けっこう面倒。とりあえず CSS だけでなんとかしてみます。

ブログに地図を埋め込むならGoogleマップ

ブログ上で地図を表示する場合、何かと便利なのはやっぱりGoogleマップ。
この地図を自分のブログで表示する方法は、いくつかあって、

  1. Googleマップで「地図を共有または埋め込む」
  2. Googleマイマップで「共有」して埋め込む
  3. Google Map APIを利用して埋め込む

(1)は、設定がとっても簡単。でもデザイン的には融通がきかない。表示されたマップは左上に情報ウィンドウみたいなのがあって、小さい表示だと、見づらいし邪魔。消す方法もあるにはあるようなんだけど、手間がかかって面倒そう。

(2)のマイマップを使うのがデザイン的にもなんとかなりそうなので、今回はこれでいってみようと思います。

(3)APIを使うのは、デザインも自由にカスタマイズできて、思い通りに表示できそう。だけど、色々コードを打ち込んだり、基本有料だし、これまた大変そうなので、今回はパス。

Googleマイマップを埋め込む

Googleマイマップを開いて、新しい地図を作ります。マイマップに新しい場所を登録して、場所の名前や説明文を編集します。
あとは、ピンのアイコンや色も変えられますので、収録されているアイコンから良さげなのを選んで下さい。カスタムアイコンも設定できます。
その場所の写真も登録できます。店舗などは、お店の写真を登録しておくとわかりやすいかもね。
地図の種類も選べます。航空写真とか、ダークモードとか。

で、「共有」をクリックして <iframe> を使ってブログに表示します。

マイマップで地図を作成してブログに埋め込む(<iframe> をコピーして貼り付ける)ところまでは、ネット上にたくさん情報があるので、そちらを参考にして下さい。


私は、こちらのサイトにお世話になりました。わかりやすいです。

Googleマイマップでカスタマイズした地図を自分のサイトやブログに埋め込む方法:TOMONO Tech-Blog

さらに、<iframe> 内に追記オプションで地図の中心位置を決めたり、表示モードを変えたり、縮尺を変更する場合はこちらを参考に

Google Mapをiframeで利用する際のオプションとレスポンシブ対応させるためのHTMLとCSSを紹介(住所指定で表示もできるよ!):Olein Design


まずは、マイマップから「共有」で iframe をコピーします。中身を見てみるとこんな感じ。

<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F" width="640" height="480"></iframe>

表示サイズは、width,height いずれもレスポンシブ対応のため100%にしておきます。

src のところにオプションで中心位置と地図の縮尺を追加します。

中心位置は,Googleマイマップで座標をコピペ。

ll=43.76697, 142.48322

縮尺は、とりあえず14くらい?後から調整すればOK(0から23まで指定できます)

Z=17

「&」でつないで、追加します。

<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F&ll=43.76697, 142.48322&z=14" width="100%" height="100%"></iframe>

後は、CSS で見た目を調整していきます。

CSS で埋め込みマップの黒帯を消す

最初にレスポンシブ対応のためサイズを100%にしましたが、それだけではレスポンシブデザインにはならないので、<iflrame> を囲むように外側に要素を配置します。

<div class="map">
<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F&ll=43.76697, 142.48322&z=14" width="100%" height="100%"></iframe>
</div>

<div class=”map”> に CSS で幅と高さを指定します。

幅は、最大600pxとして、 max-width: 600px;

高さは、height: 450px くらいにしておきましょうか。

これで、パソコン画面で見た時は、幅600pxが上限。スマホは、画面サイズに合わせて縮小されます。

ところで、上部の黒い帯をなんとかしたくなりません?
マイマップの情報を開いたり、拡大地図を開いたりとそれなりに役目はあるんだけど、ちょっと目立ちすぎ。
早速消しちゃおうと思ったんだけど、これがまた厄介だ。<iframe> 内で表示されているものだから、単純に CSS で直接いじろうとしても、うまくいかない。いろいろ検索してみたけど、難しそうな方法ばかり。

あんまり複雑にしないで、手っ取り早く見えなくしてみます。

<iframe>に CSS で margin-top: -60px; を指定します。
これは、帯部分の最大高さ。場合によっては、46px だったり 59px だったりするみたいなので、60px 分とっておけば大丈夫かと思います。帯の分だけ、上方向にずらしています。

<div class=”map”> には overflow: hidden; を指定してはみだした分を見えなくします。

あとは、好みに合わせて、少し色の調子を整えてみます。あんまり地図ばっかり目立ってもしょうがない、という場合に。

CSS で <iframe> に filter: grayscale(70%); を追加してみます。

.map {
	max-width: 600px;
	height: 450px;
	overflow: hidden;
}

.map iframe {
	margin-top: -60px;
	filter: grayscale(70%);
}

ブログに合わせて、背景に馴染みつつスッキリ表示されたでしょうか。

説明リストを見やすくしてみる

リスト表示ってよく使ってると思います。文の頭に数字とか丸ポチが付いて箇条書きになってるやつですね。

この他に説明リストっていうのもあるんだけど、最初に項目(用語)があって、その後に項目の説明が続いているもの。商品リストで、項目として「鉛筆」、説明として「〇〇製、2B、1ダース:400円」とか、解説文で項目が「ヤマゲラ」説明が「キツツキ目キツツキ科【Picus canus】」など色々使えます。

ところがWordaPressの投稿画面(グーテンベルク)の中では、数字とか丸ポチのリストブロックはあっても、説明リストのブロックはありません。使う場面はいっぱいありそうなのに、使いにくいところがちょっと残念。単純にカスタムHTMLブロックの中にHTMLで書いてあげればいいんだけど、記事を書いている投稿者は、そういうのに詳しい人ばかりじゃないから・・・。そのへんのやり方は色々あるんだけれど、それはまた別の機会に。

今回はその説明リストをそれらしく表示するためのCSSです。

まずは、HTMLの基本形から

<dl><!-- description list -->
	<dt>項目</dt><!-- description term -->
	<dd>説明</dd><!-- definition description -->
</dl>

全体をdlで囲んで、項目部分はdt、説明部分はddで囲みます。
例えば、

<dl>
<dt>開催日時</dt>
<dd>12月24日(水曜日)19時00分</dd>
<dt>集合場所</dt>
<dd>中央区円山原始林山道横ミズナラ3丁目5幹3枝番地<br />ツリーハウス シマリス会館</dd>
<dt>会費</dt>
<dd>3ドングリ</dd>
<dt>ゲスト</dt>
<dd>サンタクロース</dd>
<dt>主催者</dt>
<dd>円山リスの会代表 シマリス </dd>
</dl>

こんな感じ。特に何もしないと


開催日時
	12月24日(水曜日)19時00分
集合場所
	中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
	ツリーハウス シマリス会館
会費
	3ドングリ
ゲスト
	サンタクロース
主催者
	円山リスの会代表 シマリス

Chromeだと1行ずつ表示されて、説明部分がインデントされました。これはこれで最小限、項目と説明をそれぞれ読めますね。
もう少し見やすいようにしてみます。項目と説明を横並びにして、項目に色を付けてみましょう。横並びにするのは色々ありますが、今回はグリッドプロパティを使ってみます。

.entry dl { /* 説明リスト全体 */
	margin: 1em 0;
	padding: 2em 0 2em 1em;
	line-height: 1.7em;
	display: grid; /* これでグリッド表示になります*/
	gap: 1em 1.5em; /* 行間が1文字分、項目と説明の間が1.5文字文空けます */
	grid-template-columns: minmax(6em, max-content) 1fr; /* 列の幅を決めます */
}

.entry dt { /* 項目(用語)部分 */
	background-color: hsla(66, 66%, 67%, 0.75); /* 色を付けています */
	padding: 0 0.7em;
	height: 1.7em; /* 1行分だけの高さを指定 */
	font-weight: 700;
}

@media screen and (max-width: 480px) { /* 480pxでモバイル用に切り替え */
.entry dl {
	display: unset; /* グリッドを解除 */
}

.entry dd {
	margin: 0 0 1em 1em; /* 各項目ごとのスペースを調整 */
}
}

項目と説明で横並びのワンセットでそれを繰り返してリストにしています。複数の項目に対して、ひとつの説明なんていうことも、本来できるのですが、ここではごく単純にひとつの項目にひとつの説明という形を想定してCSSにしています。

gapは、行と行の間隔、項目と説明の間隔を指定しています(図−1)。それぞれ1emと1.5em空けています。

(図-1)

grid-template-columns は、グリッド表示にしたときの列の幅を指定します。

最初の minmax(6em, max-content) は、1列目(項目部分)の幅を最小で6em、最大で入力された文字分の幅として変動します(図-1)。
スペースを開けて、次の1fr で残りの範囲を説明部分として使っています。

その残り範囲の幅で説明文は折り返されます。こういうところがグリッドプロパティを使うと便利です。

dt の height に dl で指定した line-height と同じ高さを指定して、説明文が改行されて複数行になっても、項目部分は1行分だけ色がつくようにしています。
スマホなどで表示幅が狭くなると、グリッド表示を解除して項目部分の色はそのまま1行ずつの表示になります。

先程のクリスマスパーティーのお知らせを例にとると

クリスマスパーティーのお知らせ
開催日時
12月24日(水曜日)19時00分
集合場所
中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
ツリーハウス シマリス会館
会費
3ドングリ
ゲスト
サンタクロース
主催者
円山リスの会代表 シマリス

こんな感じ。画面の幅を480px以下に小さくすると、スマホ用に表示が切り替わります。

項目の文字数が少ないときは指定した最低幅で

開催
12月24日(水曜日)19時00分
集合
中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
ツリーハウス シマリス会館
会費
3ドングリ

項目の文字数が多くなったときもそれに合わせて勝手に調整してくれます。

開催日時
12月24日(水曜日)19時00分
集合場所は木の上
中央区円山原始林山道横ミズナラ3丁目5幹3枝番地
ツリーハウス シマリス会館
会費
3ドングリ

あとは、CSSで色を変えるなり項目の前後に記号を入れるなりデザインを調整して、自分のサイトで見やすいようにして下さい。

CSSでドロップダウンメニュー

このブログを作るに当たって、いろいろと試行錯誤をした記録です。すぐ忘れてしまうので、覚書として書き留めています。今回はヘッダーのメニュー編。

CSSのドロップダウンメニューです。テストバージョンのオリジナルWordPress Themeで一部表示がおかしくなっているところがあったので、少し整理してみました。
ヘッダー部分に横並びメニューとしてデザインしていて、メニュー項目にカーソルを合わせると階層式に子メニューが表示される、よく見るタイプです。

まずはメニューなのでリンク項目であることを前提に、リストとしてマークアップします。(DEMOではリンク部分でも別のページに飛ばないようにしています)

[sourcecode language=’html’]

[/sourcecode]

1段目は横並びのメニュー項目で、2段目以降は入れ子構造にしていきます。

次はCSS。
まずは、ドロップダウンメニューとしての基本形。

[sourcecode language=’css’]
#menu-sample ul { /*リスト全体*/
list-style: none;
margin: 0;
padding: 0;
}

#menu-sample li { /*リストの1段目*/
float: left;
min-width: 94px;
white-space: nowrap;
}

#menu-sample ul ul { /*2段目以降*/
display: none;
position: absolute;
z-index: 10;
}

#menu-sample li li { /*2段目以降のリスト項目*/
clear: left;
position:relative;
width: 100%;
}

#menu-sample ul ul ul { /*3段目以降*/
top: 0;
left: 100%;
}

#menu-sample ul li:hover > ul {
display: block;
}

*+html #menu-sample ul ul a { /*IE用*/
width: 72px; /*(94-10-10-1-1)パディングとボーダーの分を引いた値*/
white-space: normal; /*幅に応じて改行*/
}
[/sourcecode]

ul:リストの装飾は不要なので削除。マージン、パディングも0にして、いったんきれいな身体に。

1段目のliをfloat: leftで横並びにします。
できればひとつひとつのメニュー項目の幅をそろえたいと思いますが、文字数によってはピッタリ納まるとは限らないので、あくまでも最小幅とし、文字数が増えても対応できるようにしておきます。それがmin-width: 94px部分。94pxはヘッダーの幅と入れたいメニュー項目数から逆算して適当に決めた数値。
white-space: nowrapは下層のメニュー項目も改行しないようにしています。これを入れておかないと3段目以降で固定幅になって、文字が改行されてしまいます(なぜなのかよくわからない)

ul ulはメニューの2段目以降を指定しています。ここで下層のメニューが見えないようにdisplay: noneで 非表示にします。
positionの使い方がわかりにくいですが、ul ulにposition: absoluteを指定して、2段目以降のulにabsoluteがかかるようにします。2段目のulの親要素である1段目のliにはpositionが指定されていないので、親要素の下に絶対配置されます。
z-index: 10は念のため。サイドバーなどにメニュー項目が重なったとき、下になって隠れてしまう場合もあるので。

2段目以降のリスト項目li liはclear: leftで縦並びに戻します。
position:relativeを入れて2段目以降のリスト項目左上を基準とします。
width: 100%は、リスト項目どれかの文字数が多いときにそれに合わせて同じ幅になるようにしています。

3段目以降を示すul ul ulにもabsoluteがかかっていますが、親要素である2段目以降のliでposition:relativeを指定してあるのでその要素の左上が基点となり、子要素であるulにtop、leftなどで基点からの位置を指定します。
ここではtop: 0でliと下段のulのラインを揃えて、left: 100%で親要素のul幅分右へずらしています。
4段目、5段目と階層が増えても、親要素、子要素の関係は変わらないので同じように表示されます。

あとは、li:hover > ul で子要素がある項目にカーソルが重なったときに直下のulをdisplay: blockで表示するようにします。

例によって、IE用の対策。

まずIEではli liでwidth: 100%を指定してもなぜか最大幅のメニュー項目に合わせて同じ幅に広がってくれないので、*+htmlハックでIE用にメニューの幅を固定して改行するように指定してます。
他のブラウザと見た目が少し変わりますが読めるから大丈夫、というレベルで対応。

そもそもIE6は疑似クラスの :hover や min-width が効かないので、「Google Code」の「IE7.js」を使わせてもらいます。

htmlのhead部分に

[sourcecode language=’html’]

[/sourcecode]

を書き込むだけです。

IE6は、しょうがないから最低限の対応だけしておくか、というスタンスなのでご勘弁を。
これに関しては、「なるべくならIE用のHackは使いたくない」と「「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」を見てください。
上記の*+htmlハック部分も「IEの条件付きコメント」を使って別ファイルにしたほうがスッキリします。

あとは、メニューっぽく装飾を施します。

[sourcecode language=’css’]
#menu-sample li {
margin-left: 3px;
}

#menu-sample a { /*1段目以降のメニュー文字*/
font-size: 13px;
line-height:15px;
color: #dadada;
text-decoration: none;
text-align: center; /*1段目は文字を中央合わせに*/
padding: 5px 10px;
background-color: #242424;
display: block;
}

#menu-sample a:hover {
color: #f90;
background-color: #111;
}

#menu-sample ul ul {
padding-top: 2px;/*2段目を少し下げた*/
}

#menu-sample ul ul ul { /*3段目以降*/
padding-top: 0; /*2段目のパディング2pxを元に戻す*/
}

#menu-sample li li {
margin-left: 0; /*liのmargin-left: 3pxを元に戻す*/
}

#menu-sample ul ul a { /*2段目以降のメニュー文字*/
font-size: 11px;
line-height: 1.3;
text-align: left; /*2段目以降は左寄せにもどす*/
border-top: solid 1px #555555;
border-right: solid 1px #070707;
border-bottom: solid 1px #070707;
border-left: solid 1px #555555;
background-color: #343434;
}
[/sourcecode]

文字色やバックグラウンドの色は、メニュー内のa要素で指定。display: block;でブロック要素にしてサイズを固定します。
a:hoverでカーソルが乗った位置がわかるように文字色とバックグラウンド色が変わるようにします。
2段目以降は文字サイズを少し小さくしてみました。
その他諸々の指定は、個人個人の好みの問題です。

ただ、やっぱりIEが絡んでくるとなかなかうまく表示されない場合もあって、たとえば2段目と3段目で少し隙間を空けようかとか、逆にちょっと重ねてみようかと思うと、細かいところでいろいろ苦労をすることになります。Operaも少し挙動が変になったりします。

とりあえずこのサンプルでは、その辺も考えた上での基本形ということで IE6,7,8、Opera、Firefox、Safari それぞれのブラウザであまり苦労をしないで動くような最低限のデザインにしてあります。

あとは応用ですので、バックの色やボーダー、イメージ画像を使ったりしていろいろバリエーションを楽しめると思います。

参考サイト

コピーライトをフッターエリアの中央に入れたい

このページの一番下にフッターエリアがあります。最近のフッターは、いろいろ情報を詰め込んでいるものも多くなりましたが、このサイトではシンプルにコピーライトだけ。
スッキリ見せたいので、フッターは少し色を変えて、真ん中に簡潔なコピーライト。

この真ん中に文字を表示するというのを考えてみました。文字を特定のエリアで縦方向の中央寄せにする。

左右の中央に合わせるのは、簡単。次は上下の中央合わせ。ここで、ハテ?と行き詰まってしまった。
今まで、自分のサイトならコピーライトの文字数も行数も自分で決められるから、それに合わせて調整するのは比較的簡単でしたが、
一応フリーテーマで公開するものを作ろうと思ったら、これがなかなか難しい。
使う人によって一行なのか複数行なのかまちまちだろうから、どちらでも対応できるようにしておきたい。
さて、どうしたものか。

調べてみると、ヨモツネットというサイトの「CSS で簡単に上下中央揃えを実現する」という記事の方法が使えそうです。
要は、コピーライトを入れる要素にdisplay:table-cell;を指定することによってテーブルセルと見なす。そうするとそのセル内ではインライン要素である文章もvertical-alignを使って中央合わせが出来るようになる。なるほど、簡単。

とにかく、フッター用の標準のパターンとして考えてみた。

一行の場合

二行の場合

HTML<div class="footer-sample">
<div class="copyright-sample">コピーライトの例です。コピーライトの記号と年数、著作者名を入れます。</div>
</div>

“footer-sample”というクラス名のdivのなかに”copyright-sample”というクラス名を付けたdivを入れて、その中に実際のコピーライトを書きます。

CSSdiv.footer-sample {
    background-color:#333;
    height:70px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

div.copyright-sample {
    color: #ccc;
    font-size: 12px;
    line-height: 1.2em; 
}

フッターエリアを黒っぽく塗りつぶして、とりあえず高さは70px、幅は500px。
display:table-cell;を指定をしてフッターをテーブルセルとみなしてしまう。あとはテーブルセルとして中央寄せを設定してあげる。

一般的なブラウザーだとこれだけでOK。シンプルでスッキリ。
ところがいつものように、IEだけは、display:table-cell;に対応していない、と。
いいかげん、IEなんか使うのやめようよと言いたいのをぐっとこらえて、IE用も。

HTML<div class="footer-sample">
<!--[if IE ]>
    <span class="dummy-h"></span>
<![endif]-->
<div class="copyright-sample">コピーライトの例です。コピーライトの記号と年数、著作者名を入れます。</div>
</div>

IEで開いたときだけ、”dummy-h”というクラス名を付けたspanを読み込むようにして、IEの場合はここで行数の違いを調整できるようにする。

CSSdiv.footer-sample {
    background-color:#333;
    height:70px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

div.copyright-sample {
    color: #ccc;
    font-size: 12px;
    line-height: 1.2em; 
}

*:first-child+html div.copyright-sample {
    display:inline;
    zoom:1;
    vertical-align:middle;
}

*:first-child+html div.footer span.dummy-h {
    display:inline;
    zoom:1;
    height:100%;
    vertical-align:middle;
}

* html div.copyright-sample {
    display:inline;
    zoom:1;
    vertical-align:middle;
}

* html div.footer span.dummy-h {
    display:inline;
    zoom:1;
    height:100%;
    vertical-align:middle;
}

*:first-child+html はIE 7用のハック。* html はIE 6用のハック。
IEには、display:table-cell; が効かないので、別の方法で同等の効果を与えています。
(これに関しては、上記のヨモツネットさんの記事がたいへん参考になります)
同時にダミー要素の span に height:100%; 高さを与えて、複数行でも対応できるように。この辺のことはネットをあっちこっちあさっていて、どこかで見た方法ですが、いろいろ試しながらやっているうちに、どこで見たのかわからなくなってしまいました。

一行の場合(IE対応版)

二行の場合(IE対応版)

IEの人もちゃんと表示されてるかな?

参考サイト

Firefoxでリンクをクリックしたときの点線を消す

前から気になっていたんだけど、意外と簡単。CSS で点線表示を消してやるだけ。

CSSa:focus{
outline:none;
}

または、

CSSa {
outline: none;
}

どちらの書き方でもOK。MacでもWinでも消せます。IEでも同じようにクリックしたときに点線が表示されますが、こちらは消えてくれませんでした。