WordPress+Lightning
realrhymerWordPress + Lightning
出来るだけ簡単に、かっこよくサイト構築するまでの流れを開設していきます。
テーマ
WordPress 公式ディレクトリに登録されている日本語対応のテーマです。
ネットの情報量も多く、扱いやすいテーマとして"Lightning"をお勧めします。
このテーマは無料ながら、自由度も高く、
別途、公式有料プラグインを契約することにより、
拡張性やカスタマイズ性も広がります。
WEB事業が大きくなった場合においても
比較的安価に将来性も確保することができます。
推奨プラグイン
Lightningには推奨プラグインとして次の物があります。
- VK All in One Expansion Unit
- VK Block Patterns
- VK Blocks
おすすめプラグイン
無料で作るのにも、できるだけかっこよくしたいのが人情です。
そこで、次のプラグインをお勧めします。
- LoftLoader
- Getwid
- 3D FlipBook : Dflip Lite
LoftLoader
ページ読み込み時のアニメーションを設定できます。
言ってしまえばそれだけの機能ですが、閲覧者に与えるイメージはとてもいい感じです。
Getwid
とてもかっこいいブロックが使えます。
簡単に例を挙げると次のようなものがあります。
- Webフォントを個別にできる見出し
- 自動で作成される目次
- スクロールに追従するタイムライン
- アニメーションするカウンター
3D FlipBook : Dflip Lite
PDFを電子書籍化することができます。
ページのめくる方向、アニメーションの種類をはじめ、
ダウンロード制限をかけることもできます。
Calculated Fields Form
いろいろなフォームを作成できるようになります。
各種計算書や、ペイメントシステムと紐づけてECサイトをつくることもできます。
Twenty20 Image Before-After
ビフォーアフターの写真をスライダーで比較できます。
視覚情報をインタラクティブに刺激することができます。
カスタムCSS
コピーライトを非表示にする方法
Ligntningのテーマを使用した際、フッター下にコピーライトが表示されます。
そのままでもいいんですが、2行目に記述されているテキストを消したい人も多いと思います。
Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology.
これを消すためには、VKの有料プラグインを購入するのが一番確実です。
ですが、今回はお金をかけずに作成するために
外観、カスタマイズ、追加CSSに次のコードを記述してください。
LightningG3（version 14以前）
footer .copySection p:nth-child(2) {
display:none !important;
}LightningG3（version 14以降）
.site-footer-copyright p:nth-child(2) {
display: none;
}投稿日を非表示にする方法
投稿の日付などのデータを表示したくないことがあります。
外観、カスタマイズ、追加CSSに次のコードを記述してください。
.entry-meta {
display: none;
}ロゴを大きくする方法
投稿の日付などのデータを表示したくないことがあります。
外観、カスタマイズ、追加CSSに次のコードを記述してください。
LightningG3（version 14以前）
/*ロゴ画像を大きくする*/
.navbar-brand img {
max-height: 80px;
}LightningG3（version 14以降）
/*ロゴ画像を大きくする*/
.site-header-logo img {
max-height: 80px;
}ヘッダーを変更する方法
ヘッダーをカスタムするコードです。
LightningG3（version 14以前）
/* ページヘッダーの背景画像 */
.page-header {
background: url(http://example.com/headedr.jpg) no-repeat;
background-size: cover;
height: 10vw;
display: flex;
align-items: center;
}
/* ページヘッダーの文字 */
h1.page-header_pageTitle {
color: #000;
font-size: 4vw !important;
}LightningG3（version 14以降）
/* ページヘッダーの背景画像 */
.page-header {
background: url(http://example.com/headedr.jpg) no-repeat;
background-size: cover;
height: 10vw;
display: flex;
align-items: center;
}
/* ページヘッダーの文字 */
h1.page-header-title {
color: #000;
font-size: 4vw !important;
}