wordpressで画像や文字を配置するのに使える便利なコード3選。

[PR]一部広告リンクを設置しています

161020_woredpress


woredpressのテンプレートだけでサイトを作るには自由度が少ないので画像やテキストを自由に配置する便利なタグを自分のメモ代わりに書いておきました。これを使いながら現在サイトをリニューアルしてます。コピペで一気にサイトを量産!


トップページにだけ画像やテキストを表示させる方法

トップーページにだけテキストや画像を配置して、他のページでは非表示に出来るタグです。参考にしたサイトはこちらです。

[wc_box color=”secondary” text_align=”left”] <br /> <?php if ( is_home() || is_front_page() ) : ?><br /> ここにトップページにだけ表示したいほにゃららを記載<br /> <?php endif; ?><br />

[/wc_box]


パソコンとスマホ別々に画像やテキストを表示させる方法

これを表示させたい所に配置して、画像やら文章やらを間に書き込めばいいだけです。参考にしたサイトは忘れました…。

[wc_box color=”secondary” text_align=”left”]
<?php if ( is_mobile() ) : ?>
  // スマホで表示させたい内容
<?php else: ?>
  // スマートフォン以外で表示させたい内容
<?php endif; ?>
[/wc_box]


画像を横に3つ並べるテーブルタグ

まだまだ、こういった初歩的な事を使ってます。参考にしたサイトはこちら

[wc_box color=”secondary” text_align=”left”]

</p> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img decoding="async" src="画像のURL" /> </td> <td> <img decoding="async" src="画像のURL" /> </td> <td> <img decoding="async" src="画像のURL" /> </td> </tr> </tbody> </table> <p>

[/wc_box]

携帯で表示する画像を縦横比率をおかしくしないコード

パソコンではきちんと表示できてるのに、携帯で表示したら変に伸びる事がありますがそんな時にはこのコードを貼り付けたら一発で治りました。

[wc_box color=”secondary” text_align=”left”]

</p> <p>img {<br /> max-width: 100%;<br /> height:auto;<br /> }</p> <p>

[/wc_box]

woredpressでhtmlのコードだけを表示させたい時

これは関係ありませんが、コードを記事に配置する時は”xmp”で挟げばOK。


woredpressのネタは検索すれば直ぐに出てきてサイトを自由に調整できるから楽しい。ブログを作りたいけど時間がないと思っている人は、完璧な物を作り上げようと思わないでとりえあずダサくてもいいから作る事が大切です!作らないと何もはじまらないですからね^^;僕もサイトデザインは気分や良いアイデアが出た時にころころ変えていますが、サイトのタイトルは検索する時にひかっかる大切な部分なので、ある程度ちゃんとしたものをつけた方が良いと思いますが、僕のブログはもうどうしようもないですww


アマゾンで漫画専用のキンドルペーパーホワイトが登場しましたが、ページめくりにイラっとするからKindleは買ってから全く触っていなくて、ipadminiをずっと使ってますがこれ1台でアマゾンプライムから本を読むのに事足りてます。ipadをずっと使ってて、イラっとしたくない人は買わない方がいいですよ。

コメントを残す

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

CAPTCHA