はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

はてなブログのスマホ版でもCSS設定したい!その解決策

昨日、Javascriptを使って自動的にリンクマークを付けるというエントリーを書いたのですが(コチラです)、あれからスマホ版で自分のエントリーを見るとスマホ版には全然リンクマーク画像が出ていない!ってことに気が付きました。

調べるとPC版とスマホ版は別のCSS設定だということが判明。解決策を探し先輩はてなブロガーさんのサイトで解決しました。その手順をまとめます。

 

はてなブログのスマホ版にはデザインCSS欄がない

はてなブログはスマホでアクセスした時に自動的にスマホ版に切り替わり表示されます。デザイン設定ではPC版のブログをそのままスマホへ表示できるスイッチも用意されています。

私は、はてなブログをデフォルトで使っていて、スマホ版とPC版は別設定にしています。

昨日のエントリーをスマホでチェックして気がついたのですが、PC版では出ているリンクマーク(f:id:yonta24:20141217003926g:plain)がスマホにな出ていない。

CSS設定に関しては、PC版には「デザインCSS」という設定場所が用意されているのですが、スマホ版には「デザインCSS設定」が用意されていません。

そこで下記のブロガーさんのサイトが参考になりました。(参考というか解答そのものでした。この方法は複数のサイトで採用されているみたいです)

tsukuruiroiro.hatenablog.com

詳細はサイトを見ていただければすぐにわかります。

当サイトで実行した具体的なやり方

やり方は、はてなブログPROコース限定です。プロコースにしないと出てこない設定である、スマホ版「タイトル下」のスペースにコードを入力します。

スマホ版はてなブログへのCSS設定

<style type="text/css">タグを使い囲んだスペース内にはCSS設定が可能になるのでここに設定するのです。CSSコードはPCのものと同一でOK。

設定したら「変更内容を反映」して完成です。

スマホなどでご自身のサイトをチェックしてみましょう。いかがでしょうか。