AT HOME GEEK

sponsored link

WordPressのカスタマイズはCSS知識ゼロのド素人でも徹夜で取り組めばどうにかなる

time 2015/05/19

WordPressのカスタマイズはCSS知識ゼロのド素人でも徹夜で取り組めばどうにかなる
この記事の所要時間: 722

WordPressのカスタマイズは、初心者でもどうにかなります。

私は、ノンプログラマーです。
現在、Progateを使って独学でプログラミングを勉強していますが、素人に毛が生えた程度だと思っています。


でも、リンクタグ太字なら何も見なくても書けます。
まったく自慢になってないですけどね。

以前から、漠然としたアイデアはありました。
これが漠然としたアイデアを形にしたものです。

150519-1

ただの落書きにしか見えないですね。
このアイデアを再現するにはまだまだ力不足で、いくつか断念した箇所があります。
後述あり。

でも自己満足にはなりますが、6割方はアイデア通りに出来たんじゃないでしょうか。

ちなみに、これがビフォー画像です。

150519-2

全体的に白いです。
プロフィール画像以外は、清潔感を感じますね。

これがどう変わったのか。
試行錯誤し、CSSド素人がどうやってデザインを変更したのか。
これを見れば、ド素人CSS知識ゼロなあなたでも好みのデザインに変更することが出来ますよ。

ちなみにこのサイトは、Simplicityというテーマを使っています。

参考:Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

sponsored link

デザインを変更した箇所一覧

今回、デザインを変更出来た箇所は以下となります。

  • サイトキャッチフレーズ
  • メニューバー
  • サイドバータイトル
  • カテゴリーウィジェット
  • 見出しタグ
  • トップページ本文関連

では、それぞれの変更箇所をみていきましょう。

サイトキャッチフレーズ

実は、今知り合いにロゴ制作をお願いしています。

近日中には公開出来る予定なのですが、そのロゴをサイトタイトルに当てはめると、サイトキャッチフレーズがしょぼいんです。
まったく目立たない
そこで試行錯誤した結果、こんな感じになりました。

150519-3

ソースコード

 

メニューバー

今回のデザイン変更にあたり、このサイトのテーマカラーを黒色にしました。

それに伴い、メニューバーの背景色を黒色にしました。
16進数でいうところの#342F3Aなんですが、後から分かったのですが実はこれ青色らしいです。

十六進の色コード#342f3a青マゼンタ色の暗い色合いです。

#342f3a十六進の色コード配合、色見本、パレット、ペイント&光の三原色(RGB)/印刷四原色(CMYK)/HSL変換

でもこの色気に入っているので、そのままにしておこうと思います。

余談ですが、色コードを調べるにはこのアプリが便利ですよ。

Sip

無料
(2015.05.18時点)

App Store

posted with ポチレバ

詳しい使い方は、こちらをご覧ください。

参考:MacのカラーピッカーアプリでおすすめなSipが無料中!今すぐダウンロードした方が良いですよ | MacとiPhone備忘録

メニューバーの背景色を変更したことによって、あわせて文字色、文字の太さ、ホバーの色も変更しました。

150519-4

ソースコード

サイドバータイトル

こちらもテーマカラー黒改め暗い青色にした為、背景色などを変更しました。

メニューバーの文字との相性を合わせるために、何度も試行錯誤しました。
今回のデザイン変更で、2番目に時間がかかった箇所でした。

150519-5

ソースコード

カテゴリーウィジェット

これは、あるサイトのパクリ、いやオマージュですね。
思わず口が滑ってしまいましたね。

オマージュするためには、まずたくさんありスマートではないカテゴリーを整理しなくてはいけませんでした。
最終的に5つに絞りました。

これをやることによって、漠然としていたこのサイトの方向性がぼんやりながら見えてきた気がします。頭のなかの整理が出来ました。
カテゴリーが乱立していると、訪問者さんにもフレンドリーではないですよね。

この記事を見ているブロガーさんは、これを機会に見直してみてはいかがでしょうか。

今回のデザイン変更で、1番時間がかかりました
時間がかかっただけあってか、1番思い入れがあります。
ダダっ子さんですね。

150519-6

ソースコード

 

見出しタグ

前から変更したかった箇所です。
h2タグには、このサイトのテーマカラーの背景色を追加し、h3タグには、上下に線を追加しました。

150519-7

150519-8

ソースコード

トップページ

ここのデザインを1番最後にイジったので、今回の集大成といった感じでしょうか。

抜粋分の非表示と背景色を変更しました。

唯一心残りなのは、タイトルや日付とカテゴリーの表示されている部分を全エントリー共通の位置に変更出来なかったことです。
何回やっても上手くいかなかったので、今回は諦めました
やり方が分かる優しい方がいれば、教えて下さい。

150519-10

ソースコード

デザインを変更するのに苦労した点

変更したい箇所がどこなのか分からなかった。

Google Chromeの「デペロッパーツール」を使い、変更箇所を探していましたが、そもそもどこが希望の変更箇所かがさっぱり分かりませんでした。

その後ガチャガチャしてたら、「デペロッパーツール」で直接CSSをイジれることが分かり、人海戦術のように該当箇所を探していました。

「デペロッパーツール」については、こちらが非常に勉強になります。

参考:CSSを弄るなら、Chromeの「デベロッパーツール」は絶対使えたほうが良い

完璧にオマージュしようとしていた

あとで気付いたのですが、そもそもHTMLの構造自体が異なるので、全く同じように出来る訳がありません。

それに気付くまで、ひたすらオマージュサイトの「デベロッパーツール」とにらめっこしていました。

これくらいでしょうか。

あとはひたすら、自分の理想に少しでも近付けるように試行錯誤していました。

アフター画像と全体のソースコード貼り付け

こちらが、すべてのコードを適用したアフターの画像です。

150519-11

また、今回変更したCSSコードをすべて貼り付けておきますね。

そういえば、滅多に使わないからってh4タグのデザイン変更してないから、他とギャップあるかも。
あとでやるリストに追加しておこ。

ソースコード

今後変更したいところ

トップページのコンテンツの位置変更と、コンテンツスライダーをメニューバー下に挿入ですかね。
あとメニューバーにもう1つタブを足して、アイデア通りに変更したいですね。

そういえば、FacebookのLikeボックス6月23日までに変更しないといけませんね。

参考:フェイスブックのLike Boxを設置している方はPage Pluginへ変更しよう! -SAKULIFE

締めのひとこと

今回伝えたかったことは、ド素人でもCSSの知識ゼロでも頑張ればなんとかなるってことです。

最初は知識ゼロなのでもちろん大変ですけど、繰り返し失敗を重ねれば、いつしか徹夜してたのが懐かしく思えて来るんでしょうね。

この記事が、これからCSSをイジろうと考えているド素人に届くことを願って。

最近毛が生え始めた素人より

参考:初心者でもできた!「Simplicity」でカスタマイズしたこと6つ!

参考:子テーマを利用してサイトデザインをカスタマイズする方法 | ブログ工房

この記事が気に入ったら
いいね!しよう

Twitter で

sponsored link

次回の記事はおそらく Googleマップを記事に埋め込む方法 になるでしょう。
更新を逃さない!便利なRSS登録はこちらから

・アットホームギークBASEショップ出来ました!
その他音源レビューやオモロイことなら何でもやりまっせ!


まだ日本で消耗してるの?海外に出てのびのび自由に生活しません?

・【2015年度完全版】ワーキングホリデービザで滞在できる国まとめ
・ワーホリ・留学準備で誰しもが絶対悩むお金の持っていき方について
・32歳でもワーキングホリデー行けるってホント?オーストラリア行ってきます! ・英語でシェアハウスの探し方シチュエーション別まとめ


ワーホリ後も安心!帰国してからはこのサービスを使おう!

・ワーホリ後の転職のときに大活躍するサービスまとめ
・わがままでも自分勝手でも自分に合った求人を紹介してくれる転職サイト


旅行のお供にいかがですか?GoPro記事まとめ

・GoProを購入したら最初にやるべきWiFi名とパスワードの設定方法
・GoProアクセサリーレビュー記事まとめ


down

コメントする




sponsored link

ABOUT

マツモトユウキ

マツモトユウキ


「私が気になることは世界の誰かが気になること」をモットーに、記事書いています。
Apple、ガジェット、Webサービス、肉の中だったら鳥が好き。 ガジェットやWebサービスなどのレビュー書きます。 お仕事の依頼はこちらから→レビュー承ります!

2014年:カナダへ留学
2015年:オーストラリアへ留学
2016年:帰国して東京にいます。
そして、レーベルのしゃっちょさんになりました。グッズなどここから買えます!
AHGRオンラインショップ

もうひとつウェブサイト作りました!海外パンクロック紹介中!
AT HOME GEEK Records

その他、詳しいプロフィールはこちら [詳細]

ツイートもチェック!