パンフレットからホームページまで制作。デザインの現場からの情報をお届け。
サイドメニューの罫線が太い。1pxじゃないんです。多分2px。
これを解消すべく、いろいろと調べました。罫線はボックス要素の枠線の太さで指定し、左右と上の線が表示されなければいいと思ってコードを書いたんですがうまくいきません。HTMLに<hr>で書いてもみましたが、どうもwidth 200pxに指定すると位置がズレてしまいます。
ググってみると、こんなページが。
そのまま使用！左右幅、色を指定して出来上がりです。こんな簡単な事が出来ないなんて・・・。でも、少しずつ進んでいます。
実は数日、暇を見ては検索したりして、トップページにtwitterのタイムラインを表示する方法を調べてました。HTMLとjavascriputを使ったやつで試したんですが、全然表示せず。どうやら記事元も表示できていないので仕様が変わったようです。もう少し調べていると、twitterのパージからウィジェットの設定が出来、そのコードを貼るだけとわかりました。これって、ブログに貼るのと同じ！そうです、同じです。
ウィジェットの設定ページ → https://twitter.com/settings/widgets
私の場合ですと、左のサイドメニューの一番下に設置したいので、<div sidemenu></div>の間にコードをペースト。見ると、このコードは
a class”twiter-timelin”
となってます。そのまま貼ったら幅が上のバナーと合わなかったので
.twitter-timeline{padding-top:20px;width:200px;height:400;}
と、幅200px(上のバナーと同じ）パディングトップ20pxになるようにCSSに変更を加え、無事終了です。どうせ、またすぐ忘れるので、ここにメモっときます。
前にもやったのに、すぐ忘れてしまいます。
まずはgooglemapで表示しい地図を出します。今回は自分のgoogleakアカウントで登録してある会社のマップを保存。そのマップをHPに表示します。
詳しい方法は https://support.google.com/maps/answer/72644?hl=ja に書いてあります。
サイドバーの右上に鎖マークがあるのでクリック。
HTMLコードがでてきますので、貼り付ければ終わりです。
こんなにカンタンとは思わなかったのでメモ。
html
<a href=”http://magic-design.org/html/about.html class menu”><img src=”../img/global_02.gif”></a>
css
a.menu:hover{
opacity:0.6;
filter:alpha(opacity=60);}
■問題点：CSSでポジションの設定がうまくいかない
↓うまくいかなかった設定
親ボックスに position:relative; 画像にposition:absolute;を設定。一つ目の画像のみ位置設定が効くが2.3個目が効かない。
CSS
#menubord{
width:700px;
height:700px;
float:right;
padding:0px;
position:relative;
background-color:red;
}
.menu_a{
position:absolute;
left:20px;
top:10px;
.menu_b{
position:absolute;
left:50px;
top:10px;
}
.menu_c{
position:absolute;
left:1200px;
top:10px;
}
HTML
<div id=”menubord”>
<p class=”menu_a”><img src=”../img/menubord01.png”></p>
<p class=”menu_b”><img src=”../img/menubord02.png”></p>
<p class=”menu_c”><img src=”../img/menubord03.png”></p>
</div>
→→→→→→→→
ボックスを横に3つ並べて、それぞれに画像を入れる事で回避。この方法が正しいかどうかはわからない。
Design space magic
Proudly powered by WordPress | テーマ: Baskerville 2 by Anders Noren