今日の早朝散歩は、2回も雨の日コースだよ。。。

朝の5時ごろ目が覚めて窓から外を眺めると本降りの☂、なので朝の散歩は小降りになってからと思いそのままベッドに入りうとうとしてたところで「まる」が枕の上でソワソワ。時計をみるといつの間に5時45分過ぎ、急いで起きて身支度を済ませて外の様子をうかがったけど小降りの☂に変わってた。

散歩は「雨の日」コース、栄通り終点のガード下を通り抜けて某散髪屋さんのところを左に折れて突き当りのガード下を通り抜けて「みよし通り」に入る。「まる」のスッキリはどちらかのカード下で済ませるのだけど、今日の「まる」は帰宅するまで知らん顔、と言うことで☂が止んでから又出掛けることにした。

食事を済ませ暫くすると☂が止んだので出掛けたけど、なんとてんこ盛りの「スッキリ!」を2番目のカード下手前だ。「まる」は相当我慢していたようで、みよし通りを軽やかな歩きに様変わり、よかったね。

まだ朝の8時前なので良かったけど「雨の日」コースで通過する「みよし通り」は朝の8時半ごろから東横線利用して登校する高校生、近くに住む小学生、通りの某幼稚園の園児を乗せたママチャリ、通りの裏手に結構マンションが建っているので東横線とかバス利用のサラリーマンなどが多く行き交う。なかでもママチャリには要注意で猛スピードで横切り危険そのもの。。。と言うことで某幼稚園の裏手からの「マルの散歩コース」は無理!

この「みよし通り」は、結構活気がある商店街で入口角にドトールコーヒー、洋服屋、コーヒー専門店、スマートフォンや電気製品を扱ってる店、ラーメン屋、ペットショップ、寿司屋、居酒屋風レストラン、乾物屋等々が立ち並び又、新しいコーヒーやケーキ店も進出してる。ただ100円ショップとか結構大きな生鮮市場風の店が廃業して中途半端なパーキングエリアになってるのが気になる。

この「みよし通り」では、四季を通してのイベントがあり、土・日フリーマーケット、サンマ祭り、抽選会、風の盆等々。お盆祭りはこの通りの先、駒澤通りに面する祐天寺で3~4日通して行われているけど、今のところコロナ禍で中止になっている。

装飾のためにサイトを巡って得た素晴らしいサンプル

WordPressのバージョンが6.0にアップすると言うこともあり暫くの間フロントページや投稿記事の見直しをしていた。バージョンアップで問題が発生するかなとか、今後のTwentySeventeenの更新で何か不都合が生じるかと思ったけど両方とも心配することも無く今のところ快適な感じだ。

【サイトの装飾】

ボタン式コメント欄
コメント欄を開閉するスタイリッシュなボタンの設置                    

コメント欄が開閉式ボタンでマウスオーバーにてボタンが回転して「クリック」することでコメント欄が表示・非表示と切り替わるユニークなボタン。設定は子テーマの「comments.php」にボタンのコードを張り付けるだけで非常に簡単。
ボタンのCSSはコードをコピーし「style.css」に貼り付けてボタンの大きさや色など、各自の好みに変更可能で当サイトでは変更なく張り付けた。

スイッチ式検索フォーム
スイッチ式検索フォームをCSSで作る!               

このスイッチ式検索フォームは前々から利用させてもらおうとCSSコードをコビーして保存してた。何が素晴らしいかと言うとWordPressの検索フォームを虫眼鏡アイコンで開閉するように見せてること、サイドバーとフッターに貼り付けた。

バウンドアニメーション
文字や要素が弾むバウンドアニメーションのCSSサンプル集          

画像とか文字をバウンドする感じのアニメーションのサンプルをサイトで探していたところ見つけたボールをバウンドさせるアニメーションをカスタマイズした。画像は円形のPNG、ボールにも影を付けて立体的雰囲気を出したかったけど。。。まぁいいっか!

フロントページや投稿記事に装飾で変化を持たせるページ作りの楽しみが倍増かな?!だね。

ページ内の特定場所の移動や別ページの特定場所へ移動するLINKの貼り方

多くの記事が日記帳的でメモ帳的な記事なので投稿した後、以前にも似た記事を投稿していたことに気が付いて記事内容を修正や訂正することがある。そこで、以前書いた記事が参考になる場合に、その文字列(箇所)を「#Link」できれば結構充実したサイトになりそう。

ページ内や別ページで移動する「LINK」の貼り方

ページ内の特定場所への移動

ページ内リンクの貼り方
 1.リンク先としたい見出しブロックを選択し、「高度な設定」をクリック。
 2.「HTML アンカー」の入力欄に任意の文字列(目印)を入力。←例:「link」            
見出し以外のブロックに目印(HTMLアンカー)
 1. リンクを設定したい文字列を選択
 2.リンクを設定したい文字列を選択して「」ボタンをクリック
 3.#HTMLアンカーで指定した文字列:「#link」を入力し、[送信]ボタンをクリック

別ページの特定場所への移動

リンクを設定したい文字列の入力バーの「」ボタンからリンクするページを指定
 1.#Link先の文字列を指定(リンクする文字列をマーク)
 *見出しをLINKするページの場合は、「高度な設定」のHTML アンカーに入力。
 2.前もってLink先のアドレスとpost-idまでをコピー
(例:(https://www.osshinet.com/server/2022/01/26/321 #link)のように「#Link」をリンク先に張り付け、リンクする文字列の確認してから「リンク追加」をクリック。
リンク先の見出し又は段落の入力バーから「HTMLとして編集」にして#Linkする文字列の前に(<a id=”link”></a>)を張り付ける。

クラッシックエディターを使用していた時は「TEXT」で張り付けていたが、ブロックエディターでは、ブロックの「HTMLアンカー」や入力バーの「」ボタンから張り付ける事ができる。今のところは簡単な投稿記事で済ませてるので利用するチャンスが無いけど忘れないように方法をメモることにした。

今日は、時間を間違えて1時間早く早朝散歩だよ「まる」ちゃん!

ここ暫く雨季のような天気なので既に雨季だと思っていたがまだまだのようだ。昨日今日と洗濯日和と言うか良い天気で今日の朝は、起きる時間を間違えてしまった。

早朝4時半ごろ、まるが「時間だよ~」と言わんばかりに頭のそばでソワソワ、なので辺りをみると既に5時半過ぎのような明るさなので起きることに、眠気眼で起きたので時計を見ないで散歩支度、何時ものコースで帰ってきたがママ達は熟睡中。。。

いつもと違うので不思議に思っていたが、時間を間違えてることに気が付かなかった。6時ごろに皆起きてきて「何時に起きて散歩に行くんだ!」と怒られちゃった。うん~、と言うことで今頃眠くなってきたね。

WordPressのPHPファイルの文字化けを簡単に回避する方法

以前に「妻と僕」さんのボタン式コメント欄を試していたが、comment.phpで文字化けで暫く放置していた。たまたまfunction.php内のコードに日本語で注意書きを入れたところ同じく文字化けなのでサイトを巡って調査した。
多くの文字化け回避の情報でファイルを修正したが一向に回避できないでいたが。。。最後の手段でテキストエディタの「秀丸」のエンコードの種類を「Unicode (UTF-8」で指定して名前を付けて保存してみたところ、なんと文字化けが回避できた。早速、comment.phpでもエンコードを変えて保存したところ同じく回避、何なんだという感じ!!!

PHPファイルの文字化け回避

「秀丸」で文字化け回避

幾つか該当するPHPファイルもテキストエディタ「秀丸」で、エンコードを指定して保存したが、全て文字化けを回避できた。

1.秀丸で文字化けしたPHPファイルを開く
2.ファイル(F)からエンコードの種類(D)で文字コードの一覧を表示
3.ファイルの種類が(.php)でも「日本語(Shift-JIS)」が選択されてるので、一覧から「Unicode(UTF-8)」を選択
4.エンコードの切り替えダイアログが出たら、「内容を維持したまま適用(K)」を選択して保存

 

 

最後に、各ファイルを「FTPでUP」すれば文字化けは解消されている。Windows環境では「php.ini」で設定されていても文字化けすることがたまにあるらしいので、文字化け回避のために「秀丸エディタ」で解消できる。このエディターを購入した当時は、高い買い物と思っていたが「秀丸」を購入して正解だった。

子テーマのサイトが壊れた?!親テーマで元の姿に、だけど又壊れた!再インストール、一段落して「まる」と午後の散歩

3月末にTwentySeventeenの子テーマが壊れて親テーマにしたけど、同じく壊れて一日中原因を調べたが分からずしまい。このときの日記がみつかったので今頃だけど投稿することにした。

再インストール、「まる」と午後の散歩

いや~驚いた!!!一昨日の午後、いつものように作業をしている段階でトップページを開いたところヘッダー画像が非表示で、再読み込みするとトップページの3分の一程度まで消えてしまった。キャシュやクッキー等の削除や「WP-Optimize」で最適化も試みたが。。。サイト巡りで調べたが該当するトラブルの解決方法が見当たらない。仕方が無いので子テーマを断念して親テーマを修正したり追加して何とかほぼ元通りのサイトが出来上がったと胸をなでおろした束の間にナナナナんと親テーマも壊れた。

このまま放置できないのでWordPressを再インストールすることにして、今度はクラッシックエディターの併用無しでブロックエディターのみのサイト構築を試みることにした。ある程度完成したところでの感じは結構気に入ったサイトなので、今までが何だったのか?最初からブロックエディターでやれば良かったと後悔してる今日この頃、と言うことでその時の日記が。。。

一段落したところで長女が体調が良くないと言うことなので「まる」と午後の散歩することになった。散歩コースは「まる」に任せて歩く行先は中目黒方面で地獄の坂道を下って中目黒銀座に入る前方のスーパー手前の右に折れる路地に行こうとしたが「嫌だ!」。仕方が無いので、銀座通りの中間あたりでまるを抱っこして無理やり右側の狭い路地へ。坂道をどんどん進むと駒沢通りに出るけど、手前の天祖神社に入って並びの公園で一休みした。

子供達の七五三祝いの天祖神社は祐天寺の氏神様、公園は高台にあり中目黒方面を一望でき、公園内は幼稚園並みの子供の遊び場になっていて、桜の木も数多く植えてあるので満開時の公園は賑やかそのもの。公園のベンチでしばらく休んでから帰宅、やぁ疲れた~

投稿記事の文字や画像にCSSのみで影や動き、アニメーション等で装飾

以前から簡単な方法でフロントページ、投稿記事に装飾して楽しんでいたが、最近クラッシックエディターからブロックエディターに移行したので新たな気持ちで「CSSのみで装飾」に挑戦してみた。

CSSのみで装飾

【CSSのみで装飾する準備】

タイトル、見出し、文書内の文字に影で協調

 1.フロントページをオープンするとサイト・タイトルがフェードイン。

.site-branding-text {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;}
@keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
      0% {opacity: 0}
    100% {opacity: 1}
}

 2.投稿記事の見出し、協調する文字に影(text-shadow)を追加する。

o{text-shadow: 1px 2px 3px #808080;}
*(a),(p)等のアルファベットは避けること

文書枠のサンプルを得る。

 1.文書枠に関しては、サンプルを紹介してるサイトから好みの枠を選んでカスタマイズした。 「さるわか」さんのホームページ 感謝!

ピックアップ例:12. 分厚いボード風
    <div class="box12">
        <p>ここに文章</p>
</div>
.box12{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5989cf; ←#f0f8ff;に変更
    background: #c6e4ff; ←none;に変更
    border-bottom: solid 6px #aac5de;
    border-radius: 5px;
}
.box12 p {
    margin: 0; 
    padding: 0;
}

 2.ピックアップしたサンプルがマウスオーバー時に浮き上がる。

.float{ position:relative;
    top:0;
    padding:10px 20px;
    display: inline-block;
    border: 1px solid #ccc;
    color: #333;
    text-decoration: none;
    outline: none;
    transition: all .5s;}  /*アニメーションの設定*/
.float:hover {    /*hoverをしたらボックスに影がつき浮き上がる*/
    top:-4px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);}

装飾した文字や画像にアニメーションで協調

取り合えず最低でも各種プロパティーがどのような動作するのかだけでも知る必要がありそのサンプルなどをサイトから得る。
参考にした多くは 「WEB MANABU」さんの「応用69.要素の移動、回転、変形(transform)」からカスタマイズした。感謝!

 1.サムネイル画像を影を付けて回転させる。

<HTML>
    <div class="clip-path-shadow rotate-x"> /*--x軸(縦)回転--*/
    <div class="rotate-y div"> /*--画像の情報と動作--*/
    </div></div>
   *動きが無い場合は影と回転を<div>で囲む
<CSS>
/*--X軸(縦)回転--*/
.rotation-x1,
.rotation-x2{
    width: 150px;
    height: 150px;
}
.rotation-x2{
    transform-style: preserve-3d;
    perspective: 150px;
}
.rotation-x1 div,
.rotation-x2 div{
    transition: transform 2s;
    width: 150px;
    height: 150px;
    line-height: 150px;
    background-color: #ddd;
    text-align: center;
}
.rotation-x1 div:hover,
.rotation-x2 div:hover{
    transform: rotateX(2turn);
}

 2.ボーダーラインをアニメーションさせる。

<span class="border"> /*中央から外へ広がる線--*/ </span>
.border{
	position: relative;
	text-align: center;
	font-size: 12px;
}
.border:before{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	border-bottom: solid 2px #00b900;
	transform: translateX(-50%);
	animation: border_anim 3s linear forwards;
}
@keyframes border_anim {
	0%{width: 0%;}
      100%{width: 100%;}
}

 3.マウスオーバー時に文字を拡大させる。

<span class="kakudai">拡大する文字</span>
.kakudai{
    display  : inline-block;
    animation: kakudaiAnime 4s alternate infinite; /* アニメーション指定 */
    animation-play-state: paused;
}
.kakudai:hover {        
    animation-play-state: running;
    }
@keyframes kakudaiAnime{
   0% { transform: scale(1, 1);   }    /* 大きさ */
  50% { transform: scale(2, 1.5); }    /* 大きさ */
}

多くのサンプルがネットに溢れてるのでそのまま利用できるものがあるけど、少し手を入れることで好みの影とか動き(アニメーション)に変える事ができる。

いろんな形状の画像(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のアップデートをしたことがあるけど、不思議に思うほどスムーズだった。今回はワードプレスで再インストールの形になったので一瞬戸惑ったけど。。。無事に自宅サーバのアップデートが成功!

TOP

Copyrighted Image