デザイン管理

h1 (hwrappでSHADOW)H1見出し(タイトル自動)

h_ver2 H2見出し

h_ver3 H3見出し

 
 

区切り線

区切線hr-1

区切線hr-2

区切線hr-3

 
 

文字装飾(文章内)SPANで囲む<span class=””></span>

文字の大きく強く class bigmojiを付与
文字の大きさをミドルサイズclass midmojiを付与
通常の文字サイズ
文字の大きさを小さく class=”minmoji”
文字の大きさをとても小さく class=”minmoji2″

装飾で強調したい場合 class=”i-af-water1 marker_water”

文章に線を引く場合はu-inを付与。
 
 

テキストアイコン

 icon-yaji-up
 icon-yaji-down
 icon-point-up ⇒up ⇒right ⇒down ⇒left
 icon-arrow-right ⇒up ⇒right ⇒down ⇒left
 icon-shield
 icon-happyclover
 icon-dogbag
 icon-nekobag
 icon-nekofish
 icon-hachi
 icon-footstamp
 icon-onsen
 icon-home
 icon-pacman
 icon-spades
 icon-diamonds
 icon-clubs
 icon-heart
 icon-scissors
 icon-play
 icon-film
 icon-pencil
 icon-mug
 icon-star-full
 

DIVやLIで囲む系 <div class=””></div> <li class=””></li>

箇条書きコンテンツは基本的にLIで囲む。DIVやLIを囲むのはWORDPRESSのP文章ラインの影響を受けないように補正している。

  • icon1 箇条書きコンテンツに使う。li class=”icon1″スマホで文章が折り返しても、ずれたり影響がない
  • icon2 箇条書きコンテンツに使う。li class=”icon2″スマホで文章が折り返しても、ずれたり影響がない
  • suji(1-12) 箇条書きコンテンツに使う。li class=”suji1″スマホで文章が折り返しても、ずれたり影響がない
バルーン吹き出しballoon-1-bottom

バルーンの吹き出しはクラスにballoon-1-bottomを付与。
<div class=”balloon-1-bottom”>ここに内容</div>
 
 

DIV囲み class=mojiback1 mojiback2

注釈のイメージはこちらmojiback1。注釈のイメージはこちらmojiback1。注釈のイメージはこちらmojiback1。
注釈のイメージはこちらmojiback2。注釈のイメージはこちらmojiback2。注釈のイメージはこちらmojiback2。

 

タイトルを入れる場合<div class=”mojiback1-t1″></div>

  • icon1
  • icon1
  • icon1
  • icon2
  • icon2
  • icon2
  • suji1
  • suji2
  • suji3
  • suji4
  •  

    タイトルを入れる場合<div class=”mojiback1-t2″></div>
    目立たない系のタイトルとなっています。minmojiなどで文字を小さくするとさらに重要度はへります

     
     

    引用の場合<blockquote class=”mojiback0″></blockquote>

    引用だけは div ではなく blockquote を使うようにします。クラスはclass=”mojiback0″。ダブルクォートがつくのでユーザーにも引用と分かりやすい事。自分で書いたコンテンツと引用コンテンツをしっかり分ける事は失礼や勘違いを避けたり、著作権問題を回避する事にもつながります。

    他のサイトからの引用、書籍や他のメディアからの引用など。他のサイトからの引用、書籍や他のメディアからの引用など。他のサイトからの引用、書籍や他のメディアからの引用など。

     
     

     

    お風呂入浴法アイコン

    • icon-yu-water
    • 
      
    • icon-yu-pet
    • 
      
    • icon-yu-not-everyday
    • 
      
    • icon-yu-after
    • 
      
    • icon-yu-too-wash
    • 
      
    • icon-yu-h2-o2
    • 
      
    • icon-yu-massage
    • 
      
    • icon-yu-foot-hand
    • 
      
    • icon-yu-shower
    • 
      
    • icon-yu-plus
    • 
      
    • icon-yu-harf
    • 
      
    • icon-yu-how-to
    • 
      
    • icon-yu-normal
    • 
      

     
     

    ログイン
    XMLサイトマップ

     
     

    画像

    ワードプレスの投稿では画像を挿入した時点で標準のスタイルが適用される。class=”alignnone size-full wp-image-671″などのクラスが自動適用されるが正直かなり邪魔。このclass部分をクリアし、分かりやすくまとめる。
     

    記述イメージ

    <img src=”https://hag-r.com/wp-content/uploads/2016/10/yun_16997.jpg” alt=”火山とマグマ” class=”size-full” />

     

    alt=””の部分は基本必要。ALT属性は画像検索した時の検索キーワードになったり、目の見えない人のパソコンでは音声でALT属性が読み上げられるので親切で何の写真があるかイメージしてもらえるようになるので、できるだけ分かりやすく正直に設定します。
     

    このテンプレでの画像のPOINTを頭に入れておく

  • 主に最大”幅”での制御。「最小での制御」はない。つまり小さい画像はそのまま小さい。
  • もし、画面一杯大きく表示したい画像は横幅が最低650px以上のものを使ってください。
  • 縦に長い画像は印象が全然違うので注意。極端に長い長方形ではなく、適度な長方形の画像を使用する事。
  •  

  • 改めてclass=”size-full”
  • 下記画像は元々横幅がテンプレより大きい画像だからぴったり表示されているが、小さい画像はそのままの小さい画像となる。
    例の火山画像

     
     

  • class=”toukouimg1″
  • 横幅は最大400pxまで。

    これがMAX400px幅の目安だ

    yun_16997
     
     

    おすすめ
  • class=”toukouimg1-c”
  • toukouimgと一緒でmax-width:400pxだが、スマホで画像が中央に表示される。
    yun_16997
     
     

    おすすめ
  • class=”toukouimg2″
  • max-width:250px;max-height:300px;以上大きくなる事はない。サイトデザインを考えた際に大きい画像の場合だと扱いにくい場合があるから、このくらいの大きさの画像を統一で使っているとデザイン的にも安定感があり便利。画像横幅がスマホ縦幅より小さくなると、縦補正も考える事ができる。あまり意味もないが。
    yun_16997
     
     

    おすすめ
  • class=”toukouimg2-c”
  • toukouimg2一緒でmax-width:250px;max-height:300px;だが、スマホで画像が中央に表示される。
    yun_16997
     
     
     

  • class=”okao”
  • 小さくしておきたい画像は CLASSには okao を付与で縦150px横150px以上大きくなる事はない。書籍や人の顔の画像などに便利。
    yun_16997
     
     
     

  • class=”nobimax”
  • 画像を区切りとして使いたい、もしくは横幅一杯表示させたい場合は CLASS nobimax を付与 高さはオート。幅が650px以上の画像を使います。
    yun_16997
     
     

  • class=”nobimax300″
  • その中で高さを300pxに抑えたい場合(nobimax300)縦のみ強制で300pxになるので縦横比率は変わり歪みます。 
    yun_16997
     
     

  • class=”nobimax200″
  • その中で高さを200pxに抑えたい場合(nobimax200)縦横比率は変わり歪みます。
    yun_16997
     
     

  • class=”imgright”
  • 画像右に回り込み(スマホ縦では回り込みなし)imgrightを付与

    yun_16997横幅をMAX220pxとしている。英語や記号などを使うと予期せぬ所で折り返してしまう場合があるので注意。画像⇒文章の順番にかく。

  • class=”imgleft”
  • 画像左に回り込み(スマホ縦では回り込みなし) imgleftを付与

    yun_16997回り込み画像を入れる場合はimgleftを付与。 一番の注意はワードプレス投稿画面でimg要素に対して段落をおかず文章を記述する事。また<div class=”floatclear”></div>で最後に回り込みを解除する事。基本「画右」ボタンを訂正すると分かりやすい。

     
     

  • class=”imgcenter”
  • PCでもスマホでも最初っから画像をセンタリング(中央)したい場合はこちら。横最大300pxを基準とした
    yun_16997
     

     
     

    クラスの複数指定でできる画像効果

  • class=”■■ shadow”
  • 影をつける場合は プラスで(classの複数付与は半角スペースで区切り)shadowをつける。サンプルはclass=”okao shadow”。
    yun_16997
     
     

  • class=”■■ center”
  • toukouimg系とokaoに関してはその画像サイズにプラスでcenterと複数クラスを付与する事で最初からセンタリングできる。サンプルはclass=”okao center”。
    yun_16997
     
     

  • class=”■■ waku1″
  • 枠を表示1
    yun_16997
     
     

  • class=”■■ waku2″
  • 枠を表示2
    yun_16997
     
     

    LIGHTBOX風の画像ポップアップ

    a href のリンク先を画像に指定すると LIGHTBOX風ポップアップが可能。画像をクリック(タップ)してください。wakuやShadowを使って他の画像と区別すると分かりやすい。

    (コード的にはこんな感じ)
    <a href=”https://hag-r.com/wp-content/uploads/2024/02/yun_16997.jpg”><img src=”https://hag-r.com/wp-content/uploads/2024/02/yun_16997.jpg” alt=”火山とマグマ” class=”okao waku2″ /></a>

    火山とマグマ

    waku ⇒ shadow にしてみるとこんな感じ
    火山とマグマ

     
     

     

    その他予備ヘッダー

    h_ver10

    h_ver11

    h_ver12