こんにちは、mymykenshinです。昨日のアフィリエイト講座４でPCのブログを美しくすることに成功できたと思いますが、じゃあスマホは？というと、イマイチのままですよね。でもスマホの方が重要なのです。私の１個目のブログも８割はスマホから見られています。
なので、PC版で満足してちゃいかんということです。
PR
①参考にしたブログ
やはり採用したHEY DUDEの作者が行っているカスタマイズが気になりますよね。そのページがこれです。
これを真似しながらやっていきましょう。
ちなみにはてなブログのスマホデザインのCSSがいじれるのは、pro版の人のみです。
８割が訪れるスマホ版がカスタマイズできるかどうかは大きいですよ。
②カスタマイズの基本
まずは背景画像の選定
タイトルを出すために「画像とテキストを表示」にクリック
ここまでは、無料版でもできます。
次にタイトル下
PROって書いてありますよね。PRO版しかさわれなくて
「スマートフォン用にHTMLを設定する」にクリック
その下のボックスにカスタマイズのHTMLを書きまくる感じです。
この中の書き込みはルールがあって、
<style type="text/css">
ではじまって、
</style>
で終わる。これは、どんどんつなげていい
このHTMLをインターネットで探しまくる感じです。
↓これも参考にしました。
PR
③私が書いたHTML
１。まずはLITERALLYさんのカスタマイズ
デフォルトのフォントを「Avenir next」というフォントに変更してみる↓
BEFORE▶LITERALLY,Blog.スマホ用のDESIGN
AFTER▶LITERALLY,Blog.スマホ用のDESIGN
<style type="text/css">
body {font-family:"Avenir Next", sans-serif;}
</style>
記事中の見出しを変える
<style type="text/css">
.entry-content h3 { color: rgb(59, 66, 126);/*文字色*/
background: rgb(243, 242, 252); /*背景色*/
padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/
border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}
デザインにめりはりをつける。
</style>
<style type="text/css">
.list-entry-article .thumb-image
{
width: 100px; /*サムネイル画像の横幅*/
height: 100px; /*サムネイルが画像の縦幅*/
border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
}
.date
{
color: white; /*日付の文字色*/
background: #444B99;/*日付の背景色*/
padding: 0px 10px;/*日付の文字まわりのスペース*/
}
</style>
2.続いてAWSOMEさんの
面倒なんで、そのままコピペして文字の大きさなどを微調整
<style type="text/css">
#globalheader-container {
display: none;/*はてなブログヘッダーリンクを消去 */
}
.header-blog-icon {
display: none;/*デフォルトの丸いアイコンを消去*/
}
#container {
padding-top: 0px;/*上の余白を消去*/
}
#header {
width: 100%;/*横幅いっぱいに設定*/
padding-top: 1px;/*タイトル上部にスペースをつくる*/
padding-bottom: 7px;/*タイトル下部にスペースをつくる*/
margin: 0px;/*ヘッダーまわりの余白を消す*/
background: #000000;/*ヘッダーの背景色*/
}
#header #title a{
color: #ffffff;/*タイトルの文字色*/
font-size:25px;/*タイトルの大きさ*/
}
#header #blog-description {
color: #ffffff;/*ブログ説明の文字色*/
font-size:9px;/*ブログ説明の大きさ*/
}
</style>
結果的にこんなになりました。
昨日の時点では下の通りなんで、かなり良くなったと思います。
ちなみにZENO TEALで作っているスマホ画面は
④まとめ
以上。わかるように、色んなところから、ひっぱてきてペタペタ
はるだけです。
そして色々ためして自分のスタイルを作っていくわけです、頑張って
ください。
PR
※よかったらポチお願いします。
