僕は権威の愛用者です。
クライアントさんからのご依頼で既存のテーマをカスタムすることがありますがカスタムして使うなら、断然賢威です。
殆どのテーマが、カスタム前提に作られていないので、1使える為にあれこれしなくてはないけないケースが多く無茶苦茶手間なんです。
今回は、グローバルメニュー下と最新情報までの距離を変更する方法についてです。
これからお伝えすることをやると下図の様にだだっ広く開いてしまうグローバルメニュー・・・
このようにスッキリとしたレイアウトになります！
スマホからのレイアウトだってこの通り！
左が変更前で、右が変更後です。
見やすいのがどちらかは、一目瞭然ですね！
では、早速やり方をお伝えしますね。
CSSファイルをカスタムする
【ダッシュボード】⇒【外観】⇒【テーマの編集】より【design.css】を開きます。
以下の文字列がありますので、【コンテンツ全体】で検索してみてください。
（作者の賢威はVer.6.2です）
/*--------------------------------------------------------
コンテンツ全体
--------------------------------------------------------*/
#main-in{ padding-top: 1.5em; }
ここの5行目の【1.5em】の数値を増減すれば、幅は変わります。
メイン画像を削除した際の余白を詰めたい場合
ディフォルトで、下図の様なメイン画像が設定できるようになっています。
これがいらない！という方もいらっしゃると思います。
（僕もそうです）
基本操作としては
【ダッシュボード】⇒【賢威の設定】⇒【トップページ】でトップページ設定画面を開き
【メイン画像のキャッチコピー】と【メイン画像】の欄を空白にして変更を保存するだけです。
この場合、一つ欠点があって下図の様に余計なスペースが出来てしまうんです。
気にならない方はそのままでいいんですが、僕は物凄く気になるんです。
だから、消しちゃいました。
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; }
/*●パン屑ナビ*/
これで下図の様にスッキリとします。
この設定は、スマホからの表示にも自動的に反映されますので、下図の様にスッキリさせられますよ！
メイン画像の代わりにスライダー画像を入れたい場合
Webサイトで人気なのが、画像のスライダーです。
僕が今のところお受けしている案件は、ほぼこの画像スライダーを入れたいというご依頼をいただいているほどです。
僕がお勧めするのは、【Meta Slider】というプラグインを使う方法です。
⇒スライドする画像メニューを簡単に設置しよう！【wordpress プラグイン Meta Slider】
スライダーを作成したら、【ダッシュボード】⇒【Meta Slider】からメイン画像の代わりに
入れたいスライダーを選択します。
同じ画面右下に【使い方】というボックスがあるので、そこの【テンプレートに含める】をクリックしましょう。
このコードを、組み込みます。
スライダーのコードを組み込もう
【ダッシュボード】⇒【外観】⇒【テーマの編集】より【index.php】を開きます。
以下の文字列がありますので、【!--main--】で検索してみてください。
<!--main-->
<div id="main">
<!--main-in-->
<div id="main-in">
<?php
if (!is_front_page()) {
if(is_search() || (is_home()) or get_query_var('paged') > 1) { ?>
<!--▼パン屑ナビ-->
<div id="breadcrumbs">
ここで言う4行目と5行目の間に、先ほどコピーしたスライダーのコードをペーストします。
これで、メイン画像に変わってスライダーが表示されるようになりました♪
まとめ カスタムする際はバックアップを忘れずに！
これだけであなたのサイトのイメージはだいぶ変わるはずです。
必要に応じてカスタムしてみるのもよいと思いますよ♪
ただし、必ずバックアップを取ってから行ってくださいね～！
更にカスタムしたい方はこちら！
⇒【賢威カスタム】トップページアイキャッチ画像の大きさ・レイアウトの変更方法
賢威はSEOに強いだけではなく、このようにさまざまなカスタムに対応していますので
オウンドメディア構築はもってこいのテーマです。
SEOに強いテーマ・柔軟なカスタムに対応できるテーマに興味のある方は、お勧めしますよ！
