KAZU

今回ご紹介する方法は、 デフォルトのブログカードではもの足りない…… もっと内部リンクを目立たせたい！ という方におすすめの方法です。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」の変更 「背景色」の変更 枠内に「まるもじ」や「ふきだし」の挿入 が可能になります。 ここでは、大きく分けて2タイプの作り方を紹介します。 グループ化するタイプ マイボックスを使用するタイプ それでは、ブログカード風内部リンクの作り方を詳しく解説していきます。 グループ化タイプのブログカード風内部リンクの作り方 ...

AFFINGER6のデフォルト機能で作れるブログカードを紹介します。 ブログカードの作り方は大きく分けて2つ。 クラシック版の段落ブロックの中で作るブロックエディタで作る AFFINGER6で作れるブログカードは4種類。 それにプラスして、ブログカード風の内部リンクがあります。 クラシック版の段落の中で作るブログカード CHECK（ふきだし）参考 ブロックエディタで作るブログカード 埋め込みラベルあり記事IDを使ったブログカード風の内部リンク それぞれ詳しく解説していきます。 AFFINGER6で作れるブ ...

AFFINGER6には「アニメーション」機能があります。 アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。 たとえば、 注意 ふきだしをバウンドさせたり・・・ 注目 まるもじのアイコンを横揺れさせたり・・・ ポイント ふきだしをふわふわさせつつアイコンをブルブルさせたり・・・ といったことが簡単にできます。 ブロックスタイルにアニメーションを追加する方法 今回アニメーションクラスを追加するのは、段落スタイルの「ふきだし」と「まるもじ」です。 ...

流し読みする読者の目を止める方法として、見出しのアイコンを動かす方法があります。 たとえば、 こんな動きもAFFINGER6なら可能です。 それでは具体的な手順を解説していきます。 見出しのアイコンを動かすには？ 見出しのアイコンを動かすには、アニメーションの「CSS クラス」を追加する必要があります。 たとえば、チェックマークを震わせるには「ベル揺れ」のCSSクラス［st-ring-icon］を。 チェックマークを動かす アイコンを点滅させるには、「点滅」 のCSSクラス［st-flash-icon］。 ...

「ボックスのアイコンを動かせたら目立つのにな～」 「どうしても読者に気づかせたい場所がある！」 という場合、AFFINGER6なら簡単にできます。 「追加CSSクラス」アニメーションコードを追加するだけOKです。 ここがポイント こんな感じで、目立たせたいところのアイコンを動かすことができます。 今回紹介する方法で、 メモボックスマイボックス見出し付きボックスバナー風ボックス この4つのアイコンにアニメーションをかけることができます。 これは「メモボックス」です ポイント これは「マイボックス」です 詳細 ...

「ヘッダーエリア全体に画像を表示させたいのに、うまくいかない……」 「ヘッダー画像エリアにしか画像が表示されない……」 そんな悩みを解決します。 ヘッダーエリア全体に画像が表示されないのは、設定場所が間違っているからです。 一つひとつクリアしていき、ヘッダーエリア全体に画像が表示できるようにしていきましょう。 それでは詳しく解説していきます。 ヘッダー画像が表示されない原因設定場所が間違っている AFFINGERの設定項目がたくさんありすぎて、どこに画像を挿入すればいいのかわからない……という気持ちもわか ...

「トップページのヘッダーエリアにYouTube動画を流すにはどうやればいいの？」 という疑問に答えます。 AFFINGER6のヘッダー画像エリアとは、この部分のことです。 もしくは、ヘッダーエリア～ヘッダー画像エリアまでの範囲に動画を流すことも可能です。 こんな感じで！ やることは以下の3つです。 ヘッダーに流すYouTubeのURLを用意する AFFINGER管理での設定 カスタマイズでの設定 今回は、ヘッダー画像エリアのみにYouTube動画を流すための手順を詳しく解説していきます。 ヘッダーに流すY ...

GIFアニメを作って記事に挿入したのはいいけど・・・なぜか動かない… アップロード中は動いているけど、アップロードが完了すると・・・動かない… プレビューで確認しても・・・動いていない… ・・・というGIF動かない問題に困っていませんか？ ぼくもこの問題に直面しました。 他に所有しているサイトでは普通に動いているのに、なぜこのサイトでは動かないんだ・・・と。 AFFINGERがおかしいのか？・・・とまで思いました。 結論からいうと、GIFアニメが動かないのは、ただの「画像サイズ」の問題です。 それでは詳し ...

ここでは、ヘッダーの右上にある「ヘッダーメニュー（横列）」を表示させるための手順を解説します。 「ヘッダーメニュー（横列）」とは、ヘッダーの右サイドにあるメニューのことです。 ここにメニューを表示させるには、 ヘッダー横に表示するメニューを作成するAFFINGER管理設定でヘッダーメニュー（横列）を有効化するカスタマイズにて色を設定する この3つが必要です。 それぞれの手順を詳しく解説していきます。 ヘッダー横に表示するメニューを作成する まずはじめに、ヘッダー横に表示するメニューを作成します。 １．左メ ...

この記事では、WordPressのプラグイン「PS Auto Sitemap」を使ってサイトマップを作成する方法について解説しています。 今回使用するのは「ブロックエディタ」です。 クラシックエディタでの作成方法とは少しだけ異なります。 流れとしては、 PS Auto Sitemapをインストールする　サイトマップ用の固定ページを用意する自動作成コードを貼り付ける たったこれだけなんですが、一つだけ迷うところがあります。 それは、サイトマップ自動作成コードを貼り付ける場所です。 ただし、やり方さえわかれば ...