新着記事

2016.02.11 Thursday

JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


記事数が増えてきましたので、こちらにそれぞれのカスタム方法をまとめております。


カスタマイズは基本的にJUGEM+、有料版でしかできません。

趣味程度のブログだから有料版にするまでもないけれど、どうしてもカスタマイズはしたい……と言う方には、
朗報!アメブロのスマホ版CSSをカスタマイズする目からウロコな方法を試してみたョ!(外部リンク)
こちらの記事が参考になるかもしれません。アメブロについてですが、理屈はJUGEMでも同じのはず。(私は試していませんが…)
しかしこれだと記事本文はカスタマイズできても、記事一覧部分、要するにトップページは変更できないわけでして、あまり推奨はできないかも。興味のある方は試してみてください。

この講座では有料テンプレートを使用したカスタマイズが多くありますので、参考になられる際はどれでもいいので有料テンプレートを購入されておくことをオススメします。
有料テンプレートにする理由

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

講座リンク




カスタム別リンク










高血圧の原因lawson 個人サイト ふざけTEL 自作PC・▲リンクご当地ラーメン 通販/●リンク/バックリンク/肉 通販/
リンク
リンクシステム宮崎 不動産腕時計コスプレ焼肉 通販ハッピーメール公式


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント
初めまして。
最近、Jugemブログのスマホ表示に不満を抱き始め、何か解決策はないかと検索してこちらにたどり着きました。
Jugemブログのスマホ表示は画像がすごく小さいのが不満なのですが、カスタマイズで大きくすることは可能でしょうか?
現状では左右の余白が大きすぎるのですよね。Jugemからの引越しも検討したのですが、引越しも大変なので何とかJugemで解決できないものかと思っています。
  • Okada
  • 2016/04/05 7:06 PM
Okada様

はじめまして。

Okada様のブログ拝見させていただきました。
画像表示のCSSで、横幅が最大280pxになるよう指定してあるようです。

<head></head>間に

<style type="text/css">
<!--
.jgm_entry_desc_mark img {
max-width: 280px;
height: auto;
}
-->
</style>

と記述して、

max-width: 280px;
の280pxのところを好きなサイズにしてみてください。
画面いっぱいに表示させたい場合は
max-width: 100%;
にしてみるといいかと思います。

実際に試したわけではないのでこれで確実に直るかどうかはわかりませんが……よろしければお試しください。
  • うどんこ
  • 2016/04/05 9:29 PM
うどんこ様、丁寧にありがとうございます!

すいません、せっかく教えて頂いたのに、どの様に対処していいのかわからなくて...。

この件でJugemに問い合わせしたことがあるのですが下記の様な返答がありました。

「スマホ表示の時に配置している画像の大きさが小さく表示される
件につきましては、スマートフォンではテンプレートから画像がはみ出
さないよう、横幅を280pxに指定するCSSが設定されております。

このため、画像を大きく表示させるための設定のご用意はございません
ので、ご了承いただきますよう、お願い申し上げます。」
このJugem側の仕様をスマートフォンのフリースペース1の記述で何とか突破できないものかと思ってうどんこ様のブログにコメントさせて頂いたのです。

説明不足で申し訳ありません。
もし何か解決策があれば、ご教授いただければ嬉しいです。
お時間のある時で構いません。
初めてのコメントで厚かましいことばかり言ってすいません...。
  • Okada
  • 2016/04/05 10:38 PM
Okada様

説明不足申し訳ありません。
先程書きました、

<style type="text/css">
<!--
.jgm_entry_desc_mark img {
max-width: 280px;
height: auto;
}
-->
</style>

これをそのままコピーして、スマホ版のフリースペース1に記述するだけで、jugem側が指定しているcssを上書きすることが可能かと思います。
あ、そのままコピペと言っても、280pxの部分はお好きなサイズに変更してください。100%に指定すれば画面いっぱいになるはずです。

以下の説明はわからなければそのままで大丈夫ですが、今後いじることがありましたら参考までにどうぞ。

cssの優先度はbody内>head内>外部読み込みになっています。

jugemのデフォルトcssは基本的に外部読み込みですので、優先度は一番低いです。

フリースペース1はhead内をいじることができる部分ですので、ここに同じidやclassのcssを指定してやると、大抵のjugem側の指定は上書き突破することができるはずです。

当ブログで紹介しているカスタマイズ方法は上記のように、jugemがデフォルトで用意しているcssを上書きしていく方法です。

もし他にも、こんなことがしたいなどありましたらお気軽にご質問ください。
  • うどんこ
  • 2016/04/05 11:22 PM
うどんこさん、ご教授ありがとうございます!

早速、フリースペース1に入れて確認してみました。
最初400pxや320pxで試したのですが、変わらずで
100%でもダメでした。
小さくはなるのかな?と思い、180pxにしてみたら、小さくはなりました。
頑なに280px以上にならないように設定されているのでしょうかね?
もし、違う手立てがあれば、試してみたいので引き続きよろしくお願いします。
すいません。
  • Okada
  • 2016/04/06 7:56 AM
Okada様

よく見るとjavascriptでwidthの値が書き出されるようになってますね。
CSSだけいじっても無駄っぽいです。
解決策は……ちょっと色々検討してみますがもしかすると無理かもしれないのであまり期待せずお待ちください。。。
  • うどんこ
  • 2016/04/06 10:39 AM
そうですか、やっぱり厳しいですかね。
無理なら潔く諦めるので、うどんこ様の負担にならないようにしてくださいね。
ありがとうございます。
  • Okada
  • 2016/04/06 6:53 PM
はじめまして。
いきなりのコメント失礼致しますm(._.)m

ただ可愛くできるからと言う理由でいきなりJUGEMプラスを登録したのですが、PCの知識は小学生レベルの為、何時間も調べても全くタグの意味などがわからず「もう、JUGEMあきらめよう」と思っていた矢先こちらのブログにたどり着き、コピーするだけでとっってもわかりやすく、なんとか納得できるまでのデザインにできたところで
す。本当にありがとうございます!!本当に感謝です。

そしてあと一つわからない事があるのですが、、
こちらのブログはホーム画面に追加すると、オリジナルのアイコンがでてきますよね…?
そのやり方をぜひ教えて頂きたくて>_<

今のままだとホーム画面に追加すると、JUGEMのアイコンになってしまってるので…


恐縮ですがお時間あれば教えていただきたいです。

よろしくお願いします>_<
ちさと様

この度はご訪問&コメントありがとうございます!

このような記事が少しでもお役に立てたようで、ありがたいお言葉です。

今回ご質問いただいた件、恐らくファビコンのことだと思いますので、明日か明後日あたり簡単にコピペでできるよう記事をアップしたいと思います。

この度はお返事が遅くなってしまい、申し訳ありませんでした。
  • うどんこ
  • 2016/05/21 8:26 PM
お返事ありがとうございます!


やっぱりファビコンなのですね!
こちらも調べたのですが、
わからなくて断念しました…泣


お時間があるときで大丈夫ですので
記事楽しみにしています☆
  • 2016/05/22 3:19 PM
こんにちは、はじめまして。
かなり昔の記事に対して、突然のコメント失礼致します。

今度ブログを開設しようと決意し、スマホのテンプレの編集がどうにかできないものかと模索しているときにうどんこ様のブログに辿り着きました。
とても詳しい説明で、自分が作りたいなと思っていたデザインにかなり近づけることができ、とても感謝しています。

突然で申し訳ないのですが、どうしても出来ないため知恵を貸して頂けると嬉しいです。
有料テンプレートのトップページ下部にあるメニューボタンです。何もしていない状態でのボタンの色は自分でなんとか変更できたのですが

Category
 カテゴリ名  ▼
 カテゴリ名  ▼

上記のようにクリックして詳細が出てくる時のメニュー部分全体の色の変更をどういう風にすればいいのかがわからずにいます。
Category等の文字部分だけはリンク色の変更はできているのですが…。

色々ソースを見て試行錯誤してみましたが、ブログ編集は初心者なため元々どういう設定がしてあるのかが理解できず困っております。
もし分かる範囲でアイデアを頂ければとても助かります。
お時間がありましたらどうぞよろしくお願いします。
  • ささみ
  • 2017/03/27 9:16 PM

コメントする