★メモ★WordPress文章の囲み方

健康・美容

スポンサーリンク

シェアする

この記事を読むのに必要な時間は約 9 分です。

banner_21

詳細はこちら

 

 

 

 

<div style=”color: #ffffff; padding: 0.2em 0.5em; background: #000000 none repeat scroll 0% 0%; border-left: 6px solid #808080; border-bottom: 4px solid #d7d7d7; font-size: 28px;”>人生ゲーム化について学ぶ</div> 

人生ゲーム化について学ぶ

 

文字を入力

 

 

ブログランキング・にほんブログ村へ

にほんブログ村

人気ブログランキング

 

タイトルを入力する
<div style=”display: inline-block; background: #0000ff; font-size: 14px; font-weight: bold; border: 1px solid #0000ff; border-radius: 3px 3px 3px 3px; padding: 1px 3px 1px 3px;”&gt;><span style=”color: #ffffff; font-weight: bold;”>タイトルを入力する</span></div>
 
タイトルを入力する
 
■ここにタイトルを入力する
  • ここに本文を入力する。
  • ここに本文を入力する。
 
<div style=”background: #5c9ee7; font-size: 19px; font-weight: bold; border: 2px solid #5c9ee7; border-radius: 5px 5px 0 0;padding-left: 20px;”><span style=”color: #ffffff; font-weight: bold;”>タイトルを入力する</span></div><div style=”border: 2px solid #5c9ee7; background:#f5faff; padding: 1px;border-radius: 0 0 5px 5px”><ul><li>ここに本文を入力する。</li><li>ここに本文を入力する。</li></ul></div>

 

■ここにタイトルを入力する
ここに本文を入力する。
<div style=”background: #0000FF; border: 2px solid #0000FF; padding-left: 10px;”><span style=”color: #ffffff; font-weight: bold;”>■ここにタイトルを入力する</span></div><div style=”border: 2px solid #0000FF; padding: 10px;”>ここに本文を入力する。</div>
 
  • おおおおおおおおおおおお
  • おおおおおおおおおおおおお
 
 
 
タイトル
枠線で囲まれる本文
 
タイトル
枠線で囲まれる本文

<div style=”height: 12px;”><span style=”margin-left: 8px; padding: 6px 10px; font-size: 19px; background: #ffffff; color: #ff9933; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;”>タイトル</span></div>
<div style=”border: 3px solid #ff9933; padding: 25px 12px 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;”><span style=”font-size: 16px;”>枠線で囲まれる本文</span></div>

 

 
おおおおおおおおおおおお
おおおおおおおお
 
スマホでのインターネット平均使用時間は平日61.3分、休日87.3分(平成28年)スマホを使い過ぎると、身体面、精神面、社会面への悪影響がある。

<div style=”display: inline-block; background: #ffffff; padding: 15px; border: 2px solid #3366ff; border-radius: 1px; word-break: break-all;”>
<strong><span style=”color: #808080;”>スマホでのインターネット平均使用時間は</span><span style=”color: #ff0000;”>平日61.3分、休日87.3分</span><span style=”color: #808080;”>(平成28年)</span></strong><strong><span style=”color: #808080;”>スマホを使い過ぎると、</span><span style=”color: #ff0000;”>身体面、精神面、社会面</span><span style=”color: #808080;”>への悪影響がある。</span></strong>
</div>

 
豆知識
対義語にはインソーシング(insourcing)があり、内製と言われています。 これは、一旦社外へ委託・発注した仕事を、再び社内に戻すことを指します。
 
<div style=”display: inline-block; background: #ffcc00; padding: 5px 10px; color: #ffcc00; border-radius: 10px 10px 0 0;”><span style=”color: #ffffff;”><strong>豆知識</strong></span></div>
<div style=”background: #ffffff; border-radius: 0 10px 0px 10px; padding: 10px; border: 2px solid #ffcc00;”><span style=”color: #808080;”>対義語にはインソーシング(insourcing)があり、内製と言われています。 これは、一旦社外へ委託・発注した仕事を、再び社内に戻すことを指します。</span></div>

豆知識
対義語にはインソーシング(insourcing)があり、内製と言われています。 これは、一旦社外へ委託・発注した仕事を、再び社内に戻すことを指します。
<div style=”height: 14px;  background: #ffcc00; padding: 1px 5px 10px 20px; color: #ffcc00; border-radius: 10px 10px 0 0;”><span style=”color: #ffffff; font-size: 14px;”><strong>豆知識</strong></span></div>
<div style=”background: #ffffff; border-radius: 0 0 10px 10px; padding: 10px; border: 2px solid #ffcc00;”><span style=”color: #808080;”>対義語にはインソーシング(insourcing)があり、内製と言われています。 これは、一旦社外へ委託・発注した仕事を、再び社内に戻すことを指します。</span></div>
 
豆知識
対義語にはインソーシング(insourcing)があり、内製と言われています。 これは、一旦社外へ委託・発注した仕事を、再び社内に戻すことを指します。
 
 
見出しタイトル
「クラウドソーシング」とは？「アウトソーシング」とは何が違うの？
<div style=”display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>こちらもCheck！</strong></div>
<div style=”background: #ffffff; border-radius: 0 10px 10px 10px; padding: 10px; border: 2px solid #3399ff;”>「クラウドソーシング」とは？「アウトソーシング」とは何が違うの？</div>
 
 
ここに文章
 
 
<div>ここに文章</div>
<div style=”display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>見出しタイトル</strong></div>
 
 おおおお
いいい
おおお
ｐｐｐ
おおお
 オレンジ
 

ここに文章

 
ここに文章
 
 
 
囲みの中の文章
<div style=”border: 1px solid #cccccc; padding: 10px; background: #ffffff;”>囲みの中の文章</div>
 
囲みの中の文章
<div style=”display: inline-block; border: 1px solid #cccccc; padding: 10px; background: #ffffff;”>囲みの中の文章</div>
 
 
 
見出しタイトルの枠を伸ばすことができる
 
 
ここに文章長いバージョン
<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章長いバージョン</div>
 
 
 
 
ここに文章で伸ばすことができる
<div style=”display: inline-block; background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章で伸ばすことができる</div>
 
 
ここに文章
<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 1px; word-break: break-all;”>ここに文章</div>
<div></div>
 
 
両親の
組み合わせ		生まれる
子供		両親の
組み合わせ		生まれる
子供
A×AA、OB×OB、O
A×BA、B、O、ABB×ABA、B、O、AB
A×OA、OO×OO
A×ABA、B、O、ABO×ABA、B、O、AB
B×BB、OAB×ABA、B、O、AB

表見出しの色：#3660f7

 

箇条書きのスタイル

参考サイト

http://freesworder.net/wordpress-ol-ul-design/
freesworder.net
  1. データファイル
    • テーマのデザイン・設定
    • 画像ファイル
    • プラグイン
  2. データベース
    • 投稿記事・固定ページ
    • 管理画面の設定・情報
    • ログインID・パスワード

 

 

  • データファイル
    1. テーマのデザイン・設定
    2. 画像ファイル
    3. プラグイン
  • データベース
    1. 投稿記事・固定ページ
    2. 管理画面の設定・情報
    3. ログインID・パスワード

 

画像横への回り込み
http://www.keni-customize.net/img-mawarikomi-681/
www.keni-customize.net

HTML

<p><img src="hoge.jpg" class="alignleft" />回り込みテキスト。回り込みテキスト。回り込みテキスト。回り込みテキスト。</p>
<p class="clear">回り込み解除。回り込み解除。回り込み解除。回り込み解除。</p>
 
CSS
p.clear{
clear: both;
}
 
 
  1. データファイル
    • テーマのデザイン・設定
    • 画像ファイル
    • プラグイン
  2. データベース
    • 投稿記事・固定ページ
    • 管理画面の設定・情報
    • ログインID・パスワード

 

 

  • データファイル
    1. テーマのデザイン・設定
    2. 画像ファイル
    3. プラグイン
  • データベース
    1. 投稿記事・固定ページ
    2. 管理画面の設定・情報
    3. ログインID・パスワード

カラム二段

<div class=”myrow”>

<div class=”col-1″ style=”margin: 1em;”>

シンプルな２カラム／２段組レイアウトです。等幅で表示させています。

</div>

<div class=”col-1″ style=”margin: 1em;”>

雑誌で見かけるような形式で、文章をカラム間に連動させたい場合はcolumnがおすすめです。ただ、Webではあまり活用する機会はないかもしれません。

</div>

</div>

 

📚 関連記事

この記事をシェアする

𝕏 でシェアLINE でシェア