yutaide’s gists

yutaide / footer_place.js

Created June 19, 2019 15:16

フッターをブラウザ最下部に固定配置する方法

	//画面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){

yutaide / navbar3.php

Created May 19, 2019 15:29

完成形コード

yutaide / categorylink.php

Created May 19, 2019 15:18

カテゴリーページへのリンク

	<?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>

yutaide / navbar2.html

Created May 19, 2019 14:16

navbar2

	<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>

yutaide / navbar.html

Created May 19, 2019 13:53

Bootstrap公式サイトのNavbarサンプルコピペ

	<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>

yutaide / index.html

Last active May 19, 2019 14:01

Bootstrap導入済みのHTML雛形(コピペしてからコーディングしてください)

yutaide / index.html

Created April 18, 2019 09:59

bs隙間系5

	<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">

yutaide / index.html

Created April 18, 2019 09:52

bs隙間系4

	<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">

yutaide / index.html

Created April 18, 2019 09:44

bs隙間系3

	<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">

yutaide / index.html

Created April 18, 2019 09:42

bs隙間系2

	<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">