青ボックスに記事を入れる

青いボックス

坊ちゃんより

学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。

CODE
HTML

   <div class="decB">
    <h4>坊ちゃんより</h4>
    <img src="../images/mutoh.gif" style="float:right;margin-left:5px;">
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:120,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
     <p>学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。
     </p>
    </div>
   </div>
   <div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

a.truncate_more_link{
    float:right;
    margin-top:-13px;

    margin-right:10px;
}
/*青*/
.decB {
    padding: 0.5em 1em;
    margin: 1em 0;
    font-weight: bold;
    color: #000000;/*文字色*/
    background: #fcfcf1;
    border: solid 4px #0d5da0;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.decB p {
    margin: 0; 
    padding: 0;
    font-weight: normal;
}
     

水色の斜線の背景のボックス

坊ちゃんより

 吾輩は猫である。名前はまだ無い。  どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。

CODE
HTML

   <div class="divWaterS3">
   <h3>坊ちゃんより</h3>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p> 吾輩は猫である。名前はまだ無い。
    どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。
       </p>
    </div>
   </div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.divWaterS3 {
    padding: 0.5em 1em;
    margin: 1em 0;
    color: black;
    background: lightcyan;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d6eaff 3px, #d6eaff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#d6eaff 3px, #d6eaff 7px);
    box-shadow: 0px 0px 0px 5px #d6eaff;
    border: dashed 2px darkblue;
    border-radius: 5px;
}
.divWaterS3 p {
    margin: 0; 
    padding: 0;
}
     

青地にステッチのボックス

吾輩は猫である

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している 。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。 この書生というのは時々我々を捕えて煮て食うという話である。 しかしその当時は何という考もなかったから別段恐しいとも思わなかった。 ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。 掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。 この時妙なものだと思った感じが今でも残っている。

CODE
HTML

   <div class="divBlueS">
   <h3>吾輩は猫である</h3>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
     <p>
          吾輩は猫である。名前はまだ無い。
    どこで生れたかとんと見当がつかぬ。
   何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している
   。吾輩はここで始めて人間というものを見た。
   しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
   この書生というのは時々我々を捕えて煮て食うという話である。
   しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
   ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
   掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。
   この時妙なものだと思った感じが今でも残っている。
     </p>
    </div>
   </div>
   <div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.divBlueS { 
  margin: 15px 0 15px;
  padding: 1em 1em;
  background:#274a78;
  color:#f8fbf8;
  box-shadow: 0 0 3px 3px #274a78;
  border: 2px dashed #f8fbf8;
  border-radius:5px;
}
.divBlueS h3{
  color:#ff55aa;
}
.divBlueS a{
  color:#ff55aa;
  font-weight:bold;
}
     

青のタイトル欄付きボックス

吾輩は猫である

吾輩は猫である。名前はまだ無い。  どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。

CODE
HTML

   <div class="divBlueT">
   <h3 class="divBlueT-title">吾輩は猫である</h3>
   <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>吾輩は猫である。名前はまだ無い。
    どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。<br />
       </p>
    </div>
   </div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.divBlueT {
    margin: 1em 0;
    border-right: solid 1px darkblue;/*線*/
    border-bottom: solid 1px darkblue;/*線*/
    border-left: solid 1px darkblue;/*線*/
    background: aliceblue;
    border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    -webkit-border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
    -moz-border-radius:  0px 0px 5px 5px / 0px 0px 5px 5px;

}
.divBlueT .divBlueT-title {
    font-size: 1.2em;
    line-height:2em;
    background: darkblue;
    padding: 4px 4px 4px 15px;
   /* 時計回りに上、右、下、左*/
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;

}
.divBlueT p {
    padding: 5px 15px;
    margin: 0;
}
.divBlueT a{
    margin-top:-20px;
}
     

青のタイトル欄付きボックス2

吾輩は猫である

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。

CODE
HTML

   <div class="divBlueT2">
    <div class="divBlueT2-title">吾輩は猫である</div>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
    <p>吾輩は猫である。名前はまだ無い。
   どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。</p>
    </div>
   </div>
   <div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.divBlueT2 {
    margin: 1em 0;
    background: aliceblue;
    border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    -webkit-border-radius: 0px 0px 5px 5px / 0px 0px 5px 5px;
    -moz-border-radius:  0px 0px 5px 5px / 0px 0px 5px 5px;

}
.divBlueT2 .divBlueT2-title {
    font-size: 1.2em;
    background: royalblue;
    padding: 4px 4px 4px 15px;
   /* 時計回りに上、右、下、左*/
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 5px 5px 0px 0px / 5px 5px 0px 0px;
/*水平方向に 左上、右上、右下、左下 / 垂直方向に 左上、右上、右下、左下*/
    -webkit-border-radius: 5px 5px 0px 0px / 5px 5px 0px 0px;
    -moz-border-radius:  5px 5px 0px 0px / 5px 5px 0px 0px;
}
.divBlueT2 p {
    padding: 15px 20px;
    margin: 0;
}
.divBlueT2 a{
    margin-top:-20px;
}
     

青の見出し付きボックス

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。

CODE
HTML

   <div class="midashiBoxB">
    <span class="midashiBox-title">吾輩は猫である</span>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。</p>
     </div>
   </div>
   <div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.midashiBoxB {
    position: relative;
    margin: 2.5em 0 1em;
    padding: 0.5em 1em;
    background:#fcfcf1;
    border: solid 3px mediumblue;
}
.midashiBoxB .midashiBoxB-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: mediumblue;
    color: #ffffff;
    font-eight: bold;
    border-radius: 5px 5px 0 0;
}
.midashiBoxB p {
    margin: 0; 
    padding: 0;
}
     

青の見出し付きボックス2

吾輩は猫である

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。

CODE
HTML

   <div class="midashiBoxB2">
    <span class="midashiBoxB2-title">吾輩は猫である</span>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
       <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌のひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始めであろう。この時妙なものだと思った感じが今でも残っている。声を出す技術的な講義もあります3が、模擬面接や自己PRの仕方も丁寧に教えてくださいます。</p>
     </div>
   </div>
   <div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.midashiBoxB2 {
    position: relative;
    margin: 1em 0;
    padding: 25px 10px 7px;
    background:ghostwhite;
    border: solid 2px royalblue;
}
.midashiBoxB2 .midashiBoxB2-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: royalblue;
    color: #ffffff;
    font-weight: bold;
}
.midashiBoxB2 p {
    margin: 5px 0 5px 0; 
    padding: 0;
}
     

fieldset風の囲みボックス

坊ちゃんより

学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。

CODE
HTML

   <div class="fsetBoxB">
    <p><span class="fsetBoxB-title">坊ちゃんより</span></p>
    <div jg="jTruncSubstr" jg:jTruncSubstr="length:100,delimiters:[' ','、','。','」'],moreText:'続きを読む',lessText:'閉じる'" style="border: none;">
     <p>
     学校には宿直があって、職員が代る代るこれをつとめる。但し狸と赤シャツは例外である。何でこの両人が当然の義務を免かれるのかと聞いてみたら、奏任待遇だからと云う。面白くもない。月給はたくさんとる、時間は少ない、それで宿直を逃がれるなんて不公平があるものか。勝手な規則をこしらえて、それが当り前だというような顔をしている。よくまああんなにずうずうしく出来るものだ。これについては大分不平であるが、山嵐の説によると、いくら一人で不平を並べたって通るものじゃないそうだ。
     </p>
     </div>
   </div>
     
Javascript

// 下記を読みこませておく!
 <script src="js/jglycy-1.0.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/jquery.jtruncsubstr-1.0rc.js" type="text/javascript"></script>
     
CSS

.fsetBoxB {
    position: relative;
    margin: 1em 0;
    padding: 0.5em 0.5em;
    border: solid 3px mediumblue;
    border-radius: 8px;
    background:ghostwhite;
}
.fsetBoxB-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 120%;
    background: #FFF;
    color: mediumblue;
    font-weight: bold;
}
.fsetBoxB p {
    margin: 5px 0 5px 0; 
    padding: 0;
}