タグ別アーカイブ: Wordpress

wordpressのTwentyfourteenテーマのブログサイトにファビコンを設定する方法

こんにちは。nekonomoridesignのYoshyです。
今日は、wordpressのカスタマイズ2個目。
Twentyfourteenのテーマを使っているサイトに「fabiconの設定をしよう!」です。

fabicon(ファビコン)って何?

百聞は一見にしかずです。コレです。↓↓

fabiconの説明図 タグバナー
ファビコンとは何でしょうか

よく、サイト名の横に付いたり、ブックマークをしたときに並んでいるアイコンみたいなやつです。
これを、ファビコンfabiconといいます。
コレを設定しておくと、ブックマークやお気に入りに煎れてもらった時に、マークが出てきて、覚えてもらいやすかったりします。
ブログサイトだし・・・とか、一般企業のサイトだから・・・何て考えず、会社・個人名・ブログ名を印象付けるため、しっかりと細部まで作りこんだサイトと思ってもらえるためにも、私はファビコンの設置を奨めたいと思います。

っということで、私も作ったのですが、猫の杜デザイン、なので、「猫のあしあと」をモチーフにしたファビコンにしました。

・・・で。そのファビコンって、どうやって作るのかを今日は書きたいと思います。
私は、フォトショップで作りましたので、その手順と、登録方法です。

フォトショップでのファビコンの作り方

fabi-1

まず、新規作成から、48×48ピクセル、背景透明で作成開始。

fabi-2

レイヤーを1枚新しく追加します。

fabi-3

ファビコンは小さい画像なので、例では、簡単なハートマークで作っています。実際にファビコンを作る時も、単純なものにしたほうがいいと思います。複雑なものは見づらいかもしれません。

fabi-4

画像を作ったら、「web用に保存」します。

fabi-5

保存形式を選びます。
fabi-6

設定は、「PNG-8」で保存しましょう。背景を透明にする必要があります。48×48ピクセルが作れたら、今度は、32×32ピクセル、16×16ピクセルも同様の方法でつくって保存しておきましょう。
保存できたら、次は、「ico」形式を作ってくれるサイトさんにアクセスします。

PNG形式のファイルを、.ico形式で保存しなおす方法

 

私がお世話になっているのは、ファビコン favicon.icoを作ろう!さんです。
fabi-7

このサイトさんは、各大きさの画像をまとめて「ico」形式に変換してくれるという素晴らしいサイトさんです。本当に役立たせて頂いています。ありがとうございます。

fabi-8

画面の指示通り、3種類の画像をそれぞれアップロードしていきます。

fabi-9

3つの大きさ全てをアップロードしたら「favicon.icoを作成」のボタンをクリックします。

fabi-11
fabi-10

クリックしたら、画像が出来上がりました。プレビューもしてくれます。とっても親切なサイト様です。

画像に問題が無ければ、「ダウンロード」ボタンをクリックし、任意の場所に保存してください。

fabi-12

WordPressにファビコンを設置する方法

保存したら、Wordpressの管理画面を立ち上げて、「メディア」から「ファイルをアップロード」をクリックします。

fabi-13

先ほど任意の場所に保存した、「.ico」形式のファイルを指定してアップロードします。

fabi-14

アップロードした画像をクリックすると、詳細が見られるので、右のほうにある画像URLをコピーしてメモ帳などに貼り付けておきます。

メモに保存したら、次に「外観」から、「テーマの編集」をクリックし、右側の種類から「ヘッダー(header.php)」を選びます。
fabi-15

この画面の、からの間の任意の場所に、このような文字を打ちます。
出来れば、と記載されている下の段とかが最適かとおもいます。

—————-↓以下————————————-

<link rel=”shortcut icon” href=”※ココに先ほどコピーした画像のURLを記載”>

—————-↑ここまで———————————
※メモ帳に貼り付けたURLの例。
http://xxxxxxx.ico ←こんな画像URLを、href=”” の “” の間に入れます。

コレをいれたら、「ファイルを更新」をします。

これで、ファビコンが設定されるようになります。反映されるまで、もしかしたら少し時間がかかるかもしれませんが、1日経っても代わりが無い場合は、タグが間違っているかもしれませんので、再度、header.phpを編集してみてくださいね。

ファビコンで、自分のサイトを認識してもらう可能性を高めましょう♪

それではまた!

お仕事日記 3匹目 word press twentyfourteenのカスタマイズをしてみる

こんにちは。nekonomoridesignのYoshyです。

今日は、このブログの基礎を築いている、Wordpressのカスタマイズについてお話したいと思います。

WordPressを使うのは今回が初めての私。
テーマとかの編集とかは、システム系に詳しいKozyに任せて、配置などもしていただいたのですが、元々あるWordpressのテーマをインストールしてこのブログは開始しました。

スマホでもPCでも表示が同じになるようなレイアウト・・ということで選んだのが、TwentyFourteenというテーマだったので、それを使って記事を書いたのですが、出来上がったページを見てみると、記事幅が何となく狭くて、余計なスペースがたくさんあるように思ってしまいました。

なので、カスタマイズを敢行!!

ってことで、やっちゃいました。

0610-1

管理画面の左側のところから、ペンキみたいなマークのアイコンがついている「外観」>>「テーマの編集」を選びます。
すると、この画面のようにけったいな文字がいっぱいでてきます。
これを、タグといいます。

CSSのスタイルシート、というものです。

この中に、記事幅が設定されているものがあるので、それを変更したいと思います。

このタグが画面に出ている状態で、キーボードのコントロール(Ctrl)を押しながら、「F」を押してください。

すると、Chromeブラウザの人なら、右上のほうに、IEの人なら画面上に、検索窓みたいなのが現れます。

そこに、「474」という数字をいれて、エンターキー(Enter)を押します。

すると、画面の中で、「474」と書かれているところにカーソルが行くと思います。

その、「474」という数字を変更すれば、記事幅を変えることが出来ます。

ちなみに、私は、「800」にしてあります。

「max-width:474」となっているところを私は変更しました。

全箇所変更したら、「ファイルを更新」という緑のボタンを押せばOKです。

これで、記事幅を広くできますので、デフォルトの設定から記事の幅を変えたい時は是非やってみてくださいね。

心配な人は、474から変更する前に、全体をコピーしてメモ帳とかに貼り付けて置くといいかもしれません。

お役に立てましたでしょうか?

それでは、良いブログ生活をヽ(´ー`)ノ