PR WordPress

AFFINGER5をカスタマイズ!魅力ある記事をワンランク上のテクニックで

2020年4月12日

  1. HOME >
  2. WordPress >

AFFINGER5をカスタマイズ!魅力ある記事をワンランク上のテクニックで

2020年4月12日

 

AFFINGER5って色々なことができるけど、人気テーマだからほかと似たようなデザインになりがち…。なんか良いテクニックとかないのかな?
男性
男性

 

こんな疑問を解決します。

 

AFFINGER5は正直とっつきにくいほど多彩なデザインが出来ます。

正直購入当初は「あ…失敗したかな…」なんて思ってしまったほど。

 

わたしは、トップページをはじめ、どこかAFFINGER5の面影はあるけど、「ん?AFFINGER5?あれ?でも、違う?」と思わせるデザインがしたいなあと思っています。

 

そこでこの記事では、AFFINGER5でできるたくさんのアイデアの中から「こういう使い方があるの?!」といったちょっとしたテクニックを3つご紹介します。

 

  • その3つとは、、、
  • リスト形式
  • 内部リンクの小技
  • 枠線(ボックス)の使い方
人気テーマなので、読者を飽きさせないためにもデザインは重要だとわたしは考えています。

 

ぜひお試しください!

 

もちろんまねしていたいてオッケーです。
はや
はや

 

AFFINGER5をカスタマイズ!デザインで記事をもっと魅力的に

AFFINGER5をカスタマイズ!デザインで記事をもっと魅力的に

 

読者は情報のあふれている現代で同じような記事・デザインに刺激を受けません。

 

人は第一印象を「見た目」で選ぶ生き物です。

 

とてもマニアックな情報を探す以外は記事を見るというよりもまずは「読みやすそうな見た目」を選びます。

 

そこでどこかで見たようなデザインと、オリジナリティあるデザインで読みやすそうな記事であれば読者は新鮮さに引かれ目をとおしてくれます。

結局記事に魅力があっても、見た目で判断されるのが情報のあふれる現代では日常茶飯事です。

 

まずはすぐにできるデザインを3つご紹介します。

 

リスト形式

リスト形式

 

ブログでは文章をただ書き連ねるのではなく、リスト形式をうまく活用することで読者に見やすさ・理解しやすさを提供しましょう。

 

そこでリストにもひと工夫しましょう。

 

通常AFFINGER5のリストでは下記を多用されがちです。

  • リスト1
  • リスト2
  • リスト3

 

これは一般的な使い方ですね。

 

そしてこれもよく見かけます。

 

リストのタイトル

  • リスト1
  • リスト2
  • リスト3

 

なんで多く見かけるかというと、あらかじめAFFINGER5でタグが使いやすく用意されているからです。

 

ですので、わたしはこのパターンをやめました。

 

で、リスト形式にするときは「リストのタイトル」と「リスト」を下記のように使っています。

 

  • リストのタイトル
  • リスト1
  • リスト2
  • リスト3

 

作り方は簡単です。

 

step
1
リストのタイトル

スタイル → リスト → チェックボックス(番号なしリスト)

 

step
2
リストのタイトル

番号なしリストを選ぶ

 

こうするだけでちょっとクールなリストが簡単に作れちゃいます!

 

  • リストのタイトル
  • リスト1
  • リスト2
  • リスト3

 

うん。かっこいい!
はや
はや

 

内部リンクの小技

内部リンクの小技

 

内部リンクはAFFINGER5 では、「カード」という素晴らしデザインがあります。

 

  • 例えばコレ

 

ですが、リンクってご存知のようにこういったカード形式よりもシンプルな文字列のほうがクリック率が高いんです。

 

これは知人や妻に聞いた話ですが、大体口を揃えてこう言います。

クリックできるとは思わなかった。

 

そして、こうとも言っていました。

宣伝のようにただ紹介しているだけと思った。

 

ようするに電車の中吊り広告のようにたんなる告知をしているだけと認識している。

もっというとそれをクリックして中身が読める!と認識していないんですよね。

 

ですので、リストカードはブロガーにとっては魅力的ですが、読者にリンクを読んでもらうには「文字で」リンクであることを伝えましょう。

と言っても、これは鉄板テクニックです。インターネットが普及し始めたとき「青色文字がリンク」となっていたので、これが今の時代にも引き継がれているためです。

 

ここでもちょっとしたテクニックです。

 

  • ただリンクを張ると、、、

WordPressを使ったブログの始め方がわからない…【挫折する前にチェック】

 

シンプルですが、ひと工夫いれましょう。

WordPressを使ったブログの始め方がわからない…【挫折する前にチェック】

 

違いに気が付きましたか?
はや
はや

 

ひと工夫したリンクにはリンクの前にカーソルを入れています。

たったこれで不思議とクリックして読めるんだと思うようです。

 

このカーソルは下記のタグを挿入しています。

このタグはビジュアルモードでは見えません。入力するときは、テキストモードで入力をしてください。
 shortcode
<i class="fa fa-angle-double-right" aria-hidden="true"></i>

 

もっと詳しく書くと先ほど紹介したリンクは下記のように書いています。

 shortcode
<i class="fa fa-angle-double-right" aria-hidden="true"></i> <a href="https://techengi.net/wordpress-knowhow/">WordPressを使ったブログの始め方がわからない…【挫折する前にチェック】</a>

 

見た目もカッコよくなりますし、ぜひ真似してみて下さい。
はや
はや

 

枠線(ボックス)の使い方

枠線(ボックス)の使い方

 

最後は枠線(ボックス)の使い方です。

 

一見使い方が難しそうにも見えますが、シンプルに考えます。

読ませたい文章を枠で囲むことで読者の目を引くことができるから

 

今あなたは上のボックス内の文章は目にとまったはずです。

 

それがこの枠線(ボックス)の使い方です。

より強調したいときは、赤枠を使いましょう。

 

赤は警告色でもありほとんどの人の目がとまります。

 

ただし、乱用には注意してください。くどくなってしまいます。
はや
はや

 

枠線の作り方は簡単です。

 

step
1
文章を書く

説明するまでもありません。

 

step
2
文章にカーソルを合わせる

文章にカーソルを合わせましょう。

選択する必要はありません。

 

step
3
枠線を作成

スタイル → ボックス → グレイ(または薄赤)を選ぶ

 

枠線で囲った文章が作成できましたでしょうか。

 

さらに文章にアイコンを置くことで「ワンポイントアドバイス」的な効果も期待できますね。

 

  • 作成方法
スタイル → アイコン → メモ

枠で囲ってメモアイコンをおいた状態が作成できました。

 

ぜひ活用してみてください。
はや
はや

 

AFFINGER5をカスタマイズをフル活用してオリジナルデザインを作ろう!(まとめ)

ざっくり3点、ワンランク上のテクニックを紹介しました。

 

  • ワンランク上のテクニック
  • リスト形式
  • 内部リンクの小技
  • 枠線(ボックス)の使い方

 

ブログはなにより「おもてなし」が重要。

 

飽きさせないことが重要です。

 

最後までお読みいただきありがとうございました。

 

 

ENGI WORKS

✅サイト運用者は大手電機メーカー勤務 ✅サーバー系、ネットワーク系の保守・運用・設計・構築・セールスと多岐に渡る経歴を持つ ✅エンジニア歴20年 ✅詳細画像や操作など細部に渡る記事執筆に定評有り ✅VPSのことならどんなことでもご質問ください。✨VPSをひとりでも多くの人に…✨

-WordPress
-,

0
ご質問などお気軽にどうぞ!お待ちしています。x