「写真を大きくしたい…」はてぶのプロフィールをオリジナルに変えてみた

昨日から、ブログの改修をはじめてみました。全体の終わり目標は、今月末です。
なぜカスタマイズをはじめたのかというと、単純に好きなデザインの方が執筆がたのしくなりそうだから! そして、愛着がわけばサボらなくなりそうだから。

目標はこちらです▼

  • メニューバーの挿入
  • プロフの下にSNSボタンをつける(FB / Twitter / Instagram
  • サイドバーを線で囲む
  • 全体のフォントを変更(細くしたい)
  • トップページの記事を一覧表示にする
  • 各種見出しにスタイルを当てる(h2,h3,h4)


ちなみにどれくらいカスタマイズの知識があるかというと、ほぼ皆無です。
HTML/CSSが多少は理解できて、いじれる程度。(※フルスクラッチはできません・・)ということで、いろんなサイトをウロウロしながら、地道に頑張っていきたいとおもいます!

昨日はさっそくサイドバーのプロフィールから変更することにしました。はてぶのプロフィール写真って、デフォルトで入れると小さいですよね。
でも大きくて素敵なプロフ、入れてる人ってたくさんいるなあと……

この方とか!
あとつるたまさんとか!(おおきい!)
プロフの写真が大きいと、それだけで見栄えが良くなるなあと思います。
さらにどんな人が書いているのかわかるのってイイネ!

ということで、わたしも頑張ってみました。


* * *

デザインCSSからClassにスタイルをあててみる

とりあえず、まずは80x80でアップロードした写真に、無理やり「デザイン」→「カスタマイズ」→「デザインCSS」で無理やりClassにスタイルをあててみることにしました。

 

f:id:nontsu:20160513004426j:plain

ここから直にCSSを書くことができます。すでにテンプレートにあたっているCSSはいじれないため、上書きしていくイメージなのかな・・・?

f:id:nontsu:20160513005621p:plain


こんな感じでテキトーにあててみました。
・・・しかし、やはりアップロードした際、画像サイズがちいさくなるみたいで・・・

f:id:nontsu:20160513004521j:plain
残念な結果に・・(泣)


調べてみた

やはり自力は無理。早々に諦めて解説されているブログはないかなーと調べてみたところ、ありました、ありました!
いろいろ読んでみましたが、こちらのブログがとてもわかりやすかったです。

ふむふむーと格闘すること約10分・・・

f:id:nontsu:20160513004839j:plain

大きく、しかも綺麗になりました!

(ぱんぱかぱーん!)
すこーしだけHTML/CSSの知識があるわたしでここまで10分ほどでした。まったくなくても30分ほどあれば、できそうな予感です。 

明日はSNSボタンをカスタマイズしてみようと思います。

英語もやらないとなぁ・・・それでは!