個人投資家でも勝てる道 人の行く裏に道

個人投資家で儲かっている人は1割と言われています。個人で投資に勝つのは不可能ではありません。このサイトで勝つ方法を書いていきます。

The best way to Success

アフィリエイトだけでなく株式講座も

はてブロ アフィリエイト講座5 スマホブログの飾り付け

こんにちは、mymykenshinです。昨日のアフィリエイト講座4でPCのブログを美しくすることに成功できたと思いますが、じゃあスマホは?というと、イマイチのままですよね。でもスマホの方が重要なのです。私の1個目のブログも8割はスマホから見られています。

なので、PC版で満足してちゃいかんということです。

PR

 

①参考にしたブログ

やはり採用したHEY DUDEの作者が行っているカスタマイズが気になりますよね。そのページがこれです。

tsukuruiroiro.hatenablog.com

これを真似しながらやっていきましょう。

ちなみにはてなブログのスマホデザインのCSSがいじれるのは、pro版の人のみです。

8割が訪れるスマホ版がカスタマイズできるかどうかは大きいですよ。

②カスタマイズの基本

まずは背景画像の選定

タイトルを出すために「画像とテキストを表示」にクリック

ここまでは、無料版でもできます。

f:id:mymykenshin:20180808225150p:plain

次にタイトル下

PROって書いてありますよね。PRO版しかさわれなくて

「スマートフォン用にHTMLを設定する」にクリック

その下のボックスにカスタマイズのHTMLを書きまくる感じです。

f:id:mymykenshin:20180808225044p:plain

この中の書き込みはルールがあって、

<style type="text/css">

ではじまって、

</style>

で終わる。これは、どんどんつなげていい

このHTMLをインターネットで探しまくる感じです。

↓これも参考にしました。

www.junpeihazama.com

 

PR

 

③私が書いたHTML

1。まずはLITERALLYさんのカスタマイズ

デフォルトのフォントを「Avenir next」というフォントに変更してみる↓

BEFORELITERALLY,Blog.スマホ用のDESIGN

AFTERLITERALLY,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>

結果的にこんなになりました。

f:id:mymykenshin:20180808231626p:plain

 

昨日の時点では下の通りなんで、かなり良くなったと思います。

 

f:id:mymykenshin:20180808231905p:plain

 

ちなみにZENO TEALで作っているスマホ画面は

f:id:mymykenshin:20180808232141p:plain

④まとめ

以上。わかるように、色んなところから、ひっぱてきてペタペタ

はるだけです。

そして色々ためして自分のスタイルを作っていくわけです、頑張って

ください。

 

PR

 

 ※よかったらポチお願いします。


サラリーマン投資家ランキング

にほんブログ村 株ブログ サラリーマン投資家へ
にほんブログ村