Be Fun Blog, Be Fantastic Blog

ブログのノウハウ紹介ブログ「Boon ☆ ブログ」

全体・ヘッダー・フッター

: 【AFFINGER（アフィンガー）】記事一覧をカスタマイズ！おしゃれに、かっこよく、かわいくデザインする方法

2024/6/8

アフィンガー（AFINGER）のトップページなどに「記事一覧」を設置することは多いですが、記事一覧もかわいく（かっこよく）デザインしたいものです。AFFINGER の標準機能でもアイキャッチを大きくしたりなど、ある程度のデザインはできますが、もっと変えていきたいときもあります。本記事では、「記事一覧」をかわいくデザインする方法を解説します。記事一覧もデザインしちゃいましょう！

: アフィンガーでメニューバーの背景を透明にする方法（おすすめヘッダー設定も）※グローバルナビのカスタマイズ

2024/6/8

WordPress のテーマ「アフィンガー（AFFINGER）」のサイトで、メニュー（グローバルナビ）の背景を透過する方法と、透過した場合のおすすめのヘッダーの作り方や設定の、完全解説です。

: グローバルナビ・メニューを上に固定、CSSだけで実現する方法＠AFFINGER

2024/6/8

グローバルナビをサイト上部に固定することで、ユーザビリティが向上するとともに、ユーザーのサイト内の回遊率アップも期待できます。AFFINGER では、標準でグローバルナビを固定する機能が無いため、CSSで簡単に実現する方法を紹介します。

: WordPressでスムーススクロールを実現する方法：AFFINGERなら設定ひとつで簡単に導入できる

2024/6/8

AFFINGERならWordPressのスムーススクロールが設定ひとつで簡単に実現できます。画面のカクつきを軽減し、ユーザーのストレスを減らすことができます。本記事では、AFFINGERでスムーススクロールを導入する方法を詳しく解説しています。スクロール時の滑らかなアニメーションを手軽に実現しましょう。

: AFFINGER 「関連記事一覧」のカスタマイズ（見出し文字、色の変更）

2024/6/8

「関連記事」は記事を読んだユーザー（読者）に次の記事を案内する重要な機能です。本記事では、AFFINGER での関連記事の表示方法とカスタマイズ方法を紹介します。

: AFFINGERの記事エリアのカテゴリーアイコン表示方法：色や形を変えて魅力的なデザインに！

2024/6/8

本記事では、AFFINGERの記事エリアに表示されるカテゴリーアイコンの表示・非表示、色と形を変える方法について解説します。これらの方法を使って、AFFINGERの記事エリアを自分好みのデザインにカスタマイズしましょう。

: 【AFFINGER6】フッターの作り方を簡単解説！メニュー、２列（２段）、３列（３段）、キャプションを消す方法について！

2024/6/8

WordPress の優良テーマ「AFFINGER6」では多彩な構成のフッターを作ることができます。普通のフッター、メニュー、２段、３段のフッターなど多様な工夫ができます。アフィンガーでのフッターの作り方を超簡単に解説します。フッター作りたい方、ご覧くださいませ。

: 【AFFINGER】直帰率を改善！実際に改善できた、たった２つの方法！

2024/6/8

AFFINGER6 の有能機能を利用して、実際に直帰率が改善した（サイト内回遊率が上がった）２つの方法をご紹介します。ぜひお試しくださいませ！簡単にできる方法です。

: AFFINGER ヘッダーメニューを中央ぞろえ（センタリング）する方法

2024/6/8

横幅が広い画面が増えてきました。ヘッダメニューが左に並ぶと右側にスペースがあいてしまうため、センタリングしたほうが見栄えが良い場合があります。AFFINGER6 でヘッダーメニューをセンタリングする場合は、CSS で定義します。

: 【AFFINGER】ヘッダーに背景画像を表示しながらサイト名（文字列）を表示する方法

2024/6/8

AFFINGER6 は WordPress の優良なテーマですがヘッダー（サイト名を表示する部分）に背景画像を表示できなくて単色にしているサイトを見かけます。設定に少しコツが必要です。本記事では AFFINGER6 でのヘッダーの背景画像の設定方法を解説します。

: 【AFFINGER6】「トップに戻る」（TOPに戻る）ボタンの色を変える方法！

2024/6/8

AFFINGER6 では初期設定で「トップに戻るボタン」がページの右下に表示されています。この「トップに戻るボタン」の色の変え方、形の変え方など、カスタマイズ方法を紹介します。

: 【AFFINGER】ヘッダーカードを使う方法！サイトの見た目が一段上がる！

2024/6/8

「ヘッダーカード」は、サイトの見た目がより美しくなり引き締まります。直帰率も改善する超おすすめ機能です。「AFFINGER」テーマで超簡単にヘッダーカードを利用する方法を紹介します。ぜひご一読を！

: AFFINGERサイトの横幅を最適化する方法（初期値は狭い？修正で魅力的なデザインに）

2024/6/8

サイトの横幅は、サイトの見た目を決める重要なポイントの一つです。AFFINGER6 では、サイトの横幅を管理画面の設定（１か所）で決めることができるため、非常に便利ですが、初期設定の 1060px だとサイトの横幅が狭すぎです。サイトの横幅の例と、設定を変更する方法を本記事でご紹介します。

: 【AFFINGER6】ファビコンの設定方法（AFFINGER5 とは設定方法が違います）

2024/6/8

AFFINGER6 でファビコンとサイトアイコンを設定する方法です。
（AFFINGER5 とは設定場所が異なります）

: AFFINGERで簡単！ヘッダーメニューの作り方と設定方法（項目や配色の変更方法も解説）

2024/6/8

サイトのメニューはユーザビリティ向上の重要なポイントです。メニューの作成方法（項目の設定、配色）を解説します。（横幅を 100％にする方法も解説します）

新
着
記
事

新着記事

: 【WordPress・CSS】円弧（扇形）を描く方法と、円弧が育つ（伸びる）アニメーションを描く方法

2024/8/12

CSSはホームページ上で色々なデザインを表現できるとても便利なものですが、直線や四角の図形は作りやすいものの、実は「円弧」を作ろうと思うと悩みます。（角丸や円は簡単ですが円弧は難しい）。本記事では、CSSで円弧を描く方法を紹介します。さらに円弧を成長させるアニメーションの方法も紹介します。

: 【WordPress】Position～absoluteで要素（ブロック）をセンタリングする方法

2024/7/12

画像やテキストを重ね合わせることができる CSS （ Position～absolute ）はとても便利なCSSですが、要素（ブロック）の位置がクリアされてしまうため。センタリングする方法に迷うことがあります。本記事では、Position～absolute でセンタリングする方法を解説します。

: 【WordPress】テキスト文字色をグラデーションにする方法

2024/7/8

ブログ記事やお店のサイトを作った際に、大きく目立たせたいテキスト文字列などをグラデーションで採色したいケースがありますね。赤や青など単色なら簡単ですが、グラデーションさせる場合はいったいどうするのでしょう？テキスト色をグラデーションさせる方法はCSSを使って簡単に実施できます。コピーして利用できるよう、サンプルコードを本記事で紹介します。

: 【WordPress】下向きの三角形マークを作る方法（HTML、CSSサンプルあり）

2024/7/8

LPページなどでよく見かける下向きの三角形マークを簡単に作る方法です。

: 【広告配信側・メディア側】Google アドセンスで不快・デリケートな広告を表示させない・ブロックする方法

2024/7/8

オシャレなサイトを作り、Google アドセンスにも合格しても、Google アドセンス広告で不快な（センシティブな、デリケートな）広告が表示される場合があります。あまりサイトのイメージとはかけ離れた（見る人が見たら不快に思う）広告が表示されると、サイトのイメージダウンにもつながりかねません。本記事では、Webメディア側で特定のアドセンス広告の配信をブロックする方法を紹介します。

スクールのススメ

おみくじ

うさぎ

―― 今日のおみくじ ――

第 56 番

”末吉"

「言語化」能力と「論理的思考能力」を鍛えれば議論無双できますが、飲み会で披露すると嫌われますｗ。

PR

▼ Amazon でお買い物♪ ▼

クリア

失敗

あたらしいことを始めよう！

おすすめ副業はこちらをクリック