記事の画像に枠を付ける

画像にメリハリをつけるためには枠を付けること必須ですよね

バージョンは違えど同じWordPressなら使えるだろうとCSSとHTMLで画像に枠を付ける作業をしてみた。

トップページの画像に適用してみたけどまったく無視されたっぽい。(x_x；)

同じ方法で画像ブロックを使った画像にも適用してみたけど完全無視！遊ばれてる？？(笑)

ああたは素人なんだから謙虚に学習なさ～い！
wordpressのせいじゃないことは確かよ！！ちゃっちゃと間違い探しなさいね

最近とみに忘れっぽいから、とりあえず備忘録だわ、ついでにコード表示も試してみなきゃ

たいへ～ん！！
備忘録しとこうと思ってコード見たら余計なものが入ってた
単純に確認ミスだったわ

気を取り直して実行したら⇩みたいになってしまった。一難去ってまた一難ってかあ

この枠づけ方法には「おまけ効果」もありました。使えます。

画像ブロック自体に枠がついてしまった※①のです。反映はされたけどビミョウ・・・

クラッシクエディタで画像表示をしてみたらちゃんと反映されました。（￣・・￣）ふむ

これはあきらかにブロックエディタとクラッシクエディタの差

ということは、曲者はブロックってことになりますよね

You Remember!! それって「figure」じゃね？

く～ぅっ！そうでした「figure」が足りなかった。

「figure」はブロックエディタでは画像を挿入した際に自動的に設定されるブロック要素
ということでクラス名の前に 「figure」 付けることで解消されました。

それぞれのCSSコードは以下 ⇩

コードブロックを使ってみた

「 画像に枠＋シャドー をつける」は以下のコードをCSSに追記します。画像の「高度な設定」の「追加CSSクラス」にクラス名の（waku）を入力して実行ですが※①上記のようにブロック枠自体に枠がつく結果に。

このコードは画像単体には適用されませんが、どう頑張っても画像に枠をつけることが出来なかった「メディアとテキスト」ブロックではブロック枠を引き立たせるのに役立ちます。

.waku { 
border:1px solid 5px #808080; 
box-shadow: 2px 5px 8px #a9a9a9; 
}

「コード」ブロックは表示されたコードをクリックすると全選択されるんですね。

以前は追加CSSとHTMLでそのコード枠を作って利用していました。
せっかくなので「クリックで全選択」のコード枠で実装※②してみます。

画像に枠をつけるコードは以下　⇩

アコーディオンブロックにコードを表示してみた

コード表示が長いとそれだけで鬱陶しいページになってしまう。
追加CSSとHTMLで要素を見え隠れさせていたけど「アコーディオン」⇩ が使えそうです。

（CSSに追記）

figure.waku img { 
border:1px solid 3px #808080; 
box-shadow: 2px 5px 8px #808080; 
}

枠をつけたい画像の、/高度な設定/追加CSSクラス/「waku」と入力すれば反映されます。
複数のパターンを使用する場合はクラス名を「waku1」とか「waku2」とかに変更で増やせます。
私は分かりやすく、Photo(pwaku) Block(bwaku)としました。

思惑通り、アコーディオンにコード表示できたにゃん

「コード」ブロックに直接コードを記入すると
「このブロックには想定されていないか無効なコンテンツが含まれています」※③
と出て修正されてしまいコード表示が出来ません。

クラシックエディタを使えば簡単ですが消えゆく運命？のエディタです。

ブロックエディタで解消してみました。（手順は下方）

figure.frame img { 
border: solid 3px #808080; 
padding: 2px; 
}

画像の/高度な設定/追加CSSクラスに「frame」と入力すれば反映されます。

枠線の色とか変更して見栄えを変えて自分好みにできます。

クリックで全選択のコード枠※②を実装する

CSSとHTMLでオリジナルのコード枠を表示します。

このコードはLuxeritasTheme関連検索での「綾糸.net」さんからいただきました。

前記の「クリックで全選択」のコード枠を表示させるコードです。

CSSコードは/外観/テーマエディタ/付属のCSS/に追記します。


/*ソースコード用*/
.code{ 
position:relative;
margin-left: 0px;
padding:30px 0 10px 20px; /*余白：上・右・下・左*/
border: solid 1px #5fb3f5; /*枠の色・幅*/
border-left: double 3px #5fb3f5; /*左ラインの色・幅*/
background:#f0f8ff; /*背景色*/
list-style:none;
color: #2F3437; /*文字色*/
font-size:1em; /*文字サイズ*/
overflow: auto;
}
.code.css:after{content: 'CSS クリックで全選択'; background: #4169e1;}
.code.html:after{content: 'HTML クリックで全選択'; background: #834f3d;}
.code.js:after{content: 'JS クリックで全選択'; background: #ca8004;}
.code.php:after{content: 'PHP クリックで全選択'; background: #5e7e2c;}
.code.css:after, .code.html:after, .code.js:after, .code.php:after{
position: absolute;
top: 0px;
left: 0px;
padding: 5px 10px;
line-height: 1;
font-size: 0.9em;
color: #fff;
}
/*コピー可に*/
pre code{
user-select:all !important;
-moz-user-select:all !important;
-webkit-user-select:all !important;
-khtml-user-select:all !important;
}

codeをクリックで全選択 ⇒Ctrl＋C（コピー）⇒Ctrl＋V（貼りつけ）

記事の方には以下のコードのうち使用する「言語」のコードを貼りつけます。 

<pre class="code css"><code>ここにコード</code></pre>
<pre class="code html"><code>ここにコード</code></pre>
<pre class="code js"><code>ここにコード</code></pre>
<pre class="code php"><code>ここにコード</code></pre>

上記は「コード」ブロックを使っているのでひとつのコードを選択することが出来ません。

言語ごとに表示させる必要があります。

<pre class="code css"><code>ここにコード</code></pre>
<pre class="code html"><code>ここにコード</code></pre>
<pre class="code js"><code>ここにコード</code></pre>
<pre class="code php"><code>ここにコード</code></pre>

これで、使いたい言語ごとにクリックで全選択できます。

記事にはCSSなのかHTMLなのか言語名を選ぶか書き換えればタイトルに表示されます。
言語名は「css」「html」「js」「php」いずれも半角小文字です。

想定されていないか無効なコンテンツ※③対処法

「コード表示」を見るとわかりますがwordpress以前のバージョンとは全く違った構成になっています。

「アコーディオンブロック」の中に入れる方法に限らず単純に「コード」ブロックを使ってコード表示することは簡単に出来ますが、オリジナルのコード枠で表示させたい場合はひと手間が必要です。

「このブロックには想定されていないか無効なコンテンツが含まれています。」の対処手順

  1. （＋）でアコーディオンブロックを開く。
  2. 中に「コード」ブロックを開く。
  3. 表示させたいコードをコピペ
  4. 「HTMLとして編集」に切り替えるとエスケープされます。
  5. 「wp-block-code」の部分を「code 言語」に書き換えます。
  6. 「このブロックには想定されていないか無効なコンテンツが・・・
  7. 「解決」を選択
  8. 左側の「HTMLに変換」をクリック
  9. 「ここにコード」に表示したいコードをコピペして完了です。

「code」の手前を消して「code」の後ろに半角スペース空けて言語を入力でもOKです。

ここで「クラシックエディタ」に変換しても出来ますが元の木阿弥になっちゃいます。

この手順で進めると「コード」ブロックが「カスタムHTML」に自動的に変わります。

にゃん太

始めから「カスタムHTML」ブロックでやっても上手く行かんぞ
何故かは知らん！！

クラッシクエディタで作業するか、少し手間がかかるけどブロックエディタで作業するかです。
慣れてしまえばブロックエディタで作業する方がビジュアルでの見た目がすっきりしてます。

Gutenberg（ブロックエディタ）君ってなかなかいいやつじゃん

「アコーディオン」ブロックは攻略（笑）　（Continue to next time）

はにわ君

まてまて、これにはラッキーなおまけがついたのじゃよ
瓢箪から駒！「figure」を付けなかった枠のコードじゃが
アコーディオンブロックの中の画像には他のどれでもない
なんと、この「waku」で画像枠が表示されたのじゃぁ

瓢箪から駒な「おまけ」

このアコーディオンブロックに挿入された画像に枠が付きました。

画像幅（500px）
画像幅（800px）

レスポンスが適用されるので画像幅を大きめにしておくと画像いっぱいで枠がつきますね。

ギャラリーブロックを使ってみた

「ギャラリー」ブロックで写真館、メディアライブラリにも表示されるので並べ替えなんかも簡単に出来ちゃう。

画像の枠もクラス名追加でギャラリー内の個々の画像に適用されます。

ブロックエディタ至れり尽くせりですねえ、毛嫌いしてた私はバカでした。

以上、記事中の画像に枠をつけるでした。d(⌒o⌒)

残念な追記です。–2022.01.21–
「記事画像に枠＋シャドーをつける」ですが、
画像ブロックを使って画像を表示しただけなら摘要されますが、
中央寄せとか配置変更を加えたりすると摘要されないことがわかりました。

Luxeritas Theme,Wordpress

Posted by yukko