【WordPress/Cocoon】ブログのヘッダー画像は、Google図形描画をリンクするのがラク!

WordPressの無料テーマであるCocoonを使い始めて1年以上になりますが、非常に使い易く助かっています。それほど頻繁に投稿していないので、まだまだWordPressやCocoonに対する理解も足りないです。

私が気づくことは、多くの人が「当たり前じゃん」と感じるレベルですが、おさらいの意味で、ご覧いただけば幸いです。

以前書いた、以下のブログの続編です。今度は、ブログのヘッダーに利用します。

(1)写真やイメージを、Google図形描画で加工する。

Google図形描画を開き、「ファイル」→「ページ設定」でカスタムを選び、3840X1280ピクセルを指定しました。このサイズにすると、私の場合、iPhoneで撮影した写真をドラッグ&ドロップしたとき、写真の縦幅を調整しなくても、そのまま、はまりました。下の例では写真の縦幅を既にカットしてありますが、最初は、写真をドロップしたままにしておき、表示されたブログを見ながら位置を調整して、最終的にカットするのがいいです。

Google図形描画を使用する理由は、ヘッダーは写真に限るものではなく、何らかの図形や描画を、自由に扱いたいからです。

Google図形描画を利用

(2)Google図形描画を公開する。

WordPressブログで利用できる状態にします。「ファイル」→「ウエブに公開」→「リンク」→画像サイズは、最も大きい、大(5760×1920)を選びます。→最後にURLをコピーします。

なぜ大かと言うと。。試しに、中や小を選択すると分かりますが、WordPressブログで表示したとき、ボヤけます。

Google図形描画の公開

(3)Cocoon設定を行う。

WordPressの「管理メニュー」→「Cocoon設定」→「ヘッダー」→「ヘッダー背景画像」を選び、Google図形描画のURLをペーストします。→「変更をまとめて保存」。

Cocoon設定でヘッダーを選択
ヘッダー背景画像へURLをペースト

(4)リアルタイムに画像を調整。ブックマークへの登録。

この方法の便利な点は、ブログへ表示される画像の作成や位置調整を、表示を見ながら、ほぼリアルタイムに行えることです。

Webブラウザーに、Google図形描画とWordPressブログを、別ウインドウで、表示しながら行います。

Webブラウザーのブックマークへ登録すると、なお便利、でしょう。

WordPressブログの表示
Webブラウザーのブックマーク(お気に入り)へ登録

(5)まとめ。

とても簡単で便利です。今後ですが、手書きの絵画などもWebで扱えるようになると、もっと自由自在で楽しい、自分のプラットフォームが作れるようになると思います。

但し、Google図形描画は、多少、表示に遅延が生じます。それが気になるようでしたら、Google図形描画をjpgでダウンロードして、Dropboxへ格納し、そのリンクをCocoon設定にする方法もあります。