読者です 読者をやめる 読者になる 読者になる

はてなブログのCSSについて-モバイル用はどこに書くのが正しいの?

その他(日記)

スポンサーリンク

ブログを始めてもう3ヶ月が過ぎました

ブログ自体ほとんど経験がなかったので

この約3ヶ月が僕のブログ歴です

最初は色々記事を書くのに、情報を集めたり

画像の加工方法を試行錯誤したりしていたわけですが

 (情報収集は今のほうが忙しいかも・・・)

 

最近は公式テーマで決めたCSSの、ここが変更できればいいのに

とか段落はもう少し分かりやすくしたいとか思うようになってきました

そこでCSSを勉強しながら、このブログをカスタマイズ? (ちょっと大げさかも)

も始めました

 

そこで最初に困惑したのは

 

デザインCSS

 

この赤い四角で囲った「{}デザインCSS」に

CSSを追加してもパソコン版の方にしか反映されない

モバイル版(スマホで見る)にはまったく反映されないんですよね

 

なので正式な方法なのかわかりませんが

モバイル用CSS

 

 

モバイル用CSS

 

モバイル用CSSは「デザイン→モバイル→ヘッダ→タイトル下」

の「タイトル下」に下記の様な形で追加するようにしました

 (ここの編集は"PRO"でなければ出来ません)

<style type="text/css">

<!--

/*ここに追加したいCSSを書く*/

-->

</style>

 

CSSを自分で弄ると結構楽しい事に気がついた

 

僕の場合は標準で段落に付いている

 

この花のようなマークがあまり好きではなかったので

 (今スマホで確認してみるとモバイル版には花のマークがつかないようです)

 

<h4>は

h4の段落

 のように変更しました。

 

下記のCSSを上で紹介した「/*ここに追加したいCSSを書く*/に書くと

<h4>で段落を入れた場合は「h4の段落」のように

なります #4276F4の部分を変更すれば色が変わりますし

font-size:25px;25の数字を変更すれば文字のサイズが変わります

自分の好きなようにカスタマイズすると

より自分のブログに愛着が湧くのではないでしょうか

良かったら皆さんも試してみてください

 

h4:before{
content:" " !important;
}

.entry-content h4 {
font-size:25px;
border-left:10px solid #4276F4;
border-bottom:1px solid #4276F4;
padding-left:10px;

}

 

ちなみに僕はプロのWEBデザイナーでは無いので

基礎は簡単な本を見ながら、それ以外の部分は

ウェブ上で公開されている便利なCSSを(パクっ)参考にさせてもらって

いるだけですけどね (笑)

 

 基礎を学ぶのにこの本が図解入りでわかりやすいのでお薦めですよ

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)

 

 

※それにしてもモバイル用のCSSはどこの書くのが正しいんだろう

ヘッダに勝手に追加しているけど出来れば「はてなブログ」さんの方で

モバイル用はここに追加してねと用意してくれたほうがわかりやすくていいんじゃないかな

にほんブログ村に参加しています。
よかったらポチッとお願いします。

ブログランキング・にほんブログ村へ
にほんブログ村