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

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

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

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

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

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

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

っと。

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

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

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

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

そんなイメージです。

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

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

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

↓メモ帳へ「ｈ２」の見出しの「ｃｓｓ」をコピペします。

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

↓メモ帳を保存します。

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

記事の一番上に

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