管理画面
new« 2017.10 »old
  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31
※初めてお越しの方は「このblogについて」をご一読ください。
中国にて。。。
<< prev(new)
お風呂
next(old) >>
実験中におかしな記事を見せられたタイミングの悪い読者様、
いらっしゃったらごめんなさい^^;

追加で文字の色指定を読み込んでみて、
上手く反映されるか、色々いじって表示を確かめてみていました。

以下、何をやっていたのか
自分の覚書も兼ねてつらつらと書いていきますが、

CSS に興味が無い方には、つまらないし、
「CSSって何?」な人には意味不明な内容だと思われます。

例によって、ダラダラ長いだけで 大した内容ではありませんし、
興味の無い方は、以下はサクッとスルーして、
明日の“フツーな内容の記事”の更新をお待ちください(笑)

+-+-+-+-+-+-+-+-+-+-+

これまで、文中の文字の色指定などは、
その都度直接タグで style="ほげほげ" と決め打ち指定をしていたのですが、

これだと、
白っぽい背景の時にちょうど良い色指定が、
黒っぽい背景のデザインに模様替えした際に読み辛くなる
という難点がありまして。

そのために、
ハロウィンなデザインに模様替えした際にも、本当は 本文の部分も真っ黒で不気味な感じにしてしまいたかったのですが、
過去記事が読めなくなるのはなぁ…と、いう理由から
仕方なく、明る目の色の背景画像を敷いたんですよね。

でもやっぱり、
決め打ちじゃなく 後からCSSいじるだけで一括変更出来る方が便利だなぁと。


元々、
他のblogや、細々とやっている自サイトの日記(←blogではない、旧式ですw)では、
CSSファイルに
このデザインの時は
 「青」と指定したらこの色、
 「ピンク」と言えばこの色
 「小左」と言えば、文字小さめにして左にちょっと隙間を空ける
ってなことを予め記述しておいて、

実際に記事の本文中では、
<span class="青">この部分青字</span>
のようなタグを書いて文字装飾をしていました。
(実際には class名は全部アルファベットです)


こうしておくと、
模様替えをした際に、CSSの独自文字色指定部分(とでも言えば良いのかな^^;)を
その背景色に合わせた指定に変更すれば、
過去ログまでさかのぼって、ぜーんぶ
青と指定しておいた文字は、その背景色に合った青
薄めの色としておいた文字は、背景色に近い色
と、一括で変更が出来るし、

記事を書く際に
「青くしたい時は カラーコード何番だっけ?」と過去記事を掘り返したりメモを見たりしなくても、
自分の設定したclass名だけ覚えていればサクサク書き進められる。
(私、blogサービスの提供しているエディタの文字装飾ボタンは一切使わず、ゴリゴリ自分でタグ書いてっちゃう派です)


何十色も使い分けたいんだったら面倒ですけれど、
文中で使いたい色バリエーションなんて、せいぜい4・5色ですし、
この方式の方が、断然楽チン♪

+-+-+-+-+-+-+-+-+-+-+

ところが、
アメブロの場合、
スマホや携帯版のデザインは「与えられている物を適用するだけ」で、
カスタマイズが出来ないので、
このような独自の文字装飾class指定が出来なくて。

PCでは指定出来ますが、それをやっちゃうと、
PCから読んだ時はカラフルな文だったり、一部小文字・大文字になっていたりするのに、
携帯・スマホからのアクセス時は文字装飾一切無しの黒文字が並ぶだけ...
になっちゃうのです。

それは、ヤダナー...



ってなわけで、
これまで、しぶしぶ各記事でその都度 必要な部分だけ直接文字装飾タグをつけていたのですが、

こーんな情報を発見しまして。

スマホ版カスタマイズ~全体背景ver.~緑色を変えたい!』By soleil test blog さん
(無断リンクです、ゴメンナサイ)

こちらの↑記事では、背景色だけを変えていますけれども、
この手法を拝借すれば、スマホ版にも 独自文字色指定反映出来るんじゃない??

という訳で、
実際に上手くいくのか、実験しておりました。



結果は、


ブラウザのユーザエージェントを変更してAndroidやiPhoneのふりして閲覧した場合と、
私のスマホでは、
バッチリでした (* ̄ー ̄)v

ガラケーで、携帯版を見た時にどうなのかは判んない…
そっちも効いてると良いんだけど。

+-+-+-+-+-+-+-+-+-+-+

各記事末尾のランキング投票バナーと一緒で、
各記事を投稿する度に、手動で外部CSS読み込みタグを貼り付けないといけないのが面倒ですけど、
文中でチマチマ色指定打つよりは断然楽だし、
どうせ今だってランキングバナーも手動で文末に貼ってるので、
貼るものが1行増えたって手間は変わら~ん



というわけで、
この記事以降は独自文字色指定CSS使用なのです。


過去記事は、そのうち気が向いたらポチポチ…やるのか?
6~10月の約5か月分

・・・結構あるな orz




【 追 記 2014.2.11 】

の過去記事分の修正は、
やっぱり全部一気に修正するのは面倒なので
新しく記事を投稿する際に過去記事へのリンクを貼る時に、その過去記事だけ修正してます(;´▽`A``


さて、
以下が追記の本題。

本文中で、「参考にした」と文中にリンクを貼った「soleil test blog」さんが無くなってしまったようなので、
自分用記録も兼ねてメモ。

アメブロのhtmlソースを覗くと、冒頭のhtmlタグが
PC版では
 <html lang="ja" ~略~>
となっているのに対し、
携帯・スマホ版では
 <html>
となっている。

これを利用して、外部CSSに
html:not([lang]) { font-size:13px; }
html:not([lang]) body{ background-color:#ffc; }
のように、
 「html タグに lang が含まれていなかったら、このスタイルを適用」
という形式で、携帯・スマホに適用させたいCSSを書いて保存し、

記事を投稿する際に冒頭に
 <style type="text/css"><!--@import url(外部cssの場所);--></style>
と書いておけば、
その記事を表示するページ内でだけは、自分の書いたCSSも適用され、
モバイル端末からの閲覧時にも、多少のカスタマイズは出来ますよと。

ただしこの手法は、
外部にCSSファイルを置いておけるようなサーバをお持ちの方に限られます。


PC版だけをいじりたい人なら「フリープラグイン」にて読み込んでおけば、各記事冒頭に個別で読み込みタグを書く必要が無いけれど、
「フリープラグイン」は、PC版にしか存在しないので、
携帯・スマホ版にも適用させたい場合は、いちいち各記事に手動で書くしかないです。



    にほんブログ村 その他日記ブログ その他40代女性日記へ    
     ↑ ポチッと応援 ↑ お願いします!m(_ _)m
※初めてお越しの方は「このblogについて」をご一読ください。
同カテゴリの記事
2013.10.28(Mon) 17:17  |  - IT系ネタ その他  |  Comment(2)  |  TB(0) 
存在しない記事です。
(予約投稿記事のため まだ表示出来ない という場合もあります)
中国にて。。。
<< prev(new)
お風呂
next(old) >>
+--- コメント ---+
1. 無題
ふむふむふむ 
ボナロンさん、色々いじってるんですね~
私のブログも、スマホやガラケーで見るとどうなってるのかしら?
PCのことしか考えてなかったわ~(^^ゞ
>エディタの文字装飾ボタンは一切使わず、ゴリゴリ自分でタグ書いてっちゃう
なんと!そんな書き方を!(@_@)
私は、エディタ使ってしか書いてませ~ん
でも、たまにアッチコッチ文字装飾したり、取り消したり、コピペで移動してたりを繰り返してると、なんだか表示がおかしくなることがあるんですよね~
(たぶん色々やりすぎで、タグが美しくない状態になってる)
そういう時は、タグ編集でいじって、すっきり記述し直してみたりはしますけど・・・まぁその程度
CSSは、たぶんいじりだしたらハマっちゃって、時間がいくらあっても足りなくなりそうな気がするので、足を踏み入れてないわ~(笑)
2013.10.28(Mon) 20:03  |  URL  |  けろまま  [ 削除]
2. *- けろままさん -*
スマホで見ると、広告だらけでウンザリしますよー(;´▽`A``
(でも、何ともならないので放置/苦笑)
 > エディタの文字装飾ボタンは一切使わず
これはですね、
blogの投稿欄にいきなり書き始めると、
 途中で調べ物をしようとして、ついウッカリ書きかけの投稿ページから違うサイトに飛んで、そこまでの投稿がパァ
とか
 隣のタブを閉じるつもりが、ついウッカリ投稿ページのタブ閉じちゃってパァ
とか
 よし、出来た!と投稿しようとしたらメンテ画面に飛んでパァ
とか
 よし、出来た!と投稿しようとしたら、ブラウザがトラぶってフリーズしてパァ
とか、
前blogやmixiで何度もいろいろ痛い目見て来てるので(笑)、
投稿前の文章入力には、ブラウザを使わずテキストエディタに書くようになったのですよ。
全文書きあがったところで、投稿ページにコピー&ペーストでペンッと。
そうすると、
書いている最中には文字装飾ボタンが使えないので、自然と手動タグ打ちに。。。
一緒にカスタマイズにハマりましょうよ~(笑)。
けろけろデザインをご自分で設定なさってる時点で、充分足は踏み入れていらっしゃるじゃぁありませんか。
そのまま是非こちら側の世界(?)へ。。。ニヒヒヒ( ̄m ̄*
2013.10.28(Mon) 20:59  |  URL  |  ボナロン  [ 削除]

コメントの投稿

※管理人の承認後に表示されます (即時反映はされません)
※欄は入力必須です
(※)
(←出来るだけ入力していただけると助かります)
(※)

 (公開は自己責任で)
(※)
 
 ← 内容を秘密にする場合はチェック
初めて投稿される方は、お手数ですが 「このBlogについて」内の該当項目をご一読ください m(_ _)m

Trackback

一般:http://bonadiary.blog.fc2.com/tb.php/3688-9eba75f3
FC2ブログユーザ:この記事にトラックバックする

Arcive


↑見たい年をクリックすると展開します

Search

(チェック無だとand検索です)

Trackback

QRコード

QR

RSS


 

Twitter

About me

ボナ

Author:ボナ
自分の欠点は棚に上げ、上から目線で毒を吐いてばかりいるover40のバツイチ(子無し)。そんな奴だから友達は少ない(笑)。
20代前半からリウマチ持ちだたりする。
※リウマチに関する話は ほとんどしません。病気についての詳細な情報が欲しい方はどうぞ他をお探しください

「初めまして」な方は、お手数ですが「このBlogについて」をご一読ください m(_ _)m

ブロとも

交流のある人のみお受けしています。
申請をする前に、当blogの「ブロともについて」をご一読下さいm(_ _)m

Mail

ボナ宛のメールはこちらからどうぞ。
* の付いている欄は入力必須項目です。

※宣伝お断り※
出来るだけお返事を返すようにいたしますが、 都合により、記事へのコメントなどで返信する場合や、返信が出来ない場合もあることをご了承下さい。

Blog村ranking 参加中

[ ブログ村 Ranking ]

BlogRanking参加中

記事 ranking

応援お願いします☆

更新の励みになります。
  にほんブログ村 その他日記ブログ その他40代女性日記へ
 ↑ ↑ ↑
ポチッと応援お願いします!m(_ _)m

ブログサークル

copyright ©2017 ぼな日記 all rights reserved. (since 2008)