事業紹介

■ このテーマ
GeneratePress(+GP Premium)
https://generatepress.com/
※ダッシュボードの外観>カスタマイズからテーマのスタイルの変更が各種可能です。
※ヘッダー・フッターへのJSやCSS追加や各所のフックは、外観>GP Hooksから設定できます。

■ CSSフレームワーク
Unsemantic
http://unsemantic.com/css-documentation

■ CSSの上書きについて
下記CSSは子テーマ内のcss/tools.cssに収められています。
上書きする場合は子テーマのstyle.cssに記述してください。

■ ロゴについて(ロゴのバランスを考えてサイズは適宜調整して下さい)
ヘッダーロゴ:表示縦幅50px 実際にアップするロゴの縦幅100px
フッターロゴ:表示縦幅50px 実際にアップするロゴの縦幅100px
※レスポンシブ対応のため2倍で作成


見出しの装飾例

見出しテキストテキストH1

見出しテキストテキストH2

見出しテキストテキストH3

見出しテキストテキストH4

見出しテキストテキストH5
見出しテキストテキストH6

見出しテキストheading1

見出しテキストheading2

見出しテキストheading3

見出しテキストaddsubサブタイトル

見出しテキストhline

見出しテキストhline-lv2

見出しテキストhcenter


見出しテキストhcenter-lv2

その他見出し

■ シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
http://www.nxworld.net/tips/50-css-heading-styling.html
■ HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
http://uxmilk.jp/52953

マーカー

黄色のマーカー ライムのマーカー 水色のマーカー ピンクのマーカー


ボタンの種類

アイコンはfontawesomeを参照(http://fontawesome.io/icons/

その他ボタン

■ CSSのみで実装するボタンデザインやホバーエフェクト 20+α
http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

■ CSSで実装できる、魅力的なボタンデザイン用サンプル、テクニック30個まとめ
http://photoshopvip.net/archives/80846

■ CSSで実装できる、思わず押したくなるボタン用コードスニペット38個まとめ
http://photoshopvip.net/archives/88684

■ コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ
http://photoshopvip.net/91115

その他エフェクト・コードスニペット集

■ PhotoshopVipのスニペット一覧
http://photoshopvip.net/tag/html%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88

■ 今どきのウェブサイトをつくろう!差がつくHTML/CSSコードスニペット27個まとめ
http://photoshopvip.net/archives/86971

■ 2016年を先取り!コピペで学ぶ HTML/CSS スニペット60個まとめ
http://photoshopvip.net/archives/85260

■ CSS3の広がる可能性!美しいテキストエフェクト用コードスニペット24個まとめ
http://photoshopvip.net/archives/80725

■ CSSスタイリングで表現できる!すごいテキストエフェクト33個まとめ
http://photoshopvip.net/archives/75067


リスト装飾

  1. スタップ1の説明
  2. ステップ2の説明
  3. ステップ3の説明
  4. ステップ4の説明
  5. ※ステップ4の詳細説明ステップ4の詳細説明ステップ4の詳細説明ステップ4の詳細説明ステップ4の詳細説明

  6. ステップ5の説明
  7. ※ステップ5の詳細説明ステップ5の詳細説明ステップ5の詳細説明ステップ5の詳細説明ステップ5の詳細説明

  8. ステップ6の説明
  9. ※ステップ6の詳細説明ステップ6の詳細説明ステップ6の詳細説明ステップ6の詳細説明ステップ6の詳細説明

■ 画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10
http://www.nxworld.net/tips/no-image-css-list-icon.html


FAQ装飾

Q

質問内容質問内容質問内容質問内容質問内容質問内容質問内容

A
答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え
答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え答え

枠(BOX)の装飾例

  1. 枠(BOX)の装飾例枠(BOX)の装飾例
  2. 枠(BOX)の装飾例枠(BOX)の装飾例
  3. 枠(BOX)の装飾例枠(BOX)の装飾例

 

  1. 枠(BOX)の装飾例枠(BOX)の装飾例
  2. 枠(BOX)の装飾例枠(BOX)の装飾例
  3. 枠(BOX)の装飾例枠(BOX)の装飾例

 

  1. 枠(BOX)の装飾例枠(BOX)の装飾例
  2. 枠(BOX)の装飾例枠(BOX)の装飾例
  3. 枠(BOX)の装飾例枠(BOX)の装飾例

 

  1. 枠(BOX)の装飾例枠(BOX)の装飾例
  2. 枠(BOX)の装飾例枠(BOX)の装飾例
  3. 枠(BOX)の装飾例枠(BOX)の装飾例

その他の装飾例

POINT
1


グリッドレイアウト

グリッドレイアウトはunsemanticを利用(http://unsemantic.com/css-documentation

grid-80でpush-10の見本(左右に余白)
順番入替え(デスクトップではこちらが右になる・モバイルではこちらが上になる)
順番入替え(デスクトップではこちらが左になる・モバイルではこちらが下になる)
I am third, on desktkop.
I am second, on mobile.
I am first, on desktop.
I am first, on mobile.
I am second, on desktop.
I am 100% wide on mobile.
I’m 30% wide, followed by…
Another 30% column, with
40% empty space between.
デスクトップで非表示
タブレットで非表示
スマホで非表示