いろんな形状の画像(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」の複雑系、例えば葉っぱ形とか複雑系などもあるけど、投稿記事に張り付けるまでに至っていない。

WindowsでXAMPPを最新版(ApacheFriends XAMPP)へアップデートする時の注意点

【今回のアップデート】
(XAMPP Version 8.1.2

   Apache 2.4.52
   MariaDB 10.4.22
   PHP 8.1.2 (VS16 X86 64bit thread safe) + PEAR
   phpMyAdmin 5.1.1
   OpenSSL 1.1.0g

最新のXAMPPへアップデート

―windows版Xamppへアップデートする時の注意点-

【最新版へアップデートする手順】

 1.必要なファイルのバックアップを取る
 2.現在のXAMPPをアンインストール
 3.最新版のXAMPPをインストール
 4.バックアップしていたデータで復元する

【必要なファイルのバックアップ】

アンインストールする前に必ず残すべきXampp関連ファイルのバックアップ。

X:¥xampp¥htdocs ←httpd.conf、httpd-ssl.conf、httpd-vhosts.conf
X:¥xampp¥mysql¥data ←MySQLデータベース
X:¥xampp¥FileZillaFTP ←設定ファイル全て
X:¥xampp¥MercuryMail ←設定ファイル全て
その他、ライブラリなどインストールしたファイル
X:\xampp\htdocs\wordpress ←全て

簡単なアップデートだと思うけど、実際はアンインストールしてからが要注意、うっかり手順を間違えると順調にアップデートできない。

1.コントロールパネルを開く←全てスタート
2.「MySQL」のルート&パスワードを設定→phpMyAdminを開いて空の「WordPress」作成
3.バックアップした全てのファイルを指定場所の新しいファイルと入れ替え(注:コピーで入れ替え)
4.新しいワードプレスのインストール画面の場合は、取り合えずインストールしてログイン、ダッシュボードから子テーマの有効化とプラグイン全てを有効化して再度「MySQL」のデータを差し替え(注:バックアップしたデータ)
5.再度ログインしてダッシュボード→WP-Optomizeで全てを最適化

以前にもXamppのアップデートをしたことがあるけど、不思議に思うほどスムーズだった。今回はワードプレスで再インストールの形になったので一瞬戸惑ったけど。。。無事に自宅サーバのアップデートが成功!

いよいよ梅雨入りで「まる」と散歩は、雨具が欠かせないのと抱っこして。。。だね。

昨日の夕方から雨が断続的に降り始めいよいよ梅雨入りと言う感じ、早朝、外を眺めると結構大粒の雨がふってた。とにかく「まる」にカッパを用意して早朝散歩と言っても抱っこして歩くことで疲れがいつもの倍だ。「オッシコもスッキリ」を済ませた後は雨の日のコースで帰宅。

これからの「☂の日」まる が進んで歩かないので、水たまりや湿った道では抱っこすることになり遠出が出来ないと言うか、散歩する度にずっしりと重さを感じることで結構疲がたまる日になりそうだ。

でも雨季になれば当たり前の日課、良いお天気の日は一緒に散歩するのが楽しいし、「まる」がいない一日はありえないという毎日だから良しとしよう。

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のデータベースを継続的に最適化・クリーンアップの処理が実行される。

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

久しぶりに訪れた祐天寺、「まる」が静まり返った境内を独り占め。

昨日の突然の散歩は長女の代わりで、何処に行く当ても無いので久しぶりの祐天寺へ行くことにした。

ゴールデンウイークの真只中なので多くの人が訪れるだろうと思っていたが、境内はシ~ンと静まり返っていて、「まる」は大喜びであっちへ行ったりこっちへ行ったり脇道へ通り抜けようとしても足を踏ん張って「嫌だ!」、と言うことで暫く境内で遊ぶことに。。。

ダッシュボードの「サイトヘルス」で気になる情報「iMagick」をインストールして解決

WordPressのダッシュボードを開くと最初に目につくのがサイトヘルスの情報で「良好だけど1つの修正が必要」とメッセージが目に入る。XAMPPだけなのかWordPressをインストールすると、「オプションのモジュール imagick がインストールされていないか、無効化されています。」という表示、WordPressはPHPに同封されているGDライブラリで画像処理を行っているので、imagickがインストールされていなくても画像処理を実行でるので「imagick」の導入は必須ではない。だけど管理画面にずっと表示されたままなのはやはり気になり、あまり気分が良くないので修正することにした。

ImageMagickとphp_iMagick

画像処理ライブラリー「imagick」をワードプレスに導入

【ImageMagickとphp_imagick】

「phpinfo」の「Compiler」の欄でバージョン確認、最新の「Visual C++」なので最新の「ImageMagickとiMagic」をダウンロードしてインストール。

ImageMagick」のインストールと設定
  *最新のImageMagick-3.7.0-8.1-ts-vs16-x64.zip
 1.解凍先は、C:\xampp直下に「ImageMagick」
  *中身は「binフォルダ」の中身全てだけで後は削除しても良い。
 2.環境設定の「Path」の設定
   システム環境変数の編集→詳細設定 → 環境変数→Pathをクリック  
  *新規を押し、「C:\xampp\ImageMagick」を新しいPathに登録。

「imagick」のインストールと設定
  *最新のImageMagick-7.1.0-18-vc15-x64.zip
 1.解凍先は、C:\xampp直下に「php_imagick」
   即、php_imagick.dllをC:\xampp\php\ext\へコピーする。
 2.「ImageMagick」フォルダにCORE_RLと付いたファイルを全てコピー

【モジュール imagickの有効化】

 1.C:\xampp\php\php.iniをエディタで開く
  「Dynamic Extensions」
  ;extension=shmopの下に「extension=php_imagick.dll
」を追加
 2.XamppのApacheを再起動(PCの再起動でもOK!)
 3.phpinfoを開き、「imagick」の確認、組み込まれていれば成功!   

最後にWordpressのダッシュボードを開いて「サイトヘルスステイタス」に「おめでとうございます ! 現在、サイトはすべてのサイトヘルスチェックに合格しています。」と表示されていれば無事完了!と言うこと。。。

TOP

Copyrighted Image