昨日書いた話題を再び。
無事HDDのデータをコピーできたので、HDDを戻し、電源も問題ないようなので元のPCを動かした。一見何の問題もなく動いているようだったが。
なんとユーザーのフォルダが全て読み取り専用になっていた。これではアプリのデータが書き込めないので例えばchromeが動かない。ネットで見てみるとあるあるこの現象が。わかっている人は読み取り専用を解除すればいいけれど、これがなかなか一筋縄でいかない。
全く困ったものだ。元の７にクリーンインストールするしかないと。これはこれで大変。ほんと罪作り！
Contents
古いPCにいきなりWIN10を入れられると様々な不具合がおきますね。娘のところのデスクトップパソコン、６年前に購入したものですが、WIN10にしてしまい不具合が起きました。途中で電源が切れてしまうのです。それまではこんな事象はなかったそうです。
一ヶ月以上経ってから言ってきたので戻せない状態です。なんで一ヶ月以上たつと戻せないか訳がわかりませんがそうなんで仕方がない。そこで親父の出番となりました。
そこでまずはハードディスクにある大量のデータ、特に写真データをすくい出さなくてはと言うことで、LinuxのDVDで起動して外付けHDDにコピーしようと目論みました。しかし、bootはで来たもののやはり途中で電源が落ちます。これはいかんということで我が家にやってきました。
世の中には便利なものがあります。内臓のHDDを取り出して、USBでつなぐための変換ケーブルです。サンワサプライから出ているものはSATAばかりかIDEにも対応しているし、電源にスイッチが付いているので安心です。
まずはHDDを取り出して、この装置に接続して別のPCに接続。即コピーと行きたいところですが一応チェックディスクをかけます。しかしこれが大変めちゃくちゃ時間がかかります。
さて、こんなに頻繁に電源が落ちるので、これはもう電源に異常があるのではと考え娘にもそう言っていたのですが、一応確認をすることに。これには電源チェッカーを使います。ずいぶん前に買ったもので、古いPCの修理に凝っていた頃のものです。さて、繋いでみると全く異常はない結果。はて、一体なんだろう。
PCが途中で落ちるのは電源の不具合ばかりではなく、（むしろこの方が少ないかも）メモリー異常が関係している場合があるよう。また、HDDの損傷も関係があるかもしれない。これまでその症状がなかったのに、WIN10を入れた途端に起きたとしたら、とんでもない話ですね。
そういえばうちのカミさんが使っているPCも朝起きたらWIN10になりかけていた。これは自動更新を設定しているためだけれど、それで不具合が起きたらほんと問題ですね。ちなみにこの投稿Macで書いています。娘もMacにしたいと言っております。チャンチャン。
wordpressで画像を並べるには「ギャラリー」という機能を使えばいいのだろうけど、このギャラリーはもう一つだ。
例えば、タイトルと説明をつけた画像をならべて、その説明にリンクを貼るといったことをしたい場合やはりhtmlとcssの出番となる。
それにはcssを登録してやらなければならないが、それを簡単に登録できるプラグインを先ず入れておこう。Simple Custom CSS というプラグインだ。
これはインストールすると「外観」の所に出てくる。そこを起動して、あらわれた画面にcssのコードを書いて、updateボタンを押してやるだけで反映する。
では、やってみよう。
記事は「テキスト」を選んで、以下を記述する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> <dl> <dt>タイトル</dt> <dd>説明１</dd> <dd>説明２</dd> </dl> <dl> <dt>タイトル</dt> <dd>説明１</dd> <dd>説明２</dd> </dl> <dl> <dt>タイトル</dt> <dd>説明１</dd> <dd>説明２</dd> </dl> </div> |
そしてdtの「タイトル」の前に「メディアを追加」でimgを入れる。
ここではdl環境を使う。これはとても便利でtable環境より柔軟性があってレスポンシブにも対応しやすい。（この件については以前書いた。）
要するにdtに画像とそのタイトルをおいて、ddにその説明文を置く。その上でそのdlを一つのボックスのようにして、floatで並べるという方法だ。
cssは以下だ。これを先ほどのSimple Custom CSSを起動して現れた画面に書いて、updateボタンを押してやる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
div{ overflow : hidden; } dl{ width : 200px; border-width : 1px; border-style : dotted; border-color : #4169E1; margin-right : 12px; padding : 5px 5px 10px; float : left; } dt{ border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : #4169E1; padding-bottom : 3px; } dd{ padding-left : 10px; padding-right : 10px; font-size:70%; } dt img{ margin-bottom : 5px; display : block; width:100%; } |
実例は以下のようになる。
タイトル
タイトル
タイトルただしここでしっかりそろえるには画像の縦横比が全て同じでなければならない点だ。
栗の木の一輪挿しその２
今度は鉈で割った栗の板で作ってみた。
板を適当な高さに切る。
皮の部分は腐れていたので鉈で落としておく。
しっかり押さえておいて、手回しのドリルで穴を開ける
結構大変だったけどうまく空いた。これで完成。
知り合いの父上の木工展に行って触発されて、庭に放置してあった蓼科の山荘からもらってきた鉈で割った栗の木で一輪挿しを作ってみた。その報告。
栗の木の切れ端。これは友人の蓼科の山荘で伐採した栗の木の枝や、鉈ですでに割ったもの、それにチェンソーで板のようにしたもの。以前にもらってきて何かに使えるんじゃないかと放置してあったもの。木工展で見た一輪挿しはとても素晴らしく漆がかけらていたが、その造り方が参考になった。暇ができたので一つこれを使ってやってみようということになった。
細い木を鉈で割る。試しに細い切れ端から鉈を入れてみる。なかなか真ん中で割るのは難しい。しかしなんとか一本は真ん中近くで割れる。これは鉈を一気に入れて割るのが大事だ。あとでつないだ時に自然に接着できるからだ。ノコで切るとこうはいかない。うまいことを考えたものと感心する。鉈を入れた部分は切り落としておく。
畔挽きで切れ目を入れ。溝を彫る時のガイドとして一応畔挽きノコで切れ目を入れておく。初めから鑿でやればいいのだろうけど、また本当は丸い刃の鑿でゆるのがいいのだろうけど、切れる丸鑿がないので、こうした。穴は別段丸くなくてもいいから。
溝をのみで掘る。栗の木は硬いと言うイメージだが、意外に掘りやすい。生木ではなく、もう伐採から２年は経っているのである程度は乾燥しているが、それでも掘りやすかった。のこでの切断も比較的容易だった。いい材だ。
割った材を接着。これで完成。塗装もぜず素朴に。実は汚ないままの状態でやっていたのがかえって雰囲気がよかったのでそうすることに。ただ問題は水を入れた時に木だけに水が本体に沁みて行ってしまうことだ。中だけ塗料を塗るか、ボンドを塗ってやるか。これはあとで考えることにする。
息子のところに二人目の娘が誕生。そこで簡単子供椅子の注文。このところNPOで忙しかったけど、今月の第1週暇ができたので取り組んだ。
構造は簡単だし、以前にも作ったことがあるのでそんなに時間はかからないと思ったのだが、材料の加工が大変だった。今回の材料は手持ちの欅の板。５年前ぐらいに伐採され、丸太から厚板、そして２０ミリの板にしてもらって置いてあったものだ。これを寸法通りにいわば直方体にするのが大変。秦野のふれあいセンターに行けば、大型機械で訳なくできるのだが、往復３時間を惜しんで、手持ちの道具でやってみた。その顛末。
材料の欅の板。まだ白太も付いているしやや反っている。これを手鋸で切断する。しかし、腕がないから正確に切れない。鋸刃は硬木用を使う。
そこでトリマーが登場。フラッシュビットを使って、直角を決めていく。
なんとか直方体ができる。トリマーの威力はすごいが、なにせウルサイのが難点。それと材がある程度の大きさがあればできるが小さいと抑えがうまくいかず難しい。
こうしてできた材料を椅子の形に加工。子供椅子だから丸みを付ける。また、座る部分は溝を掘って、組み立てることに。これは材がまだやや反っているためだ。ここでもトリマーが活躍。
組み立てはボール紙で作った型紙に合わせる形で行う。座る部分にやや傾斜をかけているので一点を仮止めして、そこから止めていく。ボルト締めなので慎重にやる。ガタの原因になるので左右をきっちり合わせないといけない。ダボ穴も開けておく。下穴を掘ってから行う。
塗装をするかどうか迷ったが、最後はオイルをかけて完成。ただ、しばらく放置しないとオイル臭さが抜けないので納品はまだ。
ワードプレスのSEO対策でGoogleにsitemapを登録するにはやはりプラグインを使う。
ところがこれがまたよくわからない。結局はできたようだが、色々と振り回された。その顛末。
プラグインはGoogle XML Sitemapsを使う。
設定で色々とやれば
自分のドメイン/sitemap.xmlができたと言う。
そこでGoogleのウェブマスターツールにアクセスし、サイトを登録してそのsitemap.xmlをテストするとエラーが出てしまう。
そこで、FTPで自分のサーバー上を見てみると、sitemap.xmlが見当たらない。これではエラーが出るのが当たり前。
ただ、プラグインの画面にある「自分のドメイン/sitemap.xml」にブラウザでアクセスするとちゃんと表示される。
どういうことだ！
ここで色々と悪戦苦闘（でも２時間ぐらい）してしまった。
結論はやはり仕様変更にあった。プラグインの。この情報は「メモトラ」さんのブログから得た。
Google XML Sitemapsは4.0以降動的にsitemapを生成できるようになり、これはとても便利になった。しかし、「自分のドメイン/sitemap.xml」というファイルはFTPでは見えなくなったのだ。
要するに存在しない。だからエラーが出るのは当たり前だ。
じゃあファイルはどうなったのか、
http://自分のドメイン/index.php?xml_sitemap=params=
となったようだ。つまりはここで生成されていく。
したがって、マスターツールでのサイトマップのテストではこれを指定しなくてはダメだということだ。
やってみたところ。OKでした。はい。
wordpressとfacebookの連携についてあれこれと書いた。
その後、実際にあれこれとやってみたので、結論。
情報が錯綜していたのと、facebookがプログラムの仕様を変えたのが原因して、混乱があったようだ。
結論的には以下だ。
これだけでいいはずだ。facebookのdeveloper登録とアプリ作成がやや面倒だが、プログラムを貼ったりしなくて済むので簡易といえば簡易である。
後はプラグインAll In One SEO が入っていれば、その中のSocial Meta の中の Image Settings の中でOG:Imageにサイトを象徴する画像をUploadすれば、イメージをあまり使わないこのサイトにはいいかもしれない。ここの画像がFacebookに現れる。
スクロールが下まで行くとナビゲーションバー（ヘッダ部分でもいいけど）を上部に表示
これはjqueryで簡単に実現できる。
cssに以下を記述しておく
|
1 2 3 4 5 6 |
.fixed { position: fixed; top: 0; left: 0; width: 100%; } |
要するにナビゲーションを固定するクラス
これを例えば.navに与えるかどうかの制御で実現できる
スクリプトは以下だ。
まず変数navにクラス名navを持つナビゲーション部分を代入
次に変数navTopにnavの位置を代入
位置は最初の要素の、ドキュメント上での表示位置を返してくれるoffset関数を使う。
ここはtopの位置
さらにscrollイベントの中で
変数winTopにスクロール位置を代入
スクロール位置は.scrollTop関数を使う
この位置を比較して、スクロール位置がnavの位置より下だったらクラスfixedを追加
そうでなければ、クラスfixedを除去
これだけ。
実際は以下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> $(function() { var nav = $('.nav'); //navの位置 var navTop = nav.offset().top; //スクロールするたびに実行 $(window).scroll(function () { var winTop = $(this).scrollTop(); //スクロール位置がnavの位置より下だったらクラスfixedを追加 if (winTop >= navTop) { nav.addClass('fixed') } else if (winTop <= navTop) { nav.removeClass('fixed') } }); }); </script> |
これはfooterについても言える。
ページをスクロールすると「トップ」へのアイコンが現れるページをよく見かける。
これもスマホで見る場合が多くなたためと思われる。また、縦長のページが増えているためかもしれない。
この縦長ページもスマホ用という感じがする。スマホはパソコンと違って、縦のスコロールが容易だからだろう。
このスクリプトを探してみたので報告。
まずHIML
|
1 |
<p id="page-top"><a href="#wrap">PAGE TOP</a></p> |
これは単純に文字列とする。リンク先はwrap。場合によってはcontainer。
CSS
まずは現れる場所をposition: fixed;で固定。
|
1 2 3 4 5 6 |
#page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } |
リンクで文字を装飾。ここはいろいろ好みで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#page-top a { background: #666; text-decoration: none; color: #fff; width: 100px; padding: 30px 0; text-align: center; display: block; border-radius: 5px; } #page-top a:hover { text-decoration: none; background: #999; } |
JAVASCRIPT
ここは自分の理解のために解説してみる。
変数topBtnに#page-topを代入
これを非表示
scrollイベントを使って、スクロールが起きたら以下を実行
.scrollTop() でスクロール位置を取得
それが100を超えたら
topBtn（すなわち#page-top）をフェードインする
でなければフェードアウト
また、
clickイベントを使って、クリックされたら
animate関数をつかって、
ページをスクロール０の位置に500msで表示する。
なお、return false;は
clickイベントを実行した後にリンク先に移動してしまう
それを防ぐ為の記述らしい。よくわからないけど。
この点については柴原氏のブログにある。
以下の記述となる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function() { var topBtn = $('#page-top'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); |
実際は公開した以下のサイトで
http://ogu-tec.net/test/webtest06/ypcwebtest02/
スクリプトはヘッダに書きます。
|
1 2 3 4 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> ここに記述 </script> |