JIN:Rサンプル記事
JIN:Rのブロックをいろいろ試してみるページです。テーマを確認する時はブロックを確かめる時が一番楽しいですね。
見出しのサンプル
見出しは基本的にh2~h4くらいまでを使い、h5以下の利用は避けた方が無難です。
h5を使っていると記事の構造が複雑であると言っているようなもので、結果的に読者も分かりにくいと感じている可能性があるからです。
見出し3のサンプル
見出し3のサンプルです。
見出し4のサンプル
見出し4のサンプルです。
リストのサンプル
リストはどのテーマであれ利用しやすいブロックの一つです。パターン以外でのサンプルを確認してみましょう。
- リスト
- リスト
- リスト
引用のサンプル
引用はテーマによって違いが出やすいブロックです。早速確認していきます。
吾輩は猫である。名前はまだ無い
吾輩は猫である/夏目漱石
JIN:R独自ブロック
JIN:R独自ブロックを確認していきます。2023年1月4日時点で、JINとJIN:Rのブロック互換性はないことが確認されています。
今回は2023年1月4日時点で利用できるJIN:Rの独自ブロックをすべて確認していきます。
記事リスト
記事中に投稿済みの記事一覧を表示したい時に使用しましょう。表示する記事数は1~12記事の中から自由に選択できます。
デザイン見出し
普通の見出しじゃパッとしないとお嘆きの方は、デザイン見出しを利用するといいでしょう。
サブテキストはspanタグです。デザイン見出しはh2、h3、divタグの中から選択が可能です。今回はdivタグを選択しています。
ボタン
内外リンクをしたい場合にボタンがあると読者は操作しやすくなります。
別タブ表示可能、アフィリエイトタグもコピペ可能です。ボタンデザインは背景が黄色、青色、白色、アローボタン(矢印風)、インフォメーション(長めのボタン)から選べます。
上記以外にするのであればパターン一覧からコピペするか、追加CSSで自作してください。
現在白色ボタンはうまく表示されないので以下では表示しておりません。
ボックス
補足などで利用しやすいブロックです。ボックスの中へさらにブロックを挿入できます。
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
ボックスは補足やリンク案内など多岐にわたり利用できる便利なブロックです。
- ばなな
- みかん
- りんご
アイコンブロック
アイコンブロックは伝えたい点を簡潔に表示したい場合に利用するといいでしょう。アイコンブロックの中にさらにブロックを挿入できます。
リッチメニュー
リンク先のURLと画像を設定すればメニューを記事内に表示できます。運営サイトにメニューが多くある場合に便利です。
区切り線
章内でも一区切り入れたい時に便利な区切り線です。
spanタグで表示され、太さは5段階、線のデザインは7種類、線の色は自由に設定可能です。
吹き出し
よく見かけるアイコン付きの吹き出しです。補足やご自身の感想を述べたい時に利用すると便利でしょう。
吹き出しは外観>吹き出しであらかじめ吹き出しの設定をしておくと便利です。
吹き出しの中にさらにブロックを使用できます。
吹き出しはプリセットを呼び出したのち、デザインの切り替えは可能ですが色や画像の変更はできません。
こんにちは!
- ばなな
- みかん
- りんご
補足や感想を伝える際に利用するといいでしょう。
吹き出しアイコンは左、右に表示できます。
心の声のような表現も可能です。
インタビューのような表現も可能です。
フルワイド
画面をフルで表示したい場合に利用すると便利な機能です。
ブログカード
記事内で関連記事を紹介したい場合に利用するといいでしょう。
内部リンクだけではなく外部リンクも可能な点が嬉しいですね。以下は外部リンクです。
表示方法は2種類あります。
以下は簡易版です。
アコーディオン
クリックした人だけ結果を見られるブロックです。ネタバレ有の記事を作成する場合に便利ですね。
現段階でアコーディオンブロックはデザインは4種類あります。
バナナはおやつに入りません!
バナナはおやつに入りません!
バナナはおやつに入りません!
バナナはおやつに入りません!
タイムライン
手順や工程を表示したい場合に便利なブロックです。
千切り用の道具を利用すると便利
真ん中に空洞を設ける
たんぱく質を得るため
卵は隠してください
卵が生っぽい場合は+30秒程度追加
3本程度指定の時間ゆでる
綺麗に整える
マヨネーズやドレッシングをかける
コード
時にはHTMLやCSS、PHPなどのコードを表示したい場合があります。デフォルトブロックにもコード表示はありますが、下記のように分かりやすく表示されません。
プログラマーにも使いやすいブロックです。
扱える言語はC、C++、C#、Go、HTML、CSS、Java、JavaScript、Kotlin、Lua、Object-C、Perl、PHP、Python、R、Ruby、Scala、SQL、Swift、TypeScript
1<span class="sample-aa">バナナはおやつに入りません!</span>
背景
ブロックの背景にテクスチャや色、画像を設定できます。
ブロックの背景を変更できます。
ブロックの背景を変更できます。
ブロックの背景を変更できます。
ブロックの背景を変更できます。
ブロックの背景を変更できます。
ブロックの背景を変更できます。
- りんご
- ばなな
- みかん
プロフィール
記事の中にプロフィールを表示したい場合に便利です。外観>カスタマイズで設定しているSNSやプロフィール設定の内容が表示されます。
カテゴリー区別というブロックはウィジェット専用のブロックです。