Meta_SliderとNewPost Catch

「Diary型Blog」は勝手に呼んでる当ブログ、多くのWordPress(CMS)のサイトは目標としてるサイトのスタイルと違い、なんとなく違った世界のサイトをみてるようで真似のできない感じだ。とにかくテーマのTwentySeventeenが気に入って、Defaultテーマを出来る限り修正することなく、ベースになるプラグインが欲しい。。。そこで選んだプラグイン。

【Meta_slider】

GoogleのAPIが廃止で載せたかったスライドショーがダメになったと同時に、phpのバージョンが5から7に代わったので、代替えで準備してたPulginがダメになった。そんな時に、見つけたスライドショーが「MetaSlider]、現在サイドバーで活躍。。。

このPluginには、4つのタイプのjQuery のスライダー(nivo Slider・Flex Slider・Coin Slider・Responsive Slides)があるので定期的にタイプを変えて楽しめそう。調べると多くのサイトで「MetaSlider」の良さを紹介してるのが分かる気がする。

*画像のみ→矢印「なし」、ナビゲーション「非表示」、高度な設定「画像の切り抜き」→「スマート切り抜き」

【NewPost Catch】
サイトから得た情報とヒントを纏め、Widgetだけでなくフロントページに固定ページ欄、「最近の記事」とカテゴリー別投稿一覧など、期待以上の出来栄えになりつつある。
 

1.【npc】 ➡全て
2.【npc posts_per_page=”10″ cat=”4,5″ date=”1″ width=”80″ height=”80″】
(表示10件 カテゴリID 公開日表示 サムネイルサイズ)➡カテゴリー別に
3.Themeの「Style.css」に追記する。
(NewPort CatchのStyle.cssは使用しない)

/* NewPost Catch */
#npcatch li{
overflow: hidden;
clear: both;
vertical-align:top;
border-bottom: 1px dotted #666666;
}
#npcatch img{
float: left;
padding: 5px 10px 5px 0px;
}
#npcatch .title a{
font-size: 12px;
text-decoration: none;  ➡Link線ナシ
}
#npcatch li a{
text-decoration: none; ➡Link線ナシ
}
#npcatch .date {
font-size: small;
font-weight: 400;
display:block;
color: #adb5bf;
margin-bottom: 5px;
}
#npcatch li: hover{}
#npcatch li: hover .title{}
#npcatch li: hover .title a{}
#npcatch li: hover .date{}

Meta_Sliderは機能制限ありの無料プラグイン、NewPost Catchは無料でブログのレイアウトに選んだプラグイン。

今日はマルの誕生日

今日はマルの満10歳の誕生日、年の暮れでなんとなく忙しい中での誕生日だから別に何をする訳でないが、マルにとって特別な日だ。

近頃は暇さえあれば寝てることが多いけど、仕方がないのか人間の歳で言うと「還暦を迎える」歳らしい。昨日ママの使いで中目黒銀座の端にあるパン屋さんへ行った帰りに、監視カメラに向かって「マルちゃん!」と呼ぶと一目散に玄関口だ。その様子を急いでパチリ!、観た限りボール遊びしてる元気な姿と変わらないマルだね。

とにかく「マルちゃん、誕生日おめでとう!」

「文書を囲む枠線」をSimple CSSに

以前から記事内に「文書を囲む枠線」があった方が見栄えがするかな?と思って「style.css」へ書き加えるつもりでいたけど、Simple CSSと言うプラグインを見つけたので、文書用とサイドバー用の枠線のCSSをこのプラグインに任せることにした。とにかくこのプラグインはCSSを順序立てて書き込み保存ボタンを押すだけでOK!と超簡単だから嬉しいね。

1)シンプルな囲み枠: 未使用

.box1 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
border: solid 3px #000000;
}
.box1 p {
margin: 0;
padding: 0;
}

【サイドバーで使用した枠線】
.xxxxx {
display: inline-block;
width: 240px;
height: 200px;
border: solid 1px #cdcdcd;
}

2)角丸ボックス: 文書内で使用

.box2 {
padding: 0.5em 1em;
margin: 2em 0;
font-weight: bold;
color: #6091d3; ➡文字色
background: #FFF;
border: solid 3px #6091d3; ➡線
border-radius: 10px; ➡角の丸み
}
.box2 p {
margin: 0;
padding: 0;
}

3)破線ボックス: 未使用

.box3 {
padding: 0.5em 1em;
margin: 2em 0;
background: #f0f7ff;
border: dashed 2px #5b8bd0; ➡点線
}
.box3 p {
margin: 0;
padding: 0;
}

4)bottomに影:メインページの「最近の記事」で使用

.box4 {
padding: 0.5em 1em;
margin: 2em 0;
color: #FFF;
background: #6eb7ff;
border-bottom: solid 6px #3f87ce;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
border-radius: 9px;
}
.box4 p {
margin: 0;
padding: 0;
}

*上記の1)~4)を<div class=”box?”><P>~文書~</p></div>とすればOK! まだまだ多くの文書枠があるけど、上記の1)~4)があれば良いかな?と思う。

PS:最近になって多くのサイトで利用してる「crayon-syntax-highlighter」プラグインを使おうか迷ったけど、ちょっとした文書(CSS等にも)を囲む程度に大袈裟かな?、取り合えず、試したが当ブログに似合わないと思い止めた。

独自の画像縁(枠線)をStyle.cssに

投稿内に挿入する画像の縁(枠線)を幾つか用意、当ブログが日記風だと言っても少しは見た目を良くしたいと思い、以前のWeblogのCSSから幾つかを試した。

Style.cssに幾つも書き加える場合は、属性にクラス(Class)名を付ける。クラス名は、アルファベットの最後の3文字(qwxz)あたりを組み合わせた。

1)「メディア」なしで影付き角丸

img.xxx {
border:solid 2px #d0d0d0;
border-radius: 5px; ➡調整(8px,10px)
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); ➡影付き
}

2)指定サイズなしの円形・「メディア」なしで影付き

img.xxx {
border: solid 2px #ccc;
border-radius:50px; ➡調整(75px)
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); ➡影付き
}
*画像サイズ(W150xH113)、調整の75pxにすると円形

3)斜め15度ほど回転、「メディア」でOK!

img.xxx {
border:solid 2px #ccc;
border-radius: 5px;
transform: rotate(5deg); ➡逆回転(-5deg)
}

*1)~3)URLでの使用も可:
<img src=”【画像URL】” style=”border-radius: 0px; border:none; box-shadow:none; transform: rotate(0deg)” alt=”【代替テキスト】”> ➡当ブログでは「title=””」で「ふきだし」

取り合えず基本枠として3縁(枠線)を用意した。

imgの属性「alt」と「title」の使い分け

両属性の使い分けで何時も混乱、以前のウエブサイトは「alt=” “」を使用してIEで確認することがメインだったので良かったが、WordPressに替えて現在ではGoogleをメインで確認している。ところが「alt=” “」では、マウスオーバーで「ふきだし」として表示されない。調べて分かったのがIE以外では表示されないことで、属性を「title=” “」に書き換えて見たところ、Google、Firefox,Opera、とEdge(IE)も含めてメジャーなブラウザで表示されるようになった。

当ブログでは、Diary風の記事なので、SEO的に文書や中訳に説明等を付けること自体思いつかない。とにかく、Alt属性はimgに付けるもの、尚且つ、area、applet、inputに対しても付く、又、title属性は全ての要素に含めることができる。

基本的にはimgでのalt属性とtitle属性の使い分けは以下の通りとなるようだ。

<!–alt属性–>
<img src=”hoge.jpg” alt=”眠いよ~” />

<!–title属性–>
<a title=”眠気が襲ってきたね!” href=”#”>公園のベンチでの~んびり</a>

WordPressの場合は投稿ページのビジュアルで画像をクリック、編集画面から上級者向け設定の「画像タイトル属性」欄にTEXT文を書き更新すると自動的に「alt=” “」が「title=” “」に書き換えられる。

昔から画像上にふき出すTEXT文が気に入っているので、当ブログでもtitle属性「title=” “」で統一する事にした。

無線スピーカーCreative D100

無線スピーカー(Creative D100)を予備のサーバPCに取り付けた。有線のスピーカーだと常にデスク上でスペース的にも置き場所を決めるのが一苦労だったが今では、デスク上を広々使いたい時など後ろの棚に置いたりして便利な事この上ない。

「Creative D100」に関する設置前の準備は、電池(単三4個)又は、コードで電源を入れる程度のこと。。。要はBluetoothが正しく設定されていれば良い。

最初にすべきは、「Bluetooth Planexの[BT-Micro4]SB」をUSBに差し込む、するとWindows10が自動認識してWindows10の標準ドライバーを勝手にインストールしてくれる。続いて、[コントロールパネル]→[ハードウェアとサウンド]→[ディバイスとプリンター]へ移動して、「CSR8510 A10」のアイコンを右クリックして「Bluetooth設定→オプション」を開き、Bluethoothのアイコンを「通知領域に表示する」にチェックをいれると準備完了。

次に「設定」の「デバイス」へ移動して、Bluetoothを「オン」にするとCreative D100とペアリングできる体制になるので、Creative D100のスイッチを「オン」にして接続ボタンを押し続けると、「ピー」と鳴っるので接続ボタンを離してペアリング完了、その間2~3秒程度。

その後の操作は、「隠れてるインジケーターの表示」をオープンしてBluetoothボタンをダブルクリック、「Bluetoothとその他のディバイス」の「ベアリング済みCreativeD100」の接続をON/OFFでOK!。

これで、約10m以内であれば無線スピーカーを置くことができるし、外出で誰もいない間の一時を、無線スピーカーで好きな音楽を聴きながら「うとうと」だね。

MailサーバをSpam Mail Killer v.2.30が常時監視

つい最近まで自宅サーバのメールに何故か迷惑メールが凄い勢いで増えたと同時にWindows Defenderが削除した旨のメッセージを表示したりでビックリ!だった。多くは海外の@gmail.comからだけど請求書だのいやらしい画像添付のメールが届いたりした。多分「YuTube」に登録して動画をアップロードしたり、たまにドラマや映画を見たりしたのが原因?だったかも。。。

Spam Mail Killer 」は心配したWindows10での操作も問題なし。早速アカウントの登録と削除設定、その他の設定は目を通す程度でも十分期待できる。

取り合えずアカウントの登録を済ませ基本設定のまま試したところ、MercuryMail(サーバ)へ到着する大半のメール(特に海外から)を削除して、その削除したメールの内容も確認できた。迷惑メールの完全削除前に、許可すべきメールアドレスを許可リスト、削除すべきメールを禁止リストへ登録、又、常時作動させるため管理ツールの「コンピュータ管理」へ既定の15分間隔で登録、毎日2回程度削除メールの確認やログで挙動不審のメールアドレスもチェック。

今では迷惑メールや海外メールを確実に削除するので大量の迷惑メールの事が嘘のようだ。

WebsiteでQRコードを作成

以前グーグル検索でQRコードに関するサイトを巡って、「Google Chart APIのQRコード」と言うWebsite上にQRコードを作成する出力関数があることを知った。
WebsiteをWordPressに替えてから、一つのサイトに幾つもQRコードは必要ないのでプラグインを止めて、Googleの出力関数を使って見ることを試みた。

TwentySeventeen子テーマの「function.php」にQRコードの出力関数とショートコード化する関数を張り付ける。

// QRコード出力関数
function get_qrcode_tag($atts) {
extract(shortcode_atts(array(
’url’ => home_url(’/’), ➡ サイトのアドレス
’size’ => ’150’, ➡ 画像サイズ(ピクセル)
), $atts));
// イメージタグを返す
return ’<img src=”https://chart.googleapis.com/chart?chs=’ . $size . ‘x’ . $size . ‘&cht=qr&chl=’ . $url . ‘&choe=UTF-8 ” alt=”QR Code”/>’; ➡ Google Chart APIのRQコード作成機能
}
// 呼び出しの指定
add_shortcode(’qrcode’, ’get_qrcode_tag’); ➡ ショートコード化

使用方法は簡単で、固定ページ又はサイドバーのテキスト内にショートコード【qrcode】を記入するだけでOK!、QRコードの画像サイズはいつでも書き直すことができる。

サイドバーのテキスト又は記事内:【qrcode】
記入例:【qrcode url=”http://localhost/wordpress/” size=”150“】
*画像サイズ:画像サイズを必要に応じて250とか300に変更する。

Webカメラ Logicool HD Webcam C270

無線WiFiのカメラを購入してからは顔認証用の利用程度だけど、たまに音声動画を撮ったり、Line用のマイクに利用してる。残念だけど以前のPCでWindows8.1の再インストール時に記録の多くを失ったけど、別保存した少しばかりの写真とか動画は貴重な思い出の品なのでCDに保管。

このWebカメラは今でも人気があるようでAmazonで調べると、「安くて良かった」とか「画像も鮮明で、音声もしっかり聞き取れる」とか、このWebカメラは20012年8月にamazonで1,5~6000円で買ったけど、現在でもほぼ同額で販売しているようだ。

MEOW MARKET 小型 ネットワークカメラ

現在のTENVIS監視カメラに替わるものがないか調べてみると見た目もほぼ同じで、あれTENVIS製じゃないか?。。。外出先で接続が不安定にならない程度の性能ならばと思い見つけた「MEOW MARKET 小型 ネットワークカメラ IPカメラ ワイヤレス WiFi 無線lan SD 暗視 スマホ iphone ipad 連動 ペット カメラ 監視カメラ マイク 録音 録画OK!」は何でも有りの多機能カメラで、1か月以内返品可能と言うことなので購入した。

返品もあり得ると思い届いたカバーなども丁寧に取り外して、早速説明書に従って、iPhone6に携帯用の「yoosee」をインストール、このアプリからWiFi接続を試みたがWiFiへ接続完了寸前で「カメラは5GWiFiに対応していない」とメッセージが現れストップ、アレレ?CATV/イッツコムの無線WiFiルーターは、説明書の無線WiFiと同じなのに。。。即、メールで質問すると折り返し返事があって「無線WiFiは同じでも万一接続不可の場合は返品可」との返事。無線モードが同じならば「yoosee」の中に有線による設定方法があるので、「有線で接続して無線WIFIに切り替えることができるはず」と思い試してみると、エラーも無しで有線の設定から無線WIFIに接続できた。担当者に「理由を説明して返品しない」と返事してから、公園のベンチでiPhone6 4Gでカメラへ接続、素早く映し出され画質も思っていたより良かった。接続が途切れることもなく順調、マイク、録画&録音の操作も簡単、何よりもログオン/ログアウトで不都合が無い、取り合えずは一安心。

又、Windows10にPC用の「CMSClient」をダウンロードしてインストール、こちらのソフトで映し出される映像は前のTENVIS専用ソフトより数段良く、録音&録画ができて保存していつでも観ることができる。使い方をマスターして楽しまなくてはね。