WordPress Atomic Block(アトミックブロック)のサンプル全一覧

Wordpress

WordPressのGutenbergエディタで使う追加ブロックプラグイン『Atomic Block(アトミック ブロック)』のサンプルです。

尚、ブロックに見出しが設定されているため、本記事の目次は少しおかしなことになっていますがご了承ください。

Atomic Blocksとは

atomic blocksが制作している、Wordpressブロックのプラグインです

Atomic Blocks – Gutenberg Blocks Collection
A collection of beautiful, customizable Gutenberg blocks for the new block editor.

海外製なので、少し日本では使いづらい部分もありますが、おしゃれなブロックがそろっているので、入れておくと記事装飾のバリエーションが広がります。

Atomic Blocksサンプル

AB Container

レイアウト用のブロックです。パディング(余白)を調整することができます。

背景にイメージを持ってくることもできます。

AB Notice

お知らせです

こんな感じに、お知らせ用のブロックを作ることができます。

AB Call to Action

タイトル

ボタンへのリンクを設定できます

コールトゥアクションは、投稿の一番下などで、『ここをクリックしてね!』『商品の詳細はこちら!』など、クリックさせることを誘導するエリアです。

AB Testimonial

この商品は私が自信をもっておすすめしています!

avatar

マリーアントワネット

某国の女王様

Testimonial(テスティモニアル)は推薦文などを入れるエリアです。

AB Layouts

あらかじめ用意された、様々なレイアウトデザインを選ぶことができます。

AB Profile Box

この記事を書いた人

サエコです

小さなブログ教室でゆったりのんびりやってます

プロフィールを入れることができます。

AB Drop Cap Paragraph

ドロップキャップパラグラフとは、最初の文字を大きくしたものです。

AB Spacer


標準のスペーサー機能に加えて、区切り線を入れることができます。

AB Accodion

ここをクリックして見てね

答えがアコーディオンで出てきます。

AB Shairing

シェアしてね、のボタンを設置することができます。

AB Post and Page Grid

Skypeがアカウントなしで会議室利用できるようになっていました
『職業(プロの)デザイナーでなくてもWEBの表現を豊かに出来る本』の感想
フレキシブルボックスでつくるHTML5&CSSレッスンブック 感想
今日から心機一転WEB制作に力入れます&WordPress5.4にバージョンアップ

投稿を表示することができます。CSSでデザインの調整が必要かもしれません。

AB Pricing

ビギナー
初心者向け
\
500
/月
  • Product Feature One
  • Product Feature Two
  • Product Feature Three
アドバンス
中級者向け
\
980
/月
  • Product Feature One
  • Product Feature Two
  • Product Feature Three
エキスパート
上級者向け
\
1,500
/月
  • Product Feature One
  • Product Feature Two
  • Product Feature Three

価格テーブルを作成することができます。

Email Newsletter

Mailchimpなどの海外製メルマガ用のブロックです。(現在は登録しても作動しません)

AB Advanced Columns

吾輩は猫である。名前はまだ無い。
 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番|獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

標準のコラムレイアウト設定よりも、バリエーションがあります。

AB Button

標準のボタンよりもちょっとだけバリエーションがあります。

Atomic Blocksには面白いブロックがいっぱい

Atomic Blocksは海外製のブロックなので、日本では若干使いづらい部分もありますが、レイアウトが豊富なので、センス次第ではとてもお洒落になることうけあいです。

個性的な記事を書いてみたい方は、ぜひ使ってみてくださいね!

タイトルとURLをコピーしました