videos-1240742_640

こんばんはヽ(´ー`)ノ
眠い目をこすっての、livedoorブログカスタマイズ記事2連投です。

背景

自分のブログのスマホ版表示を眺めていたんです。
Screenshot_20171122-224919
あれ?
見出しスタイルが適用されていない?
PC表示は適用されているのに・・・

そこでいろいろ調べたんですが、
livedoorブログはどうも個別記事内について、
スマホ表示はcss適用されないという仕様のようです。

無料で利用させてもらっていて文句の言える筋合いではないですが、
昨今のスマホでのWeb閲覧はえらいリッチになってきているのに、
livedoorブログは時代に取り残されている感がします。

自分のブログもスマホ表示でcssを適用したい!



実現の工夫

こちらのサイトを参考にさせていただきました!

まぁ簡単に言うと、cssファイルを自分のブログにアップロードし、
それを記事個別にリンク参照を張る、という方法です。

1.まず、見出しスタイルを記述したcssファイルを作成しましょう。
 テキストかなんかで「.css」ファイルを作成します。
WS000000
WS000001
ここでは例として、h3タグを定義した「sp.css」というファイルを作成しました。
スタイルシートは下記からお借りしました。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
https://saruwakakun.com/html-css/reference/h-design

2.そのファイルをlivedoorブログの
 [画像/ファイル] - [ファイル管理]からアップロードしましょう。
WS000002
私は管理上の目的から、ルートディレクトリに「css」というフォルダを作成し、
そこに「sp.css」をアップロードしました。

3.記事投稿画面の「HTMLタグ編集」の一番上に記述しましょう。
 記述するタグはこんな感じ。
<link  href="[cssファイルのURL]" type="text/css" rel="stylesheet"> 
私のブログを例にするとこんな感じ。
WS000007


これで、
Screenshot_20171122-214439
めでたくスマホ版でもcssで装飾した見出しが表示されました!
ヽ(´ー`)ノ

余談・・・

しかし、毎回記事投稿する度にHTMLタグを挿入するのは面倒、
ってことでlivedoorブログのcssカスタマイズで一律適用を狙ってみたのですが・・・
WS000008
なんと、このエリアに記述しても、
スマホ版でcssが適用されないということが確認されました・・・

うーむ。
面倒ですが、記事投稿するたびに記述する他なさそうですね・・・。

今出来る範囲の工夫としては、
ブログ設定の「定型分」に <link  href="~ のタグを登録して、
WS000009

記事を書くときに、定型文挿入機能を使用してタグを挿入するくらいですかねぇ。
WS000010