組み立て済みブロックテンプレート「この記事を書いた人」プレゼント

組み立て済みブロック

組み立て済みブロックテンプレート「この記事を書いた人」ブロックの配布:AFFINGER6(アフィンガー6)購入者特典

2021年11月17日

アップデート情報

  • 2021年12月6日 - 960px以上のCSSを1カラムに対応させました

アフィンガー6(AFFINGER6)で使うことができる当サイトオリジナルの組み立て済みブロックテンプレートを作りました。「この記事を書いた人」ブロックです。

当サイトでAFFINGERを購入していただいた方にこのブロックをお配りします。ぜひ活用してください。

完成図

オリジナルテンプレート「この記事を書いた人」ブロック
オリジナルテンプレート「この記事を書いた人」ブロック完成

組み立て済みブロックとは?

組み立て済みブロックとはAFFINGER6のブロックを組み合わせて作った完成済みのパーツのことです。デザイン(CSS)もこちらで用意しています。中身を変えてそのまま使うことができます。

「この記事を書いた人」ブロックの紹介

アフィンガーにも「この記事を書いた人」機能は備わっています。が!ちょっと自分のアレンジを加えたいと思いました。その結果出来上がったのがこれです。

カラムブロックをベースに左右のバランスを調整。アバター画像を右に大きく配置しています。

背景も変更可能!

背景は斜線グリッドドットも使えます(基本は白です)。

「この記事を書いた人」ブロック:背景変更(デフォルト)
デフォルト
「この記事を書いた人」ブロック:背景変更(グリッド)
グリッド
「この記事を書いた人」ブロック:背景変更(斜線)
斜線
「この記事を書いた人」ブロック:背景変更(ドット)
ドット

レスポンシブ対応!

3種類のデバイス(PC、タブレット、スマホ)でもきちんと表示されるようにデザイン(CSS)を調整しました。

「この記事を書いた人」ブロック:レスポンシブ対応(タブレット)
タブレット
「この記事を書いた人」ブロック:レスポンシブ対応(スマホ)
スマホ

デフォルト

ちなみにAFFINGERにもともとある「この記事を書いた人」機能はこんな感じです。

AFFINGER固有の「この記事を書いた人」機能:記事上
AFFINGER固有の「この記事を書いた人」機能:記事上
AFFINGER固有の「この記事を書いた人」機能:記事下
AFFINGER固有の「この記事を書いた人」機能:記事下

導入に際しての注意点

  • 導入にはCSSを子テーマに貼り付けていただく作業がございます。
  • ユーザー様が独自にCSSを設定している場合 それが影響してうまく表示されない場合があります。

導入手順

「この記事を書いた人ブロック」の導入手順をご紹介します。

これより先は当サイトでAFFINGERを購入された方のみが閲覧できます。まだの方はこちらでAFFINGERをご購入ください。特典付きでAFFINGERを購入する

[パスワード2]を入力してください。

購入者限定エリア

-組み立て済みブロック
-