フロントページのデザイン変更

ダイナミックなフロントページに!

ワードプレス初心者でも扱いやすいテーマ Lightning ですが、最近主流になりつつあるフロントページのカスタマイズが完成されたテーマに比べると、若干トップページが寂しいですね。

私のサイト 53rd.net も、他のテーマに見習って少し見た目を整えてみました。

テーマを変えてしまう!という選択肢もあるのですが、もう少し Lightning に寄り添ってみたいと思います。

 

 

因みに私の運営する一部のサイトは、他のテーマを使用しています。

テーマ Hestia輪のこころ

テーマ MesmerizeRealcommunications(製作中)

こんな風にいまどきかつおしゃれな感じにしたいですね。

 

フロントページ構造

現在のフロントページの構造です。

固定ページの本文より上に『トップページコンテンツエリア上部』が来ますので、フロントページに設定した固定ページ(ここでは Home)の本文には現在何も書いていません。

フロントページに設定した固定ページの属性を『ランディングページ』に変えた場合は、その固定ページ( Home)にもウイジェットを置けるようになります。

※追記 カスタムHTMLによる最新記事見出しをやめ、LTG 全幅見出しを設定しました。

全幅見出しウイジェットの設定方法はこちら

 

■Lightning 現状の問題点

トップページコンテンツエリアを飾るウイジェットには、『VK_PR Blocks(丸い3つのアイコン部分)』と『VK_3PRエリア(四角い3つの画像部分)』が用意されていますが、どちらのウイジェットもなんだかこじんまりとしていてパッとしません。

さらに投稿記事を表示するウイジェット『LTG コンテンツエリア投稿リスト』も、画像が小さくダイナミックさに欠けます。

テーマ Lightning : ねころび

 

■目を引くコンテンツエリアの作成

テーマ Lightning はプラグイン VK All in One Expansion Unit と Lightning Advanced Unit によって、ガシャンガシャンと合体ロボのように仕上がっています。

ここにさらにページビルダー系のプラグインをガシャンと持ってくると、プラグイン同士の相性で不具合を起こしかねません。
なのでなるべくならプラグインを追加せずに何とかしたいものです。

ここは、最初から入れてあった Shortcodes Ultimate と functions.php を組み合わせて、見栄えの良さそうなコンテンツエリアを作ってみたいと思います。

最新記事をアイキャッチ画像ごと出力するショートコードも何点か試したのですが、いい感じのものが見つかりません(他力本願💦)でした。
また発見したらお知らせしますね。

 

1. Shortcodes Ultimate

Columns を使って2カラムにします。

詳しい使い方はまた別途紹介します。

 

2.  functions.php 

プラグインを使わず、固定ページや記事内に最新記事のリストを表示するショートコード用のプログラムを直接 functions.php に記述します。

詳しい使い方はまた別途紹介します。

 

■投稿ページ&ウイジェットの画像サイズ変更

3.  css のカスタマイズ

css をカスタマイズして『LTG コンテンツエリア投稿リスト』とブログページのサムネイル画像のサイズを変更します。

詳しい使い方はまた別途紹介します。

 

 

ハイ完成しました!

 

Before

53rd.net ビフォー

サイドバーがあるため記事欄が窮屈でした。
大きめのアイキャッチが存在しないことで、なんだかこじんまりとしたサイトに見えます。

After

53rd.net アフター

フロントページを「1カラム」にしたことにより「全幅見出しウイジェット」が使えるようになりました。

大きめの画像を多用したこととの相乗効果で、ダイナミックなページの完成です。

 

 

なんかちょっとだけおしゃれになりました( *´艸`)

 

詳しいカスタマイズ方法はまた後ほどアップいたしますね。

 

 

 

 

この記事を書いたのは

白馬のおんじ
名古屋市の情報通信システム会社に勤務。生活の大半をブログ運営に捧げています(笑)WordPress や BiND を使用したサイト制作承ります!

"ZERO"で作るゼロ円ホームページ

レカムジャパン名古屋第一支店で作るホームページ。"ZERO"ならドメインの取得や管理にかかる初期費用も一切ゼロ。もちろん製作費も更新費用もかかりません。ホームページにかかる4つの費用を全てゼロにした名古屋第一支店だけのオールフリープラン"ZERO"。是非ご利用ください!

フロントページのデザイン変更” に対して1件のコメントがあります。

  1. mary.a より:

    白馬のおんじさま、こんにちは。いつもお世話になっております。
    フロントページの作り方でさっそく質問をさせていただきたいのですが、
    今、「ホームページの表示」を最新の投稿で設定しています。
    あまり固定ページが上手に使えていないのて困っていたのですが、

    >固定ページの属性を『ランディングページ』に変えた場合は、その固定ページ( Home)にもウイジェットを置けるように…

    「親」「テンプレート」「順序」このあたりから、どう作りこめばいいのかよくわかっていないので、
    お手すきのときにレクチャーいただけると助かります。
    どうぞよろしくお願いいたします。

    1. 白馬のおんじ より:

      maryさんこんにちは(^^)

      私の運営するサイトの全てがホームページの表示を「固定ページ」にしているため、「最新の投稿」とした場合の動きがあまりよくわかりません💦
      もし大きな問題が無ければ「固定ページ」にするのはどうでしょうか?

      問題あるようでしたら最新の投稿にして動きを見てみますので、お時間ください(^^)💦

      訂正ですが、固定ぺージをランディングに変えても、フロントページに設定した固定ページではウイジェットが表示されないようです。
      なのでフロントページに設定した固定ページはランディングページにする必要は無いですね。

      親 — ページ間に階層構造を持たせることができます。たとえば、“自己紹介” ページの下に “身の上話” や “愛犬のこと” といったページを置くことができます。ページ階層の深さに制限はありません。
      テンプレート — 全幅見出しウイジェットなどを使用したい場合にはランディングを選択します。no-sidebarとの違いはなんでしょう?ランディングと標準以外使ったことありません💦
      順序 — 固定ページは通常アルファベット順に並べられますが、この欄に数字を入力 (例: 最初にくるものは 1) することで好きな順序に変更できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です