青春18ぶらり旅: Script&Style

Blogger管理ページの[テーマ]-{カストマイズ}-[HTMLの編集]で、追加修正スタイルとjqueryスクリプトを追加した。これにより投稿でjquery UIを記述できる。ただし、▶windows版のみ動作 ⚠️スマホ版は動作しない。

標準スタイル

記事タイトル

.post h3 { font-weight:bold; font-size:150%;}
<h3>投稿記事</h3>

画像の幅100%

.w100 { width:100%; padding:0; }
<img class="w100" src="~">

ナレッジグラフ
👁️‍🗨️恋愛適齢期 //g.co/kgs/PsyPf3

動画 .video

  <div style="position:relative;width:100%;display:inline-block;">
    <div style="padding-top:56.25%;"></div>
    <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" src="url"></iframe>
  </div>

🎦YouTube恋愛適齢期 //bit.ly/2Gfrvon onclick="javascript:location.href='#up'"

👁️‍🗨️ナレッジグラフ(β版) 「ローマの休日」

CSS3 tooltips

<i class="tool">項目<i class="tips">説明</i></i>

　項目1 項目にカーソルを重ねるとここが表示 　項目2 同じ段落に二つ以上書けるようにした。 　項目3テキストの説明

トグル Toggle script

#toggleをクリックして#textを開く/閉じる

ここに #text の内容を書く

<h3 id="toggle">toggle.click</h3>
  <div id="text">
   ここに #text の内容を書く
  </div>
⚠️スクリプトはタグの後に書く！
  <script>
    $('h3#toggle').click(function() { $('div#text').toggle(1000); })
  </script>

fadeToggle.hover ⚠️スマホではタップする

この部分が表示 ⚠️スマホ版ではこの部分をタップして閉じる

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function () { $('.toggle').hover(function() {$(this).next('div').toggle(); },
 function(){ $(this).next('div').hide(); }); });</script>
<style>.toggle { cursor:default; } .hide { display: none; }</style>

<h3 class="toggle">toggle</h3>
<div class="hide">この部分が表示</div>

▶︎jQuery toggle ここをクリックすると次の<div>が表示

ここをクリックすると閉じる。⚠️ページ内に複数書ける。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(function () { $('.toggle').hover(function() {$(this).next('div').toggle(); },
 function(){ $(this).next('div').hide(); }); });</script>

.toggle { cursor:default; }
.hide { display: none;  }

<h5 class="toggle">  ▶︎jQuery toggle ここをクリック</h5>
<div class="hide">ここがトグルの内容</div>

DTクリックDD表示

<dl id="toggle">
    <dt>項目1</dt>　<dd>説明１…</dd>
    <dt>項目2</dt>　<dd>説明２…</dd>
</dl>

項目1 - DT要素をクリックするとDD要素「説明1…」が表示: 説明1…
項目2 - 「説明2…」が表示: 説明2…

等間隔に配置 flex

ul.flex {
  display:flex; 
  }
ul.flex li {
  flex-basis:auto; 
  white-space:nowrap;
  overflow:hidden;
  }
ul.flex li img {
  width:100%; height:100%;
  }

チャン
(39歳) 1981年
160cm
運命のように
君を愛す
チャン
(39歳) 1981年
160cm
運命のように
君を愛す
チャン・ナラ
(39歳) 1981年
160cm
運命のように
君を愛す
パク・シネ
(30歳)

1981年
168cm
となりの美男
ピノキオ
ハン・ジミン

(37歳)

要素の幅に応じて比例配置する

要素AAAAAAAAAAAAAAAAAAA　
要素BBBBBBBB　
要素CCCCC　
要素DD　
要素AAAAAAAAAAAAAAAAAAA

絵文字の HTML コード

🏠️ほーむ🏠🎦どうが 🎦 📺︎てれび 📺︎📺📺📽えいしゃき📽 📝めも 📝 👣👣 🕰とけい🕰⏱⏱とけい⏱ ⚠️ちゅうい⚠ 🌸さくら：🌸　💐はなたば：💐　📷かめら：📷　🌼はな：🌼　🌻ひまわり：🌻　🍁かえで：🍁 🦋ちょう：🦋　☎でんわ：☎　📱 けいたい：📱 🧭こんぱす：🧭

アイコンURL

Google MyMaps用マーカー https://bit.ly/mapSymbols

map64a

gmap20px　gmap16px　gme16px　mp16px　
神社

3DmFLWX 寺院

3WNfOXp

Unicode &#xYYYX 抜粋

😀わらう 😀💓👉💐🌸💮🌺🌻🌷🌼🌹🌲☘🍀🍁🍂🍉🍊🍅🍅🍎🍒🍓🍅🏠🏠🏯🏯⛩🚃🚋
@@AA ¥00A5 §§ ©© ®®
❰2770 ❱ ❶2776 ❷ ➀2780 ➁ ➔2794 ➕
㈪㈪ ㈫㈫ ㈬㈭㈮㈯㈰㈰

短縮URL bit.ly

https://walk2010.blogspot.com/
▶︎bit.ly/青春ぶらり旅
https://walk2010.blogspot.com/p/mymaps.html
▶︎bit.ly/旅の地図またはbit.ly/3qrmCNf
https://2054606.blogspot.com/　　
▶︎bit.ly/恋愛適齢期またはbit.ly/3AKtrgU https://walk2010.blogspot.com/p/tohoku.html
▶︎bit.ly/東北の旅
🌏Google MyMap
◆bit.ly/石見銀山