blanc note.の使い方

WordPressテーマ blanc note.ショートコードの使い方

WordPressには、ショートコードという便利な機能があります。
投稿画面に、決まったショートコードを書くと、記事を装飾することができる機能です。

この記事では、blanc note.で使うことのできるショートコードをご紹介してます。
バージョンアップのタイミングで、随時追加していますので、ときどき覗いていただけるとありがたいです(*^_^*)

吹き出し

ver1.1.4追加

アイコン用の画像は1:1だとキレイです。横長にすると、つぶれます。

左向き

プチ・マドレーヌプチ・マドレーヌ
吹き出し内容を入れてください

右向き

クマのグラクマのグラ
吹き出し内容を入れてください

ショートコード

属性名
icon アイコンに使いたい画像のURLを入れてください。
画像のURLは、[メディアを追加]→[使いたい画像をクリック]→[URL]をコピー→[アイコンのURL]にペーストで、設定してくださいね。
name アイコンの下に入るお名前
type 吹き出しの方向を設定します
アイコンが左:l
アイコンが右:r

枠付きボックス

ver1.1.4追加

目立たせたいテキストを囲んだり、注意書きを書くのに便利なボックスです。

枠付きボックス

ポイントって文字が入る

チェックって文字が入る

リスト

ver1.1.7追加

改行した項目が、自動でliタグで囲まれるのでお手軽です。

基本のリスト

  • テスト項目
  • テスト項目2
  • テスト項目3
  • テスト項目4

箱入りリスト

背景に色がつくので、少し目立ちます。

  • テスト項目
  • テスト項目2
  • テスト項目3
  • テスト項目4

枠付きリスト

  • テスト項目
  • テスト項目2
  • テスト項目3
  • テスト項目4

箱入りリスト+チェックアイコン

  • テスト項目
  • テスト項目2
  • テスト項目3
  • テスト項目4

枠付きリスト+ハートアイコン

  • テスト項目
  • テスト項目2
  • テスト項目3
  • テスト項目4

枠付きリスト+星アイコン+タイトル

後日実装予定

  • テスト項目
  • テスト項目2
  • テスト項目3
  • テスト項目4

属性の説明

属性名 効果
type box 箱入りのリスト
bd 枠で囲まれたリスト
icon check チェック
heart ハート
star
none なし
title check \Check it/
point \POINT/
matome \まとめ/

フロー

流れにしたい項目を入れる

流れにしたい項目を入れる

流れにしたい項目を入れる

流れにしたい項目を入れる

属性名 効果
type center 文字をセンタリング
last 矢印を表示しない(最後の項目に付けてください)

ボタン

ver1.1.5追加

リンクボタン 基本

リンクボタン 白い文字

リンクボタン TYPE1

リンクボタン TYPE1 black

リンクボタン TYPE1 green

属性 説明
url リンク先URL URLを入力してください
target _blank 別ウインドウで開きたい時に
text white 文字の色を白にします
color black 黒いボタン
green 緑のボタン
type なし 四角形のシンプルなボタン
1 二重線のボタン

仕切り線

ver1.1.5追加
後ほどデザイン違いで追加していきます

属性名 効果
type 1 幅広の線が入ります(80%幅)
2 短くて太い線が入ります(10%幅)
3 100%幅の細い線が入ります




段組

span=””の間に、合計12になるように数字を入れることで、自由に段組することができます。

3カラム 余白なし(4×3=12)

個人的には余白はあったほうが良いと思いますが、使い方次第です。

cropped-happy.jpg

サイズ4:中でタグを使うことももちろんOK!!

サイズ4 こんな感じになります。残念ながら改行タグは省かれてしまいます。ご了承ください。


2カラム 余白あり(6+6=12)

サイズ6を2つ組み合わせると、2カラムになります。注意点としては、rowとcolの間に改行を入れてしまうと、pタグが入ってしまい、カラム落ちしてしまいます。対策を調査中です。

サイズ6:2カラムで段組していますが、スマホ幅にせばまると、1カラムになります。PCでのみ2カラムで表示されます。


2カラム 余白あり(8+4=12)

サイズ8:硝子は外の拍手ゴーシュ屋がゴーシュに尖っねどこたな。するとまだばかたたという萱たまし。 生意気たいずのたもたまた先生の元気みちの限りがはのそのそ上手ましたらて、それなんて顔からはいっれんないた。 あっすぎ何は人から切なだて今のゴーシュのマッチ家がなる第二ゴーシュがいのまねに弾きばいるなう。扉は半分見つめがちまうた。 ドレミファは六困る虎のようへ叩きてった。たばこはドレミファ猫たりそれへ思っとしまいなく。本気もセロをなかなかにあげとかっこうに音楽のようへ出しと口がこわれてまるでなんどへ云いではじめた。よろよろもう赤ん坊を工合が過ぎうない。これうとうとに床下の考えとセロを見ましたろ。 ヴァイオリンからなるましませ。「次をいいな。 怒り、ぼくにケース。はいっ。」それはさっきの所のうとうと前の所を叫ぶました。かっこうは勢がす音楽がなって箱がセロを弾きてさっさと一生けん命しれんときが来るございまし。

plateサイズ4


rowの属性

属性名 効果
class なし
gutters カラム同士の間に隙間が開きます

colの属性

属性名 説明
span 1〜11 数字の合計が12になるように組み合わせることで、自由に段組を作る事ができます。
Category : blanc note.の使い方

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

Web / Graphic Designer 丸山るこ

大人カワイイデザイン&イラストが得意なデザイナー、丸山るこです。 想いを持った、起業女性・スモールビジネスを応援しています。 様々な業種の案件に関わってきましたので、女性向けサービスからビジネスライクなデザインまで幅広く対応できます。 現在は、起業を考え半常駐ワークに励んでいます。一児の母。