横への分割方法

便利『Shortcodes Ultimate』のプラグインで横に2分割する!

投稿日: カテゴリー: プラグイン

こんにちはYTのハマです。

今回はあると便利なプラグインのご紹介になります。

今回は『Shortcodes Ultimate』まだインストールをされてない方も、これはきっとインストールしたくなるかと思います。このプラグインで横に2分割、3分割、仕切り、見出し、YouTube、アコーディオン、アニメーション、スライダー、カルーセルスライダーなどが一挙に導入できる優れものです。

 

 

横に2分割するカラムレイアウトが余裕で出来ちゃう優れものプラグイン

このプラグインは数え切れないほどの機能を揃えた、プラグインになりますが

その機能の一つに、分割して表示させると言う『カラム』と言われる機能があるのですが、普通にブログをやられていてCSSなんてわからないし…とあきらめている方もいらっしゃるのでは無いでしょうか?

横に2分割…?と、よく分からない方もいらっしゃると思いますので、少しばかりのパフォーマンスをお見せします。

まずは、下記の画像をスマホで見て下さい

 

2分割

この様に、綺麗に2分割したいのですが普通にやると下記の様になっちゃいます。

 

コアラ  寝ている画像スマホで見ている方には分かりやすいのですが…如何でしょうか?

多分とっても見え難い文章になっていると思いますが、今回はコチラのまま掲載します。

 

 

 

これ、CSSだとかを理解していない方は、ちょっと苦労してしまいます。

せっかく仕上げた文章なのに、ちょっとの事で汚く見えてしまい、結果諦めて縦に並べる表示にしたりします。

勿論それでもいいのですが、今回はいくつかある横に並べる方法の一つ『Shortcodes Ultimate』の機能の少しを紹介いたします。

 

 

『Shortcodes Ultimate』インストールからパフォーマンス

まずは、『Shortcodes Ultimate』をインストールします。本当に便利なプラグインなので、これさえあればプロの表現も夢じゃないほどの高性能プラグインになりますので、是非インストールしてみて下さい♪

 

 

プラグイン→新規インストール→検索でShortcodes Ultimateを検索→今すぐインストール→有効

プラグイン インストール方法

これでインストールできました。

 

早速、ショートコードを使っていきましょう♪

尚、プラグインを有効にすると勝手に投稿画面に 『ショートコードを挿入』と言う項目が追加されます。

 

 

プラグインをインストールして2分割…あれ…使えないぞ…?そんな方は慌てない

※今回はパソコンで見たほうが分かりやすいと思います

では、早速使っていきます。

ショートコードを挿入する→カラム

するとこんなコードが追加されます。

[su_column]この間に文字を入れたり画像を入れたりします[/su_column]

 

早速これを2つ並べてカラムを作ってみましょう♪

[su_column size="1/2"] ここに文字や画像を入れる[/su_column] [su_column size="1/2"] ここに文字や画像を入れる [/su_column]

横に2分割どころか、何故か並ばない…

 

なんだこりゃ!表示が変だぞ!と…慌てないあわてない実はこのコードはまだ未完成だったりします。

ちょっとややこしいのですが実はこんなコードにしなきゃいけません。

[su_row] [su_column size="1/2"] ここに文字や画像を入れる[/su_column] [su_column size="1/2"] ここに文字や画像を入れる [/su_column] [/su_row]

 

[su_row] これでコードを囲む[/su_row]

 

すると綺麗に横並びに表示され、スマホでは縦に並んで表示してくれます。

分割している数字を変えて、その分コードを並べれば3分割にも4分割にも出来ます。

勿論分割するだけなら、例えばテーブルで分割しても良いですし、やり方はそれぞれあると思いますが、このプラグインの良い所は、カラムだけじゃなく様々なショートコードが追加できる事です。

 

 

Shortcodes Ultimateでアニメーションも可能!HP作成が凄く楽になる!

では、機能の一部分を分かりやすく紹介していきます。

 

 

仕切りを入れる

仕切りですね、いちいちHTMLを使わなくても上手く仕切りを作ってくれます。

 

 

ブログを挿入する

コチラは投稿にブログのリストを表示してくれるショートコード、デザインも4通りありトップページに固定ページを入れた時にブログ一覧を表示したい時に使っても良いかと思います

(ただしデフォルトだと結構使い道無い気もしますが…)

 

 

スポイラー

よくある質問と答え
よくある質問と答え
よくある質問と答え

 

 

アニメーション

 

などなど様々な機能が一気に使える様になり、ブログを作るのも飛躍的に楽になるかもしれません。

本格的にCSSが使えない方や、HTMLさえ理解できない方、メンドクサガリな方などにはとても良いプラグインです。ただし一つ一つがちょっと中途半端な感じは否めません。

頼りきりも考え物ですね