keni03

僕は権威の愛用者です。

 

クライアントさんからのご依頼で既存のテーマをカスタムすることがありますが

カスタムして使うなら、断然賢威です。

 

殆どのテーマが、カスタム前提に作られていないので

1使える為にあれこれしなくてはないけないケースが多く

無茶苦茶手間なんです。

 

今回は、グローバルメニュー下と最新情報までの距離を変更する方法についてです。

これからお伝えすることをやると下図の様にだだっ広く開いてしまうグローバルメニュー・・・

keni02

 

 

このようにスッキリとしたレイアウトになります!

keni01

 

 

スマホからのレイアウトだってこの通り!

keni03

左が変更前で、右が変更後です。

 

見やすいのがどちらかは、一目瞭然ですね!

 

では、早速やり方をお伝えしますね。

 


CSSファイルをカスタムする

【ダッシュボード】⇒【外観】⇒【テーマの編集】より【design.css】を開きます。

以下の文字列がありますので、【コンテンツ全体】で検索してみてください。

(作者の賢威はVer.6.2です)

/*--------------------------------------------------------コンテンツ全体--------------------------------------------------------*/#main-in{ padding-top: 1.5em; }

ここの5行目の【1.5em】の数値を増減すれば、幅は変わります。

 

メイン画像を削除した際の余白を詰めたい場合

ディフォルトで、下図の様なメイン画像が設定できるようになっています。

これがいらない!という方もいらっしゃると思います。

(僕もそうです)

keni04

 

基本操作としては

【ダッシュボード】⇒【賢威の設定】⇒【トップページ】でトップページ設定画面を開き

【メイン画像のキャッチコピー】と【メイン画像】の欄を空白にして変更を保存するだけです。

keni05

 

この場合、一つ欠点があって下図の様に余計なスペースが出来てしまうんです。

keni02

 

気にならない方はそのままでいいんですが、僕は物凄く気になるんです。

だから、消しちゃいました。

 

CSSをカスタムして、余白を消し去ろう

実際に作業を行っていただく前に注意点です。

必ずバックアップをとってくださいね!

これをやると、管理画面からメイン画像の設定が出来なくなります。

戻したい場合は、CSSを元に戻すだけですが、自己責任でお願いします

 

 

消し方は

【ダッシュボード】⇒【外観】⇒【テーマの編集】より【design.css】を開きます。

以下の文字列がありますので、【コンテンツ全体】で検索してみてください。

(作者の賢威はVer.6.2です)

先ほどカスタムした文字列に下に以下の文字列があります。

/*--------------------------------------------------------コンテンツ全体--------------------------------------------------------*/#main-in{ padding-top: 0.5em; }/*●メイン画像*/#main-image{ padding-top: 1.5em;}#main-image-in{ position: relative; padding-bottom: 1.5em;}#main-image img{ width: 100%; height: auto;}#main-image .catch-copy{ position: absolute; top: 1em; left: 1em; color: #fff; font-size: 3em;}/*●パン屑ナビ*/

この中の7行目~29行目を消しちゃいましょう!

/*--------------------------------------------------------コンテンツ全体--------------------------------------------------------*/#main-in{ padding-top: 0.5em; }/*●パン屑ナビ*/

これで下図の様にスッキリとします。

keni01

 

この設定は、スマホからの表示にも自動的に反映されますので、下図の様にスッキリさせられますよ!

keni03

 

 

メイン画像の代わりにスライダー画像を入れたい場合

Webサイトで人気なのが、画像のスライダーです。

僕が今のところお受けしている案件は、ほぼこの画像スライダーを入れたいというご依頼をいただいているほどです。

 

僕がお勧めするのは、【Meta Slider】というプラグインを使う方法です。

スライドする画像メニューを簡単に設置しよう!【wordpress プラグイン Meta Slider】

 

スライダーを作成したら、【ダッシュボード】⇒【Meta Slider】からメイン画像の代わりに

入れたいスライダーを選択します。

同じ画面右下に【使い方】というボックスがあるので、そこの【テンプレートに含める】をクリックしましょう。

keni06

 

このコードを、組み込みます。

 

スライダーのコードを組み込もう

【ダッシュボード】⇒【外観】⇒【テーマの編集】より【index.php】を開きます。

以下の文字列がありますので、【!–main–】で検索してみてください。

<!--main--><div id="main"><!--main-in--><div id="main-in"><?phpif (!is_front_page()) {if(is_search() || (is_home()) or get_query_var('paged') > 1) { ?><!--▼パン屑ナビ--><div id="breadcrumbs">

ここで言う4行目と5行目の間に、先ほどコピーしたスライダーのコードをペーストします。

 

これで、メイン画像に変わってスライダーが表示されるようになりました♪

keni07

 

まとめ カスタムする際はバックアップを忘れずに!

これだけであなたのサイトのイメージはだいぶ変わるはずです。

必要に応じてカスタムしてみるのもよいと思いますよ♪

 

ただし、必ずバックアップを取ってから行ってくださいね~!

 

更にカスタムしたい方はこちら!

【賢威カスタム】トップページアイキャッチ画像の大きさ・レイアウトの変更方法

 

賢威はSEOに強いだけではなく、このようにさまざまなカスタムに対応していますので

オウンドメディア構築はもってこいのテーマです。

SEOに強いテーマ・柔軟なカスタムに対応できるテーマに興味のある方は、お勧めしますよ!


【賢威】

 

manual