jQuery ホームページ 制作 運営 相談

無料メール相談 ホームページ制作運営相談室

業者選びのポイントSEO対策についてよくある質問サービス内容会社概要

文章を縦書きで表示

2013年11月08日

文章を書いていくとどうしても縦書きで表現したいことってありますよね。
そんなときはこちらをご利用ください。

ワードプレスであれば、header.phpに以下の部分を追加するだけです

<!-- nehan4縦書きの組み込み(Jquery本体込み) -->
<link charset="utf-8" rel="stylesheet" type="text/css" href="//nehan.googlecode.com/hg/nehan4.css" />
<link charset="utf-8" rel="stylesheet" type="text/css" href="//nehan.googlecode.com/hg/jquery.nehan.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript"
 src="//nehan.googlecode.com/hg/nehan4.min.js"></script>
<script charset="utf-8" type="text/javascript"
 src="//nehan.googlecode.com/hg/jquery.nehan.min.js"></script>
<script type="text/javascript">
$(function(){
  $(".nehan-blog").nehan({
    direction:"vert", // 横書きなら "hori"
    usePager:true, //falseにすると他段階で表示
    fontSize:16, //文字のサイズ
    //width:600, // 設定しない場合は記事の横幅をそのまま使う
    height:600
  });
});
</script>

こちらはnehanというjQueryを利用して縦書きにするものです。

注意点としてはの直下で、<meta charset="<?php bloginfo('charset'); ?>" />
なおかつ、<title>よりも上に記入することです。

ここさえ間違えなければ導入は簡単にできます。

あとは縦書きにしたいところで

<div style="display:none">
縦書きにしたいテキストをここに入れる。
</div>

と囲えば完成です。

太文字や斜線などを使いたい場合はこちらをご覧ください


複数のRSSをタブで切り替える

2012年12月19日

大黒屋本舗よりjsRSS++をダウンロード
jsRSS++はJavascrpitでRSSを表示できるようになります。

ヘッダー部分に

<script type="text/javascript">
<!--
$(function(){
 $(".tabarea .tabs ol").click(function(){
  var tab = $(this).attr("id"); //クリックされたタブのidを取得
  var num = tab.split("_"); //セパレータで分割
  var con = "#content_" + num[1]; //表示させるコンテンツのid名を生成
  $(this).addClass("selected"); //クリックされたタブのclassにselectedを割り当て
  $(".tabarea ol:not(#"+tab+")").removeClass("selected"); //その他のタブのclassにあるselectedを削除
  $(".tabarea div[id^=content]").hide(); //コンテンツをすべて非表示に
  $(".tabarea " + con).show(); //クリックされたタブ対応のコンテンツのみ表示
 });
});
//-->
</script>

設置したい場所に以下のタグを配置

<div> 
<ul> 
<ol id="tab_1">RSS1</ol>
<ol id="tab_2">RSS2</ol>
<ol id="tab_3">RSS3</ol>
</ul> 
<div id="content_1"><script language="JavaScript" src="jsRSS.cgi?RSS1のURL"></script></div>
<div id="content_2"><script language="JavaScript" src="jsRSS.cgi?RSS2のURL"></script></div>
<div id="content_3"><script language="JavaScript" src="jsRSS.cgi?RSS3のURL"></script></div>
</div>

スタイルシートの設定

/*----ニュースの設定-----------------------*/
.RSStitle{
 line-height:140%;
}

.tabarea {
 margin-top: 0;
 margin-right: 0;
 margin-bottom: 5px;
 margin-left: 0;
}
ul.tabs {
 margin:0px;
 padding:0px;
 background: #F1F1F1;
}
ul.tabs  ol {
 list-style:none;
 width:72px;
 padding: 5px;
 border-right:1px solid #fff;
 color: #333;
 cursor: pointer;
 text-align:center;
 float:left;
 font-size: 12px;
 margin-right: 1px;
 background-color: #FFF27C;
}
.tabarea .selected {
 color: #000;
 background-color: #D9EF97;
}

div.content {
 clear:both;
}

#content_2, #content_3 {
 display: none;
}

jquery.jsの設置の説明は省きます。


画像を横にスライドさせる「jQuery Slider2」

2012年11月08日

jQuery Slider2からjquery.slider.min.js

jQueryからjquery.js

CSSはこちらからダウンロードします。

<link href="jquery.slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.slider.min.js"></script>

<script type="text/javascript">
$(function() {
   $('#id名').slider({
showControls: true, // << >>を表示するか true=on false=OFF
autoplay: true, //自動再生
showPosition: true, //何枚目を見ているかを表示
showProgress : true,
hoverPause: true, //マウスオーバーでストップ
wait: 1500, //停止時間
fade: 500, //フェード時間
direction: "left" //移動方向
});
});
</script>