WordPressの無料テーマルクセリタス (Luxeritas)の記事下にリボン付きのお知らせを追加

2019年6月29日

ルクセリタス (Luxeritas)の記事下に、お知らせを挿入。ちょっとおしゃれにリボン付き見出しにしてみました。HTMLとCSSのコードを追加する必要がありますが、ルクセリタス (Luxeritas)なら簡単です。子テーマの編集で本体ソースへの影響を心配せず設置できます。初心者の方でもコードをコピーするだけ、思わず高度でおしゃれな表示にできます。是非試してください。

手順は、HTMLの記載とCSSコードの追加です。

HTMLの記載

フッターにお知らせを設置、このお知らせは固定ページ等表示させたくないページもあるため、[#1アドセンス(Luxeritasオリジナル]のウイジェットを利用します。アドセンス用のような気がしますが、HTMLでもなんでも記載できます。うれしいのは表示させるページと表示させないページを指定できることです。

設定方法

ダシュボードの左メニューで、[外観]>>[ウィジェット]をクリックします。
キャプチャー、ウィジット

 

ウィジェットの一覧画面がでます。
[#1アドセンス(Luxeritasオリジナル] をクリックします。
キャプチャー、ウイジェット一覧

 

#1アドセンス(Luxeritasオリジナル)」を表示させる位置を指定します。
①画面を下にスクロールします。
②「記事下ウィジェット」を選択します。
③[ウイジェットを追加]をクリックします。

キャプチャー、ウイジェットの表示位置

 

ウイジェットを追加した後、画面の右側から、指定した表示位置のウイジェットで▼をクリックします。
*「記事下ウィジェット」は下の方にあります、よく似た名前がたくさんあるので間違えないように注意してください。
キャプチャー、ウィジェット表示

記事下ウィジェットを開くと、追加した「#1アドセンス(Luxeritasオリジナル)」が表示されています。
右端の▼をクリックします。
キャプチャー、ルクセリタスオリジナルの表示

 

#1アドセンス(Luxeritasオリジナル)」の設定画面が表示されます。

①タイトルは何もいれません

②内容の欄に表示したい内容を 「HTML形式」で入力します。
*今回はHTML形式で記載しましたが、テキスト形式等なんでもOKとのこと、色々試してください。

キャプチャー、ウイジェット設定画面1

③広告サイズは「指定しない」を選びます。
中央揃えはチェックしません。
*サイズや配置は表示させる内容や、実際のブログ表示を確認しながら調整してください。
キャプチャー、サイズ設定

 

④ラベル:「なし」*デフォルトのまま
⑤構造化データー:チェックなし *デフォルトのまま

⑥このウイジェットを表示しないページ:「固定ページ」にチェックをいれます。
*「投稿・編集プレビュー」,「カスタマイズプレビュー」,「404 Not Foundページ」,「指定ページ」にはデフォルトでチェックが入っています。問題なければこのままでOKです
*その他表示させたくないページがあればチェックをいれます。
キャプチャー、表示位置のチェック

保存ボタンをクリックします。
キャプチャー、保存

これでHTMLの設定は完了です。

 

■HTMLコード (*ピンクの部分がリボンの表示に必要です)

<div class=”ribbon_box”>
<div class=”ribbon10″>
<h4>りんごからのお知らせ</h4>
</div>
<p>
こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログ&アフィエイトビジネスに奮闘中です。<br>
<br>
この<strong>ブログ</strong>と連携して<strong>「初心者に親切シニアに優しいネットビジネス講座」</strong>をテーマに<strong>メルマガ</strong>を配信、超初心者向けにネットビジネスのはじめ方をお伝えしています。<br>
<br>
アフィリエイトの仕組みを噛み砕いて解説、<strong>SNS活用の実践講座</strong>を交えた<br>実りいっぱいの無料メルマガです。<br>
↓↓↓↓↓↓↓(お申し込みはこちら、是非この機会に(^o^)ノ゙)<br>
<a href=”https://applired.net/ringonomerumaga/” target=”_blank” rel=”noopener”><span style=”color: #f26bae;”><strong>りんごのメルマガを購読する</strong></span></a>
</p>
</div>

 

 

CSSの記載

次にCSS を追記します。

ワードプレスの左メニューから、[Luxeritas]>>[子テーマの編集]をクリックします。

ルクセリタス 、子テーマ編集

子テーマの編集画面が表示されます。
[style.css]のタブをクリックします。

もともと、入力されているオレンジ色の文字の後ろに、CSSコードを貼り付けます。
キャプチャー、子テーマ

 

CSSコードを貼り付けたら、[保存]ボタンをクリックします。
キャプチャー、CSSはりつけ

これで、完了です。

 

■CSSコード(お知らせリボンのコードです)

/* お知らせリボン */
.ribbon_box {
display: block;
position: relative;
margin: 15px auto;
padding: 10px 0;
width: 90%;
background: #f1f1f1;
}

.ribbon_box p {
padding: 0 15px;
}

.ribbon10 {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 5px 0;
margin: 0 0 0 -20px;
width: calc(100% + 20px);
color: white;
background: #f09199;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.ribbon10 h4{
vertical-align: middle;
margin: 0;
padding: 0 30px 0 15px;
border-top: dashed 1px #FFF;
border-bottom: dashed 1px #FFF;
font-size: 20px;
line-height: 46px;
}

.ribbon10:after{
position: absolute;
content: ”;
z-index: 1;
top: 0;
right: 0;
width: 0px;
height: 0px;
border-width: 30px 35px 30px 0px;
border-color: transparent #f1f1f1 transparent transparent;
border-style: solid;
}

.ribbon10:before {
position: absolute;
content: ”;
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #f06f7a
}

 

 

サンプルサイト

ネット上にはコピペして使用が可能なサンプルコードがたくさんあります、お気に入りを見つけてください。

 

コピペで使えるCSSデザインサンプル集(Web用コード250個以上まとめ)

*いつもお世話になっている「サルワカ」さんのサイトです、特に見出しデザインは使いやすいです。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

*おしゃれ感がただようデザインでお気に入りです。