⑨レイアウト センター寄せや回り込み解除など

AFFINGER5 レイアウト
ビジュアルモード→スタイル→「レイアウト」で表示されるタグです。

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します

 

 

 

センター寄せ

SEOはこれでOK

要素をセンター寄せにします。

 

 

 

下に余白

SEOはこれでOK

要素の下に「10px」の余白を付けます。

 

 

 

カードスタイル ブログカード(内部、外部サイトへの紹介リンク)が縦表示に変わる。

※PC・スマホ・タブレット、どのサイズで見ても縦表示になります。

【手順】テキスモードに切り替え→記事IDを記載→IDを選択した状態で「ブログカード風」ボタンをクリック→ショートコードが出るのでそれを選択した状態で「カードスタイル」をクリック(これで縦書きになる。)

注意ポイント

アイキャッチ画像が元の大きさのまま表示されてしまうので単独では使わない。下記のように画面を3分割にすると綺麗に表示されるので基本的に縦に3分割して使う。

【手順】ビジュアルモード→タグ→レイアウト→「均等横並び」をクリックすると画面が3分割される。→テキスモードに切り替え→それぞれの列に記事IDを記載→IDを選択した状態で「ブログカード風」ボタンをクリック→ショートコードが出るのでそれを選択した状態で「カードスタイル」をクリック

 

 

 

カードスタイルB

ブログカードに別のデザインを設定します(PC、タブレット閲覧時のみ縦型)

 

 

 

ランキングボックス(AFFINGER版のみ)

「ランキング一覧背景色」と同じスペースを設定します。正直よくわかりません…。

 

 

 

width100%リセット

max-width: initial; display: inline;を設定してmax-widthをリセットします。

 

 

 

imgインラインボックス

display: inline;を指定します。

  • この記事を書いた人
  • 最新記事
河野 裕

河野 裕

株式会社フォーカスワン 代表取締役。

2011年6月からSEOとアフィリエイトのコンサルティング及びサイト運営をしています。

SEO対策で色んな業者にお金を払い色々やってみた結果、自分で勉強してSEO対策をするのが一番結果が出ることに気が付いて、現在に至ります。

日々Googleのアルゴリズム変更に翻弄されながらも、人生を楽しんでいます。

皆様のお役に立てる情報を発信できるように頑張ります。

会社概要・運営サイト一覧

-スタイル(装飾タグ)

Copyright© 【SEO Wiki】初心者でもできるSEOでアフィリエイト , 2019 All Rights Reserved.