HOME
INDEX
LOG IN
SEARCH
よく検索されるキーワード
ブログカード
初心者向け
トラブル対処
RWD
Validation
SEO
Tips
Smartphone
Responsive
Playground
上級者向け
CATEGORY
テンプレート (101)
┣
ブログ内限定配布 (7)
┣
リリーステンプレート早見表(表示タイプ別) (1)
┗
配布終了・旧作 (24)
利用上のお願い (5)
テンプレ不具合・修正など (99)
よくあるご質問「お困りですか?」 (3)
┗
ご質問の前に (2)
FC2不具合情報 (26)
割と重要なお知らせ (53)
カスタマイズ (167)
┗
SNS (5)
FC2ブログのあれこれ (147)
webのあれこれ (101)
雑記 (18)
┗
雑談 (5)
未分類(個人的テスト等) (23)
The other way round
Home
›
コメント編集
大丈夫ですー。 お気に病まれませんよう ^^; > 欧文フォントと日本語フォントの大きさを分ける 結論を先に言いますと「できません」 で、申し訳ございません。 私「エフェクト」の存在をすっかり忘れておりました。 先回お尋ねの「<br>を入れて折り返しを操作する件」についても 今回の「フォントのサイズを分ける件」についても、 エフェクトを取り除く必要があります。 これはJSの関係上致し方ないことですので、そこをまずどうされるかお決めくださいね。 選択肢 ① ブログタイトルフォントを操作する = 右からスライドインするエフェクトを排除 ② ブログタイトルフォントの操作はしない = エフェクト温存 ======== ①を選択される場合の手順 現在のフォントサイズ指定をまずおさらいしてくださいね。 トップページ最初の1ページ目でのブログタイトルのご説明です。 Nostalgiaはレスポンシブデザインですので、画面幅に応じてブログタイトルフォントも徐々に小さくなるよう指定しています。 現在のえるてさんの指定は パソコンなど画面が大きいとき --- ここだけ指定の形式が異なりますので注意 42px 画面横幅1350pxを下回った時 32px 画面横幅1050pxを下回った時 27px 画面横幅730pxを下回った時 22px 上記の通り。 ですから修正すべき箇所は4箇所です。 #index-blog-title { でCtrl+F(Windows)/ Command+F(Mac) キー検索 されますと4つヒットします。 縦並びに書いてありますのですぐ見つかると思います。 最初の42pxの部分は font: bolder [斜体][斜体]42[/斜体][/斜体]px/1.2 'Playfair Display', 省略; こうなってます。42の部分がフォントのサイズ。 あとの3つはそれぞれ @media screen and (max-width: 数字px) { で括られています。 まずパソコンでの見た目を決めて(なるべく大きいブラウザサイズで) 少しづつ小さく調整し、最終的に画面730pxの時点で22pxになるようにされると良いと思います。 ===== この段階では欧文と日本語のフォントは同じです。 これから日本語フォントの方を小さくする処理に入りますが、その前にhtmlソース内から以下の項目を削除。 検索 <script src="//blog-imgs-82.fc2.com/v/a/n/vanillaice000/lettering_compress.js"></script> 上記を目印にひとかたまりの部位を[太字]削除[/太字]します。 スクショでご確認ください。 http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/a98ue9a_zpsm0e8922b.jpg さらにCSSソース内から以下を見つけます。 検索 #index-blog-title a, この項目の visibility: hidden; を[太字]削除[/太字]です。 ===== 続いて日本語フォントの処理。 検索 <h1 id="index-blog-title"> このすぐ下がこうなってますよね ↓ <h1 id="index-blog-title"> <a href="<%url>" id="text-effect">欧文 日本語</a> </h1> この段階で<br>による行指定が可能になります。 <h1 id="index-blog-title"> <a href="<%url>" id="text-effect">Fleursdeschamps<br>なげいれの花<br>二十四節気七十二候</a> </h1> こんな感じだと仮定して。 これを以下の通り直します。 <h1 id="index-blog-title"> <a href="<%url>" id="text-effect">Fleursdeschamps<br>[太字]<span id="change-font">[/太字]なげいれの花<br>二十四節気七十二候[太字]</span>[/太字]</a> </h1> ======= ここからCSS修正ですが、少し煩雑ですので注意して作業をすすめてください。 最初にフォントサイズを決めて行きました。 こんな感じになっているかと思います ↓ (一番最初の形式が異なるものはひとまず置いておきます) @media screen and (max-width: 1350px) { #index-blog-title { font-size: 35px; } } 上記に追加で @media screen and (max-width: 1350px) { #index-blog-title { font-size: 35px; } [太字] #change-font { font-size: 日本語フォントの大きさpx; }[/太字] } これを3つ全てに行います。 欧文よりも小さくされるならば、上にあるfont-sizeよりも小さな数字を。 最初の形式違いのものについてはスクショの箇所に スクショ http://i1236.photobucket.com/albums/ff443/oo0kim0oo/FC2%20temp/29fuhaio_zpse4n2ifcw.jpg これを追加 ↓ [太字]#change-font { font-size: 日本語フォントの大きさpx; }[/太字] ========= 以上です。 かなりややこしい作業ですが、まずはエフェクトをどうされるかご検討頂きまして、 作業する・しないをお決めくださいね。 最初のご質問時に気がつきませんで申し訳ありませんでした。 さぞお悩みになられたことと思います。 ホントごめんなさいね (*_ _) ちなみに私が拝見して 「バランスが悪いなぁ」 という印象はありませんけどもね。 この辺りは個々の感性、というところでしょうか。 あと、お花素敵すぎ(笑) 憧れます ( ゚Д゚)ノ
SECRET
SEND
DELETE