ワードプレス『JIN』でオシャレなコンテンツアイコンを作る方法

こんにちは、マイペースブロガーのユタローです。

先日、ようやくこのブログにもインフォメーションバーを作成しました。

インフォメーションバーというのは、ブログに初めて来ていただいた方にブログ運営者の紹介や、ブログコンテンツを紹介するページです。

僕の場合は、下の画像のような形でヘッダー部分に「はじめましての方はこちらからどうぞ」という言葉でアクセスを促しています。

インフォメーションバーのページには、ブログのイントロダクションとして、僕のプロフィールやブログコンテンツをご紹介しています。

様々な先輩ブロガーたちのイントロダクションを見て、作ってみたいと思うコンテンツアイコンがありました。

 

それを元に作成したのが以下の画像です。

今回はワードプレス『JIN』のテーマを使用して簡単に作れるコンテンツアイコンの作成についてご紹介しようと思います。

 

題して、「初心者でも簡単に作れるコンテンツアイコンの作り方」です！！

コンテンツアイコンに使用する素材

コンテンツアイコンは大きく分けて３つの素材・機能を使用しています。

コンテンツアイコンを見ると、色々な機能を使っているように見えますが、実際は上記４つの組み合わせです。

それでは、順番に見ていきましょう。

ワードプレス『JIN』の３カラム機能

３カラム機能とはブログの文章を書いている画面を縦に３つに割る機能です。

文章で説明するのは難しいので下の画像を見てください。

「ブログ」「旅行＆飲食」「夫婦円満」の３つに分かれていますよね。

この機能をうまく使えば、上記のようなコンテンツアイコンの作成ができるようになります。

 

それでは使い方について説明しましょう。

まずは、ワードプレスのショートコードをクリックしてください。

バーが出て来たら３カラムをクリックしてください。

下の画像のような表示がされているでしょうか。

この状態でプレビューをしてもらうと、すでに３つに分かれていると思います。

 

こんな感じですね。

「左のコンテンツはここに入力」「中央のコンテンツはここに入力」「右のコンテンツはここに入力」の位置にボックスや文字を入力していくことで３つに分割されたコンテンツアイコンを作ることができます。

ワードプレス『JIN』のボックス機能

ワードプレステーマ『JIN』にはボックス機能があります。

デザインも複数あります。

ワードプレステーマ『JIN』のデザイン変更もできるのですが、詳しくはJINホームページのマニュアルを確認してください。

JINのマニュアルはこちら

 

それでは本題に戻りましょう。

先ほど作成した３カラム機能の「左のコンテンツはここに入力」の下にカーソルを合わせてください。

ワードプレスのスタイルをクリックします。

バーが出て来るので、下の画像のように「７：太枠背景色ボックス」を選択してください。

太枠背景色ボックスが出現します。

「中央のコンテンツはここに入力」「右のコンテンツはここに入力」でも同じように作業をしてプレビューを押してください。下の画像のようになっていると思います。

次は、ボックスの中にアイコン画像を挿入しましょう。

アイコン画像の作成

アイコンの画像の作成は、他のサイトを使います。

画像素材サイトはたくさんあるのですが、僕がアイコンとして使いやすいかなと思っているのは、「icooon mono」というサイトです。

 

6000個以上の無料で使えるアイコンがあります。

おすすめの理由は、ダウンロードをする前にアイコンの色が変えられるという点ですね。

ダウンロードする前に色が変えられるのは、編集する上でとても助かります。

 

アイコン画像をダウンロードしたら「Canva」という画像編集ソフトを使用して自分好みに背景の色を変更します。

画像編集ソフトは「Photoshop」でも「Powerpoint」でもなんでも良いと思います。

 

僕は、「icooon mono」と「Canva」で以下のような画像を作成しました。

こちらの画像を先ほど作成したボックスの中で「メディアを追加」します。

メディアを追加の方法は割愛しますね。

下の画像のようにボックスの中に画像入りましたか？

ちなみに、下の画像は画像サイズを小さくしています。

スクリーンショット撮るのに入りきらなかったためです。

ここまでできればあともう少しです。

ワードプレステーマ『JIN』のボタン機能

簡単にボタン機能について説明します。

ボタン機能は、ボタンをクリックするとあらかじめ設定されていたリンク先に飛ぶというものです。

ボタンはこちらです。

通常のリンクを設定すると文字の色が変わりますが、ボタン機能だと本当にボタンを押してリンク先へ飛んだような感覚になります。

リンクにデザイン性をプラスしたものと考えてもらえれば大丈夫です。

ボタン機能も色や形などのデザインを変更することは可能なのですが、それに関してはJINのマニュアルを参照してください。

JINのマニュアルはこちら

それではボタン機能を入れていきましょう。

先ほどボックスの中に挿入した画像の下に文字を入力し、リンクを挿入してください。

リンクを挿入したらスタイルをクリックします。

ボタン①をクリックします。

下の画像のようになりましたか。

ここまでできればあとは簡単です。

まずは、中央と右側にも同じように画像を挿入したり、ボタン機能を追加します。

 

あとは、自分好みにタイトルを追加したり、簡単な説明として箇条書きを挿入したりしてみてください。

 

今回の方法で最終的に出来上がったコンテンツアイコンはこちらです。

これだけでもちょっとオシャレに見えませんか？

ここまで手順通りにやったけど思ったようにできない等の相談や質問もお答えできると思いますので、ぜひお問い合わせください。