うえのブログ

試行錯誤をしながらまともなブログを書けるようになるブログ

うえのブログ

テーマの変更とカスタマイズをしてみた

スポンサーリンク

f:id:uenoyou111:20170913164518j:plain

 

上野です。ブログのテーマを苦労しながら変更・カスタマイズしました。

 

初めてブログを開設した当初は、なんでこんな他のブログ様はおしゃれなんだ……と圧倒的な差を感じていました。

 

でも実際にやってみると、大変だったけど私でも出来るんだなぁと言うところでまとめてみます。

 

 

テーマってなんですか?

 

まだこのブログを投稿すらしてない頃、私は色々なブログ様を見ているだけでした。

 

人気のあるブログって、記事の見やすさだけじゃなくてデザインがとてもいいんですね。

 

どうにかしていじってるんだろうけど、どうやるんだろう?というところからスタートしました。

 

そしてよく分からないまま、「はてなブログ デザイン」とだけ検索。

 

その時にこちらのブログ様がヒット。

 

hitsuzi.hatenablog.com

 

食い入るように見ましたね、こんなコピペで簡単に変更できるのか……!と。

 

一通り見て、大まかなデザイン原案を「テーマ」と呼ぶのだなと学びました。

 

ちなみにテーマについては公式の一覧ページがあります。

 

テーマ ストア - はてなブログ

 

 

テーマ変更のやり方

 

上述のテーマストアから良さげなやつを探してインストールするのもいいですし、まとめてくれてるブログ様もあります。

 

テーマという言葉を学んだ私は、「はてなブログ テーマ おすすめ」で検索。

 

そして参考にしたのはこちらのブログ様です。

 

happylife-tsubuyaki.hatenablog.com

 

実際にこちらのブログ様が使われているデザイン「Material」を使わせて頂きました。

 

てか、色々変更したけどこちら以外しっくり来なかったです。

 

テーマの変更は、実際に変更したいテーマ紹介ページに進み、右側にある「プレビューしてインストール」を選択します。

 

f:id:uenoyou111:20170913181305j:plain

 

クリックすると下に「適用するブログ」と出るので、自分のブログ名をクリック。

 

実際に適用されたテーマを見て、良さそうだったら左上の「このテーマをインストール」をクリックして完成です。

 

f:id:uenoyou111:20170913181516j:plain

 

 これで大体のデザインは自分好みに変更することが出来ます。

 

細かいデザインの変更

 

大まかなデザインが変更できたら、色とか記事の配置とか気に入らない部分を直していきます。

 

例によって私はオレンジが好きなので、メインカラーがオレンジ・サブカラーがという配色にしたい。

 

んで……どうやって変更するんだ?と言う壁が立ち塞がります。

 

※ちなみにここからは、「Material」のテーマを元に記述していきます。

 

まずこのテーマはそのままインストールすると、記事フィールドが一枚真ん中に配置されるだけになります。

 

どういうことかと言いますと。

 

f:id:uenoyou111:20170913183811j:plain

 

このようになります。でも私としては、記事一枚じゃなくて自己紹介的なフィールドが右側に欲しい。

 

f:id:uenoyou111:20170913183923j:plain

 

コレですコレ。

 

このフィールドと読んでる部分、これをカラムというらしいです。最初のは1カラム、次は2カラムの右サイドバーと言う感じ。

 

2カラム左サイドバーとか、3カラム両サイドバーというのもありますね。

 

この「Material」はカラムの変更が作成者からアナウンスされています。

 

webgaku.hateblo.jp

 

ここに書かれてるやり方で、2カラムへと変更。

 

その後に自分の変更したい色を探して、色コードを控えておきます。(半角シャープから始まる六桁の数字です)

 

そしてこちらも作成者よりアナウンスされているので参考にして変更。

 

webgaku.hateblo.jp

 

 CSSの中に、ここが日付エリアとか書かれているので色コードを変更しつつ様子を見て自分好みに仕上げていきます。

 

 

個別に変更したデザイン

 

後は見出しデザイン

 

www.uenoyou.net


 

それとシェアボタン

 

www.uenoyou.net


 

あと画像に影をつける効果。

 

www.uenoyou.net


 

実は並行して他にも色々してるのですが、まだ記事になってません。

 

トップページが記事全文載っちゃうから、タイトル一覧表示にして見やすくしたりとかマーカーを使えるようにしたってぐらいです。

 

 

まとめ

 

デザインの変更ってとっても大変です。慣れた方は一瞬かと思いますが。

 

私はリテラシーが低いし、タイピングが出来るぐらいでCSSとかの知識は皆無です。

 

CSS?なんそれ?カスタマーサポートサービスかな?ぐえ

 

それでも素人がここまで出来るのはすごい。あと完成した自ブログがかわいく見えてくる不思議。

 

慣れない方は大変だけど、達成感と思い入れが全然違います。

 

おすすめ。