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

YESかNOか半分か

元ニートが、再びニートになって何かいろいろ書いてます

YESかNOか半分か

はてなブログ カスタマイズ:スマホ用ページでも見出しを表示させてみましょう。

ブログカスタマイズ 日常 はてなブログ

ご存じでない方も多いとのことなので…


id:ponako10先生がおっしゃったので、ぱぱっとまとめちゃいます。
やり方知ってるわよ!という方は既読スルーでお願いいたします。

“見出し”ってなんですか?

↑や↓のように装飾されている文字の事です。

こんなのです。

この見出しは、普通PC表示のみの場合に表示されてスマホ表示の際には↓の画像のように、ものすごくシンプルな表示となっています。

f:id:lunasaurus:20140131024653p:plain
記事に見出しを入れてわかりやすく! 編集画面から見出しを簡単に入力できるようにしました - はてなブログ開発ブログ


スマホでブログを見る際も、出来るだけPC版に近付けたい!という思いから、色々と方法を模索してみました。

そして、id:sho_yamane氏の「
はてなブログのスマホ記事下の人気記事と新着記事のウィジェットのデザイン変更方法 - 旧・無意味の意味
」というエントリーにヒントを頂き、試してみた結果上手く反映されました。
それではLet's START.

実装編

普段なら、「設定>デザイン>{}デザインCSS」にCSSタグを記入していますが、
f:id:lunasaurus:20131119150219g:plain

スマホで表示させるために、今回は「デザイン>記事>記事下編集」にも同じタグをコピペします。
f:id:lunasaurus:20140108175845j:plain

f:id:lunasaurus:20140116234148g:plainここでポイントなのが、コピペしたCSSタグを

<style>

/*ここですねー*/

</style>

というコードの間に入力するという点です。
このタグの間に記入しないと上手く反映されませんのでご注意を。
そして、f:id:lunasaurus:20140116231540p:plainスマートフォン版にも表示する。という項目のチェックもお忘れなく。
そして「保存」。
以上です。

驚くほど簡単です。

既にPC版で自分好みの見出しにCSSを使用されているかたは、それをコピペして

<style></style>

の間に挿入するだけです。簡単にご自身のはてなブログを自分色に染めることが出来ますよ。

以下、注意点
  • バージョンが古いブラウザのスマホiPhoneだと、見出しが表示されないどころか本文自体が見れなくなる場合があるので、
.entry-content h3:after,h3:before {
content:"";
position:absolute;
top:100%;
height:0;
width:0;
}

このように「:before,:after」要素を含む見出しを「記事下編集」に入れると、本文自体が見れなくなるようなリスクが伴うのでご注意ください

記事下編集」では「:before,:after」要素を抜いた見出しタグを使用して、「{}デザインCSS」には「:before,:after」付のタグを使用すると、PC版だけに適用されスマホ版のデザイン崩れも起きないので、私はその方法をとっています。

  • 昨日より、「記事上編集」なる新機能が追加されていますが、そちらでもコードが上手く反映されるかどうかは、未検証なので分かりかねます。

それでは、楽しいブログライフを!f:id:lunasaurus:20140127135712g:plain



基礎から覚える、深く理解できる。 Webデザインの新しい教科書

基礎から覚える、深く理解できる。 Webデザインの新しい教科書