デザイン

AFFINGER

AFFINGER5でトップページをカードデザインにする方法

AFFINGER5でトップページをカードデザインにする方法

AFFINGER5でトップページのデザインをカードデザインに変えるためには、自作でカードデザインを作るか、ショートコード「st-catgroup」を使いスライドショーでの実装しかありません。

ちなみにスライドショーのイメージは次の通りです。

Word(ワード)応用編 仕事で使える報告書の作り方~後編~

Word(ワード)応用編 仕事で使える報告書の作り方~後編~

目次1 Word応用編 報告書の作り方 ~ 後編 ~2 Wordで報告書の作り方2.1 報告書用の表を追加する2.2 タイトルラベルの幅を変更する2.3 報告書の文字を入力する2.4 特定のセルのみ幅を変更する2.5 報告書のセルを結合する2.6 報告書のセルの高さを変更する2.7 報告書の文字の位置を調整する2.8 タイトルラベルの背景色を変更する2.9 年月日に空白を挿入する3 終わりに Word応用編 報告書の作り方 ~ 後編 ~ 本記事は「Word(ワード)応用編 仕事で使える報告書の作り方~前編 ...

ReadMore

Word(ワード)応用編 仕事で使える報告書の作り方~前編~

目次1 Word応用編 報告書の作り方 ~ 前編 ~2 Wordで印鑑枠の作り方2.1 印鑑枠用の表を挿入する2.2 印鑑枠のセル幅を変更する2.3 印鑑枠のセル高さを変更する2.4 タイトルと印鑑枠に文字を入力する2.5 タイトルのセルを結合する2.6 タイトルと印鑑枠の文字を中央寄りにする2.7 タイトルの文字高さを中央寄りにする2.8 タイトルの文字サイズを変える2.9 タイトルの文字幅を均等に広くする2.10 タイトルの枠線を削除する2.11 印鑑枠の背景色を変更する Word応用編 報告書の作り ...

ReadMore

Word(ワード)で画像や図形を挿入する

初心者でも簡単 Word(ワード)で画像や図形を挿入する

目次1 【6時間目】画像や図形を挿入する ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に画像を挿入する3 Word(ワード)に図形を挿入する4 終わりに 【6時間目】画像や図形を挿入する ~Word(ワード)初心者向け講座 基礎編~ 前回の記事(5時間目)では「Wordで円グラフを作り方法」についてを紹介しました。6時間目は「Word(ワード)で画像や図形の挿入する方法」を紹介します。 スポンサーリンク 今回、作成する完成例は以下です。 [6時間目の完成例] Word(ワード)に画像 ...

ReadMore

初心者向けWord(ワード)講座 円グラフの作り方

【Word入門】円グラフの作り方

目次1 【5時間目】円グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に円グラフを挿入する2.1 円グラフのタイトルを編集する2.2 円グラフにデータラベルを表示する2.3 凡例を削除する2.4 円グラフの文字フォントを変える2.5 円グラフ内の文字色を変える2.6 円グラフ内の文字を太字にする3 終わりに 【5時間目】円グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~ 前回の記事(4時間目)では「Word(ワード)で折れ線グラフを作成する方法」についてを紹介 ...

ReadMore

Word(ワード)で折れ線グラフを挿入する

【初心者向け】Word(ワード)で折れ線グラフを挿入する

目次1 【4時間目】折れ線グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に折れ線グラフを挿入する2.1 折れ線グラフのタイトルを編集する2.2 折れ線グラフの凡例の位置を変更する2.3 折れ線グラフの縦軸ラベルを追加する2.4 折れ線グラフの色を変更する3 棒グラフと折れ線グラフを重ねて表示する方法4 終わりに 【4時間目】折れ線グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~ 前回の記事(3時間目)では「Word(ワード)で棒グラフを作成する方法」について ...

ReadMore

Word(ワード)で棒グラフを作成する方法

Word(ワード)講座 棒グラフの作り方

目次1 【3時間目】棒グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に棒グラフを挿入する2.1 棒グラフのタイトルを編集する2.2 棒グラフの色を変更する2.3 棒グラフに表を追加する2.4 凡例を削除する2.5 棒グラフのスタイルを変更する3 Word(ワード)で棒グラフを作成する おまけ3.1 縦軸・横軸ラベルを表示する3.2 データラベルを表示する3.3 凡例の表示位置を変える3.4 棒グラフのデータを編集する3.5 グラフの種類を変更する4 終わりに 【3時間目 ...

ReadMore

初心者向けWord(ワード)講座 表の作り方

【Word入門】表の作り方

目次1 表の作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)で表を挿入する2.1 表内の文字位置を変える2.2 表内の文字高さを調整する2.3 表の背景色や文字色を変更する2.4 表内の文字サイズを変える2.5 表の幅や高さを調整する2.6 表のセルを結合する2.7 文字の種類(文字フォント)を変える3 Word(ワード)で表に行や列を追加する3.1 表に行を追加する3.2 表の列を追加する4 Word(ワード)で表から行や列を削除する4.1 表から行を削除する4.2 表から列を ...

ReadMore

【Word初心座講座】文章を作成する

【Word入門】初心者にも分かるWordの使い方

目次1 はじめに2 文章を作成する ~Word(ワード)初心者向け講座  基礎編~2.1 文字の位置を変える2.2 文字のサイズを変える2.3 文字の高さを調整する2.4 階層構造のリストを作成する3 Word(ワード)でよく使う機能おまけ3.1 一つ前の操作に戻る3.2 ファイルの保存4 終わりに はじめに パソコンが一般的に普及している現在では、WordやExcelは使えるようにしておきたい技術です。しかしパソコン初心者には、WordやExcel難易度が高く感じるかもしれません。 スポンサーリンク た ...

ReadMore

 

カードデザインを簡単に作る方法は、AFFINGER5EXにアップグレードするか、子テーマのJETを使うかです。

本記事では、AFFINGER5EXを使ったカートデザインの作成方法について紹介しています。

AFFINGER5のトップページデザイン(カートデザイン反映前)

カートデザイン反映前のトップページのデザインは次の通りです。

カードデザイン適用前

 

AFFINGER5EXのカートデザイン

そして、AFFINGER5EXで作ったカートデザインは次の通りです。同じデザインでもカートデザインの方がだいぶオシャレになりました。

カートデザイン適用後

AFFINGER5EX カートデザインの設定方法

ここからはAFFINGER5EX カートデザインの設定方法を説明してきます。

まずはAFFINGER5の設定から「投稿・固定記事」を選択します。

カートデザインの設定手順1

 

「投稿・固定記事設定」画面には、記事一覧のカードデザイン化[EX]の項目があるので「トップページ及びアーカイブの記事一覧をカートデザインにする」にチェックをいれます。

カートデザイン手順2

そして、列数設定にお好みの数値を入れます。ここの数値は3を入れると3列、2を入れると2列、1を入れると1列となり「n,n,n」形式で入力します。※nは数値

数値の1番目は960px以上、2番目は959~600px、3番目は599px以下と閲覧サイズにより縦数の数を変えることができます。

また、カードデザインには次の2パターンあります。

  • 「カードデザインパターンをBタイプに変更」にチェックを入れた場合のデザイン

カートデザイン適用後

  • 「カードデザインパターンをBタイプに変更」にチェックを入れなかった場合のデザイン

カートデザイン例

AFFINGER5EXでカートデザインを作成する方法は以上です。

AFFINGER5EXを使えば簡単にカートデザインを作ることができます。

\ 参考になりましたか? /

© 2020 ITを分かりやすく解説