ブログの事

ブログ初心者のライブドアブログ、スマホでのCSS設定。「h2」見出しデザインやり方説明。

こんにちは。
ライブドアブログで悪戦苦闘した あのむ(@a_no_m)です。

ライブドアブログって自動でスマホにデザインが反映されないんですよね。

パソコンで見るとデザインが出るのに、スマホで見ると出ない、、、。

あのむは、かなり悪戦苦闘しました

最初はライブドアブログの設定画面から、スマホのCSS設定を探しましたが見当たらない。

でも、他のブロガーさん達は、ライブドアブログでも見出しのデザインちゃんと付いてるんだよなー。

っと。

なんとか調べながら、スマホでの見出しのデザインを出すことが出来たので、簡単に説明していきます。

この説明はcssがさっぱりわからい状態で手探りでやって成功した方法です。
パソコン画面で「見出し」が出ている方が使える方法となっています。
専門用語もさっぱり分からないので、知ってる言葉でできるだけ説明していきます。

「h2」の見出しデザインを出すやり方を簡単に説明

ざっくり説明すると「h2」などの見出しの「css」のデータを入れて、
記事を書くページで「HTML」で呼び出す。

そんなイメージです。

怒る人
怒る人
むず!意味不明!!ざっくりすぎ!!
さっぱりわからないよ!!

はい。すいません。
写真を使って説明しますね。

まずはメモ帳で「css」のデータを作ります。

↓Windowsの「メモ帳」を起動。

↓メモ帳へ「h2」の見出しの「css」をコピペします。

よく分からない方は
テストでこちら↓をコピペしてください。

h2{
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

↓メモ帳を保存します。


保存する際「h2.css」と名前をつけて保存します。
※「.css」の前の部分は好きな名前でも大丈夫です。
分からなければ「h2.css」にしておけばOK!

出来たデータをライブドアブログのファイル管理にアップロード

「①管理画面」⇒「②画像・ファイル管理」⇒「③ファイル管理」よりアップロードボタンを押してアップロードしてください。

↓「①管理画面」をクリック

↓「②画像・ファイル管理」をクリック

↓「③ファイル管理」をクリック

↓「④アップロードをクリック」

↓先ほど作成した「h2」のフォルダをクリックして「開く」を押してください。

↓赤〇のところに「h2.css」が入ってればOK

とりあえず、h2の「CSS」デザインデータが入りました!

あのむ
あのむ
ここからも、もうひと手間!がんば!!

 

記事の一番上貼り付ける「HTML」を作成します

↓アップロードが終わったら、「h2.css」のファイルのとろこで右クリックして「リンクのコピー」をします。

↓分かりやすくメモしとくために、再度メモ帳を開き、一旦メモ帳に貼り付けてください。

表示はあのむのアドレスなので、
自分のやつをコピーしてね。

↓以下の「HTML」を先ほどのメモ帳にコピペしてください。

<link href=”★ここにurl★” type=”text/css” rel=”stylesheet”>

の間に「リンクのコピー」を入れてください。
※★は消してね。

↓あのむはこんな感じに仕上がりました

あのむ
あのむ
あとちょっと!!がんばれー!
ここまできたらブログ記事にコピペするだけです。

出来上がった「HTML」をプログの記事編集にコピペ

↓この出来上がった「HTML」を、コピーして、サイト編集の一番上に貼り付けます。
※この貼り付けは、記事すべて一つ一つすべての記事に貼り付ける必要があります。

保存をしてスマホで確認をして、デザインが出ていればOKです。

あのむ
あのむ
おつかれさまでしたーー!!

複数のデザインを入れたいときはどうする?

あのむは
「h2」
「h4」
「カエレバのボタン」
の3つのデザインを入れてみました。

「CSS」のデザインをひとつづつ作成し、アップロードしてから、

記事の一番上に

<link href=”★ここにurl h2★” type=”text/css” rel=”stylesheet”> <br>
<link href=”★ここにurl h4★” type=”text/css” rel=”stylesheet”> <br>
<link href=”★ここにurl カエレバのボタン★” type=”text/css” rel=”stylesheet”> <br>

こんな感じで、この3つを、すべての記事の上にコピペすればOK。

定型文に入れておけば、入れるのは楽になります^^

↓「管理画面」の赤〇のボタンから登録

↓登録後、記事作成画面の赤〇をクリック

↓「ブログに貼る」をクリックすれば簡単に貼り付けができます。

ここまで出来たら、あとは楽ちんですね^^

設定出来た方おつかれさまでしたー!

※出来ない方は質問を受けても答えられないのでご了承ください。

番外編 ビック外部リンクアイコン誕生!

あのむは悪戦苦闘したものがもう一個あります。

それは「外部リンクのアイコン」をつけること。

↓こういうやつ。

↓試行錯誤で出来たアイコンを見てください。

なんでこんなにでかいのww
クリックするとちゃんとリンクに行けたんですけどね。

cssって難しいです。

その他

あのむはライブドアブログを卒業し、スマホ表示の設定がいらないワードプレスに​引っ越しをしました!!

個人的意見ですが、、、ワードプレス「神」です!!

「HTML」「CSS」おすすめ本

これ、あのむが読んでいる本です。
CSSとHTMLがどんなものなのか、初心者のあのむでもなんとなーく分かった一冊です。
ちょっとでも理解しておくと、デザイン楽ですよ~。

本当に難しかったーーー。
みんながんばろう。

ABOUT ME
あのむ
あのむ
ご覧いただきありがとうございます! コストコ大好き。 楽天市場大好き。 ポイント大好き。 節約大好き。 な小学校2年生と5歳の男児を育てるママです。 実際使ってよかったものや、お得なノウハウなどブログにしてます^^