最近、ある読者から「WordPressで美しい長文コンテンツを作ることは可能ですか？ストーリー性のある長編コンテンツは、単なるテキストや画像よりも魅力的であることが証明されています。この投稿では、StoryBuilderを使ってWordPressで美しい長編コンテンツを作成する方法を紹介する。
なぜWordPressの長文投稿にStoryBuilderを使うのか？
ユーザーがサイトを見るのに費やす時間は、滞在するか離れるかを決めるまでのわずか数秒です。長文の記事を公開する場合、ユーザーをサイトに留めておくことはさらに難しくなります。
マルチメディアやインタラクティブなビジュアルエイドを追加することで、ユーザーにとって魅力的な長文コンテンツになります。ただテキストや画像をスクロールダウンするのではなく、ユーザーはページ上の要素とインタラクションすることができます。
リッチなストーリーテリング要素を持つ長編コンテンツの最良の例をいくつか紹介しよう。
これらの長編投稿はすべて、優れたストーリーテリングという点で共通する特徴がある。没入感のあるメディア、パララックス効果、インタラクティブなUI要素を使って、魅力的なコンテンツを作り出している。
従来のWordPressテーマでは、このようなページや投稿を作成することはできません。たとえ作ろうとしても、多くのプラグインを使わなければならないし、読者にとってうまく機能しないかもしれない。
とはいえ、StoryBuilderを使ってWordPressで美しい長文コンテンツを作成する方法を見てみよう。
StoryBuilder で最初の長編ストーリーを作る
まず最初に、Press75 Long Form Storybuilderプラグインをインストールして有効化します。詳しくはWordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、新しい投稿かページを作成する必要があります。投稿編集画面に新しく ‘Long Form Content を有効化’ メタ情報が追加されていることに気づくでしょう。
長文コンテンツとして表示する」オプションの隣にあるボックスにチェックを入れ、下書き保存ボタンをクリックしてください。
WordPressがページをリロードし、ページまたは投稿でロングフォームコンテンツが有効化されたことが表示されます。投稿エディターの代わりに、「ロングフォームコンテンツページを編集する」というボタンが表示されます。
ボタンをクリックすると、ロングフォームコンテンツエディターが起動します。
新しいブラウザーウィンドウでWordPressテーマカスタマイザーの現在のページが開きます。
右側のペインにStoryBuilderの基本的な使い方が表示されます。これらの説明はページの編集を開始すると消えます。
左側のペインには、WordPressテーマの編集に使用するものを含むカスタマイザーコントロールがあります。カスタマイザーコントロールには2つのオプションがハイライトされています。
まずページオプションタブをクリックしてください。これにより、編集中のロングフォームコンテンツページで使用する原色と副色を選択することができます。
また、ページで使用するフォントも選択できます。
その後、左ペインの’ページオプション’見出しの横にある戻る矢印をクリックしてください。
長文ページセクション」タブをクリックし、長文コンテンツの作成を開始することができます。
次へ」タブで「セクションを追加」ボタンをクリックします。ページに追加できるセクションのリストが表示されます。
セクションをクリックすると、そのセクションがページに追加されます。そのセクションを編集するための設定が表示されます。
各セクションには異なる設定があります。例えば、ヘッダーセクションでは、セクションのタイトル、画像、主見出しとして表示するテキスト、字幕の入力を求められます。
設定が終わったら、一番下にある閉じるボタンをクリックしてください。これでページに別のセクションを追加することができます。
すべてのセクションが左側のペインに外観されます。ドラッグ＆ドロップで並べ替えることができます。
セクションを削除したい場合は、そのセクションをクリックし、セクション設定の一番下にある削除リンクをクリックしてください。
以下は、現在ストーリービルダーで利用可能なセクションのリストです。
- ナビゲーションメニュー – ストーリーにナビゲーションメニューを追加できます。既存のナビゲーションメニューを使用することも、カスタムメニューを作成することもできます。
- コールアウト – 背景に色をつけた全幅のコールアウトセクション。ページオプションで選択した原色を背景に使用します。
- コンテンツ – 1カラムのコンテンツエリア。
- 2カラムコンテンツエリア
- 3カラムコンテンツエリア
- フルフィーチャー – パララックス効果付きの全幅画像、見出し、字幕、コンテンツを追加できます。
- セクション見出し – セクション見出し行を追加します。
コンテンツエリアのセクションはWordPressの投稿エディターと同じです。動画、画像、ブロッククォート、ツイートや Facebookの投稿を 埋め込むことができます。
ページ全体と同様に、マルチカラムのコンテンツエリアも完全にレスポンシブです。小さな画面のユーザーには、コンテンツが個別カラムで表示されます。
ページにいくつかのセクションを追加したら、上部にある「保存して公開する」ボタンをクリックしてください。ボタンに「公開する」と表示されていても、ページは下書きとして保存されます。
閉じるボタンをクリックしてカスタマイザーを終了する必要があります。
WordPressの投稿編集画面に戻りますので、そこでページを公開するか、下書きとして保存したまま投稿するかを選択できます。
以上、この投稿がStoryBuilderを使ってWordPressで美しいロングフォームコンテンツを作成する方法を学ぶのに役立てば幸いである。StoryBuilderのドラッグ＆ドロップ機能が気に入った方は、WordPress用のベストなドラッグ＆ドロップページビルダーの比較もご覧ください。
この投稿が気に入ったなら、WordPressの動画チュートリアルをYouTubeチャンネルに登録してください。Twitterや Facebookでも私たちを見つけることができます。
Robert Vodicka
1. How do I add a toolbar or link on the top of the page to link back to my homepage?
2. I cannot scroll through the Full Feature images, needing to use the drag bar to get to the next text block. Is there a fix?
WPBeginner Support
Hi Robert,
If by toolbar you mean a navigation menu, then you can add a link to your site’s top navigation bar by visiting Appearance » Menus page. See our guide on how to add navigation menus in WordPress for step by step instructions.
As for featured images, we are not sure we quite understand the issue. Here is what you can try, switch your website temporarily to a default theme like TwentySeventeen. Visit your website to see if this fixed your featured images. If it does, then it is probably a issue with your theme.
Hope this helps
管理者
Robert Vodicka
Thanks for the response. I’ll try your fix for my first question. Regarding the second, not scrolling through images, can you review the page in question? It can be found at: . You should notice that you can scroll with a mouse wheel through the content sections, but not the sections constructed using the full feature section, which are images. Thanks
WPBeginner Support
Hi Robert,
Those images are not a bug or error. These images that stick to the background as you scroll are called parallax background effects. They are used quite commonly by many websites. However, if you don’t like them then you can remove them and insert images inside the post editor.
Janet Fuller
I have read your full article. Excellent post about some good plugins for WordPress. I have used StoryBuilder and got a good result. It helped me to manage users. They can register and login easily. I always tell my friends to use StoryBuilder.
Lars Eriksson
The “Press75 Long Form Storybuilder” plugin haven’t been updated for over a hear now.
And have only 100+ active installs.
Is where not any alternatives?
Abhishek Prakash
What happens to the content when I delete this plugin?
Safar Fiertze
I can’t wait to get started with this plugin, but ran into an issue straight after installation. When I pressed save draft, it redirected to the customiser as expected, but it didn’t load. The window says customise: Loading. And remains like that.
At the moment the blog is locally hosted and I’m not using a Press75 theme. I’m not sure if either of these are causing the issue. Advice appreciated. Thank you!
WPBeginner Support
This could be a conflict with your theme or a plugin on your site. You can troubleshoot by switching to a default theme and deactivating all plugins. See if this resolves the issue.
管理者
Safar Fiertze
Thank you for the reply and after playing around, I thought it might be plugin or theme. I’ve deactivated all plugins, and tried the three Twenty theme defaults that I had when I first received the blog. I’m assuming that is what you mean by default theme? I haven’t been able to solve the problem.
pohchue
I’ve installed the plugin. But why not leading to new browser page after I checked the “Display as Long Form Content” and save draft?
Khürt L. Williams
The article was informative. However, I would have appreciates a few links to websites that are using StoryBuilder.
Gopinath
Hi Wpbeginer,
I am using a WordPres.com blog. I love the long for content in Firestorm.
i want this same or look like theme or solution for long form content like this in my wordpress.com blog. How can i done this. Kindly help me.
WPBeginner Support
It would be quite difficult to achieve in WordPress.com. Please see our guide on what are the limitations of WordPress.com.
管理者
Gopinath
Yes, I know about these limitations that’s why I am asking other solutions to achieve this for the same results. If there is no way with wp.com then thank you. If yes kindly educates me about that.
Khürt L. Williams
He answered your question by providing a link the differences between WordPress.com and WordPress. Basically, YOU CAN NOT DO THIS ON WORDPRESS.COM SINCE IT DOES NOT ALLOW THE INSTALLATION OF PLUGINS.
Cristi Pitner
Great stuff – it deserves a try! Thanks!