挿入画像に薄い影を付ける。

WordPress4.9になってテーマのTwentySeventeenのentry-contentとwidgetの画像の表示形式がstyle.cssで統一されてる?ようで「.post a img」では反映されない。調べると「.entry-content a img,.widget a img{}」なので子テーマのstyle.cssに「.widget a img」を外して、entry-contentの画像のみ薄い影を付けて見た。

*.widget a img {} ➡別CSS


固定ページの「NewPost Catch」のショートコードで表示してる画像枠にも影が付くことに気付いたので修正を試みたが無理かな?「date」のdisplay:blockをタイトル文と同じようにpadding: 5pxにしたいけど変更不可のようだ。


ウェブサイトのヘッダー動画

残念だけどiPhoneとか他のスマートフォンではヘッダー動画を観ることが出来ない。そこでブログ内へ投稿又はメインページ(固定ページ)へ投稿したらどうだろうか?手始めに記事として投稿、外出先でも「公園でボール遊びのマルちゃん!」を観ることが出来る。


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は無料でブログのレイアウトに選んだプラグイン。


「文書を囲む枠線」を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=” “」で統一する事にした。


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に変更する。


サイトで見つけた「自作のScroll-Top」が当ブログのアクセント!

検索で透明色関係のサイトを調べてる時に、何気なく見つけたサイトだけど「初心者」でこれまでできるのか?と思って「妻と僕」 のWordPressメニューから「自分で作成できるScroll-top」の記事を見つけた。丁寧で誰にでも分かり易く説明された記事を手元に置いて丸写しで試したところ「凄い!」の一言。当分このまま利用させていただくことにしました。

又、ほかにも貴重な記事が沢山あって、事あるごとに勉強させてもらっている。感謝の意をコメントするより当サイトで、この「妻と僕」サイトの素晴らしさを紹介できればと思う。


ログイン画面のロゴを変更

CODEXの「ログイン画面のロゴを変更」方法を参考にして試したが、何故か上手くいかなかったので少し手を加えて試した。親テーマだと更新の際に消えてしまうので、子テーマのfanctions.phpに書き加える。

function login_logo_image() {
echo ‘<style type=”text/css”>
#login h1 a {
background: url(‘ . get_bloginfo(‘template_directory’) . ‘/login_logo.png) no-repeat !important;
}
</style>’;
}
add_action(‘login_head’, ‘login_logo_image’);

元のロゴと同じサイズ(幅85px、高さ85px)の画像を準備して、親テーマのディレクトリに保存(「login_logo.png」)すれば、ログイン画面のロゴが切り替わる。又、ロゴのリンク先をウェブサイトにしたい場合は下記も書き加える。

add_action(‘login_head’, ‘login_logo_image’);
function login_logo_url() {
return get_bloginfo(‘url’); ➡ブログのURLを設定
}
add_filter(‘login_headerurl’, ‘login_logo_url’);

上記の画像変更だけで良いが、少しアクセントを付けて見たい場合は、width,height,border,border-radius,box-shadow等を加えてから必ず「background-repeat: no-repeat !important」を書き加える。

function login_logo_image() {
echo ‘<style type=”text/css”>
#login h1 a {
background: url(‘ . get_bloginfo(‘template_directory’) . ‘/login_logo.png); ➡ 必ず(;)
width: 85px;
height: 85px;
border: solid 1px #d0d0d0;
border-radius:50px; ➡ 角丸(5px)
box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.4);
bakground-repeat: no-repeat !important;
}
</style>’;
}
add_action(‘login_head’, ‘login_logo_image’);

function login_logo_url() {
return get_bloginfo(‘url’);
}
add_filter(‘login_headerurl’, ‘login_logo_url’);

円形にしたり角丸にして影を付けたりと独自のログイン画面ができるので楽しみが増えたね。


秘密にしたいフォルダーにBasic認証

WordPressのディレクトリ に「秘密の部屋」的なフォルダーを作成してBasic認証を掛け、見られたくないファイルなどを入れて置く。

【.htpasswdの作成】

コマンドプロンプト(管理者権限)を立ち上げて、C:\> x:\xampp\apache\bin\htpasswd -c x:\xampp\apache\.htpasswd user名を入力してEnterキーを押す。
*mcオプション(MD5)、オプションはどちらも可
New password: →入力
Re-type new password: →入力
次のように表示されればOK。
Adding password for user名 →追加できる。
x:\xampp\apacheに.htpasswd(ユーザ名:xxxxxxxxxxxxxxx)ができてるのでFTPでBasic認証を施したいディレクトリーのフォルダー内に「htpasswd.txt」に変更してからアップロード。

【サーバ上の絶対パス】

<!–?php
echo dirname(__FILE__);
「path.php」と名前をつけて保存、FTPでWebのルートディレクトリにアップロードして、ブラウザでアクセスすると、「サーバー上の絶対パス」が表示されるのでコピーしてhtaccessの「AuthUserFile」に張り付ける。

【htaccessのフォームを作成】

AuthUserFile サーバー上の絶対パス/フォルダー名/.htpasswd
AuthName “Enter your ID and password.”
AuthType Basic
require valid-user
エディターで作成して「htaccess.txt」で保存、htpasswd.txtがあるフォルダーにFTPでアップロード。

最後にアップロードした.txtの拡張子を「.htpasswd」と「.htaccess」にそれぞれ変更して終了。
以上でBasic認証を施したディレクトリ(フォルダー)が完成した。