Hugoテーマkadluの装飾用クラスを紹介します。
クラス指定でなんとかなる部分が多いのではないかと…
kadluの独自スタイル
独自CSSに記載したスタイルです。
インライン
太字
<span class="bold">太字</span>
赤字
<span class="red">赤字</span>
太赤字
<span class="bold red">太赤字</span>
赤アンダーライン
<span class="red-under">赤アンダーライン</span>
青
<span class="blue">青</span>
青太字
<span class="bold blue">青太字</span>
緑
<span class="green">緑</span>
緑太字
<span class="bold green">緑太字</span>
打消し線
<span class="strike">打消し線</span>
キーボードキー
<span class="keyboard-key">キーボードキー</span>
マーカー
黄色マーカー
<span class="marker">黄色マーカー</span>
赤色マーカー
<span class="marker-red">赤色マーカー</span>
青色マーカー
<span class="marker-blue">青色マーカー</span>
黄色アンダーラインマーカー
<span class="marker-under">黄色アンダーラインマーカー</span>
赤色アンダーラインマーカー
<span class="marker-under-red">赤色アンダーラインマーカー</span>
青色アンダーラインマーカー
<span class="marker-under-blue">青色アンダーラインマーカー</span>
画像
ショートコードで対応できます。
SEO的に画像検索に出したい図や、下記カルーセル用の画像を用意したいときに使用してください。
クリック後は別タグで表示されます。
{{<img src="/img/post/kadlu-decoration-tag/kadlu-decoration-tag01.jpg" alt="画像挿入について">}}
ブログカード
内部リンクだけですが、bulmaのショートコードで対応できます。
{{<a href="/posts/kadlu-config-param">}}
(ベースのURL以下をhref属性に入れることで、ローカル環境、デプロイ後環境のどちらにも対応できます。)
吹き出し(balloon)
吹き出しです！画像とセリフを指定するとできます。
逆からです！「right="true"」を記載すると右からになります。
WordPressのショートカットのように記載することもできます。(置換が楽だからね)
{{< balloon src="/img/common/faceicon.png" value="吹き出しです！画像とセリフを指定するとできます。">}}
{{< balloon value="逆からです！「right="true"」を記載すると右からになります。" right="true" >}}
{{< balloon "WordPressのショートカットのように記載することもできます。(置換が楽だからね)" >}}
画像が未指定の場合は、プロフィールのアイコンから持ってきます。
カード
Blumaのメッセージスタイルを呼び出せるショートコードです。
属性一覧
| title | タイトル部分を表示します |
|---|---|
| class | クラスが指定できます |
{{<card title="カード">}}
ショートコード内はmarkDown形式で表示できます
{{</card>}}
アフィリエイト
商品画像表示、アフィリエイトリンクのボタンが表示できるタグです。
アドセンスにクリックイベントを送る仕組みがあり、かんたんなイベント管理ができます。
属性一覧
| title | タイトル部分を表示します |
|---|---|
| comment | コメントが指定できます |
| amazon | リンクを指定することでamazonボタンが表示されます |
| rakuten | リンクを指定することで楽天ボタンが表示されます |
| yahoo | リンクを指定することでyahooボタンが表示されます |
| official | リンクを指定することで公式ボタンが表示されます |
{{<afi title="商品タイトル" comment="コメントが入ります" amazon="amazon" rakuten="Rakuten" >}}
画像とか
{{</afi>}}
Bulma引き継ぎ装飾
CSSフレームワークBulmaをベースとしているので、こんなこともできます。
BulmaのSCSSを調整・コンパイルし、Bulma導入部分に取り込めば、色も自由に変更できますよ。
font-awesomeを使ったアイコン
Bulmaはfont-awesomeをきれいに見せることにも対応しています。
(kadluはfont-awesomeもインポートしています。)
classをいじることで、色々と表示ができますよ！
<i class="fas fa-info-circle"></i>
<span class="icon has-text-info"> <i class="fas fa-info-circle"></i> </span> <span class="icon has-text-success"> <i class="fas fa-check-square"></i> </span> <span class="icon has-text-warning"> <i class="fas fa-exclamation-triangle"></i> </span> <span class="icon has-text-danger"> <i class="fas fa-ban"></i> </span>
カラムスタイル
<div class="columns"> <div class="column has-background-primary">カラム1</div> <div class="column has-background-info">カラム2</div> </div>
もちろん3カラムもできます。
is-mobileのクラスをつければ、スマホサイズでも、横並びのカラムを維持できます。
詳しくはBulma公式サイトで！
ボックススタイル
ボックス系はbulmaをそのまま継承しています。
なかなかかっこよい。
気づいていらっしゃると思いますが、
messageのクラスにis-〇〇ってつけるだけで色が変わります。
<div class="message is-dark">
<div class="message-header">Dark</div>
<div class="message-body">
ダーク色です。BulmaのSCSSをいじることで色変えもできます
</div>
</div>
<div class="message is-primary">
<div class="message-header">Primary</div>
<div class="message-body">
プライマリー色
</div>
</div>
<div class="message is-link">
<div class="message-header">Link</div>
<div class="message-body">
リンク色、デメリット紹介のときとかに使うときが多いかなって
</div>
</div>
<div class="message is-info">
<div class="message-header">Info</div>
<div class="message-body">
気づいていらっしゃると思いますが、messageのクラスにis-〇〇ってつけるだけで色が変わります。
</div>
</div>
<div class="message is-success">
<div class="message-header">Success</div>
<div class="message-body">
message-headerをつけることで、「Success」の帯ができます。
</div>
</div>
<div class="message is-warning">
<div class="message-header">Warning</div>
<div class="message-body">
Warningは文字色が黒になります。メイド比「4.5:1」ってやつですね！
</div>
</div>
<div class="message is-danger">
<div class="message-header">Danger</div>
<div class="message-body">
よくメリットの紹介で使っている色は危険色だったりします。
</div>
</div>
spanタグも使えます
<div class="message">
<div class="message-body">
シンプルなので結構好きです。
</div>
</div>
<div class="message is-dark">
<div class="message-body">
class="message-header"の部分が無いだけでこのデザインになります。
</div>
</div>
<div class="message is-primary">
<div class="message-body">
色合いは上記のボックスのようにクラスをつけるだけですよ！
</div>
</div>
<div class="message is-link">
<div class="message-body">
関連リンクなんかに使えそうです
</div>
</div>
<div class="message is-info">
<div class="message-body">
インライン要素はWordPlessテーマcocoonなんかと合わせているのですが、ボックスはごめんなさい。
</div>
</div>
<div class="message is-success">
<div class="message-body">
安定のサクセスカラー
</div>
</div>
<div class="message is-warning">
<div class="message-body">
もちろんボックス内で<code>span</code>タグも使えます
</div>
</div>
<div class="message is-danger">
<div class="message-body">
<span class="marker-under">こんな感じ</span>
</div>
</div>
まとめ
ってな感じで無難な物を用意しています。
Bulmaだけでもかなりきれいにレイアウトできるので、ぜひぜひ使ってみてください！