サポート » 使い方全般 » 本文を段組みしたい場合のよりよい方法

  • robocon150

    (@robocon150)


    投稿や固定ページの本文を2段組みや3段組みにしたい場合、プラグインを使えば簡単にできたりしますよね。
    例えば下記ページにあるような方法
    https://xn--gckc8cya7i0b6m.xyz/wordpress/35/

    ただプラグインを使うと、
    ・万が一プラグインを使えなくなった場合に表示が崩れる恐れがある
    ・余計なタグがたくさん入る
    のであまり使う気になれず、現状AddQuicktagというプラグインを使って、段組みするCSSを施したHTMLを本文に挿入するようにしています。

    みなさんは段組みしたい場合、どのような方法でなされていますか?
    参考に教えていただけると助かります。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • nobita

    (@nobita)

    こんにちは、
    単純な段組みなら、

    
    <div class="col">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    
    
    .col{
         -moz-columns: 20em auto;
         -webkit-columns:20em auto;
         -o-columns: 20em auto;
         -ms-columns: 20em auto;
    }
    
    

    が一番簡単ですよね、レスポンシブテーマでも気兼ねなく使えるので

    トピック投稿者 robocon150

    (@robocon150)

    nobita様
    ご返信ありがとうございました。

    今回想定しているのは下記のような段組みの場合なんです。
    伝わりますかね。。

    │写真写真│写真写真│写真写真│
    │テキスト│テキスト│テキスト│
    │テキスト│テキスト│テキスト│

    がっつりデザインが入った固定ページであれば、
    ビジュアルエディタを使わず、コードだけで自分で作成するのですが、
    ビジュアルエディタを使いつつ、お客さん側でこういう段組みを使いたい場合のベターな方法が知りたいです。

    munyagu

    (@munyagu)

    こんにちは

    ベターかどうかはちょっと分かりませんが・・・

    カスタム投稿とカスタムフィールドで、お客さんにはそのフィールドに入れていってもらえれば整形されるように作るのはどうでしょうか。

    列数とか、セルの数が決まっていないとやりにくいかもしれませんが、Advanced Custom Fieldsなんかだと色々便利な機能もあるので、おやりになりたいことができるような気もします。

    トピック投稿者 robocon150

    (@robocon150)

    munyagu様

    ご返信ありがとうございます。

    今回の段組みは、本文中に自由に差し込む形を想定しているので固定できないのですが、
    場合によってはカスタムフィールドを使うのがよいですね!

    nobita

    (@nobita)

    お遊びですが、、、

    メディアを挿入で、captionに文章を入力して、

    functions.phpに、ちょこっとフィルターを記述

    
    add_filter('the_content','my_custom_the_content');
    
    function my_custom_the_content($content){
    	global $post;
    	
    	if( 41730 == $post->ID ) {//この条件をカスタムフィールドにしたリ、投稿フォーマットにしたリ いろいろ、夢想
    		
    		return '<div style="display:flex">'.$content.'</div>';		
    	}
    	return $content;
    }
    

    screenshot

    お粗末

    トピック投稿者 robocon150

    (@robocon150)

    nobita様

    ご返信ありがとうございます。
    画像を使う場合はキャプションを利用できますね。
    ということはデフォルトの機能のギャラリー機能でも段組みはできますね。

    ただ、画像を使わない場合は段組みできないのが難ですね。。
    画像を使わない、テキストだけの段組みもデフォルトの機能でできたらいいのですが。

    nobita

    (@nobita)

    AddQuicktagを使っているのであれば、

    前置

    
    <div style="display:flex">
    

    後置

    
    </div>
    

    で、p要素を囲めば、OKじゃないですか?(実装はいろいろやらないといけないと思いますが、)

    トピック投稿者 robocon150

    (@robocon150)

    nobita様

    質問の本文にも書いておりますが現状そのような形でやっています。
    ただこれよりベターな方法があれば知りたいんですよね。。

    nobita

    (@nobita)

    あ、もうそのようにしていたんですね。

    確かに、「ベターな方法」というよりは、「ベタな方法」ですね。

    「ベターな方法」というのは、どういうイメージなのか想像が及びません

    addquicktag やめたいという事ですか?

    という事なら、tinymceと同機能のボタンをテーマから追加するといった事でしょうか、、、

    • この返信は7年前にnobitaが編集しました。
    nobita

    (@nobita)

    追記

    ボタンの作り方、

    http://www.tenman.info/wp3/manualraindrops/archives/1644

    みたいに作れるので、応用してください

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「本文を段組みしたい場合のよりよい方法」には新たに返信することはできません。