TweetPocketドラッグ&ドロップでページ作成ができる、WordpressのレスポンシブテンプレートのPressBuilder。レイアウトテンプレートが用意されているため、簡単な設定だけでもすぐにサイト構築が可能です。Builderのレイアウトカスタマイズ方法を紹介します。Builderでグリッドレイアウトをカスタマイズする方法レイアウトの追加ページビルダーでのレイアウト作成はものすごく簡単。Row」ボタンを押すとレイアウト作成画面が表示されます。レイアウト作成画面では、カラム数やカラムの幅の変更が可能です。レイアウト作成画面では、カラム数や幅を変更できます。こちらのような複雑な形状でも自由に設置可能。右下にある「Insert」ボタンを押せば作成したレイアウトを設置完了。設置済みレイアウトをカスタマイズする方法レイアウトは新しく作成するだけでなく、設置済みのレイアウトに対して変更を加えることもできます。設置済みのレイアウトでスパナのアイコンをマウスオーバーすると以下のようなメニューが表示されます。ここでは、編集(Edit)、複製(Duplicate)、削除(Delete)の操作が可能。編集する場合は「Edit」をクリックすることでレイアウト作成画面を表示できます。編集画面では右側にある設定パネルからはレイアウトのmarginやpadding、背景画像などのカスタマイズが可能。背景画像では「parallax」を選ぶことで簡単にパララックス効果を実装できます。設定を変更したら、右下にある「Done」ボタンを押し、投稿ページに右側にある「更新」ボタンを押すことで保存できます。複製を押すと、作成したレイアウトが設置したウィジェットと一緒に複製されます。スパナの横にある矢印アイコンをドラッグ&ドロップすることでレイアウトの順序を入れ替えることも可能です。レイアウトに2階層目を作るここまではページビルダーの1階層目にレイアウトを作成してきました。ページビルダーでは作成したレイアウトに対して更にページビルダーを設置することも可能です。この仕組みを利用することで、Bootstrapの.containerを作り、その中にグリッドレイアウトを配置していく、といった裏技を使うことが可能。Builder」を設置しています。この場合、1階層目のレイアウト設定を以下のように変更しておきます。「Gutter」に0を記入PressBuilderに同梱されているレイアウトテンプレートも多くはこの方法で.containerを設置し、Bootstrapのような使い方をしています。この方法は.containerのような全体のレイアウトだけでなく、部分的に複雑なレイアウトを作成する際にも有効。1カラムのメインエリアの一部だけレイアウトを変更したい場合に使います。2カラムのうち左側をサイドバーとして利用するようなレイアウトを作成した場合、スマートフォンで表示する際は左から順に表示されます。Top」を選択します。しておくことでスマホ時に右側から表示されるようになり、メインエリアがトップになります。1度の購入で開発環境も含めて複数サイトの利用ができるため、ものすごくお得!もちろん、更新費用や月額利用料などはありませんので安心して使用することができます。SugimoriBootstrapやCMSを使ったテンプレートの作成やカスタマイズ、既存サイトのレスポンシブ化など、多くの案件でフロントエンドを担当。現在はテンプレートエンジニアとしてTetraThemesでテンプレートを開発中。最近ブログの記事はMarkdownで書いているのですが、ふと思ったのが、Markdownで書いたブログ記事ってSEO的に大丈夫なの?ってことです。前回の投稿でグリッドレイアウトの基本的な使い方についてまとめたので、ここではさらにもう一歩突っ込んだ内容のお話をしたいと思います。一度間違ってないか確認しておきましょう。Redはカラーミーショップに対応したレスポンシブテンプレート。Bootstrapを導入しカスタマイズしやすいコードとモダンなデザインを実現。2カラム、3カラム両対応でレイアウトも自由に行えます。CubeMartはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。こちらの商品はブルーをメインテーマとしたデザインになっています。HelloCubeのWhiteテーマ。HelloCubeはEC-CUBE3.0向けレスポンシブテンプレートです。どんなショップでも使えるシンプルなデザインと、新着商品や売れ筋商品など便利なプラグインを同梱したテンプレートです。Whiteはカラーミーショップに対応したレスポンシブテンプレート。Bootstrapを導入しカスタマイズしやすいコードとモダンなデザインを実現。2カラム、3カラム両対応でレイアウトも自由に行えます。CubeMartはEC-CUBE2.13に対応したマルチカラムのレスポンシブテンプレート。Bootstrap3を導入し、様々なコンポーネントも簡単に使えてデザインもシンプルなミニマルデザインを採用。こちらは赤を基調としたテーマを採用。TetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。お知らせ【お知らせ】サイトを移行しました。{td_theme_css.after(splited_css);}}});}})();。