10分でわかるかもしれない ブログの文字装飾のためだけのHTML講座

0

    こんにちわ、ちかです

    今日の日記の目標は

    とある生徒様が
    ブログ文字装飾
    CSSリファレンスを見て自由にできること

    です。

    でわでわさっそく...


    まずは span タグを使った例を見てみましょう。

    HTMLソース

    これは<span style="color:red;">赤文字</span>です

    ブラウザでの表示

    これは赤文字です

    span タグ自身に意味はありません。が
    style="..." のところにスタイルを指定することで
    <span> と </span> に囲まれた範囲を装飾することができます。

    スタイルの宣言は
    プロパティ (上記例では「color」) 半角コロン (:) 値 (上記例では「red」) 半角セミコロン (;)
    をつなげて指定します。

    style="(プロパティ):(値); (プロパティ):(値); ..."

    スタイルに指定できるプロパティをいくつか紹介するので
    下の [HTMLソース(S)] を編集して試してみてください。

    プロパティ指定可能な値(例)意味
    color

    red

    blue

    #f96

    #00ccff

    文字色
    background-coloryellow
    lime
    cyan
    #ffccff
    背景色
    font-size

    30px

    80%

    large

    文字サイズ
    border1px solid red
    2px dotted #00ff00
    境界線
    (線幅, 種類, 色 を指定)
    text-decoration

    overline

    underline

    line-through

    下線・上線・取り消し線など

    HTMLソース(S)

    いろいろ<span style="color:blue; font-size:20px; background-color:cyan; border:1px dashed green;">文字装飾</span>してみましょう

    ブラウザでの表示

    いろいろ文字装飾してみましょう

    ※ 色について

    色の指定は
    white, black, blue などの色名指定と
    #fff のような [(シャープ)(赤の強さ)(緑の強さ)(青の強さ)] による指定ができます。
    後者の場合、(赤)(緑)(青) は1桁または2桁の16進数で指定します。
    詳しくは HTMLリファレンス・カラー編 などを参照してください。


    さてさて
    ひととおり試したら
    今度は上の [HTMLソース(S)] の
    <span> と </span> を
    <p> と </p> に変えてみてください。

    p タグは段落を意味します。
    <span style="border:1px solid black;"> は Word でいう「文字罫線」に
    <p style="border:1px solid black;"> は Word でいう「段落罫線」に
    それぞれ対応すると思って問題ないです。

    (ちかは背景色とか境界線とかは p タグに設定して使うことが多いです。)


    span タグ、p タグ、style 属性の指定方法を見てきましたが
    ここまでくれば
    あとは スタイルシートリファレンス を見て
    好きなように装飾できるかと思います。
    できなかったらすみません(苦笑)

    次は RINO さんです


    JUGEMブログの表示をPC版からスマホ版へ切り替える

    7

    こんにちわ、ちかです

    iPhone/AndroidでのJUGEMブログの表示は
    スマホ版からPC版に切り替えることはできますが
    PC版からスマホ版に戻す方法が明示されていません

    Cookieをクリアすれば戻ります
    たかが表示切替のためにCookieをみんなクリアするなんておかしいですよねぇ

    なので
    ちょっとソースを調べてみました。

    PC版への切り替えは
    pcview_on() を呼ぶことで行われています。

    function pcview_on(){
        document.cookie = "iphone_pcview=on";
        document.cookie = "android_pcview=on";
        window.location.reload();
    }

    ./templates/smartphone/js/smart_phone.js ※ スマホでのみアクセス可

    ということは
    Cookie "iphone_pcview", "android_pcview" を削除すれば
    スマホ版に戻ります!

    ということで
    スマホ版に切り替えるスクリプトを作りました

    スマホ版

    スクリプトソース:

    (当サイト以外の) JUGEMブログ読者さんへ:

    上記スクリプトをブックマークレットにしておけば
    PC版からスマホ版へいつでも切り替えられるようになります

    ※ iPhone (Safari) でのブックマークレット登録方法は次のリンクから↓
    ブラウザ「Safari」の使い方。Safariを格段に強化する「ブックマークレット」編。

    JUGEMブログオーナーさんへ:

    管理者ページの [デザイン] - [HTML・CSS編集] で
    上記スクリプトを実行するリンク (下記ソース) をどこかに配置しておけば
    PC版からスマホ版へいつでも切り替えられるようになります

    ソース:

    HTMLを直接編集しなくても
    管理者ページの [デザイン] - [フリースペース] で
    フリースペースの内容欄に上記ソースを貼り付ければ
    同様にスマホ版へ切り替えられるようになります

    【JUGEM】スマホ版への切り替え【フリースペース】

    ※ PCからアクセスしてもスマホ版への切り替えリンクが表示されちゃいますが。。

    次は RINO さんです

    関連記事


    ブログの文章に背景色と境界線をつけるブックマークレット

    0

      こんにちわ、ちかです

      ちかのブログの文章には
      背景色がついてたり
      罫線 (境界線) が引かれてたりしますよねぇ

      ですが
      JUGEMブログのWYSIWYGエディタには
      背景色・境界線を設定する機能がありませぬ。。

      それで

      なんかちかだけズルイ

      って思っちゃうひとのために
      ブログに背景色と境界線を設定するスクリプトを作ってみました

      背景色と境界線を設定  ※ Internet Explorer 専用です (IE7 以降)

      つかいかた (おためし)

      1. いま見えているブログ内の文字列を選択して、上のスクリプト (リンク) をクリックします。
      《→ ウィンドウの右上に設定画面が出てきます。》

      2. 背景色 (background-color) ・境界幅 (border-width) ・境界色 (border-color) を指定して [OK] ボタンを押します。
      《→ 選択した文字列に背景色と境界線が設定されます。》

      つかいかた (ブログ投稿)

      1. 上のスクリプト (リンク) をお気に入りに登録します。以下はその手順。
      (1) スクリプトのリンクを右クリック → [お気に入りに追加]
      (2) (「安全でない可能性があります。続行しますか?」って聞かれたら [はい])
      (3) (呼び出しを簡単にするために、作成先を「お気に入りバー」に変更)
      (4) [追加]

      2. JUGEMブログ編集画面 (WYSIWYGエディタ) で、入力した文章を選択して、お気に入りからスクリプトを実行します。
      《→ 背景色と境界線が設定されます (アップされるブログにも反映されます)。》

      ((こういうのって、需要、あるのかな??))

      でゎでゎまたね〜


      ユーザはあなたのことを気にかけていない

      0

        どうして誰も自分のブログを読んでくれないのか?

        1. あなたは自分の裸の写真をアップするルックスのいい女性ではない。

        2. 彼らが自分のためになると思うものがない。

        これはユーザが何も気にかけないということではない。

        要点: ユーザは自分のことを気にかけるほどには、あなたのことを気にかけはしない。

        ユーザはあなたにそこまで興味を持っていないということだ。個人的に取らないでほしい。単にそういうものなのだ。あなたの書いていることが、

        • 彼らの問題を解決する
        • 有用な情報を提供する
        • 彼らを楽しませる
        • 彼らに自分は最高だと感じさせる

        ・・・のでない限り、ユーザがそれについて気にかけると期待するのは合理的ではない。

        ユーザはあなたのことを気にかけていない

        こんにちわ、ちかでございます

        私はこのアーティクルが大好きです

        おもしろい!

        的を射てる!

        そしてなにより、

        文章が短い♪

        このアーティクルの要点

        ユーザは自分のことを気にかけるほどには、あなたのことを気にかけはしない。

        だそうですが、
        自己中心性バイアスとかなんとかっていう認知バイアスを考慮すれば、

        ユーザはあなたが思っているほどには、あなたのことを気にかけはしない。

        とも言えるんじゃないかと思います。


        ここから私が導く若干ムリヤリ感のある帰結は

        あなたのことを綴ったブログを読んでくれるひとは、あなたのことを気にかけている。

        ということです。

        気にかけている、と言っても、
        次に会うときの話のネタにするため、なのか、
        紛争が起きたときに「ブログであぁ言ってたじゃないか!」と証拠をつきつけるため、なのか、
        それはわかりませんけどね

        もしあなたのことを気にかけていない読者を増やしたいのであれば、読者のために書く必要がある、というだけのことです。
        キャシー・シエラの (ちょっと長い) アーティクルが参考になると思うので、一部引用してみます。

        • あなたはいつも自分のためにブログを書いているべきだが、より多くの読者を得るには、彼らのためにも書くべきなのだ。
        • 読者たちには為し得る(読み得る)あらゆる選択肢がある。それにもかかわらず私たちのブログを訪れてくれる人がいるというのは、そのこと自体すごいことなのだ。
        • どんな知識であれ、与えられるものは与えてしまおう。
        • 量をこなそうとするのでなく、質を保つことに気を使おう。
        • 読者のために書くというのは、読者の耳に心地良いことを書くというのと同じではない。
          誰もがあなたの書くことを気に入っているなら、それはたぶん月並みなのだ。
        • 私たちのことではなく、彼らのことを話すのだ。

        ブログでグローバルマイクロブランドを築くための7つの美徳

        私は気にせずマイペースにこぢんまりとやりますけどね


        ブログマナー

        0

          こんにちわちかです
          今日ハロー!の日ですね (だから何ってこともないですけど)

          ブログマナーというと、
          著作権うんぬんとか、
          個人情報うんぬんとか、
          コメントレストラックバックうんぬんとか、
          そういうムズカシイ話なりそうですが、、、

          ちか主張もっとずっと単純なことです。

          下線を引かないこと!

          インターネットに慣れ親しんだひとは、下線見るとクリックしたら何か起こるんじゃないかと思うものです。

          クリックしても何も起こらない下線付き文字列というのは、言うなれば ↓↓こういうもの↓↓ です。

          あそこドア押して引いて開かないんだけど、どうなってんの??」

          『あぁアレね〜、ドアの絵ドアノブつけてあるんだよ

          はぎゃ――――――ッ!?

          混乱の元なので、 こんなボタン見かけても・・・

          押すなよ! 押すなよ! 絶対に押すなよ!

          押しちゃうと、どれリンクどれリンクじゃないんだか分かんなくなっちゃうんだからッ!

          以上ちか個人的な見解です。
            一般的ブログマナーというわけではありません
            別に下線を引いたって誰も怒んないよねぇ

          そんなこんなで
          次回は シンメイ さんです



          教室情報

          無料体験申込



          ハロー!パソコン教室
          イトーヨーカドー大森校
          〒143-0016
          大田区大森北2-13-1
          イトーヨーカドー大森店3F

          お問合せ(お電話)
          03-3762-8600

          営業時間などの詳細はこちらをご覧ください

          ハロー!パソコン教室イトーヨーカドー大森校無料体験レッスンのお申し込みはこちらから

          ハロー!パソコン教室イトーヨーカドー大森校の地図

          MOS試験会場校

          大森校はこんなところ!


          明るく楽しいスタッフ達があなたのやりたいことを徹底的にサポートします!
          MOS資格も保持していますので、安心して何でもご質問ください!


          大森校ではMOS資格を取得された生徒様が多数いらっしゃいます!
          合格率100%を誇る教室で、あなたもきっと合格できます。

          安心の個別学習
          レッスンは集合形式ではなく、個別学習式。パーテーションで区切られた個別空間でご自分のペースでレッスンを受講いただけるのが人気の理由の一つです!

          雇用保険に加入している方へ
          教育訓練給付金制度のお知らせ
          教育訓練給付制度のお知らせ

          iPhone講座 開講中
          iPhoneの使い方を
          基礎から丁寧に学べます。

          最近の記事

          カテゴリ

          アーカイブ

          コメント

          時間割

          10:10〜
          11:10〜
          12:20〜
          13:20〜
          14:20〜 休み時間
          15:20〜
          16:20〜
          17:30〜
          18:30〜
          19:30〜
          20:30〜
          店舗都合により上記以外にお休みをいただく場合がございますので、ご来校の際は事前に教室までお問い合わせ下さい。

          その他のリンク

                  

          Microsoft Office Specialist

          サイト内検索

          その他

          携帯用QRコード

          qrcode

          PR