いろんな形状の画像(clip-path)に影を付ける方法

クラッシックエディターでの「box-shadow」 ではブロックエディターでは不可?、画像に影(shadow)がつかない。いろいろ調べてみると、単純にclip-pathの要素に対してbox-shadowを指定すれば良いと思っていたが、clip-pathの場合は影の部分がカットされることが分かった。

【clip-pathに影(shadow)をつける方法】

試した投稿記事の影付き画像は、clip-pathをwrapする要素で作成して、「filter」を使用することで影が付くので下記の要領でコードをStyle.CSSに追加した。

/*---片方の影付き---*/
.clip-path-shadow {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5)); /*画像の影*/
}
/*---全体の影付き---*/
.clip-path-shadow2 {
  filter: drop-shadow(1px 1px 8px rgba(0,0,0,1));  /* 画像の影 */
}
*影の色は「rgba」必須
【片方に影】
【全体に影】

Clip-pathで色々な形状を作って影を付ける事ができること又、クラシックエディターでも「clip-path画像」にfilterを使用して影を付けることができることで楽しみが倍増!!

多角形の切り抜き画像に動きを加えた投稿記事を書く楽しみ方

先ずは「clip-path」の指定について、polygon(多角形) の頂点の座標を操作することが分かっていても、矩形、円形、星形などさまざまな形で画像の切り抜くことが難しい。そこでサイトを巡って見つけることできた CMAN 感謝! で自サイトにて使いたい多角形をコピーして整形したコードで「Style CSS」へ貼り付けた。

clippathで多角性の画像】

又、 CSS clip-path Maker 感謝! と言うサイトがあって「clip-pathでbasic-shapeの値」の使い方の画像サイズから「inset」「circle」「ellipse」「polygon」に対して、どの形状で指定するかによって値の書き方が少し違ってくることや、画像の大きさから見た形状をチェックできる。

整形したコードは同じパターンで統一して追加CSS又は、Style.CSSに追加した。

/*--- 双方向 (150x150)---*/ ←画像サイズ(任意、メディアで統一)
.clip-d {  ←アルファベット順に
  clip-path : polygon(40px 0px ,0px 75px ,40px 150px ,40px 110px ,115px 110px ,115px 150px ,150px 75px ,115px 0px ,115px 40px ,40px 40px );}
.clip-d:hover {transform: rotate(10deg);} ←動き

形状等のサンプル(星形、楕円形、卵形、菱形、双方向形、円形)又、スタイル的なことも考えて画像に動きを「マウスが触れる(:hover{}」入れながら試していくことにした。

今のところ「clip-path」の複雑系、例えば葉っぱ形とか複雑系などもあるけど、投稿記事に張り付けるまでに至っていない。

WordPressのファイル保護やセキュリティ対策

サイト(Wordpress)公開初期、頻繁にApacheのログに現れたWordPressのxmlrpc.phpにアクセスを試みるIPが多くてビックリ!情報サイトで確認して分かったことは「セキュリティ対策としてxmlrpcファイルを外部アクセスから保護及びブルートフォースアタックの対策が必要」と言うことで下記のように施した。

WordPressのファイル保護とブルートフォース対策

【xmlrpc.phpの保護】

1.WordPressの.htaccessに下記を追加
 RewriteRule ^xmlrpc.php$ “http\:\/\/0.0.0.0\/” [R=301,L]←現在不可
2.子テーマのfunctions.phpに下記を追加
 add_filter(‘xmlrpc_enabled’, ‘__return_false’);

xmlrpcファイルの保護必要なコード(1)がバージョンアップで「.htaccess」に追加してもすぐ削除されているのでfunctions.phpに(2)のコードを追加した。

【ブルートフォースアタックの対策】

「PeerBlockとApacheのhtaccessで保護」することでOK!と思っていたが、WordPressのプラグイン「WP-Optomize」で確認すると海外からのログインが何百とロックされている。なので、WordPressのブルートフォースアタック対策に「wp-config.php」の先頭部分に「admin系のユーザーのみ有効」だけど下記のコードを追加した。

if ( isset($_POST['log']) && preg_match('/^admin/i', $_POST['log']) ) {
 header("HTTP/1.1 403 Forbidden"); die();}

上記の追加で効果があったかどうか分からない部分があるけど、少なくともxmlrpc.phpのアクセスは完全にブロックして、WP-Optomizeで確認のブルートフォースアタックも百程度に減少してる。

ブロックエディターの「ボタン」をカスタマイズ

フロントページから「投稿リストへのリンクの記述」は枠線で我慢してたが、ブロックエディターのボタンに切り替えてみようと試みた。その前にサイトで調べて分かったことが幾つかあってその部分を理解した上で追加CSSに加えてカスタマイズした。

フロントページへのボタンのカスタマイズ

【統一したボタンのカスタマイズ】

前もってボタン用のスタイル(メニュー)の項目でデザイン(フォント、ボーダー色、リンク先、等)を作成してから「.wp-block-button .wp-block-button__link、.wp-block-button .wp-block-button__link:hover」をStyle.CSSに追加すると独自のボタンらしきものを作成することができる。

「.wp-block-botton .wp-block-botton_link」の部分は、前もって作ったデザインを除く、ボタンのトランジション(動き)等を指定する。
「.wp-block-button_link:hover」の部分は好みのボタン動作を指定する。

.wp-block-button .wp-block-button__link {
    background-repeat: no-repeat;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.wp-block-button .wp-block-button__link:hover {
    background-position: 70% 30%;
    padding: 10px 40px 10px 15px;  	
    color: none;
  	opacity:0.8;
}

見よう見まねの部分があるけど、「TwentySeventeen」には視覚的に修正できる「ダッシュボード→外観→カスタマイズ」があるので、好きなスタイルに近い ボタンをフロントページへ加えることができた。

WordPressで発生する面倒なトラブルや問題をサイトを巡って得る方法

WordPressの場合多くのトラブルと言うか問題は、細かい部分で「何とかならないか?」と言った作業中に起きることが多い。以前はその都度サイトを巡って解決方法を見つけたりしていたが。。。

―Wordpressのお役立ち情報サイトー

そんな中見つけたサイト テクメモさん、ここまで「インストール方法から便利なプラグインの紹介まで、Wordpressのお役立ち情報を配信」を紹介するサイトがあったとはビックリ!だった。

  WordPress全般に関する記事
  テーマカスタマイズに関する記事
  プラグインに関する記事

以前は単にメモってテーマ「TwentySeventeen」に合った情報をピックアップしたり、その都度チェックしてカスタマイズしてたけど、新たに立ち上げたサイトでは多くを参考にさせていただいている。感謝!

以前から幾つか参考にさせていただいた中で、「.htaccessに追加するだけでWordPressを高速化することができる魔法のコード」というもの「WordPressの.htaccessファイルにコピペで追加するだけのコード」が残念なことにいつの間にか利用不可になったようだ。理由は分からないけどWordPressさん!罪深いね!!

「WP-Optimize」は、WordPressのデータベースの最適化と不要なデータの削除ができるプラグイン

WordPressのデータベースは、最適化を行わずに運用し続けていると、データベースの中に余分なデータが増えて膨大な容量になり、ブログが重くなる原因になることがある。

WP-Optimize

【WP-Optimizeの主な機能】

WordPress高速化にも役立つ「WP-Optimize」の使い方や設定方法は簡単、最適化スケジュールを予め設定しておくことで、次のような不要データを自動で削除してくれる。

  記事の古いリビジョン
  自動保存された下書き
  ゴミ箱に残っている記事            
  スパムコメント
  期限切れのキャッシュ

一度設定しておけば、WordPressのデータベースを継続的に最適化・クリーンアップの処理が実行される。

当サイトでは記事を公開するまでに、下書き保存とかプレビューが頻繁なのでリビジョンの数が膨大になったり、キャシュの削除が必要となるので、最適化スケジュールでなくその都度、不要データを削除してる。

CSSで背景画像をフェードインして切り替えるスライドショー

プラグイン「ml slider」のように完成されたスライドショーでは無くても、自作のスライドショーをサイトに載せたいと調べていたところ見つけたサンプルCSSで背景画像をフェードインして切り替える」、生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来る。感謝!

スライドショー

―CSSで背景画像をフェードインして切れ替える―

早速、コピーしてstyle.CSSに貼り付け試したところ動かない。当然と言えば当然のことだけど、WordPressで使用するためには修正・訂正等を行うことが必要だという事に気が付いた。

1.全体のBOX定義は表示する画像の大きさのみ
2.背景の指定の「.box .bgImg」によって作動する。
3.段差で背景画像のアニメーションを実行の画像は一旦「ダッシュボード→メディア」から画像をダウンロードしてそのコピーを「bgImg src」に貼り付ける。
4.背景画像数は5画像 × 各5s = 25sがベース、なので5画像にはanimation-delay: を5秒づつ加える。

-祐天寺周辺-
-路地に咲く野花-

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来る。

<HTML>
<div class="box bgImg"> ←「bgImg」を加える
  <div class="bgImg src1"></div>
  <div class="bgImg src2"></div>
  <div class="bgImg src3"></div>
  <div class="bgImg src4"></div>
  <div class="bgImg src5"></div>
  <div class="boxString">フェード<br>切り替え</div> ←削除
</div>
<CSS>
/*---全体のBOX定義--- */
.box {
  position   : relative;
  max-width  : 400px;
  height     : 250px;
  margin     : auto;
  overflow   : hidden;
}
/*---背景の指定--- */
@keyframes bgimgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(./img1.jpg);   /* 背景の画像を指定 */
}
.box .src2 {
  background-image : url(./img2.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.box .src3 {
  background-image : url(./img3.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.box .src4 {
  background-image : url(./img4.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
}
.box .src4 {
  background-image : url(./img5.jpg);   /* 背景の画像を指定 */
  animation-delay  : 20s;
}
@keyframes bgimgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
#全面文字は削除することにした。
/*---前面の文字定義(サンプルのため変更してください)---*/
.box .boxString{
  position   : absolute;
  display    : inline-block;
  padding    : 10px;
  background : rgba(0, 127, 255, 0.7);          /* 半透明の青 */
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}

枚数を増やすためには通常transform: scaleでサイズの変更をさせないと最後の1枚の動作が変則的になるようだ。6画像も可能だけど今後の課題とした。

早速、フロントページでスライドショーを試した。投稿ページ用の画像サイズで完成させたのでサイズは小さ目、プラグインを使用しないでこれだけの出来栄えなので満足してる。

WordPressのログイン時のセキュリティ対策(プラグイン3点セット)

WordPressはたくさんのシェアを誇るシステムだけど、その代わりに悪意のある人達からの攻撃による危険と隣り合わせと言われてる。頻繁にアップデートが行われても攻撃は変わらず安心できない。特にWordPressのログイン、コメント、ピンバックとかトラックバックへのスパム攻撃、画像(写真)へスパム画像を張り付けたり等、経験上、多岐にわたる攻撃を防ぐのが難しい。

WordPress

【セキュリティ対策】

① limit-login-attempts ② throws-spam-away ③ photection

【セキュリティ対策として下記のプラグインをインストール】

WordPressのログインに制限を付ける「limit-login-attempts」

WordPressのログインに制限を付けて一定の回数に失敗するとログイン手続きをさせない機能があるプラグイン。設定や使い方はとても簡単で有効化の後、何も設定しなくても機能する。又、独自にログイン回数の制限と次回のログイン可能時間を決めることができる。。

ダッシュボードから「設定」→「Limit Login Attempts」をクリックしてWordPressログイン回数の制限を設定
 1.総ロック数: 今までにロックした回数。
 2.GDPR 準拠: ヨーロッパの規定基準なのでチェックしなくてOK!。
 3.ロック:ここに好みの基準を設定する。
 4.ロック通知: ロック制限を超えた場合WordPress上で確認するか指定のメールで通知を受けるかを選べる。
 5.他の設定ではIPアドレスを入力しておくとホワイトリスト(制限なしユーザー)、ブラックリスト(常に制限あり)として事前に処理を決めておくことができる。空白でOK!
通常は、空白のままで大丈夫でもOK!。

最後に「設定を保存」をクリックして終了。

スパム対策として選んだ「Tthrows-SPAM-Away」

WordPressのスパム対策としては「Akismet」が有名で、Wordpressと一緒にインストールされてるプラグインだけど、このプラグインはコメントを保留してスパムかどうかを確認して手動で削除させるプラグインなので使い勝手が良くない。と言うことでスパム対策用として選んだ。

基本設定はデフォルトのままでもOK!、Throws SPAM Awayは日本語が含まれていないコメントをスパムと判定してスルーするという動作又は、一定期間保存したコメントリストの確認及び削除する方法となっている。

スパムコメントを自動で判定して完全にスルーできるので手動でゴミ箱に移動や通知する必要がない。)特に変更しないといけない設定もないので、必要な部分だけチェックする。

 1.コメント欄の下に表示される注意文言 ←お好みで変更            
 2.URL文字列除外 ←空欄でもOK!

上記のように機能では、文章の変更とか除外したい場合や除外するIPを変更するなどの設定がある。

投稿画像をコピーされることから保護する「photection」

この「photection」は簡単、インストールして有効にすれば「Copyrighted Images」と表示してコピーを防ぐだけです。

どうでも良いことだけど、iPhoneで撮ったプライベート写真だけでもコピーを防ぐ目的でインストールした。

「Enlighter」はクラシックエディター、ブロックエディター「Gutenberg」の両方に対応

以前のプラグイン「Crayon Syntax Highlighter」がWordpressのバージョンアップでインストール出来なくなった。記事の中にHTML、CSSやJavaといったソースコードを書き込むことが多いので重宝してたプラグインだったので、一時は途方に暮れたけど同じ機能を持つプラグイン「Enlighter – Customizable Syntax Highlighter」を見つけ試した。

WordPress

-WP-Customizable Syntax Highlighter-

この「Enlighter」はビジュアルエディター「クラシックエディター」、ブロックエディター「Gutenberg」の両方に対応しているところとか、使い方も「Crayon」と同じように簡単、エディター内で専用のショートカットを呼び出し、コードを記述してスタイルを決定するだけで記事にソースコードが綺麗に埋め込めるなど素晴らしいの一言。

当サイトで表示してる設定方法

Appearance
  Code indentation 4Spaces→2Spaces          
Button Toolbar
  Always hide the toolbar

上記は見た目に関わる最も重要な設定なので、お好みで変更した後は無視してもOK!。

トップページ、固定ページ、投稿ページ等の「投稿、投稿日、投稿者」文字を非表示にする。

WordPressのテーマ「Twenty Seventeen」のトップページ、固定ページ、投稿ページ等に「投稿」とか投稿者文字が表示される。サイトを公開してこれらの表示がデザイン的に邪魔な感じなので非表示にした。

固定ページ、投稿ページのカスタマイズ

―タイトル、投稿者、投稿日を非表示-

特にトップページの「投稿は」見出し(h2)なので、コード自体を削除。

① 特にトップページの「投稿」は見出し(h2)なので、コード自体を削除。
 #index.phpを子テーマにコピー
  wordpress/wp-content/themes/twentyseventeen-child/index.php
 #下記のコードを削除
  <header class="page-header">
  <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ): ?></h2>
  </header>

 #以下のコードを、functions.phpに追加 ←投稿者名
  function twentyseventeen_posted_on(){
   echo '<span class="posted-on">' . twentyseventeen_time_link() . '</span>';  }

以上、トップページ、固定ページ、投稿ページの「投稿者」は削除される。

カスタマイズから追加CSSで固定ページ及び投稿ページの「entry-title」を非表示にする。   

 1.TOP記事(固定記事)のタイトルのみ非表示
  .home .entry-title {
   display: none;
  }
 2.全固定ページのタイトルが非表示
  .page .entry-title {
   display: none;
  }
 3.全投稿ページのタイトルが非表示
  .post .entry-title {
   display: none;
  }
 4.特定の投稿IDで非表示 .post-(例:post=123)
  .post-123 .entry-title {
   display: none;
  }
 #固定ページのみ非表示、投稿ページは非表示にしたいページのみ。 

カレンダーから移動した時に投稿ページに表示される「日:カテゴリー」とアーカイブページに移動の「カテゴリー名」は必要かな?目障りであれば、ファイル修正又はStyle.CSSに追加して非表示可能。

TOP

Copyrighted Image