2017/08/09

画像や文字を3つや2つにわける方法(3カラムや2カラム)

 
カラムのアイキャッチ画像

3カラムや2カラムの作成方法

ワードプレステーマ「エレファント2」には便利なショートコードがありますので簡単に2カラムや3カラムを作成することができます。
「エレファント2」をご使用でない方は下のほうにプラグインでの2カラムや3カラムのやり方を書いていますのでそちらを参考にしてください。

早速やっていきましょう。

まずは2カラムからやっていきましょう

記事ページに上記のショートコードを書くだけです。


「ここに左」と「ここに右」と書かれた場所に画像を入れていきましょう。

「メディア追加」をクリックします

メディア追加を選ぶ

次に入れたい画像をアップロードしましょう。

アップロードのページにいったらファイルを選択してアップロードします。

次にその画像にチェックマークがあるのを確認して「投稿に挿入」をクリックします。

続いて同じように画像を挿入すると下のようになります。

これで投稿すれば2カラムになっています。

院長
院長

続いて3カラムにもチャレンジしてみましょう


今度はこちらの上記のコードをつかっていきます。

先ほどと同じように「ここ左」「ここに中央」「ここに右」と書かれた部分に画像をいれていきます。
いれるとこんな感じになります。

これで3カラムを作成することがきました。

院長
院長
院長

このようにワードプレステーマ「エレファント2」を使えば簡単に2カラムや3カラムを作成することがきます。
またワードプレスプラグインの「AddQuicktag」を使えばコピペしなくても簡単に使用できるようになるのでそちらもおすすめです。

プラグインのインストールの仕方や「AddQuicktag」へのエレファント2のショートコードを一括で登録できるファイルがエレファントの公式サイトにありますので、詳しくはそちらを参考にしてみてください。

エレファント2を使用しないで2カラムや3カラムを作成する方法

まずはプラグインの「Shortcodes Ultimate」をインストールします。

インストールについては別のページで説明しています。

まずは3カラムのやり方を説明していきます。投稿ページや固定ページのタイトルの下にある「ショートコードを挿入」をクリックします。

左上のショートコードを挿入をクリック

いろいろな項目が出てくると思います。その中の「行」をクリックします。

行を選ぶ

下記のようなページが表示されるので「ショートコードを挿入」をクリックします。

ショートコードを挿入をクリック
そうすると下記のようにでてきます。


これで3カラムの挿入ができました。
コンテンツと書かれているところをお好きな文字に変えてみましょう。

今回はコンテンツ1、コンテンツ2、コンテンツ3にしてみます。

下記のように3カラムで文字を入れることができました。

コンテンツ1
コンテンツ2
コンテンツ3

次に画像をいれてみましょう。
コンテンツと書かれている部分を削除してそこに画像を挿入していきましょう。削除したところにカーソルをもっていっておきましょう。

コンテンツとかかれた文字を消してそのにカーソルをもっていっておく

タイトルの下にある「メディアを追加」をクリックします。


左上にあるファイルをアップロードをクリックします。

「ファイルを選択」をクリックして自分の好きなファイルをアップロードします。

アップロードした写真を選んで右下に投稿に挿入をクリックしましょう。

これで画像の挿入ができました。

3つ全部に画像をいれてやると下記のような感じになります。

院長

1つ目

院長

2つ目

院長

3つ目

次に2カラムにする方法になります。
size=”1/3″の部分をsize=”1/2″に変えましょう。そして3つだと多いので一つ削除します。
下記のような感じです。

下のように文字を2カラムにできまた。

コンテンツ
コンテンツ

画像を入れるとこんな感じです


下のように2カラムの画像ができます。

院長
1つ目
院長
2つ目

こちらのプラグインは1/6までにできるので6カラムまでできます。

院長
1つ目
院長
2つ目
院長
3つ目
院長
4つ目
院長
5つ目
院長
6つ目

なのでこれを少しいじって下記のようにすれば

こんな感じにもできます。

院長
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© 🐩プードル鍼灸整骨院🐩 , 2017 All Rights Reserved.