見ることがありませんか？？
私のブログでも枠はたま〜に登場していますが、
枠で表示を区切る事が出来ると、非常に見やすくなります♪
今日は、
記事の中で説明文の部分を分りやすくしたい時、
ブログ内に、枠で囲んで表示できたらいいのにな〜というものがあった時に、
枠で囲んでしまう、囲い枠の作り方をお伝えしたいと思います(^-^)
枠は、自由形式でも、記事でも、ＨＴＭＬを入力できる所なら、
枠をつける事が出来ます(^-^)
まず、スタイルシートに枠を表示するためのタグを作成します。以下がタグの見本です(^-^)
.tensen{
border: 2px dotted #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
border: 2px dotted #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
以上、色別に分けて表示した、変更可能な部分ごと、お伝えしますね♪
●tensen・・・
この "tensen”という部分には、自分のわかり易い言葉を
半角で入力して下さい。（半角なら、何でも大丈夫です♪）
数字を入力すると、枠が反映されないブラウザがあるようです。ですので、数字は使わない方がいいかと思います(^-^)
●2px・・・
これは枠の線の太さ（幅）になります。
数値が大きければ、太い線になります。
線の種類によってはある程度の太さがないと分り辛いものもあります。
●dotted・・・
これが線の種類になります。
下記で種類ごとにタグを表示します(^ｰ^)
●#ff9966・・・
枠線の色です。
自分の好きな色に設定してください。
●5px 5px 5px 5px・・・
枠の中に入力した文字の位置を指定するための数値です。
全て同じ数値にする事で、上下左右、どこも枠から枠内の文字までの
幅が同じ幅となります。(枠をめいいっぱい使って入力した時）
これも、自分の好きなように、設定可能です♪
●#ccffcc・・・
枠の中の背景色です。
枠線の色と同じく、自分の好きな色に設定してください。
●370px・・・
枠の横幅です。
縦は、入力する文字数、行数によって、自動で変化しますが、
横は指定します。
自分のブログのコンテンツ部分（記事を表示する部分など）や、
サイドバーなど、
自分が枠をおきたいところの幅をチェックして、
その幅からはみ出さないように、数値を設定して下さい♪
以上でお伝えした部分を自分の好きな様に変更して、設定します♪
例として線の種類がどういった風にそれぞれ表示されるか、
そのタグの例と一緒に表示してみます(^-^)
破線を使った枠です。
.hasen{
border: 2px dashed #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
.hasen{
border: 2px dashed #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
直線を使った枠です。
.itisen{
border: 2px solid #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
.itisen{
border: 2px solid #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
点線を使った枠です。
.tensen{
border: 2px dotted #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
.tensen{
border: 2px dotted #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
2重線を使った枠です。
.nisen{
border: 3px double #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
.nisen{
border: 3px double #ff9966;
padding: 5px 5px 5px 5px;
background: #ccffcc;
width: 370px;
}
これらのタグをそのままコピーして、スタイルシートに貼り付け、
自分が変更したい所だけ削除して入力し直す・・・。
というやり方をするのが一番間違いがないかと思います(^ｰ^)
ちなみに２重線は、3px以上でなければ２重線にならない様です。2重線を使用したい場合は、
最低でも線の太さは3px以上に設定して下さいね♪
こうして作った枠を、実際にスタイルシートに設定して使うには
どうするか、お伝えしますね(^-^)
続きに行く前に、こちらもポチッとお願いします♪
「マイブログ」→「デザイン」→「デザイン一覧」と開き、自分の使用しているスタイルシートのタイトルをクリックします。
そうすると、スタイルシートが表示されますので、
スタイルシートの中でも邪魔にならない部分、
一番下にでも、上記でお伝えした様に作成したタグを貼り付け、
「スタイルシートを変更する」ボタンをクリックして、
スタイルシートの再構築を行ってください♪
以上で下準備は完了です(^▽^)あとは実際に枠を使いたい時に、
囲みたい文章の前後に以下のタグ、
%lt;div class="1sen">枠内に表示したい文章など</div>
と入力すれば、
スタイルシートに設定した枠がブログ上で表示される様になります♪
下線を引いた部分「1sen」は、タグの最初の部分、「自分の分り易い言葉を半角英数で・・・」と記した部分です。
以上のやり方で枠を表示させる事が出来るようになるのですが、・囲みたい文章の内容によって、枠を使い分けたい
・色々な枠線を使いたい
・色々な枠線の色や、背景色を使って、数種類のバージョンを作っておきたい
などという場合は、
スタイルシートに貼り付けるタグを、それぞれのパターンで作って、
スタイルシートに貼り付け、
最初の「自分のわかり易い文字を入力」する部分を
それぞれ変更して、囲み枠を使う時に使い分ければ、
1つのブログで数種類の枠を使い分ける事もできます(^ｰ^)
参考までに、カラーチャートは検索しても色々と出てくるのですが、
今回は
ここを使ってみました♪
使いたい色のコードを選択して、入力するスペースに
コードを入力すると、サイト内の背景が、入力した色に変化するので、
わかりやすいかと思います(^-^)
枠の場合、記事を投稿する前に「確認する」で確認しようとしても、
ブログにアップされるまで枠の確認は出来ません。
（枠なしの状態で表示されます）
なので、枠を使用した時は、投稿後に確認してみて下さいね♪
そんなに面倒な作業ではありませんので、色々な枠を作って、
個性のある見やすいサイトを作ってくださいね(o^∇^o)
少ない投資で 簡単なビジネス始めてみませんか？
一緒に稼いでみよう！という方はこちらからどうぞ♪
一緒に稼いでみよう！という方はこちらからどうぞ♪
タグ：囲い枠
どうですかお体の具合。
今日も暑いです~▽~;
みいもんさんの説明記事は
いつもホントに分かりやすいです^^
私はつい省略して書いてしまうので
「読み手側に立って」を
いつも意識しなくては・・・ですね^^
応援*^.^*ノ
みいもんさんのお陰で、わたしの
ブログも少しらしくなってきました。
ホントにいつもありがと♪
応援ぽちっ♪
思い出したんですけど、ワードの世界でも同じような機能があって、勉強したことありますけど、ブログとワードでは、全く機能が違いますよね！
ワードやエクセルもせっかくＰＣスクールに通って資格を取ったのでまた勉強しなおしたいなって思っているんですよ！
でもブログでオートシェイプで作成した図解をコピーして貼りたいとチャレンジしたことがあったけど、駄目でした（笑）
＞みいもんさんの説明記事は
いつもホントに分かりやすいです^^ ＜
(ﾉω`*)ﾉ" ﾝﾌﾌﾌﾌｯ
いつも長くなってしまうのですが、
分り易いと思っていただけてるなら
何よりです♪
体は・・・(-ω-;)ｳｰﾝ・・・という感じですね(~_~;)
酷くならないよう、無理せずやっていきます(^-^)
応援、感謝です(o*。_。)oペコッ
＞みいもんさんのお陰で、わたしの
ブログも少しらしくなってきました。
ホントにいつもありがと♪ ＜
いえいえ！！
私がどういおうと、実行して形にしているのはまやさんですよ(^-^)
プラス個性も出してるし♪
頑張って行きましょう＼(^o^)／
応援、感謝です(o*。_。)oペコッ
masaru です。
カスタマイズの参考になりますね。
やったことのない人にはわかりやすいと
思います。
応援済みです。
＞ブログとワードでは、全く機能が違いますよね！ ＜
そうなんですか〜。
私はワードは文章を作成したり、
表を作ったりする位で、難しい事はサッパリ(^▽^;)
＞ワードやエクセルもせっかくＰＣスクールに通って資格を取ったのでまた勉強しなおしたいなって思っているんですよ！ ＜
(*’▽’*)わぁ♪
資格持ってるんですか！！
私はホントのド素人で、ＰＣを何も知りませんでした(~_~;)
全て独学です(^▽^;)
＞でもブログでオートシェイプで作成した図解をコピーして・・・ ＜
・・・・？？？？
さっぱり何がなんだか？？？です(^▽^;)ｱﾊﾊ
＞カスタマイズの参考になりますね。
やったことのない人にはわかりやすいと
思います。 ＜
（〃￣∇￣ポ）
ありがとうございます！！
そう言っていただけると、長々と書いた甲斐がありますｗ♪
応援、感謝です(o*。_。)oペコッ
すごい！みいもんさん、体調どうですか？
こんなのあたしには面倒で記事にできないわぁ(*ﾟｰﾟ)ゞすご〜い！！
そうそう、アドセンスは一切広告もリンクの貼ってない
すっごくマニアックなお菓子の日記サイトを作りましたよ♪
あれで通るとはびっくりですよ♪
でも挑戦してみた甲斐がありました(*ﾟｰﾟ)ゞﾍﾍ
今日も暑い１日でした(>_<)
応援о(ж＞▽＜)ｙ ☆
＞わお！
すごい！みいもんさん、体調どうですか？
こんなのあたしには面倒で記事にできないわぁ(*ﾟｰﾟ)ゞすご〜い！！ ＜
o(*^▽^*)o~♪あはっ
ののさんらしい表現♪
ありがとうございます（*＾-＾*）
今日、薬が切れそうなのでもらってきました(~_~;)
あまりいい感じではないですが、ぼちぼちやっていきます(^▽^;)
＞そうそう、アドセンスは一切広告もリンクの貼ってない
すっごくマニアックなお菓子の日記サイトを作りましたよ♪ ＜
(゜ロ゜) ヒョオォォ！
そういうサイトの方がいいのか〜。
とにかく目的がしっかりしているビジネス外のサイトがいいという事かしら？？
いい情報、ありがとう♪
ホントに暑かったですね(>_<)
山形って、最高気温記録を持っているんですよ〜
以外でしょ！？ｗｗ
応援、感謝です(o*。_。)oペコッ
毎日、暑いですね。
リンクのブログタイトル変更しましたよ♪
みいもんさんは、どんどん進化されていますね。
囲い枠の説明も、とても専門的でありながら、分かりやすかったです♪
リンクのタイトル変更、対応してくださって
ありがとうございました(^▽^)
＞みいもんさんは、どんどん進化されていますね。
囲い枠の説明も、とても専門的でありながら、分かりやすかったです♪ ＜
（〃￣∇￣ポ）
ありがとうございます！！
専門的でしたか〜(*´ω`*)
私としては、自分がしてみたものを、
無我夢中で記事にしているので、
見てくださった方の感想がとても励みになります♪