HTML | 相模原市ホームページ制作 ロックストリーム https://rockstream-jp.com 相模原市WEBサイト制作・カスタム・修復 Mon, 05 Nov 2018 04:31:40 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 【Javascript】HTML 4.01 Transitionalでレスポンシブにする方法 https://rockstream-jp.com/html4-0-responsive/?utm_source=rss&utm_medium=rss&utm_campaign=html4-0-responsive https://rockstream-jp.com/html4-0-responsive/#respond Fri, 02 Mar 2018 03:05:40 +0000 https://rockstream-jp.com/?p=10879 備忘録です。 WordPressや静的ページのコーディングではHTML5あるいXHTMLを使っていますが、レスポンシブの場合、HT...

The post 【Javascript】HTML 4.01 Transitionalでレスポンシブにする方法 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

WordPressや静的ページのコーディングではHTML5あるいXHTMLを使っていますが、レスポンシブの場合、HTML5で対応をしています。

HTML 4.01 Transitionalではどうなのだろうかと思い調べました。

参考サイト
HTML 4.01とXHTML 1.0とHTML 5、どれを選択すべき？

下記よりrespond.jsをダウンロードします。
https://github.com/scottjehl/Respond

head内に記述
※ディレクトリは任意の場所

<link href="/css/style.css" rel="stylesheet" type="text/css">
<script charset="utf-8" src="/js/respond.min.js" type="text/javascript"></script>

注意点としては、CSSファイルを指定したlinkタグの後に記述しなければいけない、ということです。

The post 【Javascript】HTML 4.01 Transitionalでレスポンシブにする方法 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/html4-0-responsive/feed/ 0 【metaタグ】Edgeの電話番号がリンクになった場合 https://rockstream-jp.com/edge-tel-link/?utm_source=rss&utm_medium=rss&utm_campaign=edge-tel-link https://rockstream-jp.com/edge-tel-link/#respond Mon, 29 May 2017 06:47:20 +0000 https://rockstream-jp.com/?p=4103 備忘録です。 普段はFirefox、Chromeを使っているので、気づきませんでしたが、Edgeだけ電話番号が勝手にリンクになって...

The post 【metaタグ】Edgeの電話番号がリンクになった場合 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

普段はFirefox、Chromeを使っているので、気づきませんでしたが、Edgeだけ電話番号が勝手にリンクになってしまいます。
本当にマイクロソフトのブラウザは面倒ですね。

しかし、下記タグをheadに追加して解決です。

<meta name="format-detection" content="telephone=no">

参考サイト
Edgeで電話番号がリンクになっちゃうやつ

関連して、電話番号がスカイプのアイコンになる場合には、下記を参考にしてください。
【metaタグ】ブラウザの電話番号をSkypeアイコンにしない方法



The post 【metaタグ】Edgeの電話番号がリンクになった場合 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/edge-tel-link/feed/ 0 【Javascript】Google Mapsでオリジナルのマーカーを表示 https://rockstream-jp.com/javascript-google-maps-original-maker/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-google-maps-original-maker https://rockstream-jp.com/javascript-google-maps-original-maker/#respond Fri, 12 May 2017 01:24:10 +0000 https://rockstream-jp.com/?p=4087 備忘録です Google Mapでオリジナルのマーカーを表示する方法です。 参考サイト (K)GoogleMapをサイトに埋め込ん...

The post 【Javascript】Google Mapsでオリジナルのマーカーを表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です

Google Mapでオリジナルのマーカーを表示する方法です。

参考サイト
(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法も

head部分に以下のスクリプトを記述

<script src="https://maps.google.com/maps/api/js?key=****"></script>

keyの箇所にはAPIコードを入れてください。
取得方法はこちらを参考にしてください。

bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。
スクリプトで取得するidを「access_map」にしています。ここは任意で設定して構いません。

<body onload="initialize();">

<div id="access_map"></div>

</body>

CSSで縦横サイズを指定

#access_map{
     width: 100%;
     height:300px;
}

位置情報などの情報をhead内に記述

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(35.710403, 139.811076);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);
}
</script>

LatLng(35.710403, 139.811076)は経度、緯度です。Google Mapsで取得してください。
なお、マーカーの位置をずらしたい場合には、上の経度、緯度の小数点以下を少しずつ変えると位置調整ができます。
getElementById('access_map')で地図表示のためのid「access_map」を指定。

オリジナルマーカーを表示するためのスクリプト
マーカーを画像にするコードは以下

 var icon = new google.maps.MarkerImage('marker.png',
  new google.maps.Size(156,198),/*アイコンサイズ設定*/
  new google.maps.Point(0,0),  // origin
  new google.maps.Point(60,100) // anchor
  );
var markerOptions = {
  position: latlng,
  map: map,
  icon: icon,
  title: '場所名など'
};

「marker.png」がマーカーの画像名です。
画像が任意のディレクトリにある場合は、「/images/marker.png」のように記述します。

まとめると

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで
}
</script>

レスポンシブの場合、上記だけだとマーカーが中心からずれてしまいます。

そこで、マーカーを中心に表示するコードを追加します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで

  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
</script>

さらに吹き出しを追加する場合は、以下を追加します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで

  //吹き出しを作成
   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });


    //吹き出しをオープン
    infowindow.open(map,marker);


    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
</script>

吹き出しのCSSを設定します。

h3.map_title{
  text-align: center;
  font-size: 16px;
}
p.map_comment{
  padding:0 30px;
}

次はGoogle Mapsを白黒で表示



The post 【Javascript】Google Mapsでオリジナルのマーカーを表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/javascript-google-maps-original-maker/feed/ 0 【Twitter】シェアボタンのリンク設定について https://rockstream-jp.com/twitter-sharebutton/?utm_source=rss&utm_medium=rss&utm_campaign=twitter-sharebutton https://rockstream-jp.com/twitter-sharebutton/#respond Fri, 10 Feb 2017 10:43:48 +0000 https://rockstream-jp.com/?p=3703 備忘録です。 TwitterのシェアボタンにURL、テキスト、ハッシュタグを追加する方法です。 参考サイト ツイッターのシェアボタ...

The post 【Twitter】シェアボタンのリンク設定について first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

TwitterのシェアボタンにURL、テキスト、ハッシュタグを追加する方法です。

参考サイト
ツイッターのシェアボタンにハッシュタグを設定する
今の時代必ず知っておくべき！！Twitterツイートボタンの設置・実装方法まとめ

シェアボタンのリンクの書き方です。

<a href="http://twitter.com/share?url=[シェアするURL]&text=[ツイート内テキスト]&via=[ツイート内に含むユーザ名]&related=[ツイート後に表示されるユーザー]&hashtags=[ハッシュタグ]" target="_blank">

シェアボタンのリンクサンプルです。

<a href="https://twitter.com/share?url=http://www.https://rockstream-jp.com&text=相模原のホームページ制作&hashtags=Wordpress,ECCUBE,相模原" target="_blank">ボタン画像など</a>

The post 【Twitter】シェアボタンのリンク設定について first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/twitter-sharebutton/feed/ 0 【WordPress】htmlページにWPのRSSを表示する https://rockstream-jp.com/wordpress-html-wp-rss/?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-html-wp-rss Thu, 24 Nov 2016 03:25:49 +0000 https://rockstream-jp.com/?p=1632 備忘録です。 GoogleがAPIの配信を止めると使えなくなりそうです。参考程度でご覧ください。 htmlページにWordpres...

The post 【WordPress】htmlページにWPのRSSを表示する first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

GoogleがAPIの配信を止めると使えなくなりそうです。参考程度でご覧ください。

htmlページにWordpressのRSSフィードを表示する方法です。

基本となるソースコードはこちらから取得できます。
https://developers.google.com/feed/v1/devguide

参考サイト
[Google API] Google AJAX Feed APIによるRSSフィードの新着情報の表示

head内に下記ソースコードを追加
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// JavaScript Document
google.load("feeds", "1");
 
function initialize() {//initialize関数の定義
  var feedurl = 'http://buburinweb.wp.xdomain.jp/feed/';//RSSフィードのURLの定義
 
  var feed = new google.feeds.Feed("feedurl");
  feed.setNumEntries(5);//RSSフィードの表示数
  feed.load(dispfeed);
 
  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById('feed');//divタグ内のid名と対応
      var htmlstr = '';//空の入れ物を用意
 
      htmlstr += '<ul>';//上書きではなく、入れ物に追加
      for (var i = 0; i < result.feed.entries.length; i++) {//RSSフィードの数だけ繰り返す
        var entry = result.feed.entries[i];//配列の定義
        var text = entry.contentSnippet.substr(0,100);
        htmlstr += '<li class=\"blog_list\">';//liタグへのクラスの設定
        htmlstr +=  createDateString(entry.publishedDate);//日付の追加
        htmlstr += '<a href=\"' + entry.link + '\">' + entry.title + '</a> ';//entry内のリンクとタイトルによるリンクの追加
        htmlstr += '</li>';
      }
      htmlstr += '</ul>';
      container.innerHTML = htmlstr;
    }else{//エラーの場合の処理
       alert(result.error.code + ':' + result.error.message);
    }
  }
}
 
//日付表記を変換、月と日の2桁表示
function createDateString(publishedDate){//publishedDateを受け取ったcreateDateString関数の定義
  var pdate = new Date(publishedDate);
  var pday = pdate.getDate();
    if (pday < 10) {pday = "0" + pday;}
  var pmonth = pdate.getMonth() + 1;
    if (pmonth < 10) {pmonth = "0" + pmonth;}
  var pyear = pdate.getFullYear();
  var strdate = pyear + "年" + pmonth + "月" + pday + "日" ;
  return strdate;
}
google.setOnLoadCallback(initialize);
</script>
bodyに下記コードを追加
<div id="feed"></div>
表示を整えるためのCSS
#feed {
    margin-bottom: 20px;
}
#feed li {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
    white-space: nowrap;
}
#feed li:last-child {
    border: none;
}
.blog_list, .blog_list_old {/**/
    list-style: none;
    padding: 5px 10px;
    color: #000000;
    border-bottom: #000000 1px dashed;
}
.blog_list a {
    margin-left: 10px;
    text-decoration: none;
}
.blog_list a:hover {
    color: red;
}

The post 【WordPress】htmlページにWPのRSSを表示する first appeared on 相模原市ホームページ制作 ロックストリーム.]]> 【metaタグ】ブラウザの電話番号をSkypeアイコンにしない方法 https://rockstream-jp.com/metatag-browser-skypeicon/?utm_source=rss&utm_medium=rss&utm_campaign=metatag-browser-skypeicon Wed, 15 Jun 2016 00:55:47 +0000 https://rockstream-jp.com/?p=1398 Skypeは便利なんですけど、ブラウザの電話番号がSkypeアイコンになるのはちょっとどうかな？って思いますよね。 ブラウザのアド...

The post 【metaタグ】ブラウザの電話番号をSkypeアイコンにしない方法 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

Skypeは便利なんですけど、ブラウザの電話番号がSkypeアイコンになるのはちょっとどうかな？って思いますよね。

ブラウザのアドオンを無効にすればいいのですが、皆さんがそのように対応するかどうかはわかりません。

そこで、metaタグを以下のようにすると電話番号がSkypeのアイコンになるのを防ぎます。

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

以上、備忘録でした。



The post 【metaタグ】ブラウザの電話番号をSkypeアイコンにしない方法 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> 【WordPress】WPの記事をHTML（PHP）で読み込む方法 https://rockstream-jp.com/wordpress-wp-post-html/?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-wp-post-html https://rockstream-jp.com/wordpress-wp-post-html/#respond Wed, 27 Jan 2016 02:58:07 +0000 https://rockstream-jp.com/?p=3654 備忘録です。 WordPressの記事一覧をHTML(PHP)で読み込む方法についてです。 参考サイト WordPressの外にあ...

The post 【WordPress】WPの記事をHTML（PHP）で読み込む方法 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

WordPressの記事一覧をHTML(PHP)で読み込む方法についてです。

参考サイト
WordPressの外にあるHTMLで投稿情報を表示する

WordPressのテンプレートタグ(関数)が使用できるよう、wp-load.phpというファイルを読み込みます。
下記のようなコードをHTMLファイルの先頭に配置してください。
●●.phpに書くことと同じサーバ内にあることを前提としています。

<?php require_once( dirname(__FILE__) . '/wp-load.php' ); ?>

別のディレクトリにWordpressをインストールしている場合は下記になります。
wpディレクトリにインストールしている場合

<?php require_once( dirname(__FILE__) . '/wp/wp-load.php' ); ?>

記事一覧を読み込むタグを書きます。

<!-- WPの記事を5件表示 -->
<?php query_posts( 'posts_per_page=5' ); ?>
<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
	<!-- 投稿 -->
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <!-- 投稿日時 -->
            <span class="post-date"><?php the_time( 'Y/m/d' ); ?></span>
            <!-- /投稿日時 -->
            <!-- タイトル(リンク付きタイトル) -->
            <span class="post-title">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </span>
            <!-- /タイトル --> 
            <!-- キャッチアップ画像 -->
            <p>
            <?php if ( has_post_thumbnail() ) :?>
            <?php the_post_thumbnail('thumbnail'); ?>
            <?php else: ?>
            </p>
            <!-- /キャッチアップ画像 -->
	</div>
	<!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->

完成コード

<?php require_once( dirname(__FILE__) . '/wp-load.php' ); ?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>テスト</title>
</head>
<body>
 
<?php query_posts( 'posts_per_page=5' ); ?>
<!-- ループ -->
<?php while ( have_posts() ) : the_post(); ?>
	<!-- 投稿 -->
	<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<!-- 投稿日時 -->
		<span class="post-date"><?php the_time( 'Y/m/d' ); ?></span>
		<!-- /投稿日時 -->
		<!-- タイトル(リンク付きタイトル) -->
		<span class="post-title">
		    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</span>
		<!-- /タイトル -->
                <!-- キャッチアップ画像 -->
                <p>
                <?php if ( has_post_thumbnail() ) :?>
                <?php the_post_thumbnail('thumbnail'); ?>
                <?php else: ?>
                </p>
                <!-- /キャッチアップ画像 -->
	</div>
	<!-- /投稿 -->
<?php endwhile; ?>
<!-- /ループ -->
 
</body>
</html>

ちなみに●●.htmlでもphpが使えるようにすれば大丈夫です。方法は割愛します。

ショートコードを使うとContact Form 7も使えます。
※Contact Form 7の問い合わせフォームを事前に用意してください。

<?php echo do_shortcode( '[contact-form-7 id="0" title="お問い合わせフォーム"]' ); ?>

IDとtitleは設定したものに書き換えてください。

The post 【WordPress】WPの記事をHTML（PHP）で読み込む方法 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/wordpress-wp-post-html/feed/ 0