スポンサーリンク

Cocoon SANGO化計画 第1弾 タイトル作成とサイトアイコン作成

珊瑚 ブログ
スポンサーリンク

先日 BloggerからWordPressに移行し、現在テーマに無料で多機能なCocoonを利用しています。 Bloggerにはなかったこんな機能

  • 目次
  • 上に戻るボタン
  • 吹き出し
  • ラインマーカー
  • 囲み枠

などが標準で簡単に使えるすごいテーマです。   ただ見た目は非常にシンプルです。   これをカスタマイズして、見た目だけでもサルワカさんの有料テーマ、SANGOに近づけたらなあというのが今回の企画です。   なにぶんCSSなどの知識はほぼないので、途中で行き詰まったり、飽きる可能性もありますがやれるだけやろうかと。 自分がいじったところを忘れないための備忘録として使えるかな。

スポンサーリンク

タイトル作成

ヤバミ
ヤバミ
SANGO関係なくね?
ヤバオ
ヤバオ
細かいことはいいんだよ

  最初から、SANGOはあまり関係ないですがブログの顔、タイトルを作っていきましょう。

下準備

カスタマイズ全般に言えることですがここに注意してください。

必ず子テーマが有効になっていることを確認する

確認の方法はWordPressで「外観」→「テーマ」

赤枠のCocoon Childが「有効」になっていれば大丈夫です。

まあ今回のカスタマイズはテーマも関係ないと思いますが参考までに。

タイトルをかえてみよう

WordPress画面

初期設定のままのタイトルはこんなかんじです。

WordPressの「設定」→「一般」に進むと設定画面が出てきます。

WordPress画面
このままでも悪くはないですが、ヘッダー部分にデカデカと画像を貼ってタイトルにしたいと思います。

画像作成

画像作成どうすりゃいいの?って話ですが、自分で作るなら
Collaborate & Create Amazing Graphic Design for Free
Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

アイキャッチ画像作成などにも使われている「canva」がおすすめです。

使い方はサルワカさんが詳しく書いています。
PC版「Canva」の使い方とデザインの基本【初心者向け】
チラシやポスター、バナーなどを簡単に作れるデザインツール「Canva(キャンバ)」の使い方を分かりやすく解説しました。ショートカットやテクニックなども紹介しています。

有料ですが人につくってもらうことも可能です。
バナーやヘッダーのデザインが今すぐ依頼できるWEBデザイナーの一覧
ココナラは「知識・スキル・経験」など、みんなの得意を気軽に売り買いできるスキルのフリーマーケットです。友達に聞かれたり、お願いされるような「あなたの得意」を簡単出品。恋愛の相談から本格占い、キャッチコピー・ロゴ・イラスト作成まで何でも売り買いできます。

「ココナラ」で個人のプロに依頼できます。

私は娘のipadを借りてササッと作りました。

アイビスペイントX

アイビスペイントX
開発元:ibis inc.
無料
posted withアプリーチ
このソフトで1200✕300くらいのサイズ(単位はわからない)で作成。
ipadの画像
まあ とりあえずこれでいいか! これをLINEで自分のスマホに送り、スマホからグーグルフォトにアップ、それをパソコンのデスクトップにコピーして、そこからWordPressにアップとなんともややこしいことをやりました。

WordPressのヘッダーに設置

パソコンの画像

画像が用意できたら設置しましょう。 WordPressで「Cocoon設定」→「Cocoon設定」→ヘッダー(タグ)へ

ヘッダーロゴ のところの「選択」をクリックして画像を貼ります。

画像を貼る場合 この「代替テキスト」の欄が alt属性 というものらしいです。SEOにも関係するので必ず何かしら入力しましょう。
パソコンの画面
こうなったら下にスクロールさせて「変更をまとめて保存」をクリックします。 さてどうなったか?
パソコン画面
う~んこの サイズが小さかったのかねえ 上の文字は消すとして、横のスペースはどうする。 まあこんなことは想定内 ヘッダーの背景を同じ色にすればいいんだよ!
どや顔
再び「Cocoon設定」→「Cocoon設定」→ヘッダー(タグ)へ
パソコンの画像
「キャッチフレーズの配置」で 表示しない を選択するとブログタイトル上の文字は消えます。 「ヘッダー全体色」→(ヘッダー全体背景色)でブログタイトルの背景に使った色と同じ色を指定します。 色の16進数はきちんとメモしておきましょう。 念の為(ヘッダー全体文字色)をクリアしておきました。 これでどうだ
パソコン画面
複雑な模様の場合どうすればいいかって? 背景画像とロゴの部分は別々に指定できるから、うまいことやってください。

サイトアイコン作成

続いてサイトアイコンを作っていきます。 サイトアイコンはファビコンとも呼ばれていて、お気に入り(Favorites)用のアイコン(Icon)という意味の造語です。

サイトアイコン
ブックマークをしたときなどに表示される小さいアイコンです。 デフォルトだとCocoonのものが表示されるのでかえていきましょう。 WordPressで「外観」→「カスタマイズ」と進みます。
wordpress画面
この画面になったら「サイト基本情報」をクリック
wordpress画面
「画像の変更」をクリックしてここに画像を貼ります。 サイトアイコンは512✕512ピクセル以上の正方形にしてくださいと書いてあります。

これもipadで作りました。

サイトアイコン

う~んこのいさぎよさ!

ファビコン

わかりやすいんでないかい!

まとめ

Cocoon SANGO化計画どうでしたかね。 SANGO関係ねえなってツッコミは抑えてね。 徐々にCSSもいじっていこうと思っていますから。 予想以上にたいへんだったから2回目はあるんだろうか・・・

アプリ系アフィリエイトでおすすめのASPはこのふたつ

私が使っている独自ドメインはお名前.com



私が使っているレンタルサーバーはエックスサーバー



どうも カンジ(@gobugobukanji)でした。

コメント