久しぶりにブログ初心者のsimplicityカスタマイズ。 リニューアルしてみようとあーだこーだと奮闘してみた。 ちょっとずつ頑張ってみたものの読みにくくなったような。 それよりも大切なことがちょっとわかった気がした秋の夜。
  • ピックアップおすすめ記事

久しぶりにブログ初心者のsimplicityカスタマイズ。 リニューアルしてみようとあーだこーだと奮闘してみた。 ちょっとずつ頑張ってみたものの読みにくくなったような。 それよりも大切なことがちょっとわかった気がした秋の夜。

やあ、ブログカスタマイズフリーク諸君。

今日はどこをどう変更しようか?
季節も変わったし、ブログも模様替えしたいよね。

ヒマつぶしにはちょうどよさそうだ。

今回は大きな変更はなく、
ちょっと装いを変えたくらいです。


 

ども、ブログカスタマイズ大好きシゲ@piece_hairworksです。

嘘です。カスタマイズ苦手です。CSSとかわからないし、おしゃれなデザインとかよく分からないです。でも自分なりにイジって個性を出したいところです。

当ブログではわいひらさん(@MrYhira)の無料のWordPressテーマである「Simplicity」を利用させていただいてます。いつもありがとうございます。ピスログのデザインもそろそろ飽きたので、ちょっくら装いを変えようかとちまちま変えてきました。

まあ、ヒマってことです。

Avatar image
ワイフ
美容師らしくお店をカスタマイズしなさい。
Avatar image
シゲ
それはこれが終わったら…
Avatar image
偶然の産物
本業がどっちかわからない…

それではまいりましょー。





まずはサイドバーのプロフィール変更

サイドバーのブログのプロフィールを変更しました。これは「Image Widget」っていうプラグインを使ってウィジェットに追加してます。プラグインをインストールして追加するだけなので、初心者の僕でも簡単にできました。

でも僕は四角いプロフィール写真よりも丸い方が好きなので、丸く切り抜くことにしました。

でも画像を丸く切り抜くのってどうやるの?ってなりますよね。Photoshopとか持ってる人は簡単にできちゃうんでしょうけど、ど素人にはしょせん無理です。

▼そんな時に便利なのがこちら。

画像をアップロードして加工、その画像をダウンロードするだけなので簡単便利です。そこで出来上がった画像を「Image Widget」に載せるだけでプロフィールが作れます。 ややこしいFTPとか考えずにWordPressのメディアに画像を放り込んで、そこから選ぶだけなので安心ですね。

▼サイズやリンクも決められます。

スクリーンショット 2015-11-29 11.24.53

▼んで出来上がったのがこちらです。ちょっとサイズと画像が変わっただけですけどね。

スクリーンショット 2015-11-29 11.31.10

Avatar image
ワイフ
あんまり変わってないね。
Avatar image
シゲ
すこーしだけ変えるのがいいんじゃないか。
Avatar image
偶然の産物
ほんのちょっとだけですね。

つづきましては背景のパターンを変更

お気付きの方がいると嬉しいのですが、ピスログも背景が少し変わりました。真っ白でシンプルな背景も好きですが、どうせなら少し他のブログと差別化を図りたいな、と。

▼そこでこのサイトから好きなパターンを探してきました。いろんな質感があるのでオススメです。

 ここで選んだパターンをダウンロードしてその画像を、Simplicityのカスタマイズの背景画像から変更します。

▼選ぶだけなので簡単です。

スクリーンショット 2015-11-29 11.45.59

しかし!それだと背景が変わるだけで本文部分は真っ白のまま。それもなんか一体感がないなーってことで、僕は全部一緒にしちゃいました。これはちょっとCSSをいじらないといけないみたいです。

▼コピペするだけなのでよかったらどうぞ。記事の枠線も一緒に消えます。

▼画像のURLは【メディア】の中の背景にしたい画像の【URL】をコピーしていれてください。

スクリーンショット 2015-11-29 11.56.00

これでブログの背景全体が好きなパターンに変更できたと思います。

文字が見にくいという人もいると思うのでお好みでどうぞ。僕はどちらかというとずーっと同じよりも「あ、なんかちょっと変わった?」って読者の方が思ってくれた方がいいので。

衣替えですねー。

引用部分もちょっと変更

これも地味な変更で、気付く人はあんまりいないかもしれません。引用部分も少し変わった感があると、今までの記事もまた新鮮に感じると思います。まあ僕が引用ばっかり使ってるってのもありますが。

Avatar image
ワイフ
パクリメディアー。
Avatar image
シゲ
ええ、パクリメディアです。皆様に支えられております。
Avatar image
偶然の産物
今までと変わったんですか?

▼今までの引用部分はこんな感じ。

スクリーンショット 2015-11-29 12.10.38

▼こちらのCSSはこんな感じ。実はちょっと透過してます。わかりづらいですが。

▼この一番下にあるこれをいじります。255を225に0.5を0.3にしただけですけど。

▼こう変化しました。わかんないくらいの変化ですけどね。自己満足。

スクリーンショット 2015-11-29 12.10.38

スクリーンショット 2015-11-29 12.25.46

色合いも255の数値を変えるだけで色々変えられるので、ブログのテーマカラーに合わせていじってみると面白いですよ。0.5の部分は透過の割合を変えられるので、背景を少し透かしたい場合は数字を調整してみてください。

▼詳しくはこちらをどうぞ。

rgba
赤(red)・緑(green)・青(blue)に alpha(透明度)を加えたカラーモデルのこと。

引用元:CSSで区切り線と文字に1pxの影をつけるとかっこいいデザインに!

つまりはrgba(赤の濃さ・緑の濃さ・青の濃さ・透明度)を数値で調節できるということのようです。さすがエローラ先生、ありがたやありがたや。

赤っぽいテーマの人は赤の数値を、青っぽいテーマの人は青の数値を…というふうにカスタマイズするのもいいと思います。

ついでにロゴもちょっと変えてみた

ロゴもちょっと変えたいなーって思ってたので思い切って挑戦。ついでだからやってみよう。

▼今のロゴはこんなかんじ。相変わらずの黄色です。もう見飽きたね。

スクリーンショット 2015-11-29 19.33.28

僕がいつもアイコンをダウンロードするのはここ。iconfinderってサイト。

▼アイコンなんかをフリーでダウンロードできるサイト。

 ▼検索から欲しいアイコンの名前を探します。今回はパズルのピースを探したいので「puzzle piece」と入力します。(猫のアイコンなら「cat」って感じ)

スクリーンショット 2015-11-29 14.58.41

するとズラーッと有料から無料のものまで出てくるので、その中からいいかんじのを選びましょう。サイドバーにある項目を選ぶとサイズや有料・無料などが絞り込めます。

▼無料のもので選ぶようにしましょう。背景は透過タイプにしておくと便利です。

スクリーンショット 2015-11-29 14.59.13

▼今回はこちらを選んでみました。下のフォーマットは「PNG」を選んでダウンロードします。

スクリーンショット 2015-11-29 19.20.17

▼そしたらブログのロゴも作ってみます。はい、こんなんできました。うわーセンスなーい。

ロゴ

Avatar image
ワイフ
確かにセンスないね。美容師のクセに。
Avatar image
シゲ
許せ。こんなオーナーですまん。
Avatar image
偶然の産物
まあ、いいんじゃないですか?

▼あとはこれをSimplicityの【カスタマイズ】→【ヘッダー画像】→【ロゴを画像にする】にロゴを投入すればいいだけです。

スクリーンショット 2015-11-29 19.36.59

▼これでロゴが変更できました。うん、新鮮。

スクリーンショット 2015-11-29 19.50.41

ちょっと気分も変えられて、読者の方も新鮮な気持ちでまた見ていただけることでしょう。

シゲのあとがき。

少しでも楽しんでもらおうという頑張りですが、ちょっと読みにくくなったように思えます。まあ、僕は気に入ってるのでいいか。これで反応があると嬉しいですね。

何が言いたかったかというとですね、このSimplicityが素敵なテーマだということと、ヒマな美容室のオーナーでも8ヶ月くらいネットサーフィンしてブログやってればこのくらいのカスタマイズはできるようになるってことですかね。

あ、センスはないですけどね。

もちろんブログの質は記事の内容ですが、こういうカスタマイズもできると、もっともっとブログは楽しめるんじゃないかと思います。

表現の幅が広がるので、ヒマだったらぜひやってみていいと思いますよ。

Avatar image
ワイフ
ヒマなんだ、やっぱり。
Avatar image
シゲ
ええ、その通りです。
Avatar image
偶然の産物
仕事も頑張りましょうね。

前のカスタマイズもありますよ

▼前のもみてない人はどうぞ〜。

初心者がやるSimplicityカスタマイズ。もうね、疲れました。グローバルメニューとかボックスとか引用とか…。もういやだ。

ははは、じゃあねー!( ´ ▽ ` )ノ

 

この記事が気に入ったら
『いいね!』してね

Twitter でシゲを

Sponsored Link







コメント & トラックバック

  • Comments ( 3 )
  • Trackbacks ( 1 )
  1. By じん

    はじめまして!

    シンプリシティーのカスタマイズで検索してきたんですが、お使いテーマはシンプリシティーなんですか?スゴイカスタマイズですね!びっくりしました。

    過去記事みたんですが、書いてなかったので質問なんですけど、スマホで左から出てくるメニューと、ヘッダー下のタブで切り替えられる人気記事一覧の二つはワードプレスにインストールするプラグインでしょうか?それともjqueryか何かでしょうか?

    教えて頂けるとありがたいです!

    • By シゲ

      じんさん初めまして!
      コメントありがとうございます( ´ ▽ ` )ノ
      残念ですが、このテーマはシンプリシティーではありませぬ( ;´Д`)すみません…
      現行のテーマはdigipressのテーマでcolorsというやつです。有料テーマなんでお金かかってますが、できることが多いので気に入ってます!
      ▼一応テーマ何回か変えましたが、digipressのテーマはいくつか使ってるのでこれからもそれで行く予定です。
      http://www.piece-hairworks.link/blog-theme-graphie
      他にも専用プラグインで色々とできるのでコードに詳しくなくても大丈夫ってのが一番ですね!
      シンプリシティーのカスタマイズでなくてすみません。お力になれず申し訳ないです〜

  2. By じん

    回答ありがとうございます!
    冷静に考えたらそうですよね。
    シンプリシティーでここまで無理やろ~
    とか思ってはいましたが…(^-^)

    有料良いですね、今まで全然頭の中になかった
    ですが、色々調べてみます。

    またお邪魔します
    それでは(^-^)

  1. […] い方は記事内の背景も変更してみてはいかがでしょうか。その場合は少しCSSをいじる必要があるみたいです。CSSコードは『ピスログ』さんのこちらの記事を参考にさせていただきました。 […]

コメントをどうぞ!

*
*
* (公開されません)

Facebookからコメントする