Simplicity2の補足情報拡張クラスLuxeritasへ反映して継続！拡張クラスのCSS仕様変更

wordpressのテーマをSimplicity2からLuxeritasに変更した事で拡張クラスが表示されなくなりました。

Simplicity2の補足情報の拡張クラスはCSSさえ追記すれば使用できるのでCSSに追記。

Luxeritasはまだまだわからない部分がありますが、安定して以前のまま表示できるようにカスタマイズを続けます。

拡張クラス

拡張クラスを使うとブログの表情が変わります。

AMPには意味がない機能ですが、パソコンやAMP以外でのスマホ閲覧時はメリハリがついて見やすくなりますので装飾ボックスを多用していました。

装飾枠を使う事でピックアップしたいワードを際立てます。

使用している装飾枠

写真ブログで使用している装飾枠は「注意喚起」「疑問」「回答」や記事内の「ピックアップリンク」などです。

「注意喚起」などは真っ赤なエリアに白抜きや黄色文字などだとかなり危ない感じですが、そういう訳でもないので、程よく注意で出来る限り読んでもらえるようにしたかった。

注意喚起表示

こんな感じです。

fontawesomeもご注意くださいも指定済みの定型ワードです。

CSS追記コード

exampleを任意の文字に。

/* ご注意ください */
.example-box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 2px #e95464;
}
.example-box .box-title {
position: absolute;
display: inline-block;
top: -27px;<br>left: -3px;
padding: 0 9px;height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 14px;background: #e95464;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;}
.example-box p {margin: 0;
padding: 0;
.example-box 
.box-title:before{
font-family: "Font Awesome 5 Free";
content: "\f071";
padding-right : 5px;
/*文字間*/color: #FFFFFF;
/*アイコンカラー*/
}

記事内htmlコード

<div class="example-box"><span class="box-title">ご注意ください</span>ここに文章</div>

疑問と回答表示

次に「疑問」と「回答」 これもハウツー記事などでは必要だったため、Luxeritasでも継続したかったのと、以前の状態を維持したかったためです。

ただ、fontawesomeの表示が崩れたため小さくしました。

Simplicity2の仕様だったためCSSへの明記も同様にしなければ表示されません。

CSS追記コード

example-1/example-2を任意の文字に。

/* クエスチョン */
.example-1{
background-color: #F4F3EB;
padding: 20px 20px 20px 50px;
border-radius: 4px;
position: relative;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
.example-1::before{
font-family: FontAwesome;
font-size: 30px;
position: absolute;
top: 5px; left: 10px; color: #EAE3B4;
}
/* ビックリマーク */
.example-2{
background-color: #ffe0e0;
padding: 20px 20px 20px 50px;
border-radius: 4px;
position: relative;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
.example-2::before{
font-family: Font Awesome;
font-size: 30px;
position: absolute;
top: 5px; left: 10px;
color: #ff9393;
}
.example-1::before{
font-family: "Font Awesome 5 Free";
font-weight: 900; content: '\f059';
}
.example-2::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f06a';
}

記事内htmlコード

クエスチョン

<div class="example-1"><strong>文章</strong></div>

ビックリマーク

<div class="example-2"><strong>文章</strong></div>

内部リンク表示

内部リンクや外部リンクはブログカードを使えば良いのですが、リンク数が多いとサムネイルばかり並んでいて目のやり場に困るため、特別目立たせたいリンクにはブログカードを使ってアイコン表示させます。

それ以外の内部リンクなどは、サムネイルが無い方が見やすいと思いました。

このようにしておけば、数ページが羅列されていてもシンプルに表示され、かつわかりやすいかも？という訳で採用しました。

CSS追記コード

exampleを任意の文字に。

/* 記事内リンク */
.example-box {
position: relative;
margin: 2em 0;
padding: 0.5em 1em; border: solid 2px #25b7c0;
}
.example-box .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px; padding: 0 9px;<br>height: 25px; line-height: 25px;
vertical-align: middle;
font-size: 14px;
background: #25b7c0;
color: #ffffff; font-weight: bold;
border-radius: 5px 5px 0 0;
}
.example-box p {
margin: 0; padding: 0;
}
.example-box .box-title:before{
font-family: "Font Awesome 5 Free";
content: "\f0c1";
padding-right : 5px;/*文字との隙間*/ color: #FFFFFF;/*アイコンの色*/
}

記事内htmlコード

<div class="example--box"＞＜span class="box-title">ブログ内参考記事</span> ここに文章</div>

ちなみに内部リンク・外部リンクを目立たせたい場合のブログカードは下記のように表示されます。

通常の表示よりシンプルにしています。

このブログカードはとても良いですね！

やめました。

拡張クラスまとめ

wordpressのテーマ依存の機能は注意が必要ですね。

なるべくならwordpressでどのテーマでも使いまわせるコードなどを利用するのがお勧めです。

Simplicity2も同様ですが新しくリリースされたSimplicity2の後継テーマ「Cocoon」も気になるところ。

Cocoonに変えても良い気がしますが、正式にリリースされたら試してみようと思います。

「Cocoon」がもう少し早くリリースされていたら迷わず選んだwordpressテーマかもしれません。