ogu-tec - Part 22

Jimdo無料版でpopup表示

Posted on 2015年10月20日 by putimaro / 0件のコメント

先日Jimdoのサポートをしていて、ユーザーからポップアップ表示がしたいという要求があった。Jimdoそのものには簡単に実装できるアイコンがない。（無料版ですが）
そこで、独自に実装する方法を考えた。

ポップアップ表示はJavascriptやJqueryを使えば、いわば難なくできる。
しかし、Jimdoでそれを使うとなるとちょっと敷居が高い気がする。
特にJqueryはJimdoがもともとPrototype.jsを使っているということもあって、コンフリフトを避ける設定をしなければならなかったり、いろいろ面倒そうだ。

そこで、cssのみで実装できるポップアップ表示を見つけたので、それを試してみた。
http://javascript123.seesaa.net/article/133792048.html
を参考にさせて頂いた。

Jimdo無料版でpopup表示の方法

設定から「ヘッダー部分を編集」を開き
先ずヘッダに以下を書き加える。

<style type="text/css">
<!--
.pop a:hover{ /*マウスが乗ったら*/
        position: relative;
        top: 0px; left: 0px;
}
.fukidasipop { /*吹き出し本体*/
        position: absolute;
        top:17px; left:20px;
        display: none; /*何も表示しない*/
        padding: 5px; /*内側の余白*/
        max-width: 300px; /*ブロックの幅
        font-weight: bold; /*文字の太さ*/
        text-decoration: none; /*文字飾り*/
        color: #ffffff; /*文字色*/
        background-color: #b22222; /*背景色*/
        border-top:white solid 10px;
        border-left:#b22222 solid 10px;
     filter: alpha(opacity=85); /* IE */
　　-moz-opacity:0.85; / *Firefox・Netscape */
  　opacity:0.85; /* Opera・Safari */
}
a:hover .fukidasipop {
        display: block; /*ブロック要素で表示*/
}
-->
</style>

<!--

.pop a:hover{ /*マウスが乗ったら*/

position: relative;

top: 0px; left: 0px;

}

.fukidasipop { /*吹き出し本体*/

position: absolute;

top:17px; left:20px;

display: none; /*何も表示しない*/

padding: 5px; /*内側の余白*/

max-width: 300px; /*ブロックの幅

font-weight: bold; /*文字の太さ*/

text-decoration: none; /*文字飾り*/

color: #ffffff; /*文字色*/

background-color: #b22222; /*背景色*/

border-top:white solid 10px;

border-left:#b22222 solid 10px;

filter: alpha(opacity=85); /* IE */

　　-moz-opacity:0.85; / *Firefox・Netscape */

　opacity:0.85; /* Opera・Safari */

}

a:hover .fukidasipop {

display: block; /*ブロック要素で表示*/

}

-->

</style>

もちろん、これはあくまで噴出しの設定（css）なので文字色や幅、背景色等はいくらでも設定変更してかまわない。ボーダーをうまく使って噴出しの形を実現しているが、これとて変えてもかまわない。

今度はHTMLだ。
Jimdoでは記事の編集で隠れているメニューを出すと、記事のHTMLが編集できる。

そこに

<p class="pop">このマスクは、
<a href="javascript:void(0);">
プリーツ構造<span class="fukidasipop">
吹き出しポップアップ</span></a>です。
<a href="javascript:void(0);">
新型インフルエンザ
<span class="fukidasipop">吹き出しポップアップ
</span></a>対策
<br>
<br>
吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する
<br>Opacityプロパティを使って半透明を実現しています。
</p>

<p class="pop">このマスクは、

プリーツ構造<span class="fukidasipop">

吹き出しポップアップ</span></a>です。

新型インフルエンザ

<span class="fukidasipop">吹き出しポップアップ

</span></a>対策

<br>

吹き出しが少し透けて見えます。CSSでオブジェクトの透明度を操作する

<br>Opacityプロパティを使って半透明を実現しています。

</p>

要するにポップアップで注釈等を付けたい文字列に<a href=”javascript:void(0);”>を付け
ポップアップ自体は<span class=”fukidasipop”>で囲んでやればいい。

ちなみに”javascript:void(0);”はクリックを無効化するおまじない？のようだ。
実際は以下を見ていただければ
http://ogu-tex.jimdo.com/it/

追記　なお、このJimdoサイトでは「プリーツ構造」「新型インフルエンザ」という文字にマウスを載せるとポップアップが表示されるようになっています。
要するに:hoverを使っていますので、iPad等ではうまくいきませんのでご承知おきを。
これについてはまた後日。

tableのresponsive化2

Posted on 2015年10月20日 by putimaro / 0件のコメント

TablePressで作成した以外のtableのresponsive化

これについては以下のサイトに詳しく書かれているのでそれを参考にすればいい。

http://design-spice.com/2012/11/01/responsive-table/

基本的にはやはりmedia_queryを使って、横に長い表を縦の組み替えるか、リスト表示に変えるかする方法。

ここでもdisplayプロパティがよく使われる。

これをワードプレスで使うにはカスタムフィールドが必要になる。

以前の表で一部やってみた。表は以下。

商品番号	商品名	容量	税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	20,304	詳細	購入
06KJ31	頑固なカビ取り剤Ｊ3本ｾｯﾄ	１００ｇ	1,944	詳細	購入
07KJ50	頑固なカビ取り剤	５００ｇ	2,052	詳細	購入

すでにここではcssをカスタムフィールドにインストールしてある。

これに以下をsample_02.cssとして追加してみる。

@media only screen and (max-width: 420px) { 
    .sample_01 tbody{ 
        display: -webkit-box;
        overflow-x: auto; 
    }
    .sample_01 tr,
    .sample_01 th,
    .sample_01 td{ 
        display: block; 
    }
}

@media only screen and (max-width: 420px) {

.sample_01 tbody{

display: -webkit-box;

overflow-x: auto;

}

.sample_01 tr,

.sample_01 th,

.sample_01 td{

display: block;

}

若干の表示のずれがあるようだけど何とかできる。
これはワードプレスだけに使えるわけではないのはもちろんだ。

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

商品番号	商品名		税込卸価	詳細	購入
01K201	家庭用カビ取り剤サール	１Ｌ	¥1,296	詳細	購入
02KS01	業務用除カビ洗浄剤S1	１Ｌ	¥1,512	詳細	購入
04KS05	業務用除カビ洗浄剤S5	５Ｌ	¥6,480	詳細	購入
05K116	業務用除カビ洗浄剤S6	１６Ｌ	¥20,304	詳細	購入
06KJ31	頑固なカビ取り剤JＪ3本ｾｯﾄ	１００ｇ	¥1,944	詳細	購入
07KJ50	頑固なカビ取り剤J	５００ｇ	¥2,052	詳細	購入

自作炬燵にヒーター取り付け

Posted on 2015年10月17日 by putimaro / 0件のコメント

自作炬燵にヒーター

自作炬燵についてはかつて報告したけど、そろそろ寒くなってきたのでアマゾンで炬燵用のヒーターを注文。例によって朝頼んで夜には届いた。

始めは簡単につけられると思っていたが、これがなかなか大変。
一つは最近のヒーターが極めて薄くなっていて、かつて使っていたものを基準に作ったものだから新たな加工が生じてしまったのと、取り付けようの螺子が短かったために、ここでも加工が必要になったことだ。

そこで、一旦分解してその加工をやることになった。
ヒーターに差し込むコンセントの形状にあわせて、やぐらの桟に溝をつける。

ヒーターをとめる螺子を入れるため大きな穴を開けてそのねじ山が入るようにし、スペーサーとしてして木を桟につける。

これで何とかぴったりにつけることができた。

下から覗くとこんな感じ。しかし横から見るとまったくヒーターは見えない。これはなかなかいい。

木工

郵便受けを制作

Posted on 2015年10月13日 by putimaro / 0件のコメント

郵便受けの作成過程

先ずは本棚型に躯体を組み立て。前に頂いた長い板を利用。横木は欅の角材、裏板は杉の板。ある材料で組み立てる。

屋根の部分は後で取り付ける形に。傾斜をかけているので、斜めに削る。これがなかなか難しい。蝶番をつけておく。

もちろん外で使うので、外用にキシラデコールを塗装。ちょっと高いけど材料費がいわばただだからいいかということで。

前面は欅の板と神代杉の板を組み合わせて作る。POSTという文字盤は銀杏の薄板を繰り小刀、回し引き鋸で作る。電動糸のこ盤があればいいんだろうけど、手道具でやるのは大変。
玄関に設置。片側を花壇に埋め込んで、下に鉢植えを置いて安定させる。たぶん倒れないでしょう。

displayプロパティについて

Posted on 2015年9月29日 by putimaro / 0件のコメント

cssのdisplayプロパティにはさまざまな値がある。

ただこれまでそんなに気にすることなく、２、３の代表的な値しか使ってこなかった。
今回、レスポンシブでfloatを使おうとして、うまくいかなかったために怪我の功名でこのdisplayプロパティのtableという値を使うことになった。

具体的には１段のレイアウトを２段化する時に、メディアクエリの中でfloatがうまく機能しなかったために、

display:table;

1	display:table;

を使ったというわけ。これがなかなか便利だった。ソースは以下。

#container{
width:1024px;
margin: 0 auto;
display: table;
}
section{
width:68%;
display: table-cell;
}
aside{
width:25%;
display: table-cell;
}

#container{

width:1024px;

margin: 0 auto;

display: table;

}

section{

width:68%;

display: table-cell;

}

aside{

width:25%;

display: table-cell;

}

親要素に

display: table;

1	display: table;

を書いて、

子要素に

display: table-cell;

1	display: table-cell;

を書けばいい。

実際はこれだけの話だが、実はこのdisplay: table;にはさまざまな用途があっていろいろと使えると思う。

段組についてはいろいろと方法があるが、
これについてよく知らなかったのは「不徳の致す所」？でした。

スマホ用メニューslicknavについて

Posted on 2015年9月28日 by putimaro / 0件のコメント

スマホは幅が狭いので横型のメニューは向かない。そこで基本的にはメニューを表示せずクリックした時にメニューがプルダウンすると言うものだ。
しかも、既存のメニューを置き換える形を取ってくれる。レシポンシブには便利だ。

slicknavで検索し、jquery.slicknav.min.js　と　slicknav.css　を入手。

htmlのヘッダに

<script src="./js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="./css/slicknav.css" />
<script src="./js/jquery.slicknav.min.js"></script>
<script>
    $(function(){
        $('#navigation').slicknav();
    });
</script>

$(function(){

$('#navigation').slicknav();

});

</script>

を記述。（もちろんjsやcssの場所は任意だし、既存のメニューの場所も任意）

これだけでOKだ。

ただ、cssにこのメニューを表示する場合は以下を

nav{
    display: none;
}

nav{

display: none;

}

表示せず既存のメニューを表示する場合は以下を書いてやる。

nav{
    display: block;
}
.slicknav_menu {
    display:none;
}

nav{

display: block;

}

.slicknav_menu {

display:none;

}

（ここではnavに#navigationがある形。もちろんここは任意）

レスポンシブWEBデザインについて

Posted on 2015年9月28日 by putimaro / 0件のコメント

世の中、パソコンからスマホやタブレットに移行している。
従って、WEBサイトもそれに対応しなければならない。
そこで、登場したのがレスポンシブWEBデザインだ。

では、「レスポンシブwebデザイン」とはどういう手法かというと、ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調整できる手法だと、とりあえずは言える。
デバイス毎のレイアウトが違うHTMLファイルを複数用意するのではなく、1つのHTMLファイルを、CSS3（Media Queries）で制御し、ブラウザの横幅サイズに応じてページのレイアウトデザインを調整できるようにする技法だ。

いわゆる「リキッドデザイン」と似たような感じだが、違いは、
リキッドデザインはブラウザ横幅サイズに応じて長さは可変するが、レイアウトは同一で要素の表示・非表示ができない。
それに対しレスポンシブwebデザインではブラウザ横幅サイズに応じて、要素の表示・非表示も含めてレイアウトが可変できると言うわけだ。

グーグルでもレスポンシブ化を推奨している。
そこで既存のサイトをレスポンシブ化するにはどうしたらよいか。

これがなかなか大変だ。（簡単に移行できるサイトもある。これは既存のサイトのレイアウトによる。）

実際にやってみたので以下報告する。

１．現在のサイトの修正

まず、スマホ用に作り変える（ここが第一のポイント）。始めから作成するならスマホベースでサイトを作ることだ。

ただ、これは意外と簡単。要するに全て全画面で表示できるようにすればいい。
複雑なレイアウトを避けて、コンテンツが順番に並んでいるサイトを作ればいいのだ。
既存のサイトを修正する場合もすべて全画面で展開する形にする。
これをPCのブラウザで見るとまったくおかしな形に思えるが、ブラウザの横幅を狭めてみればわかりやすくなっていることがわかる。

具体的には２段組や画像の配置との工夫を一切やめる。
もちろん幅は％指定にする。100%指定でかまわない。
メニューはPC用に作っておくが、スマホ用に切り替えることのできる

slicknav

というJqueryのプラグインを使う。（これについては別項で）

２．レスポンシブ化１

次に考えなくてはいけないのは、いわゆるブレイクポイントだ。
これはどの幅で表示を変えるかだ。あまり細かくする必要はない。
ここではいわゆるパッド用とパソコン用を用意する。

いずれにしても先ずはhtmlのヘッダに以下の記述を挿入する。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

1	<meta name="viewport" content="width=device-width,initial-scale=1.0">

このviewportについてはいろいろと議論があるようだが、こう書いておけば無難なようだ。

width=device-width

はサイトのサイズをデバイスの横幅にフィットさせて表示すると言う設定で、横スクロールが表示されない程度にフィットしてくれる。

initial-scale=1.0

は拡大率のことでデフォルトの要素の拡大率が100%であることを意味している。

その上でcssに以下の記述を追加する。

@media all and (min-width: 667px) {

パッド用の表示設定

}

@media all and (min-width: 667px) {

パッド用の表示設定

}

@media all and (min-width: 1024px) {

PC用の表示設定

}

@media all and (min-width: 1024px) {

PC用の表示設定

}

ここの表示設定では追加や変更のみを書けばいい。

３．レスポンシブ化２

ただ、こう書くと簡単なようだが、実際はサイトの表示を確認しながら進めるほかはない。

パッド用の設定では、パッドはある程度幅があるので、画像の配置を変更できる。今回実際に行ったのも、画像の配置と文章の幅の設定変更のみだった。

PC用はかなりの変更をすることになる。実はこれはもともとある形に戻せばいいので、しっかりcssが書かれていれば問題はない。

ただ、ここで面白い現象があった。メディアクエリ内でfloatがうまく動作しないという点だ。一方向的なfloatはいいのだが、左右のfloatが効かないという現象だ。

これについても別項で。

とりあえず。

木工

木工ではないけれど

Posted on 2015年9月20日 by putimaro / 0件のコメント

木工ではないけれど、製本を久しぶりにやったので報告

ある学校の司書の方から製本についての話題があったことと、iPadのカバーが老朽化したこと、
かみさんがKindleを使うようになって、カバーを欲しがったことなどがあって、久しぶりに製本をやることになった。製本は以前随分取り組んでいろいろ作品？もあるんだけど、ここのところご無沙汰だった。中身は本ではないが、その技術をつかってKindleのカバーを作った。

先ずは布を裏打ちする。ガラス板に湿らせた布を裏を上にして皺なく貼り、その上に薄いのりをつけた和紙を貼り付けて乾燥させる。乾くと布が紙のようになって加工がしやすくなる。