708netのブログ -4ページ目
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

708netのブログ

Web系で役立つネタを書いていきたいと思います。

facebook : https://www.facebook.com/weblog.jp

<< 前ページ次ページ >>

CSSで均等割り付け


WEBの文字の流れで、両端を揃えたいというときのCSSの書き方

p {
  text-align: justify;
  text-justify: distribute-all-lines;
}

自分は両端揃ってないと気持ち悪いので、よく使ってます。

GoogleMapをWebページに載せる方法。


GoogleMapをWebページに設置する方法があると思いますが、自分は下記の方法で設置しています。

JavaScript

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>
$(function(){
   // タブの設定
   $('#g_map1').hide();

       $('#g_map1').show().html('<div id="map1"></div>');
       
 var myMap = new google.maps.Map(document.getElementById("map1"), {
   // ズームレベル
   zoom: 14,
   // 地図の中心点の緯度経度
   center: new google.maps.LatLng(35.681382, 139.766084),
   // 距離目盛り表示
   scaleControl: true,
   // 地図の種類
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   
   mapTypeControl: true,
   mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
   },
   zoomControl: true,
   zoomControlOptions: {
     style: google.maps.ZoomControlStyle.SMALL
   },
 }); 
 
 var contentString="<div id='infowin1' style='font:14px;'>東京駅</div>";
 var myInfoWindow = new google.maps.InfoWindow({
   content: contentString
 });
 var myMarker = new google.maps.Marker({
   // マーカーを置く緯度経度
   position: new google.maps.LatLng(35.681382, 139.766084),
   map: myMap
 });
 
 // 吹き出しを表示
 myInfoWindow.open(myMap, myMarker);
 // 吹き出しが閉じられたら場合、マーカークリックで再表示
 google.maps.event.addListener(myInfoWindow, "closeclick", function() {
   google.maps.event.addListenerOnce(myMarker, "click", function(event) {
     myInfoWindow.open(myMap, myMarker);
   });
 });  
       

});</script>

を</head>の上に入れます。

あとは、地図を入れたいところに、

<div id="map1"></div>

を入れれば完了です。

ページに複数GooleMapを入れたい場合は、JavaScriptを同じく下にコピペし、
map1をmap2とかに変更。

もちろん、<div id="map2">に変更して下さいね。

これで完了です。

経度緯度をしらべるサイトはこちらです。

住所から緯度経度を検索


JavaScriptで営業カレンダー


jsで作られてる営業カレンダーを探してました。

SYNCK GRAPHICA　さんで無料提供している　「営業日・定休日カレンダー」　を使ってみました。

かなり、使えます！！

ちょっとした、営業日カレンダーをwebに載せたいとときはオススメです。

js内でカレンダーの色々設定ができます。

あとは、CSSで体裁はうまくやってもらってって感じです。

等幅フォント　「monospace」


web制作を7年以上してきて、先日まで、等幅フォントがあるなんてわかりませんでした（汗）

Windows, Macに標準にインストールされてるんですね。

div{
    font-family: monospace;
}

書体があまり好きでないですが・・・等幅指定をされたら、これを使うしかないですね。

CSS３で角丸にする方法


CSS3で角丸にする方法は、自分もよく使います。

IEの6～8が確か対応してないのです（汗）
そこで、一技つかいます。
「border-radius.htc」というのを使います。
border-radius.htcでググればDLできます。
これをcssの中にいれます。

div{
-webkit-border-radius: 3px;     /* for Safari and Chrome */
moz-border-radius: 3px;    /* for Firefox */
-o-border-radius: 3px;  /* when Opera Presto 2.3 or later is released */
-khtml-border-radius:3px;   /* Linux browsers */
border-radius: 3px;     /* CSS3 */
        behavior: url(css/border-radius.htc); /* IE用 */
}


}これで角丸対応ができると思います(^^)v
試して見て下さい！

トップページのニュースの表示の方法


トップページには、ほぼトピックスやニュースなどありますよね。

そのコードの書き方を書いときたいと思います。

html

<div id="news-box">
<dl>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
<dt>2015年01月03日</dt><dd><a href="#">明けましておめでとうございます。</a></dd>
</dl>
</div>

css

#news-box{
width:920px;
height:auto;
}

#news-box dl{
width:920px;
height:auto;
margin:0;
padding:0;
}

#news-box dl dt{
float:left;
clear:both;
font-size:12px;
margin-right:15px;
color:#0099cc;
}

#news-box dl dd{
font-size:12px;
color:#333;
padding-left:105px;
}

#news-box dl dd a{
font-size:12px;
color:#333;
text-decoration:none;
}

#news-box dl dd a:hover{
font-size:12px;
color:#333;
text-decoration:underline;
}


これでOKです。
あとは、上手く、CSSを自分なりに色々書き換えて見て下さい(^^)v




一定期間、NEWマークを付ける方法。


2015年も初まりました！
始めたばかりのブログですが、長続きするように頑張って書いてきたいと思います(・∀・)

JavaScript

<script language="JavaScript">
<!--
function newUp(y, m, d, c) {
  delDay = 7; // 何日後に削除するかの意味です。
  oldDay = new Date(y + "/" + m + "/" +d);
  newDay = new Date();
  d =(newDay - oldDay) / (1000 * 24 * 3600);
  if(d <= delDay) {
    if(c == "new") document.write("<span>new!</span>");
  }
}
//-->
</script>


ｈｔｍｌ
 <dt>2015.1.1　<script>newUp(2015,1,1,"new")</script></dt><dd><a href="message">新年あけましておめでとうございます</a></dd>

これで解決です(^^)v

あっ、
JavaScript
<span>new!</span>のところを画像のimgタグ（img src ="")で指定すれば画像も使えます。



index.htmlをindex.phpにリダイレクトする方法


前回書いた、「ブログを更新すると、ホームページにブログタイトルを表示する方法（PHPでのやり方）」
の流れで、
index.htmlがindex.phpに変更したら、index.htmlでリンク貼られたり、ブックマークされてたらまずいっすよね。

そこで　index.htmlをindex.phpにリダイレクトする方法


htaccessに下記を書いて下さい。

DirectoryIndex index.php index.html index.cgi
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html?$ / [NC,R,L]
</IfModule>

これを、indexのあるところにUP。

解決です(^^)v

ブログを更新すると、ホームページにブログタイトルを表示する方法（PHPでのやり方）


を書きましたがた、phpのやり方を書きたいと思います。



<dl>
<?php
$rss = simplexml_load_file("RSSのURLを入れる);
$i = 0;
foreach ($rss->channel->item as $item) {
    if( $i++ == 5 ) { break; }
    $link = $item->link;
    $title = $item->title;
    $date = date('Y.m.d', strtotime($item->pubDate));
    $desc =$item->description;
    echo '<dt>' . $date . '</dt>';
    echo '<dd><a href="' . $link . '" target="_blank">' . $title . '</a></dd>';
}
?>
</dl>


解決です(^^)v


アメブロのRSSから広告を取り除く方法

前回の記事　「ブログを更新すると、ホームページにブログタイトルを表示する方法」

で、RSSでホームページにブログタイトルを表示する方法を書きましたが、

アメブロでは（他にブログでは試したことはない）タイトルと広告が入ってしまいます。

うわぁ～広告表示はうざいなぁとおもいますよね。

そこで、広告表示を消す？表示しない方法を書きたいと思います。


こちらのサイトのサービスを使います。

http://pipes.yahoo.com/pipes/pipe.info?_id=b06243cb4a066044215b0d350d45a03

RSSのアドレスを入れ、Run Pipeボタンをクリック。


Get as RSSのURLをコピーして、前回の記事のRSSが入ってた所に入れ無し。

これで、広告表示はなくなりました。



素晴らしいですね(^^)v
<< 前ページ次ページ >>