ホームページ研究LABO

ホームページ研究LABO
目次

デザイン

変形画像&見出し・テキスト|LIQUID BLOCKS

Exif_JPEG_PICTURE

見出し

テキストはここに入ります。

アコーディオンカーテンSWELL

吹き出し|SWELL

はじめましてコレクションマーケットです。

はじめましてコレクションマーケットです。

キャプションブロック|SWELL

キャプション

キャプションブロック枠上

キャプション

キャプションブロックデフォルト

キャプション

キャプションブロック小

キャプション

キャプションブロック枠上

画像重ねデザインデスクトップのみ|Grids

Exif_JPEG_PICTURE
Exif_JPEG_PICTURE

Font AwesomeでHタグ装飾

PタグアイコンフォントAmazon

H2アイコンフォントAmazon

H2センター寄せ
アイコンフォントAmazon

 H2アイコンAmazon

.head-border

  • position: relative; … ボーダーを擬似要素で作るため、位置の起点にする。
  • display: inline-block; … インラインブロックにしてボーダーの位置を調整。
  • padding: 0 55px; … 横を0pxにしてしまうとボーダーが文字に被ってしまう。

.head-border:擬似要素

  • position: absolute; … 親要素(relative)を起点にする。
  • top: 50%; … ボーダーを垂直方向真ん中に指定。
  • width: 50px; … ボーダーの横幅。
  • height: 5px; … ボーダーの高さ。厚み。
  • left:0; / right:0; … 親要素のpaddingで横幅を調整しているので、位置を0に指定。

H2センター寄せ アイコンフォントAmazon作成方法

引用元:【HTML・CSS】見出しの左右両端に線を入れる方法

画像アイコンでHタグ装飾

 H2画像アイコン 

アニメーション|Shortcodes Ultimate

bounceIn

wobble

flip

fadeInRightBig

rotateInDownRight

lightSpeedIn

アニメーション|Animate.css

準備中

メニューのテキストを画像に置き換える方法|WordPres

下記コードを外観→メニュー→任意のナビゲーションラベルのテキスト部に埋める。

<img src="メディアから取得した画像のURL" width="メニュー項目の横幅" alt="代替テキスト">

よかったらシェアしてね!

この記事を書いた人

株式会社コレクションマーケット代表取締役。
20代前半でリサイクルショップ運営。その後HP集客が当たり、自身でHP集客や売上UPをおこなうようになる。1985年生まれ札幌育ち。

目次
閉じる