「写真を大きくしたい…」はてぶのプロフィールをオリジナルに変えてみた
昨日から、ブログの改修をはじめてみました。全体の終わり目標は、今月末です。
なぜカスタマイズをはじめたのかというと、単純に好きなデザインの方が執筆がたのしくなりそうだから! そして、愛着がわけばサボらなくなりそうだから。
目標はこちらです▼
- メニューバーの挿入
- プロフの下にSNSボタンをつける(FB / Twitter / Instagram)
- サイドバーを線で囲む
- 全体のフォントを変更(細くしたい)
- トップページの記事を一覧表示にする
- 各種見出しにスタイルを当てる(h2,h3,h4)
ちなみにどれくらいカスタマイズの知識があるかというと、ほぼ皆無です。
HTML/CSSが多少は理解できて、いじれる程度。(※フルスクラッチはできません・・)ということで、いろんなサイトをウロウロしながら、地道に頑張っていきたいとおもいます!
昨日はさっそくサイドバーのプロフィールから変更することにしました。はてぶのプロフィール写真って、デフォルトで入れると小さいですよね。
でも大きくて素敵なプロフ、入れてる人ってたくさんいるなあと……
この方とか!
あとつるたまさんとか!(おおきい!)
プロフの写真が大きいと、それだけで見栄えが良くなるなあと思います。
さらにどんな人が書いているのかわかるのってイイネ!
ということで、わたしも頑張ってみました。
* * *
デザインCSSからClassにスタイルをあててみる
とりあえず、まずは80x80でアップロードした写真に、無理やり「デザイン」→「カスタマイズ」→「デザインCSS」で無理やりClassにスタイルをあててみることにしました。
ここから直にCSSを書くことができます。すでにテンプレートにあたっているCSSはいじれないため、上書きしていくイメージなのかな・・・?
こんな感じでテキトーにあててみました。
・・・しかし、やはりアップロードした際、画像サイズがちいさくなるみたいで・・・
残念な結果に・・(泣)
調べてみた
やはり自力は無理。早々に諦めて解説されているブログはないかなーと調べてみたところ、ありました、ありました!
いろいろ読んでみましたが、こちらのブログがとてもわかりやすかったです。
ふむふむーと格闘すること約10分・・・
大きく、しかも綺麗になりました!
(ぱんぱかぱーん!)
すこーしだけHTML/CSSの知識があるわたしでここまで10分ほどでした。まったくなくても30分ほどあれば、できそうな予感です。
明日はSNSボタンをカスタマイズしてみようと思います。
英語もやらないとなぁ・・・それでは!