yutaide

## footer_place.js
//画面loadとresize時に実行する関数
$(window).on('load resize', function(){
//コンテンツの最後のdiv要素の座標を取得して、フッターをブラウザ底部に配置
    var offsetVal = $('#end_of_the_page').offset(); //コンテンツの最後に配置した空のdiv要素の上端までのオフセット
    var h_end = $('#end_of_the_page').outerHeight(); //空のdiv要素の高さ(border等付けてないので無くても動作するとは思います)
    var h = window.innerHeight; //ブラウザの表示領域の高さ
    var gap = h - (offsetVal.top + h_end); //ブラウザの高さと空のdivの底部までのオフセットとの差(コンテンツが少なくブラウザの底部に届いていなければ正の値)
    var h_footer = $('#footer').outerHeight(); //フッターの高さ(フッターにid="footer"をつけてください)
    var set_h = gap - h_footer; //空のdivに適用する高さ(height)
    if(gap > h_footer){

## navbar3.php
<!--
******************************
@初期設定
HTMLテンプレート
HTMLバージョン:HTML5
文字コード:UTF-8
Bootstrap
******************************
-->
<!DOCTYPE html>

## categorylink.php
<?php
$category_id = get_cat_ID('Blog');//指定したカテゴリーのIDを取得
$category_link = get_category_link($category_id);//このカテゴリーのURLを取得
?>
<li class="nav-item">
    <a class="nav-link" href="<?php echo esc_url($category_link); ?>">Blog <span class="sr-only">(current)</span></a>
</li>

## navbar2.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

## navbar.html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

## index.html
<!--
******************************
@初期設定
HTMLテンプレート
HTMLバージョン:HTML5
文字コード:UTF-8
Bootstrap
******************************
-->
<!DOCTYPE html>

## index.html
<div class="container" style="padding: 10px; background-image: url(./images/star.gif)"> <!-- .containerに背景画像を設定 -->
    <div class="row" style="background-color: green; margin-left: 0; margin-right: 0;">
        <div class="col-sm-4" style="background-color: blue; padding: 0;">
            <img src="./images/img1.jpg">
        </div>
        <div class="col-sm-4" style="background-color: yellow; padding: 0;">
            <img src="./images/img4.jpg">
        </div>
        <div class="col-sm-4" style="background-color: purple; padding: 0;">
            <img src="./images/img5.jpg">

## index.html
<div class="container" style="background-color: red; padding: 10px;">
    <div class="row" style="background-color: green; margin-left: 0; margin-right: 0;">
        <div class="col-sm-4" style="background-color: blue; padding: 0;"> <!-- padding:0指定-->
            <img src="./images/img1.jpg">
        </div>
        <div class="col-sm-4" style="background-color: yellow; padding: 0;"> <!-- padding:0指定-->
            <img src="./images/img4.jpg">
        </div>
        <div class="col-sm-4" style="background-color: purple; padding: 0;"> <!-- padding:0指定-->
            <img src="./images/img5.jpg">

## index.html
<div class="container" style="background-color: red; padding: 10px;"> <!-- padding:10px指定 -->
    <div class="row" style="background-color: green; margin-left: 0; margin-right: 0;"> <!-- .rowのネガティブマージンを削除 -->
        <div class="col-sm-4" style="background-color: blue;">
            <img src="./images/img1.jpg">
        </div>
        <div class="col-sm-4" style="background-color: yellow;">
            <img src="./images/img4.jpg">
        </div>
        <div class="col-sm-4" style="background-color: purple;">
            <img src="./images/img5.jpg">

## index.html
<div class="container" style="background-color: red; padding: 10px;"> <!-- 単にpadding:10pxと指定 -->
    <div class="row" style="background-color: green;">
        <div class="col-sm-4" style="background-color: blue;">
            <img src="./images/img1.jpg">
        </div>
        <div class="col-sm-4" style="background-color: yellow;">
            <img src="./images/img4.jpg">
        </div>
        <div class="col-sm-4" style="background-color: purple;">
            <img src="./images/img5.jpg">
	//画面loadとresize時に実行する関数
	$(window).on('load resize', function(){
	//コンテンツの最後のdiv要素の座標を取得して、フッターをブラウザ底部に配置
	var offsetVal = $('#end_of_the_page').offset(); //コンテンツの最後に配置した空のdiv要素の上端までのオフセット
	var h_end = $('#end_of_the_page').outerHeight(); //空のdiv要素の高さ(border等付けてないので無くても動作するとは思います)
	var h = window.innerHeight; //ブラウザの表示領域の高さ
	var gap = h - (offsetVal.top + h_end); //ブラウザの高さと空のdivの底部までのオフセットとの差(コンテンツが少なくブラウザの底部に届いていなければ正の値)
	var h_footer = $('#footer').outerHeight(); //フッターの高さ(フッターにid="footer"をつけてください)
	var set_h = gap - h_footer; //空のdivに適用する高さ(height)
	if(gap > h_footer){
	<!--
	******************************
	@初期設定
	HTMLテンプレート
	HTMLバージョン:HTML5
	文字コード:UTF-8
	Bootstrap
	******************************
	-->
	<!DOCTYPE html>
	<?php
	$category_id = get_cat_ID('Blog');//指定したカテゴリーのIDを取得
	$category_link = get_category_link($category_id);//このカテゴリーのURLを取得
	?>
	<li class="nav-item">
	<a class="nav-link" href="<?php echo esc_url($category_link); ?>">Blog <span class="sr-only">(current)</span></a>
	</li>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">

	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item active">
	<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item active">
	<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	<div class="container" style="padding: 10px; background-image: url(./images/star.gif)"> <!-- .containerに背景画像を設定 -->
	<div class="row" style="background-color: green; margin-left: 0; margin-right: 0;">
	<div class="col-sm-4" style="background-color: blue; padding: 0;">
	<img src="./images/img1.jpg">
	</div>
	<div class="col-sm-4" style="background-color: yellow; padding: 0;">
	<img src="./images/img4.jpg">
	</div>
	<div class="col-sm-4" style="background-color: purple; padding: 0;">
	<img src="./images/img5.jpg">
	<div class="container" style="background-color: red; padding: 10px;">
	<div class="row" style="background-color: green; margin-left: 0; margin-right: 0;">
	<div class="col-sm-4" style="background-color: blue; padding: 0;"> <!-- padding:0指定-->
	<img src="./images/img1.jpg">
	</div>
	<div class="col-sm-4" style="background-color: yellow; padding: 0;"> <!-- padding:0指定-->
	<img src="./images/img4.jpg">
	</div>
	<div class="col-sm-4" style="background-color: purple; padding: 0;"> <!-- padding:0指定-->
	<img src="./images/img5.jpg">