こんにちは。AFFINGER6でおしゃれなブログを作るべく日々奮闘中のうみです！

男性らしいデザインが多いAFFINGER6で、女性らしいサイトを作る秘訣はこちら▼

今回は観光系のブログを書いている方必見の「思わず読み進めたくなるおしゃれなカスタマイズ」を紹介しようと思います。

具体的には、旅行先のスポット紹介の際に便利なカスタマイズです。

実際にこちらの記事で使用しています。

コピペ用のコード貼ってますので、私も使いたい！の思ったらぜひ真似してみてくださいね♩

観光系ブログで使えるおしゃれなカスタマイズ

①スポットの時間表記

モデルコースを紹介する際に便利なカスタマイズです。到着時間と所要時間を載せています。

AFFINGERのカスタムHTMLに下の内容を入力します。

am・pm～時の部分と所要時間は適宜変えてください。

②下三角やじるし▼

次に何かと便利な下三角やじるしです。時間に沿ってスポットを紹介する際に使うと、読み進めやすくなるのでおすすめです◎

これはAFFINGERのショートコードを使います。
下の内容を入力すると三角が表示されます。

#○○○○のカラー部分は、お好みで設定してください♩

③場所の基本情報と地図

観光スポットの基本情報と地図です。グループ化して、背景をグレー斜線にするだけで一気におしゃれな雰囲気に◎

作り方の手順はこちら。

ＳＴＥＰ1：
ショートコードで見出し（場所の名前）を作る

まずは見出し部分をショートコードで作成します。

私はいつもFont Awesome 4のアイコンを使用しています。

AFFINGER6でFont Awesome 4を使う場合は、事前に「AFFINGER管理」→「その他」→「FontAwesomeIcons4.7.0の読み込み」にチェックを入れておきましょう。

色んなアイコンがあるので必要に応じてコードをコピーして使ってみてください♪

ＳＴＥＰ2：
リストに基本情報を入れる

次にAFFINGERのリスト機能を使って基本情報を入れます。番号の有り無しとスタイルはお好みで！

ＳＴＥＰ3：
Googleマップから地図を埋め込む

グーグルマップからコピーしたコードをカスタムHTMLに入れます。サイズは初期設定の中か、もう少し小さい方が良ければ小がおすすめです。

ＳＴＥＰ4：
グループ化＆背景設定

最後に見出しから地図までをグループ化（Shift＋左クリック）

グループ化したブロックのスタイルを設定したら完成です。当サイトでは斜線を使用◎

＼完成／

観光記事に効果的なおしゃれなカスタマイズをご紹介しました。よかったら試してみてね！

ブログ「やまうみ日記」も応援お願いします♩