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を付与。
＜div class=”balloon-1-bottom”＞ここに内容＜/div＞
 
 

DIV囲み class=mojiback1 mojiback2

 

 

 
 

引用の場合＜blockquote class=”mojiback0″＞＜/blockquote＞

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

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

 
 

 

お風呂入浴法アイコン

 
 

ログイン
XMLサイトマップ

 
 

画像

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

 

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

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

主に最大”幅”での制御。「最小での制御」はない。つまり小さい画像はそのまま小さい。

もし、画面一杯大きく表示したい画像は横幅が最低650px以上のものを使ってください。

縦に長い画像は印象が全然違うので注意。極端に長い長方形ではなく、適度な長方形の画像を使用する事。

 

改めてclass=”size-full”

下記画像は元々横幅がテンプレより大きい画像だからぴったり表示されているが、小さい画像はそのままの小さい画像となる。

 
 

class=”toukouimg1″

横幅は最大400pxまで。

 
 

class=”toukouimg1-c”

toukouimgと一緒でmax-width:400pxだが、スマホで画像が中央に表示される。

 
 

class=”toukouimg2″

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

 
 

class=”toukouimg2-c”

toukouimg2一緒でmax-width:250px;max-height:300px;だが、スマホで画像が中央に表示される。

 
 
 

class=”okao”

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

 
 
 

class=”nobimax”

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

 
 

class=”nobimax300″

その中で高さを300pxに抑えたい場合（nobimax300）縦のみ強制で300pxになるので縦横比率は変わり歪みます。　

 
 

class=”nobimax200″

その中で高さを200pxに抑えたい場合（nobimax200）縦横比率は変わり歪みます。

 
 

class=”imgright”

画像右に回り込み（スマホ縦では回り込みなし）imgrightを付与

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

class=”imgleft”

画像左に回り込み（スマホ縦では回り込みなし） imgleftを付与

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

 
 

class=”imgcenter”

PCでもスマホでも最初っから画像をセンタリング（中央）したい場合はこちら。横最大300pxを基準とした

 

 
 

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

class=”■■ shadow”

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

 
 

class=”■■　center”

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

 
 

class=”■■　waku1″

枠を表示１

 
 

class=”■■　waku2″

枠を表示２

 
 

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

---