ブログ

画像・固定ページの設定方法

 

事前にデザインデータのインポートをお願いします。

デザインデータのインポート方法

続きを見る

 

このページでは「The Zakki」の、

  • 画像の設定方法
  • 固定ページの設定方法
  • その他の設定

 

について説明していきます。

 

画像の設定方法

デザインデータのインポート後に必要な画像は、

 

  • アイコンロゴ画像
  • カテゴリーのアイコン画像
  • ヘッダーカードの画像
  • プロフィール用画像

 

の4種類です。

 

画像の取得元

デモサイトの画像は「flaticon」というサイトからダウンロードしています。

無料プランだと制限があるので有料プランに入ってます。

 

画像の設定箇所

上記4種類の設定箇所は下記の通りです。

 

アイコンロゴ画像

サイト名の横に表示されているこちらの画像です。

 

[外観]-[カスタマイズ]-[ロゴ画像]-[アイコンロゴ画像]から設定します。

 

カテゴリーのアイコン画像

サイドバーのカテゴリー欄に表示されているこちらの画像です。

 

[外観]-[ウィジェット]-[サイドバーウィジェット]-[00_STINGERカスタムHTML]を開いて、下記の赤字部分を設定します。

画像のURLは[メディア]から確認できます。

[/] shortcode
[st-box-btn myclass="" pc_show="4" margin="0 0 20px 0" type=""]
[st-box-btn-list icon_image="画像のURL" fontawesome="" icon_size="50" text="カテゴリー名" subtext="" url="カテゴリーURL" target="" rel="" bgcolor="" color="" fontsize="" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" fontawesome="" icon_size="50" text="カテゴリー名" subtext="" url="カテゴリーURL" target="" rel="" bgcolor="" color="" fontsize="" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" fontawesome="" icon_size="50" text="カテゴリー名" subtext="" url="カテゴリーURL" target="" rel="" bgcolor="" color="" fontsize="" fontweight="bold"]
[st-box-btn-list icon_image="画像のURL" fontawesome="" icon_size="50" text="カテゴリー名" subtext="" url="カテゴリーURL" target="" rel="" bgcolor="" color="" fontsize="" fontweight="bold"]
[/st-box-btn]

 

ヘッダーカードの画像

サイト名の下に表示されているこちらの画像です。

 

[AFFINGER5管理]-[おすすめ記事一覧]-[おすすめヘッダーカード]で各カードの画像URLを設定します。

 

プロフィール用画像

サイドバーのプロフィールに表示されているこちらの画像です。

 

[外観]-[カスタマイズ]-[オプションカラー]-[サイト管理者紹介(プロフィールカード)]-[アバター画像]から設定します。

プロフィール文やSNSは[ユーザー]-[あなたのプロフィール]から設定できます。

 

固定ページの設定方法

固定ページは[設定]-[表示設定]-[固定ページ]から設定します。

ホームページのプルダウンで作成した固定ページを選びます。

 

固定ページの作成

下記をコピーしたあと、赤字部分を自分のブログに合わせて修正すれば完成です。

テキスト(HTML)状態で貼り付けるようにしてください。

[/] shortcode
[st-marumozi-big fontawesome="" bgcolor="#424242" bordercolor="" color="#FFFFFF" radius="30" margin="0 10px 10px 0"]人気記事[/st-marumozi-big]
<div class="clearfix responbox50">
<div class="lbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
<div class="rbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
</div>
<hr />
[st-tab-content memo="全体を包むボックスです" type="button" myclass="st-radius"]
[st-input-tab fontawesome="" text="カテゴリー名" bgcolor="#FFC107" bordercolor="" color="#FFFFFF" fontweight="" checked="checked"]
[st-input-tab fontawesome="" text="カテゴリー名" bgcolor="#03A9F4" bordercolor="" color="#FFFFFF" fontweight="" checked=""]
[st-input-tab fontawesome="" text="カテゴリー名" bgcolor="#4CAF50" bordercolor="" color="#FFFFFF" fontweight="" checked=""]
[st-input-tab fontawesome="" text="カテゴリー名" bgcolor="#f44336" bordercolor="" color="#FFFFFF" fontweight="" checked=""]
[st-tab-main bgcolor="" bordercolor=""]
<div class="clearfix responbox50">
<div class="lbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
<div class="rbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
</div>
[st-mybutton class="" url="カテゴリーURL" title="カテゴリー名の記事一覧" rel="" fontawesome="" target="" color="#FFB74D" bgcolor="" bgcolor_top="" bordercolor="#FFB74D" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref="" beacon=""]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
<div class="clearfix responbox50">
<div class="lbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
<div class="rbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
</div>
[st-mybutton class="" url="カテゴリーURL" title="カテゴリー名の記事一覧" rel="" fontawesome="" target="" color="#4FC3F7" bgcolor="" bgcolor_top="" bordercolor="#4FC3F7" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref="" beacon=""]
&nbsp;
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
<div class="clearfix responbox50">
<div class="lbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
<div class="rbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
</div>
[st-mybutton class="" url="カテゴリーURL" title="カテゴリー名の記事一覧" rel="" fontawesome="" target="" color="#9CCC65" bgcolor="" bgcolor_top="" bordercolor="#9CCC65" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref="" beacon=""]
[/st-tab-main][st-tab-main bgcolor="" bordercolor=""]
<div class="clearfix responbox50">
<div class="lbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
<div class="rbox">
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
[st-card myclass="" id="記事id" label="" pc_height="" name="記事タイトル" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""]
</div>
</div>
[st-mybutton class="" url="カテゴリーURL" title="カテゴリー名の記事一覧" rel="" fontawesome="" target="" color="#ef5350" bgcolor="" bgcolor_top="" bordercolor="#ef5350" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-chevron-right" shadow="" ref="" beacon=""]
[/st-tab-main]
[/st-tab-content]
<hr />
[st-marumozi-big fontawesome="" bgcolor="#424242" bordercolor="" color="#FFFFFF" radius="30" margin="0 10px 10px 0"]新着記事[/st-marumozi-big]
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore"]

 

その他の設定

最後にサイドバーのおすすめ記事の設定を行います。

[AFFINGER5管理]-[おすすめ記事一覧]-[おすすめ記事一覧の作成]で、表示させたい記事idを設定します。

 

以上で、画像・固定ページ・その他の設定は完了です。

-ブログ

© 2020 The Zakki Powered by AFFINGER5