Luscious Rose Poison

薔薇[BL]絵描きは真面目に生きることをやめた  (宇宙を漂う究極生命体風に)。

「ブログでカッコつけてみることにしました」というお話【テーマ選択☞現形構築 編】

 
お読みくださりありがとうございます。
 
ね。
普通は、同じテーマを連続で書くはずなん
ですよ。
読み手としても、
「続き早く書けよ (°᷄罒°᷅ꐦ)」
って思っちゃいますものね。
 
そこをあえて、3日後に書くという乱し具合
……いかがでしょうか。
あなた様の心を震わせるインパクトになった
はずであると自負しておりまs…
 
 
 
 
 
 
 
 
 
引用元:Girl's Channel
 
 
 
 
 
 
 ヒッ∑(°ㅂ°;;)
 
 そんな剣幕で迫らないで下さいよォ
 怖いですって。
 謝りますから…
 
 
 
 
 
 
 
 
 

 

f:id:niji_j0j0:20200918004318j:plain

引用元:bokete
 
 ※無言の圧力。
 なお、全く反省する姿勢は無い模様。
 
 
✎︎___________________
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
🌙背景・表示形式などを担う
 「テーマ」の設定
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
 
自分のブログをどういう見せ方にするか
決められる「テーマ」というものが
選べるようになっております。
 
 ✎︎_________________
 テーマ選択画面への行き方
  ブログトップ
  ☞URLの下あたりの自分のアイコン
  ☞デザイン
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 
はてなブログの場合、
PC版の表示をスマホテイストにしてくれる
「レスポンシブデザイン」というテーマが
あります。
記事の編集などを、スマホ版とPC版で
分けてやる必要が無くなるというメリットが
あります。
私は"Reach"というテーマにしています。
 
そして、ただテーマを設定するだけでは
スマホの表示は変わらないのです
(スマホで開くと、PC版の表示とは違う
雰囲気で表示されます…
たしかそういう現象が起きました ´><)
 
 
そこで以下の操作が必要なのです。
 
 ✎︎_________________
 CSSへコマンドを入力
 テーマ選択と同じく
 「デザイン」設定画面へ
  ☞真ん中のスパナマーク
  ☞下へスクロールして
   "デザインCSS" へ以下の文字列を
   入力
    /* Responsive: yes */
  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 
「コマンド…だと…!?
と思われましたでしょうか?
構えることはございません。
コピペすればいいだけですから。笑
 
 
上記の設定をしますと…
 
 ⬇️ PC版
 
 ⬇️ スマホ

f:id:niji_j0j0:20200915182206g:plain



 
 できあがりッ╰(°ㅂ°)╯
 
 
 この設定には以下のサイト様を
  参考にさせて頂きました。
  大変助かりました(*_ _)
 by こーにゃー様
 
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
🌙ブログタイトルのカスタマイズ
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
 
 
⬆️ここと、それ以外の
「開いて"ぱっ"と表示される部分」
これらのカスタマイズでふ。笑
 
 ✎︎________________
 前項で触れた "デザインCSS" へ
 
  ☞文字列の大きさを変える
   #title {font-size: ○○pt;}
    ※○○の部分は数字を入力  
 
  ☞文字列の色を変える
   #title {font-color:
       #○○○○○○;}
    部分には原色大辞典より
      得られますコマンド入力
 
  ☞文字列のフォントを変える
   #title {font-family: '○○';}
    部分Google Fonts より
      入手したコマンド入力
      これについては別記事ご説明します
      話せば長くなる(º言º;lll)
 
  ☞文字列の位置を変える
   #title {padding-top(bottom):
      ±○○px;}
    部分には数字入力
      "top"上からタイトルどれほど
      動かすか指定出来ます
      "bottom" 下からです
 
  ☞タイトル下の説明文をいじる
   #title-description {⬆️を参照}
    "description" タイトル下に
      表示される説明文意味します
      ブログ場合
      薔薇[BL]絵描きは部分です
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 
コマンドは合わせて入力するものですから
以下のような入力内容になります。
 
 実際の入力画面参照
 
 
 この設定には以下のサイト様を
  参考にさせて頂きました。
  by 理系男子のIoTライフ 様
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
🌙記事タイトルなどのカスタマイズ
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
 
次に記事タイトルと画像右にあります
説明文のところをいじります。
 
 
⬆️ここですね。
 
 
✎︎_________________
 記事タイトル部分をいじる
  
  前項に書きました、
 
   #title {...}
  
  上記の "#title" の部分を
  "h1.entry-title a" に変えると
  カスタマイズ出来ます。
 
   ex.)
    h1.entry-title a
     {font-size: ○○pt;}
     文字大きさ変える場合
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
✎︎_________________
 記事説明文をいじる
 
  前項に書きました…
  あ、勘のいいあなた様なら
  すでにお気づきですよね。笑
  そうッ!
 
    #title-description {...}
 
  上記の "#title" の部分を
  "entry" に変えるとカスタマイズ
  出来ます。
 
   ex.)
    entry-description
     {font-size: ○○pt;}
     ※文字の大きさを変える場合
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
 
ブログタイトルと同じく、コマンドは
まとめて入力するため、以下のような
入力内容になります。
 
 赤枠の参照
 
日付や画像部分など、触れてない部分の
カスタマイズは、私自身も研究中の段階
であるため、わかり次第追記していく
予定です。
 
____________________
 
上記を書いていて感じた、率直な感想を
お伝えします。
 
 
 
 
 
 
 
 
 あー…なんかめんどくさくなってきた
 
  _(┐「ε:)_
 
 
 
 
 
 
 
 
 
 
ここまでお付き合いくださいまして、
ありがとうございました。笑
それではごきげんようッ❁⃘