Uni-ya

~うに家~Drop at our house if you happen to come this way.

公式テーマ『レトロポップ』をちょこっとカスタマイズ

春ですね。

環境が変わった方、変えようと考えている方、変わらずにいようと決めた方、いろいろ、いらっしゃるでしょう。

私はどうなんだろう?どうなるんだろう?

面白いメにあうことをとっても期待してます。

さて、

週刊はてなブログの「春からブログを始める方へ」の記事を見ました。

春からブログを始める方へ。ブログの目的別、デザインテーマの選び方【かんたんカスタム講座 Vol. 1】 - 週刊はてなブログ

この記事を読んで思い出しました。

私、ずーっと、ブログのある部分を変えたかったのです。

 

これ、この丸いヤツを消したかったのです。

f:id:uni-ya:20160409222039j:plain

本文の周りの部分はブログ開始当初から無地にしてましたが、丸いヤツの消し方が分からなくて、「違う」と思いながら放置してました。

それとタイトルのフォントも同様「なんか違う...」と感じながらも今日まできました。

これは神様が「今やるのじゃー」と言ってるのだな、と思い早速とりかかってみましたらば、意外に簡単にできたので、今日はその方法をシェアしてみたいと思います。

 

こちらの記事を参考にさせてもらいました。

shinoegg.hatenablog.com

志乃さんありがとうございました。


ちなみに

私はこういう事(CSSとか?よく分からないけどとにかくネット的なこと)に対する知識は完全にゼロの人間です。

ただし年賀状用にダウンロードしたお絵かき系のソフトがありまして、それを使いました(とはいえ「あけましておめでとう」の文字を印刷することにしか使ってないレベル)

素人のとった方法なので、知識のある方にとっては、笑っちゃうようなやり方だと思いますが、とりあえず書いてみます。

 

では、まいりましょう

 

目的⇒はてな公式テーマ「レトロポップ」をカスタマイズ

目標⇒ ブログタイトル横にあるサイケな丸いヤツを消したい

方法⇒ その部分を白い絵に置き換える(ブログタイトルの背景を白にする)

これだけです。

 

ブログタイトルの背景をイラストや写真にするかわりに、白い絵にする、という考えです。

なので消す(白い絵をつくる)だけならwindowsに標準でついてくる『ペイント』だけでできます。

その場合、下の手順④から見てみてください。

 

私はフォントも変えたかったので、GIMPという無料の画像処理ソフトを使いました。

GIMPはコレです

www.forest.impress.co.jp

 

GIMPでブログタイトルの文字を書く(イラストでももちろんOK)

f:id:uni-ya:20160409210458j:plain

ファイル⇒新しい画像(新しい画像を作成) ⇒ ツール⇒テキスト⇒文字入力

エクセルとかワード同様、フォントタイプとフォントサイズを選ぶ

 

極力"タテ"を薄くしましょう(書いた文字(描いた絵)ギリギリの縦幅)そうすると後でタテ方向の位置調整ができます。

左右の余白は均等になるようにします。文字が真ん中にくるようにしましょう。

 

 

②色を選ぶ

せっかくなので文字の色も入念に選びましょう

f:id:uni-ya:20160409210835j:plain

方法は二通りあります。

①の方法は、自分で左の四角の中をテキトーにマウスでカチカチッとして色を作っていきます

②の方法は、色見本帳から色を選んで、好きな色の番号をコピペします。

こちらのサイトがオススメです

www.colordic.org

#e85298

 ↑ 自分の好きな色に書いてある、この#から始まる番号をコピペします

 

 

③ExportでJPEG形式に書き出す

f:id:uni-ya:20160409231900j:plain

Exportボタンを押して、JPEG形式を保存しましょう

 

 

④番外編~ペイントで白い絵をつくる

ただ丸を消したいだけの方は、ペイントで白いキャンバスだけを作成して保存してください。

 パソコン左下に、windowsマークのついたキーがあります。それを押すと画面にたらりら~とプログラムが立ち上がるので、その中から「すべてのプログラム」>「アクセサリ」>『ペイント』を選び実行します。

「新規」を実行して白いキャンバスができたら、そのまま「名前を付けて保存」をしてください。

 

 

 

⑤いよいよブログに貼り付ける

「いよいよ」って言うほどのこともしてませんが、貼り付けます。

f:id:uni-ya:20160409213454j:plain

 

ブログの「デザイン」⇒カスタマイズ(スパナマーク)⇒ヘッダ⇒画像をアップロード「ファイルを選択」

まずは「画像とテキストを表示」の状態で、さきほど作成したJPEG画像をアップロードしてみてください。

現在のタイトル文字は中心部分にあるはずなので、その元の文字を見ながら、新しく貼り付ける文字(絵)の位置のバランスを見ます。

ねらった位置にありますか?イイ感じになってますか?

よろしければ、「画像だけ表示」に変えて「変更を保存する」をポチっです。

 (イラストだけを追加した方は「画像とテキストを表示」にしてください。この「テキスト」はブログタイトルのことです)

 

これで終了です。

お疲れさまでした。

 

私も疲れました。

丸を消すことにかけた時間よりも、その経緯をブログ記事にする事の方がずっと時間がかかりました。要領が悪いうえに説明することがヘタなようです。目がしょぼしょぼしてます。

しかし懲りずに次回は「色」のことについて書いてみたいと思います。

誰かの参考にちょこっとでもなれば嬉しいんですけど.......

 

私はシンプルが好みなので、このテーマの派手こさをそぎ落とそうと試行錯誤してきました。知識がないので大変ですが、それなりに頑張っております。

シンプルなテーマのものを選べばよかったのにね。

でも自分仕様にしていくのは、なかなか楽しいです。

 

 

春の週末、楽しい一日になりますように。

 

 

では☆