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

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になるように組み合わせることで、自由に段組を作る事ができます。
スポンサーリンク

メルマガはじめました

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

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

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

ご登録はこちらから

ご登録はお名前(ハンドルネームOK)とメールアドレスのみ。
フォームへ入力後、仮登録のメールが届きます。
メール内の「リンク」をクリックすると登録完了です。
フリーランスママデザイナー るこ

コンピューターは道具だよ。息を吸うみたいに、手足のように、使っちゃおう!
幼少期から自分自身が目立つことが苦手で「写真を撮られると魂が抜ける〜!」と、逃げ回ってました。
そんなこんなで、ただいま、顔を出さずにどこまで信頼度を得られるか、実験中です!
あっ、作品が目立つのは大歓迎!(笑)

blanc note.の使い方

この記事がお気に召したら……

最新情報をお届けします