ここを押すと記事一覧にもどれるんだぜ?

はてなブログでスマホの引用デザインをカスタマイズする方法!【はてなブログpro用】

f:id:peperan:20171004001317p:plain

 

タイトル通り「はてなブログ」「スマホだけの引用デザイン」を変更したいと思っている方向けの方法になります。

 

 

無料版の方はできないと思います。

 

 

僕自身調べてもなかなか無くて、探すことができなかったので書いてみました。

簡単ですので、やっていきましょう。

 

 

 

まず、好きな引用デザインを選びましょう

 

ネットで探すと、cssと言われる、僕にとってはよくわからない未知の言語を使いこなしている方達が、コピー&ペーストでブログのデザインを変えれるように丁寧に記事を書いてくれています。

 

記事を書いてくれた方に、まず目をつむり、手を合わせ、心の中で「ありがとう」と呟いてから、あなたの好きなデザインをコピーします。

 

「ありがとおぉぉぉう!!」

 

 

saruwakakun.com

 僕はこちらのリンク先からデザインの方を頂戴しました。他にも『引用デザイン』と検索をかければいろんなデザインがあるので、そちらから拝借してください。

 

 デザイン決まったら戻ってきてくださいね?

 

 

 

ペーストする場所はココ

 

次に今コピーしたものを貼る場所を教えます。

画像みて付いてきてくださいね!いきますよ?

 

f:id:peperan:20171003220538p:plain

 

画面右上のココ!

 

f:id:peperan:20171003220546p:plain

 

にゅと出てきたバーの中から『デザイン』

 

f:id:peperan:20171003220550p:plain

 

そしたら画面の左側を見て『スマホ』を押して『ヘッダ』を押す!

 

f:id:peperan:20171003220555p:plain

 

 そこの『タイトル下』ですね。この赤枠に選んできたデザインcssをペーストします。

 

 

『デザイン』→『スマホ』→『ヘッダ』→『タイトル下』です。

 

 

 

ただペーストするだけじゃダメです

 

ここで問題なのが、先ほど、感謝していただいてきたcssをそのままペーストしてもデザインは反映されません。

 

そこでこいつの登場です。

 

 

<style type=”text/css”>
/* 引用デザイン */

 

(ここに引用デザインのコピーを貼ってください)

</style>

 

 

  1. これをまず「タイトル下」にコピペします。
  2. 次に(ここに引用デザインのコピーを貼ってください)の下の段にデザインcssを貼ってください。
  3. 貼り終わったら、(ここに引用デザインの〜)を消します。

 

 

 

/*  */は、画面上に影響しないので、他の見出しなどcssを入れるときに、「これなんのcssだっけ?」とならないようにメモがわりになるので、つけるのがおすすめです。

 

 

 

以上になります。

 

 

僕みたいに、cssとかHTMLなんてわかんねえよって方!一緒にお勉強していきましょう!

 

ではでは、ツマル(@Tsumaru_hana)でした。

 

 

これでも、できなかったらすいません。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です