文章中に画像を挿入する方法をまとめました。
WordPressでは汎用的に使えるようにショートコード化することをお勧めします。
文章中に画像を上下中央に配置するショートコード
例1
サンプルコード
このゲームはAボタン[imgtxt gc_a]とBボタン[imgtxt gc_b]で操作できます。
このゲームはAボタン
とBボタン
で操作できます。


例2
サンプルコード
このパスワードをイナズマイレブン3で入力してみよう!! なんにもおきねぇから[imgtxt ba90]
このパスワードをイナズマイレブン3で入力してみよう!!
なんにもおきねぇから
なんにもおきねぇから

設定方法
CSSの設定
ご利用されているWordpressの子テーマのstyle.cssに下記を追記してください。
img.sc_img{ vertical-align: middle; }
これは文章中に挿入される画像に適用するcssになります。
これが設定されていないと、文章に対して画像が上下中央に配置されません。
PHPの設定
ご利用されているWordpressの子テーマのfunctions.phpに下記を追記してください。
function shortcodeTextImgInline($query){ $str = $query[0]; $img = ''; //以下は任意の画像を出す時に設定するキーワードを指定します。 //Aボタンの画像を出したい場合は[imgtxt gc_a]を入力する設定となります。 //Aボタン if($str == 'gc_a') $img = 'https://kinocolog.com/wp-content/uploads/2019/05/a.png'; //Bボタン if($str == 'gc_b') $img = 'https://kinocolog.com/wp-content/uploads/2019/05/b.png'; //BA-90画像 if($str == 'ba90') $img = 'https://kinocolog.com/wp-content/uploads/2019/05/BA-90.png'; if($img){ return '<img class="sc_img" src="'.$img.'">'; }else{ return ''; } } add_shortcode('imgtxt', 'shortcodeTextImgInline');
if($str == ”)には、特定の画像を出す時に設定するキーワードを指定します。(毎回URL打つのはしんどいですもんね)
画像のURLは、メディアに画像をアップロードした際に確認できる(下記画像)ので、コピーして貼り付けてください。
そして、返す画像には先ほど設定したclassのsc_imgを指定しておきます。
ここまで終えたら設定完了です。
各種設定が終われば、好きな画像を絵文字のように、文章中に挿入できるようになります。
文章表現の幅が広がりますので、ご活用頂ければ幸いです。
このショートコードをふんだんに活用した下記の記事「カービィのエアライドに学ぶ直感的な操作性」を是非あわせてご確認ください。
404 NOT FOUND | キノコログ
WEBプログラマーの備忘録
コメント