Cocoonのカルーセルで動的リコメンド&サイトアイコン(favicon)を作成する方法

Wordpress・ブログ関連
Sponsored Link

ページに動きを出し、サイト用のアイコンで注目度をUP

チキ
チキ

最近この手の記事書くの好きになってきたわ~

今回はWordpressの最強無料テーマ Cocoon(コクーン)のカルーセル機能を使って、一瞬でサイトに動きを出します。


本当に無料のテーマでいいのかというくらい見栄えがUPしますが、無料なのがCocoonのすごいところ。

しかも設定は超簡単です。一瞬です。

そして、サイトのURLやブックマークのアイコンを作成し、公式サイト感を演出します。

キューピー
キューピー

このアイコンのことを、favicon(ファビコン)とかいうらしいよ・・

のぞき見チキ
のぞき見チキ

チキが知る由もない・・・(笑)

・Cocoonの【カルーセル】機能の設定方法を解説
・サイトURL用にアイコンを付ける
キューピー
キューピー

今回の記事はシンプルですよ~

まずは今回のゴールを見てみましょう

カスタマイズ前の本サイト『転職で幸せな天職を』はこのような形です。

Before

カルーセルを入れることによって、大変身します!

After

にっこりチキ
にっこりチキ

どうですか?すごくないですか?(←興奮)

そして、アドレスバー付近のサイトアイコンも(今回はタブの部分しかお見せできませんが)

幸せを願い、『四葉のクローバー』にしております。

faviconの設定はWordpressの標準機能を使って速攻で実装が可能です。

それでは、一つずつ見ていきましょう。

Cocoonを利用したカルーセルの設定方法

WordPressダッシュボードより、以下の画面を開いてください。

ダッシュボード ⇒ Cocoon設定 ⇒Cocoon設定
【Cocoon設定】の画面から【カルーセル】をクリックします。
色々と設定ができますが、当ブログではほとんどデフォルト設定です。

カルーセル機能をオンにするには、【カルーセルの表示】を変更します。当ブログではトップページのみ表示するようにしています。

その他は【オートプレイインターバル】を3秒間に設定しています。

そして、【変更をまとめて保存】ボタンをクリックすれば設定完了です。

キューピー
キューピー

む、、、、むっちゃ簡単や・・・

Sponsored Link

次にサイトアイコン(favicon:ファビコン)を設定しましょう

サイトのアイコンは、設置する方法はいくつかあるようなのですが、最も簡単な方法で設置していきます。

WordPressの標準機能を利用する方法です。

まずは、以下の画面を開いてください。

ダッシュボード ⇒ 外観 ⇒ カスタマイズ
ここから、【サイトの基本情報】の項目下部にサイトのアイコンに設定したい画像をアップロードします。
推奨は、512×512ピクセル以上の正方形の画像です。

フリーの画像は、Googleで『512×512 png free』 などと検索すれば無料のサイトがたくさん出てきますので適宜ダウンロードしてみて下さい。

キューピー
キューピー

自作の画像をアップロードしたい場合はどうしたらいいの?

にっこりチキ
にっこりチキ

もちろん、いい方法があるよ!

自作で作成した画像はサイトでファビコン用の画像に変換してくれます。

様々なファビコンを一括生成
使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。favicon.ico、favicon*.png、apple-touch-icon*.png、mstile*.png、browserconfig.xml、android-chrome*.png、manifest.jsonを一括生成します。エラーログに余計...

自作の画像をサイトにアップロードすればファビコン用アイコンに自動変換してくれる素晴らしいツールです。

小さなカスタマイズの積み重ねが上質なサイトをつくる

いかがでしたでしょうか?

今回の記事の内容は非常に簡単でしかも確実のあなたのサイトをワンランク上質なものにしてくれる方法です。

WordPress&Cocoonの組み合わせで実装できるサイトのカスタマイズについて、このような記事も作成しています。

いずれもブログトップページをオシャレでクリックしたくなるデザインにすることができます。

当サイトもまだまだこれからブラッシュアップしていきます。

ブロガーの皆さん、一緒に良いサイトを作り上げていきましょう!

チキ
チキ

今日はここまで~!

ブログランキングに参加しています。応援の『ポチッ』よろしくお願い致します。

にほんブログ村 転職キャリアブログ 30代の転職・転職活動へ

Sponsored Link

コメント

タイトルとURLをコピーしました