スポンサーリンク

 

今回の記事では、賢威7のフッターを
3列にカスタマイズする方法につてお伝えしたと思います。

 

賢威7には最初から実装されている、
フッターを自由に編集できるようなっています。

 

ブログのレイアウト的な面ばかりではなく、使い勝手を求めて
3列になるようにカスタマイズをしてみました。

 

そこでフッターのカスタマイズを、
3列もしくは4列にする方法をお伝えします。

 

 

今回のフッターカスタマイズ方法について
https://www.nishi2002.com/23131.html

西沢直木のIT講座さんのサイトで詳しく書かれていましたので
参考にさせて頂きました。ありがとうございます。

 

 

スポンサーリンク

カスタマイズには2つの方法があります

 

フッターのカスタマイズの方法として、
一つは、WordPressプラグインを利用する方法と、
もう一つはソースコードに追記記載する方法とがあります。

 

プラグインを利用すると何かと便利に設定できますが、
インストールの数やプラグイン同士の影響などで、

 

ブログ表示が遅くなり
ユーザの離脱率やSEO的な面でデメリットが高くなります。

 

その点を踏まえて、プラグインを使用するかは
個人的な判断にお任せするとして、
この記事は両方の設定方法を紹介していきます。

 

Shortcodes Ultimateプラグイン

 

Shortcodes Ultimateプラグインを使って
賢威7のフッターを3列にカスタマイズします。

 

 

プラグインのインストール方法に付いてはこちらの記事を参考にしてください。

 

では、Shortcodes Ultimateプラグインのインストールして有効化したら賢威7のフッターを3列にしていきます。

 

スポンサーリンク

賢威7フッター3列にプラグインを使たカスタマイズ方法

 

Word Pressのダッシュボードから
赤枠①「賢威の設定」赤枠②「フッターメニュー」をクリック。

 

 

すると、このような画像になるので赤枠のなかにソースコードを貼り付けていきます

 

 

では、赤枠①「ショートコード」を確認して、赤枠②「ショートコードを挿入」をクリック。

 

 

 

赤枠②タブの「シートコードを挿入」をクリックすると、
画像のマルチカラムのショートコードの各種の選択画面に移るので、
追加したいショートコードを設定できます。

 

今回はフッターを3列にするための説明となりますので、
赤枠①をクリックします。

 

 

そしたら、赤枠のようなシュートコードが表示されます。

 

 

この時に、ソースを改行せずにいると、フッターが崩れてしまうので、
改行せずにしておきましょう。

 

 

 

次に保存してフッターの状態を確認します。

 

 

ここで フッターを2列や4列にしたい場合は
ショートコードの「1/3」の箇所
「1/2」「1/4」と変えれば希望の列として表示できます。

 

 

フッターのカスタマイズするには、su_columnの間画像の赤枠「コンテンツ」の箇所に
ショートコードを入れていくことで希望のカスタマイズできます。

 

 

以上で保存してあとは自由にパーツを追加していけば
あなたの好きなようなパーツを入れてカスタマイズができます。

 

 

プラグインを使わないカスタマイズ方法

 

次にプラグインを使用しないで
フッターを3列・4列とカスタマイズについてお伝えします。

 

ソースなどの知識もない初心者の方でも
決して難しいことはありませんので安心して下さい。

 

フッター編集方法

 

ダッシュボード―から赤枠①「賢威の設定」⇒②「フッター」へと進む。

 

 

赤枠のテキストタブを使って編集します。

 

赤枠テキストをクリック。

 

 

 

3列用のソース

 

<div class="col3-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>

 

テキストと書かれている部分にタイトルを書くだけでOKです。

 

4列用のソース

 

<div class="col4-wrap">
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
<div class="col">
テキストが入ります。
</div>
</div>

 

をテキスト内に記述します。

 

フッター見出しの装飾

 

記事内の見出しも、
読者にとって目につきやすいような役割を持っています。

 

フッターの見出しもデザインなども考えて装飾してみます。

 

まず、赤枠①「外観」から赤枠②「テーマ編集」⇒「base.css」をクリック。

 

 

「base.css」の「見出し」内に以下のソースをコピペします。

 

 

/*フッター用の見出し*/
.site-footer-conts-area h3{
    margin: 30px 0 30px;
    padding: 0.5em;/*文字周りの余白*/
    color: #000000;
    background: #ffffff;
    font-weight: bold;
    font-size: 1.2em;
    border-left: solid 5px #808080;/*左線(実線 太さ 色)*/
}

 

これで、フッター部分のデザインの変更が完了です。

 

まとめ

 

いかがでしたか、
賢威7のフッターのデザインカスタマイズについてお伝えしました。

 

初期状態でも十分機能は果たせますが、ブログ全体の下の箇所にも
ユーザビリティ的な役割をはたすためにデザインにも気を配る意味で
カスタマイズも必要だとおもいます。

 

今回の記事内にはさまざまなデザインができるように
情報も書いてありますので、あなた自身の好みのデザインにしてみてください。

 

スポンサーリンク