操作フロー
【使用方法】
1) 使用タグをコピーします。
2) 文中の「●●」部分を適宜変更してください。
実際にHTML上でどのように入れているかは、「表示」項目のタグで確認してください。
3) CSSに関しては、CSSに追記後、それぞれCSS名などで追加テーマを作成しておきます。
サイト設定で該当するCSSを「サイト管理」⇒「追加テーマ」で設定して試してみてください。
タグ・CSSいろいろサンプルDB
タイトル
バナーっぽいリンク
<div class="banner_image "><a href="#" class="banner_anc ">バナーのタイトル</a></div>
<style>
.banner_image {
text-align: center;
min-width: 249px;
max-width: 300px;
height: 54px;
background-color: #0D3C95;
background-image: linear-gradient(-45deg, #ffffff 10px, transparent 0), linear-gradient(135deg, #0D6ED5 10px, transparent 0);
border: solid 5px #0D3C95;
}
.banner_anc {
color: #fff;
line-height: 46px;
font-weight: bold;
font-size: 1.2rem;
display: block;
}
.banner_anc:hover {
color: #fff;
background: rgba(255,255,255,0.3);
}
</style>
<style>
.banner_image {
text-align: center;
min-width: 249px;
max-width: 300px;
height: 54px;
background-color: #0D3C95;
background-image: linear-gradient(-45deg, #ffffff 10px, transparent 0), linear-gradient(135deg, #0D6ED5 10px, transparent 0);
border: solid 5px #0D3C95;
}
.banner_anc {
color: #fff;
line-height: 46px;
font-weight: bold;
font-size: 1.2rem;
display: block;
}
.banner_anc:hover {
color: #fff;
background: rgba(255,255,255,0.3);
}
</style>
使用箇所/プラグイン
固定記事, ブログ, デーダベース, 掲示板
その他の使用箇所
キーワード
バナー,リンク
カテゴリ
HTML, スタイル
その他連絡事項
min-width で、最小幅指定（※これ以上小さくならないでね、って指定）
※不要なら外してOK
max-width で、最大幅指定（※これ以上デカくならないでね、って指定）
※不要なら外してOK
height で、高さを指定してるので、ここもお好みで。
background-image に指定されている
linear-gradient(-45deg, #ffffff 10px, transparent 0) が、右下の三角
linear-gradient(135deg, #0D6ED5 10px, transparent 0) が、左上の三角
10px の値を大きくすれば、三角が大きくなる。