新着記事

2016.02.11 Thursday

JUGEMスマホテンプレート徹底カスタマイズ講座その3〜デザインを変えていく方法〜


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. JUGEMスマホテンプレート徹底カスタマイズ講座その3〜デザインを変えていく方法〜


全てのカスタマイズ記事をまとめています。記事の投稿と一緒に更新します。↓
JUGEMスマホテンプレート徹底カスタマイズ講座まとめ



さてさて、前回まででスマホテンプレートのいらない部分をいろいろ削ったりなんやかんやしてまいりましたが、今回はいよいよ見た目を大幅に変えちゃうあれやこれやの講座に参りたいと思います。

最近ではPCよりスマホからのアクセスの方が圧倒的に多いというのに、JUGEMのテンプレートってホント不親切ですよねぇ。
毎月お金払ってフリースペースが開放るといったって、HTMLが直接いじれるわけでもない……。こんなの知識ない人には無理ゲーすぎるのぜ、JUGEMさんよぉ。


まあ文句を言ったところでどうしようもありません、仕様は変わらないのです。
そんなわけで今回もコピペでサクッとカスタムしてしまいましょう。

と、その前にこれから解説するものは全て
こちらのCSS記述方法
を参考にしてくださいね〜。

それから、私は基本的に有料テンプレートを使用してカスタマイズしていますので、無料テンプレートではできないことも色々あったりします。
300円くらい安いものですので、初期投資と思って課金してしまいましょうよ。(漂うステマ臭)

背景画像を消す



気に入っている方はいいでしょうが、これも表示速度が遅くなったりでいらないですよね。

/*背景画像消す*/
body{
background-image:none;
}


これで

消すことが出来ます。

また、背景画像をオリジナルのものに変えたい場合は
/*背景画像変える*/
body{
background-image: url("画像URL");
}


これでOKです。

有料テンプレートのトップに表示されている画像を消す



これですね。
まあ、気に入っている方はそのままでいいでしょうがオリジナルのタイトル画像を使いたいって方には非常に邪魔なものかと思います。

/*タイトル画像消す*/
.title {
display: none;
}


はい、これで消えました。


タイトル文字を消す


タイトル画像が消えたからと言ってもオリジナル画像を使いたい方にはまだまだ不満な点があるでしょう。

そう、こいつの存在です。
これさえ消してしまえばフリースペース2に好きなだけオリジナルの画像なりレイアウトなりを記述してやることができます。

/*タイトルテキスト部分消す*/
.title_txt {
display: none;
}


これでいかがでしょうか。


すっきりしすぎて不安になるくらいすっきりしました。なんか物足りないのでフリースペース2を活用してささっとタイトルを入れてあげましょう。

リストアイコン画像を消す


リストアイコン、有料テンプレートのものってどれもガーリーすぎて、男性の方には使いにくいですよねー。
ちなみにこれです。

うーーん、とっても女の子!!

/*リストアイコン画像消す*/
.box h2 {
text-indent: 0px;
background-image:none;
}


これで

消えているはずです。

ちなみにこのリストアイコン、記事本文中にも使われています。
厄介なことに(?)記事リスト一覧とはまた別のコードを記述しなければいけません。
/*記事本文リストアイコン画像消す*/
.entry_title_link {
text-indent: 0px;
background-image:none;
}


本文の方はこれでオッケー。

それから、アイコンを消すのではなくオリジナルのものに変えたいって方もいるかと思います。
その場合は以下で。

記事一覧リストアイコン変更

/*記事一覧リストアイコン画像変更*/
.box h2 {
text-indent: 20px; //テキストとアイコンとの距離を指定
background:url(画像URL) left top no-repeat;
-webkit-background-size: 15px auto; //アイコンのサイズ調整
background-size: 15px auto;
font-size:15px //テキストのフォントサイズ調整
}


記事本文リストアイコン変更

/*記事本文リストアイコン画像変更*/
.entry_title_link {
text-indent: 20px; //テキストとアイコンとの距離を指定
background:url(画像URL) left top no-repeat;
-webkit-background-size: 15px auto; //アイコンのサイズ調整
background-size: 15px auto;
font-size:15px //テキストのフォントサイズ調整
}



こんな感じになりました。

さてさて、長くなってしまったので、一旦ここまでにして続きは次回の記事でご紹介したいと思います!
お楽しみに!


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント

コメントする