ブログで発信したい、だけどデザインもこだわりたい、そんなあなたへ

スタイル見本

blanc note.の記事・固定ページで使うことのできるスタイルの見本と、記事を整形するときに使うコードをご紹介いたします。
バージョンアップのタイミングで、随時追加していますので、ときどき覗いていただけるとありがたいです(*^_^*)

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

見出し2

あいうえお。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れなし

テキストからは、下記のタグを入力。
ビジュアルからは「見出し2」を選択。

見出しh3

h3はとってもシンプルなデザインです。

テキストからは、下記のタグを入力。
ビジュアルからは「見出し3」を選択。

見出しh4

見出しh4は色がついてるだけです。
アクセントカラーがつくようになります。

テキストからは、下記のタグを入力。
ビジュアルからは「見出し4」を選択。

画像を中央配置+本文

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

画像の回り込み(左)

demo_image_02この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

画像の回り込み(右)

demo_image_06この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

見出しタイプll

見出し2にclass=”ll”とつけると、横線の見出しになります。

テキスト周りのスタイル

テキスト>クイックタグボタンから選べるスタイルです

b
i
link

引用(b-quote)

打ち消し(del)
追加(ins)
黄色いマーカー
桃マーカー
緑マーカー
赤字

アイコンマーク

default color
pink #D97080
blue #1F7FB2
yellow #D8D449
purple #878AC4
orange #DE6650

吹き出し

ver1.1.4追加

アイコン用の画像は1:1だとキレイです。WordPressのメディアからアップした1:1のサムネイルをお使いください。

左向き

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

右向き

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

ショートコード

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

ボタン

ver1.1.5追加。使い勝手が良くなかったため、2.0で改修予定です。
ショートコードから通常タグに変更します。

htmlタグver(2.0 Story用)

ボタン 通常サイズ
ghost btn

btn02 pink

btn02 green

btn02 blue

btn02 yellow

btn02 purple

btn02 orange

ボタン 大サイズ
ghost btn

btn02 pink

btn02 green

btn02 blue

btn02 yellow

btn02 purple

btn02 orange

ボタン 小サイズ
ghost btn

btn02 pink

btn02 green

btn02 blue

btn02 yellow

btn02 purple

btn02 orange

ショートコードバージョン(1.0用)

リンクボタン 基本

リンクボタン 白い文字

リンクボタン TYPE1

リンクボタン TYPE1 black

リンクボタン TYPE1 green

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

ボックス

ver2.0 HTMLタグ

見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbd ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxbg ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。
見出し
boxkadomaru ボックスには強調したいまとめ文などを入力してください。

ver1.1.4追加 ショートコード

目立たせたいテキストを囲んだり、注意書きを書くのに便利なボックスです。
アクセントカラーで設定した色になります。

枠付きボックス

ポイントって文字が入る

チェックって文字が入る

リンク

テキストリンク

リスト

ver1.1.7追加

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

基本のリスト

箱入りリスト

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

枠付きリスト

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

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

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

後日実装予定

属性の説明

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

表組み

題名 スペック 詳細
あのね 10x10cm あのねカードです
そのね 20x20cm そのねカードです

仕切り線

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

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




フロー

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

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

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

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

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

ヨメレバ・カエレバ

ブログパーツ生成画面で、
※amazlet風-2(cssカスタマイズ用)を選んでください

ギャラリー(WordPress)

サムネイル

中サイズ

メディア

思いついたものをぼちぼち

Youtube動画

スマホ要調整です。

Google Map

や〜いきたいですね。カキモリ。

Google Mapは埋め込み幅を100%に設定してください(スマホではみ出してしまうので)

ブログカード

WordPressの機能を使ったブログカードです。

blanc note.の最新版をダウンロードする

特徴と使い方[ 無料 ] ダウンロード