Skip to content

Instantly share code, notes, and snippets.

View okuden-labo's full-sized avatar

Toshihiro Okuda okuden-labo

View GitHub Profile
@okuden-labo
okuden-labo / shortcode-section.html
Created April 3, 2019 07:00
Grav shortcode core section2
<article class="message">
<div class="message-header">
<p>author部分の表示</p>
</div>
<div class="message-body">
{{ shortcode.section.author }}
</div>
</article>
<div class="entry">
@okuden-labo
okuden-labo / shortcode-section.md
Last active April 3, 2019 06:59
Grav shortcode core section 

[section name="author"]

### この文章はダミーテキストです
![](tiger.jpg?cropResize=200,200&classes=is-pulled-right)

**この文章はダミーテキストです。**この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。　　
この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。この文章はダミーテキストです。　　
@okuden-labo
okuden-labo / shortcode-figure.md
Created April 3, 2019 06:19
Grav shortcode coreのfigure要素 
[figure id="cat" class="image" caption="塀の上を歩く猫"]![猫](cat.jpg)[/figure]
@okuden-labo
okuden-labo / shortcode-span.md
Last active April 3, 2019 06:19
Grav shortcode coreのspan要素 

[span class="tag is-danger"]
Danger
[/span]
@okuden-labo
okuden-labo / shortcode-div.md
Last active April 3, 2019 06:20
Grav shortcode coreのdiv要素 

[div class="notification"]
Lorem ipsum dolor sit amet, **consectetur** adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
[/div]

[div class="table is-striped"]
| header 1 | header 2 |
|----------|----------|
| Three | Four |
@okuden-labo
okuden-labo / jquery-tab.md
Created February 22, 2018 02:31
jQueryのタブ切り替えはたくさんありますが、複数設置に対応したものは多くないので貴重です。

jQuery複数設置に対応したタブ切り替え

html

<div class="js-tab-wrap">
	<ul>
		<li class="js-tab-btn current">タブ1</li>
		<li class="js-tab-btn">タブ2</li>
		<li class="js-tab-btn">タブ3</li>
		<li class="js-tab-btn">タブ4</li>
@okuden-labo
okuden-labo / css-sample.html
Last active December 19, 2017 02:16
:target疑似クラスを使って、コンテンツを表示・非表示することで、簡易版の開閉パネルを作成。 参考サイト：http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>:target疑似クラスを使って、コンテンツを表示・非表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
#comments {
padding-top: 70px;
}
@okuden-labo
okuden-labo / htaccess.txt
Last active April 26, 2018 20:18
表示速度を改善するhtaccessの書き方
# BEGIN Browser Cache
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
@okuden-labo
okuden-labo / CSS3の擬似クラスの利用.md
Created June 24, 2016 08:46
CSS3の擬似クラスの利用

CSS3の擬似クラスの利用

CSS3の擬似クラスを使うとセレクタを柔軟に指定することができます。

  • x番目の要素 - :nth-of-type(x)
  • x番目以降の要素 - nth-of-type(n+x)
  • 奇数の要素 - :nth-of-type(odd) nth-of-type(2n+1)
  • 偶数の要素 - :nth-of-type(even) :nth-of-type(2n)
  • 最初の要素 - :first-of-type
  • 最初の要素以外の要素 - :not(:first-of-type) :nth-of-type(n+2)
@okuden-labo
okuden-labo / 2015年度版_WEBサイトの高速化.md
Created June 7, 2016 06:57
[2015年度版]WEBサイトの高速化

01.サイトのページスピードを確認する方法

まずはサイトのページスピードを下記のサイトで確認しましょう。

サイト表示速度チェックツール

02.CSSの読み込みを最適化する

  • cssからcssをインポートする@importは使わない
  • htmlからcssのインクルードは、＜head＞タグの中などhtmlの先頭近くに置く