枠線ブロックとオリジナル枠線を使ってみる

LuxeritasBlocksの「枠線ブロック」を使ってみた。

　　　　　　　　Happy Merry Christmas
　　　　　　　　枠のスタイル、太さ、色、背景色、文字色などのカスタマイズに加え
　　　　　　　　背景に画像も使えてオーバーレイ効果も加えることができて、
　　　　　　　　もうこれだけで十分ですね。

なかなか良き出来栄えですな (v^ー°)

でも、もう一つくらいオリジナルの枠が使えたら映えるのではないかと・・・

CSSとHTMLだけでオリジナルの囲み枠を実装してみた。

ちょっとおしゃれな、紙が少しめくれた感じの囲み枠を使ってみたかったので実装。
色と文字の位置だけ調整して「サルカワ」さんのbox25をそのまま使わせていただきました。

まずは、LUXERITAS BLOCKSの枠線ブロックを使用してみました。

クラシックエディタを使わないとダメかと思ってADDQicktagに追加してみましたが

「カスタムHTML」ブロックでHTMLコードを貼りつけるだけで簡単に出来ました。

ところが「プレビュー」では文章の入力が出来ないので、改行は「HTML編集」で「<p> </p>」タグを手入力するしかないようです。

クラシックエディタを使えばそこんとこクリアできます。⇩

（＋）で「クラシックエディタ」を開き「HTMLで編集」を選択してコードをコピペ
「ビジュアル」に切り替えても文章の入力、改行も出来ます。（これがそれです）

どちらもオリジナルの角がめくれた枠線が実装されました。

どっちの方法が良いんだろうか？
クラシックエディタで作業した方ってサポート終了で崩れるのかな？

その時はその時じゃ
まだ生きとったら頭使って解決策を見つけてTRYじゃな

実装できたところで枠線のコードを記録

クラッシクエディタを使って「クリックで全選択」のコード枠の中に記述するんだっけ？
「コード」ブロックで記述すれば良いんだっけ？？

そんな手間暇かけなくてもシンタックスハイライターを使えば一発解決じゃ

そうだった、
LUXERITAS BLOCKSにシンタックスハイライターあったね！

LUXERITAS BLOCKSシンタックスハイライターを使ってみた

シンタックスハイライターで生成したコードをアコーディオンブロックに入れてみました。

.box25{
    position: relative;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 5px #d6ebff;
    border: dashed 2px white;
    padding: 0.7em 1em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #87cefa #fff #87cefa;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}

長いコードもすっきり収まって、気持ちいい (v^ー°)

HTMLコードはトピックブロックに入れてみました。

HTMLコード
<div class="box25">
    <p>ここに文章</p>
</div>

大成功＼(＠＾０＾＠)/ これで「copy」「copied」もバッチリ

——-（注）ここから↓↓—————–

ところがところが、またまたトラブル？

言語を選んでいるのに「HTML」が反映されず「Markup」のままになってる！

「コードエディタ」で「language-markup」を見つけて「html」に書き換えました。

HTMLコード
<div class="box25">
    <p>ここに文章</p>
</div>

ためしに他の言語でも試してみたけど「HTML」だけダメなようです。

これってどうなんだろ？でもシンタックスハイライターでコード表示が簡単になったのは確かです。

——–ここまで↑↑訂正ありです↓↓——————-

言語を選んでいるのに「HTML」が反映されず「Markup」のままになってる！の部分
とんでもない勘違い、勉強不足が露呈しました。
テーマの配布サイトさんに相談したところ、回答をいただき赤面です。)^o^(
そもそもが、ここでの「Markup」は「マークアップ言語」のことのようです。
なので、反映されていないのではなく正しく反映されていたというこになります。

HTMLのような「山括弧で囲ったタグにより、要素をマークアップする」という意味
詳細についてはwiki「マークアップ言語」で
2022.01.12

見つけるまで、あんなに苦労したシンタックスハイライターが
こんなにも簡単に使えてしまうなんて。
ありがたいけど、カスタマイズの楽しみが減った気がするわ。

何を贅沢なこと言っとる！！
キーキー眉間にシワ寄せてやっとったことが簡単に出来たんだから
人の好意には素直に感謝するもんじゃぞ

LUXERITAS BLOCKS に感謝～～～＼(^^＼)(／^^)／

Luxeritas Theme,Wordpress

Posted by yukko