Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

121. 和馬'sはてなブログテーマ、を記事にアップしてみました🙌🌟

  ログ*1の意味でも、又、「他の方が使えるかも」とも思い、「Kazuma Laboratory'sブログテーマ」の "コード" を記事にしてみました。

   また、プログラミングを学んでいない人でも導入できる様に、以下に「このブログのテーマを導入する為のチュートリアル」も作ってみました。

   以下に載せたコードをコピペすれば、誰でも簡単に自分のブログが 、「現在の僕のブログと同じ感じ」になりますw(一応"需要がある"という前提でお願いしますよ~(*⚫︎ー⚫︎)b 💦w …無いかもしれませんが…一応。。ねっ🌟(*⚫︎ー⚫︎)b ✨💦w )

  今後もどんどん変更していくとは思いますが、現段階(16.05.06)でのテーマを置いておきます🌟良ろしければ、お使い下さい🌟

 

--- 🌸ちゅうい ---

●まだプログラミング初級者なので、もしかしたら、上手く表示されなかったりするかもしれません😅w予めご了承下さいまし(。•ㅅ•。)🌟 もう少し僕のプログラミングの腕が上がってきたら、テーマストアにも公式にUpしようかな、と考えています🌟

 

 

 

 

 

 

       --- もくじ ---

 

 

 

導入手順 コードA ( ブログテーマ )

❶以下のコードAをコピー

❷ブログ管理画面 → デザイン

❸カスタマイズ

f:id:DDramonQ:20160507010933p:plainf:id:DDramonQ:20160507011556j:plain

 

❹デザインCSS

❺全消し + コードAをペースト

f:id:DDramonQ:20160507011612j:plain →f:id:DDramonQ:20160507011622p:plain

   

 

 

 

 

 

 

 

 

 

導入手順 : コードA2( レスポンシブ表示 ) 

レスポンシブ表示とは「PCでもスマホでも同じように表示されるようにする事」です。

そのためには、さっきのコード + α が後もうちょっと必要です。

「( i ) 追加コピペ + ( ii )ブログ設定の変更」で出来ます。難しくはありませんが、後もう少し手順が必要になります。余裕のある人は、チャレンジしてみて下さい。スマホでもPCと同じ様に表示されると、嬉しいものですよ~(*´ω`*)✨♪w

 

 

 --- ( i ) コードのコピペ --- 

 

以下にあるコードA2 をコピー

❷アカウント設定画面 → 設定 →詳細設定

以下にコードA2をペースト

f:id:DDramonQ:20160507221550j:plain

 コードA2

See the Pen QNYEpa by Kazuma Tojo (@Kazumax) on CodePen.

 

 

 --- ( ii ) ブログ設定 ( チェックボックス入力) --- 

 

●ブログ管理画面 → デザイン → スマートフォン

f:id:DDramonQ:20160507235308p:plain→→f:id:DDramonQ:20160507235408p:plain

 

f:id:DDramonQ:20160507235821p:plainf:id:DDramonQ:20160507235622p:plainf:id:DDramonQ:20160507235636p:plain

 

 

 

 

 

 

 

導入手順 : コードB ( メニューバー )

f:id:DDramonQ:20160507221625p:plain

こちらも「コピペ」でOKです。ただ、ペースト*2する場所が違います。

 

--- 手順 ---

 

コードB  をコピー

   ↓↓

❷ブログ管理画面 → デザイン

❸カスタマイズ

❹ヘッダ

f:id:DDramonQ:20160507224033j:plain

コードBをペースト

 

 

 

 

 

 

 

 

 

導入手順 : コードC ( ジャンプボタン )

f:id:DDramonQ:20160507221650p:plain

 --- 手順 --- 

コードC をコピー ↓↓ 

❷ブログ管理画面 → デザイン 

❸カスタマイズ 

❹フッタ

f:id:DDramonQ:20160507224222j:plain

コードCをペースト

 

 

 

 

      ━・━・━・━・━・━・━・

 

コードA

See the Pen HatenaTheme_Body_CSS by Kazuma Tojo (@Kazumax) on CodePen.

 
 
コードB

See the Pen HatenaTheme_Header by Kazuma Tojo (@Kazumax) on CodePen.

 
 
コードC

See the Pen HatenaTheme_Footer_Button by Kazuma Tojo (@Kazumax) on CodePen.

 
 
テスト

See the Pen HatenaTheme_Body_CSS by Kazuma Tojo (@Kazumax) on CodePen.

*1:記録

*2:貼付け

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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️