「見出し」オリジナルデザイン
関連記事一覧
上記に示す「見出し」は、Affinger6・テーマ 「関連記事一覧」の最上部に表示される要素です。 この「見出し」は、Affinger6の標準機能であるタグや書式選択には含まれていないため、記事の執筆や編集時にパーツとして使い回すことができません。
そこで、Post Snippetsプラグインを使用し、「関連記事一覧」の見出しを何度でも使えるようにショートコードを作成しました。
さらに、見出しの背景色などのデザインもショートコードのオプションでカスタマイズできるようにしています。
ショートコードの使い方
ショートコードの作成は、次節で説明します。 説明用の「見出し」に今回作成したショートコードを使用しています。
ショートコードの説明
下に示す様に、タイトルをサンドイッチする囲み型ショートコードです。
shortcode [Affinger6_entry_title bgcolor="brown" line_width="1"]タイトルを記述[/Affinger6_entry_title]
オプションの説明：赤文字で示している箇所がオプションになります。
- bgcolor ：「見出し」の背景色の指定。 カラーコード又は色で指定します。
- line_width ：ラインの太さを(px)数値で指定。 ラインを消すには、 0 を指定します。
使い方と実例紹介
下にショートコードと「見出し」表示例を示します。
↓ 背景色をredに 線の太さを3 に指定
実例紹介-1
[Affinger6_entry_title bgcolor="#415c9d" line_width="0"]実例紹介-2[/Affinger6_entry_title]↓ 背景色を#415c9dに 線の太さを0 に指定
実例紹介-2
Post Snippetsを利用したショートコードの作成方法
Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。
Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、番号を振ったエリアに従って説明します。 （Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。）
先ず、「Add New Snippet」ボタンを押します。
① エリアのUntitledにショートコードの名称を記入します。 ショートコード名を、 Affinger6_entry_title にしました。
② エリアに下のショートコード用HTML codeをコピペします。
|
1 2 3 4 |
<p style="{my_style} ; border-bottom-width:{line_width}px; border-bottom-color:{bgcolor};" class="n-entry-t"> <span style="background-color:{bgcolor};" class="n-entry"> {content}</span></p> |
HTML codeの説明
- 1行目：{ }で囲まれた文字列が変数になります。 my_styleで後からデザインの微調整が可能です。 line_width で線幅、bgcolorで線の色を指定します。 「style=」に直書きすることで、ショートコードの個別指定が可能となります。
- 2行目：{bgcolor} で１行目で指定されているbgcolorと同色の背景色になります。
- 3行目：{content}で囲み型ショートコードになります。
③ Variables（変数）をカンマ区切りで記述し、「 =」の後がデフォルト値になります。 下で示す内容を ③ エリアに記述します。
Variables bgcolor=brown,line_width=1,my_style
④ エリアにショートコード化するので、レ点を入れます。 ⑤ エリアにはPHPを使っていないので無記入のままです。
⑥ エリアにショートコードの簡単な説明を記載します。（下記は参考です）
タイトルを記述して終点を[/Affinger6_entry_title]で囲う。 bgcolorで背景色を指定 色指定を空にするとDefault（black） line_widthで線幅を指定 0で線なし以上で、ショートコードの完成です。