XeoryのBaseを使っているのですが、やはりちょいちょいと気になる部分が出てきました。
という事で前回は子テーマを作りましたので、いよいよ編集作業を行います。
やりたい事は以下のものがありました。
ホームページのサイトタイトルを個性出したい
トップページの色や文字が全体的に薄すぎてのっぺりして見にくい
スマホのトップページ表示でグローバルメニューがデフォルトで開きっぱなしが使いづらい
ヘッダーのSNS表示、各記事のSNS表示と自己紹介を消してシンプルにしたい
サイドバーに自己紹介を入れたい・twitter表示を入れたい
今回はサイトタイトルに個性を出す方法をお教えします。
ロゴを作ろう
サイトのタイトルはデフォルトだとテキストか画像を選べるようになっています。
個人的にはシンプルなロゴを作ってオリジナリティを出したいなーと思ったので、
まずロゴ作りをしました。
検討したサイトはこの２つです。
LOGASTER
【特徴】 一部無料/会員登録必要/簡単/かな文字・漢字可/日本語表記あり
【URL】 https://www.777logos.com
[browser-shot url=“https://www.777logos.com” width=“600” height=“450”]
簡単にロゴを作成でき、しかも結構おしゃれテンプレートが多くて
なかなか良いものができました。
しかし、本当に小さいロゴは無料なのですが、
ヘッダーに貼れるサイズは有料（10ドル）でしたorz…
サイトの収益が上がったら使おうかしら。
STORES.JP LOGO MAKER
【特徴】 完全無料/会員登録不要/シンプル/モノトーンのみ/簡単/日本語表記
【URL】 https://stores.jp/logo
[browser-shot url=“https://stores.jp/logo” width=“600” height=“450”]
STORES.JPが運営するロゴ生成サービス、本当に簡単で、すぐにロゴを作成できました。
ただ、シンボルマークの選択肢が少ないので誰かと被ってしまうかも・・
文字のフォントやサイズが変えられ、色もモノトーンの中から選べるので、
私はそこで個性を出してみました。
完全無料なのでまずはこちらでロゴを作りサイトに使用しました。
サイトにアップする方法
Xeory Baseの場合は初期設定から
ただし、デフォルトだと画像は左寄り・・・・初期設定からは画像の位置が設定できません。
私はどうしてもロゴを中央寄りにしたかったため、
そのやり方をwebの海に探しに探しました・・・
が、２時間探しても見つからずorz….
泣く泣く自分でHTMLを探し出して編集することとなったのです。
サイトタイトルの画像を中央に寄せるやり方
子テーマのスタイルシートを編集します。
headerを変更するのでheaderのコードが書いてある場所を探してください
比較的最初にありますよ。
スタイルシート内のheaderの部分をfloatをcenterに変更
text-align: center; を加筆してください
デフォルト
/* —————————————-
- header
—————————————- */
header #logo {
float: left;
font-size: 24px;
}
編集
/* —————————————-
- header
—————————————- */
header #logo {
float: center;
font-size: 24px;
text-align: center;
}
なんとこれだけでロゴが真ん中になりました・・・・！
次回はトップページの色を変える方法をお教えします♪
他の方のweb作成方法も載っています
ぜひ参考にしてみてください⇩
※ファイルを編集する場合には、事前にバックアップをとっておくことをお勧めします。
ファイルの改変は全て自己責任でお願いいたします。
