Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

110 . はてなブログのテーマを一から制作してみる / ❶HTMLのみの表示

『一糸纏わぬ君の姿も素敵だよ✨』

どうもややこしい表現になってしまいました、和馬です(๑′ฅฅ‵๑)←←w(顔文字が可愛かったのでw)
 
 
今回はテーマ制作についてです。
HTML,CSSの学習も兼ねて、一から自分で作ってみようと思います。
 
 
 
先ずは「ブログのデザインに関して、「  "どこまでが本体"  で  "どこからがCSS"  なのか」をはっきりさせる為、はてなブログのテーマを剥がしてみました。要するに、テーマストアで選んだデザイン部分( CSS ) を全て取っ払ってみた、という事ですね🌟 これが分からない事には、「基本の型の上に、どの様にCSSで装飾していくか」が決まりません。
 
では早速。。
 
 
 

ほぼHTMLだけの表示にしてみる

 
【手順】
「ブログ管理画面」→
「デザイン設定」→
「カスタマイズ」→

「スタイルシート (最下部) 」

 

f:id:DDramonQ:20160428224543j:plain

 

❷『/* system  ....    */ 
          ..!! @import...         』  も全て消しました↓↓

 

 f:id:DDramonQ:20160428224929j:plain
 
f:id:DDramonQ:20160428224914j:image
 
 
 
そうすると、こう↓↓ なりました。
 
 
f:id:DDramonQ:20160417114314j:image

 

f:id:DDramonQ:20160426152038j:plain

 
ほうほう。かなりシンプルになりましたねw これがベースになる訳ですね~🌟
『一糸纏わぬ君の姿も素敵だよ✨』(天丼)
 
 
 
この『@〜....  .css』の部分が、"はてなブログのテーマ"に当たる部分です。
 
「@~」は、"テーマストアで選んだテーマのCSSを、指定のURLからインポートしている"という事ですね。つまり「さっきのテーマを自分のブログにも下さいな~というお願い」ですね。それを書く事によって、上記画像の様なほぼhtmlだけだったものに、テーマが着せられるわけですね🌟
 
逆に、今回の様にこの部分を消してしまうと、"ブログの骨格部分だけが残る" 、という訳です。
 
 
 
 
 

 色々装飾してはみたが。。(カオス) 

その後、w3schoolsで学んだ項目を定着させる意味も含めて、上記の「一糸纏わぬ姿」からCSSで色々デコレートしてみました。が⁉︎……少しカオスで視認性が良くないですね……::(っ`ω´c)::💦w

 
 
まぁ、暫くは自己満も含めて暫くこのままで。。(´>∀<ˋ๑)>w🌟
 
 
Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️