Newpost Catchの画像無し記事に代替え画像

ここにきて投稿内に画像が無い場合のレイアウトのことが気になり始めたので、サイトを巡ってNewpost Catchに関しての記事をチェックしたが「アイキャッチ画像として投稿内にある1枚目の画像を自動でサムネイルとして表示」できること以外、新しい情報が見当たらない。

諦めてWordpressのcontents–>>plugins–>>newpost catch内で「no_thumb.png」をみつけたので、早速、アイキャッチ画像用に選んだ写真のサイズや拡張子をpngに変えて入れ替えたところ、気になっていた部分が良い感じになった。


WordPressで忘れがちな解決方法

【メンテナンスモードを強制解除】
1.アップデートが失敗するとメンテンナンスモードが解除されず、WordPressサイトにアクセスできなくなる。この場合は、FTP等でWordPressのインストールディレクトリ直下にある「.maintenance」ファイルを削除する。
2.プラグインのアップデート中に失敗するとメンテナンスモードが自動解除されなくなり「.maintenance」ファイル自体が作成されていないケースがある。この場合は、アップデート中の(アップデートを失敗した)プラグインを、ディレクトリごと削除すればOK。
以前は突然サイトが真っ白になって驚いたり、焦ったりしたが。。。超簡単!

【特定のページの特定の場所にジャンプ】

Daily風の投稿なので同じような部分的な記事を以前書いたことを思い出す。同じ記事ならページへジャンプ、記事の方は補足的に書くだけで済むのでリンク先とアンカー名を決める。超簡単なのに、このことをたまに忘れて一生懸命書きつずったりすることがある。

[文書内の見出しや文字から]
リンク先として「#+アンカー名」を指定するだけなので簡単、イメージリンクの「aタグにアンカー」を指定してもOK!

<a href=”….<リンク先>…./#a01″>文字又は、見出し</a>
<a name=”a01″>文字又は、見出し</a>

ジャンプ先を指定する例) <a href=”https://www.osshinet.com/blog/hp/12979/#a01″>文字又は、見出し</a>
*文字の指定はスペース等を含めて正確な同一文字又は、見出し。

【消えるスペース(空白)、段落の解決策】
つい手慣れたテキストで記事を書いたりコピーしたあと、ビジュアルエディターに切り替えて強調したい文字とか、画像に属性を入れたりすることがある。こんな時、テキストで書いた文頭にスペースとか段落等を入れてた記事が、公開してみるとこれらが削除されてか、ちぐはぐなレイアウトになり厄介なことになる。原因は、WordPressのエディターは自動整形の仕組みを持ってるので勝手に消してしまうようだ。確かにcssをいじったりtagを追加する方法があるけど、プログミング知識が必要になるので少しハードルが高くなる。

最も簡単な解決策と言っても高度な策ではないけど、「TinyMCE Advanced」のAdvanced Options(高度なオプション)内にある「Stop removing the “p” and “br/” tags when saving and show them in the Text editor」の「チェックボックス」にチェックを入れる。
その上で、ビジュアルエディターを使って記事を書くと、少なからずこれらを解決することができる。


不正ログインを防ぐ「Limit Login Attempts」の導入

この1週間ほどの間に「Limit Login Attempts」から「Too many failed login attemptsで24時間ブロックした」と言う知らせが、既に5回ほどあった。パスワード総当たり攻撃(ブルートフォースアタック)なのか?ログをチェックして末尾の数字が違うIPアドレスだけを、取り合えずPeerBlockに登録して遮断。

このプラグインはWordPressのログイン画面に対するログイン試行回数を制限できるプラグインで、ログイン認証に複数回失敗すると、ログイン画面を一定時間ロックし、管理画面への不正ログインを防ぐ効果がある。ログイン試行回数やログイン画面のロック時間は、プラグインの管理画面で自由に設定できるし、「基本設定」だけでも十分機能を果たせる。

*日本語化も対応していて「GitHub 」からZIPをダウンロード、解凍して「limit-login-attempts-ja.mo」をwp-content\plugins\limit-login-attemptsに入れればOK!

とにかくWordPressはコンテンツ管理システム(CMS)で利用者が多いから当然悪さをしようとする輩も多いはず、なのでサイトのSSL化だけでなくこのプラグインの利用でセキュリティを向上させるのが必須のようだ。


Crayon Syntax Highlighterの使い方

WordPress の記事上にソースコードを掲載する時などに、このプラグインのことが気になって、試したくなる衝動に駆られる。このブログでは「どうかな?」と言った思いがあって止めていたが。。。試す程度であれば良いかな?又、良ければこのブログも少しグレードアップできそうなので、プラグイン 「Crayon Syntax Highlighter」をインストール。

以前は特殊文字をTEXT内(ビジュアルでは自動的に)に書くのが面倒で全角で誤魔化してたが、そのような意味で言うと試す価値がありそうだ。

早速、プラグインを有効化してみたところ、全て英語で表示されて「アレレ?」理由は分からないが、調べてみると「wp-content/languages/plugins/」フォルダにある
(crayon-syntax-highlighter-ja.mo、crayon-syntax-highlighter-ja.po)が原因で、これらを削除すると日本語化できることが分かったので削除、無事に日本語化OK!

次に、いろんな形のハイライト表示があり、又、ツールバーの表示「有る・無し」でブログのデザインが変化する感じなので、両方を試したところ「無し」がベター。ところが、いろいろ弄った結果だけど基本設定のままが良さそう。

【デザイン要素の調整箇所】
1) テーマ デザインの変更(クラシック)
2) フォントの種類・大きさ・行の高さ
3) 上下余白の調整
4) ツールバーを表示・マウスオーバー・非表示
5) Wrap lines by default 行の折り返しを有効・無効
6) 必要な時だけcrayonのCSSとjavaScriptを読み込むように試みる? 「チェックを入れる」でページ表示の最適化

サイトで見つけた個人的に公開(100%ja訳) してる日本語翻訳ファイル(crayon-syntax-highlighter-ja.mo crayon-syntax-highlighter-ja.po)両方をダウンロードして置き換えた。


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

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が気に入って、Defultテーマを出来る限り修正することなく、ベースになるプラグインが欲しい。。。そこで選んだプラグイン。

【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=” “」で統一する事にした。