スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログでソースコードを表示する。 SyntaxHighlighter 導入してみました。

みなさんこんにちは「staff」です。

今日はひょっとして2月で一番寒い日を迎えたかもしれない関西です

もうBlog打ってても指先がちべた~い!!

と思いながらもですねちょっと頑張っております


今日はですね

売れないネットショップどうすれば! FC2ショッピングカート その9 カスタマイズ No004」ということで

前回頑張ってFC2ショッピングカートのcustomテンプレートのCSSのレイアウト図作りました!!

ということでご覧になっていただいたのがこちらのレイアウト図でした



FC2カートcustom009-01



しかし前から「staff」は悩んでいたのでした

みなさんにFC2ショッピングカートのcustomテンプレートのカスタマイズをしていただくためには

どうやっても「CSS」のコード編集が必要になってきます。


初心者のみなさんや女性の方でもみなさんでご興味のある方はぜひやっていただきたいなと

思っていましたのでできるだけわかりやすくしたかったのですが

customテンプレートはとにかく長い長いプログラムです。


それをいきなりど~んとお見せしてここをこんな感じといってもわからないですよね

「staff」だってCSSなんてよく理解してないんですから


どうしようかCSSのレイアウト図をお見せしたからには後は「CSS」のコード編集するしかないのです

とにかく長いcustomテンプレートのCSSコードが

まずこのFC2Blogにちゃんと表示されるのかほんとに悩んだんですよ


だってこんな世界ですよみなさん



////////////////////////////////////////////////////////////

/* CSS Document */

body {
font-family:"Verdana", "Impact", "FF2DFF3320FF3030B430B730C330AF", "Hiragino Kaku Gothic Pro", "30D230E930AE30CE20Pro20W3", "Osaka";
line-height: 1.6;
padding: 0 2%;
color:#666666;
}
h1 {
font-size: 16px;
}
h2 {
font-size:14px;
margin-left: 3%;
}

////////////////////////////////////////////////////////////


さすがにこんな分けわかんないのは理解不能ですよね

パソコン嫌いな人がよけいに嫌いになる


そこでなにかいい方法がないかいろいろ「staff」なりに調べてみたんです。

そしたらさすが諸先輩方も同じ苦労をされてるようで足跡を残して下さっていましたのでご紹介します。

凡人プログラマーの独り言」管理人さん「馬場一樹(kbaba1001)」のBlogに

fc2ブログでソースコードを綺麗に表示する。」方法を残してくださってました。

しかもすごくわかりやすくって丁寧に書いてくださって「staff」はすごく感謝です


その方法とは「SyntaxHighLighter」というjavascriptをFC2Blogに導入すると

ソースが綺麗に表示できると教えて頂きました。

導入方法は「staff」が説明するより非常に詳しくご説明いただいてますので

こちらをご参照下さい→「fc2ブログでソースコードを綺麗に表示する。(SyntaxHighLighter 3.0)


実際に試すとこんな感じです。




/* CSS Document */

body {
font-family:"Verdana", "Impact", "FF2DFF3320FF3030B430B730C330AF", "Hiragino Kaku Gothic Pro", "30D230E930AE30CE20Pro20W3", "Osaka";
line-height: 1.6;
padding: 0 2%;
color:#666666;
}
h1 {
font-size: 16px;
}
h2 {
font-size:14px;
margin-left: 3%;
}



おぉすごい

この行数表示がめちゃくちゃいい

これならばわけのわかんないCSSコードも行数で説明すれば少しはわかりやすくなるかな


凡人プログラマーの独り言」さんにとてもいい事を教えて頂きました。

すごく感謝いたしますありがとうございました。


でも「preタグではなくscriptタグを使用する」ことで便利になるらしいのですが

「staff」はうまく出来ませんちょっと修業が必要です。


WordPressなどのプラグインツールではすでにスタンダードな「SyntaxHighlighter」ですが

まさかFC2Blogに導入できるなんてホント知りませんでした。


みなさんも頑張って導入してみたらBlog上で具体的に「HTML」や「CSS」の

具体的な質問ができて詳しい方に悩みを解決してもらえるかもしれませんね


「staff」推薦のjavascriptですお試しあれ!!


ちょっと次回戦うターゲットかなりの強敵ですから

全貌をご紹介しときますね。


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

これが初期段階のcustomテンプレートのCSSコードです。



/* custam */
/*-----���{------*/
* {
margin:0;
padding:0;
}
body{
background-color:#d3d3d3;
text-align:center;
margin:0 auto;
padding:0;
}
#baseblock{
font-family:"Verdana", "ヒラギノ角ゴ Pro W3", "MS Pゴシック", Osaka;
font-size:12px;
color:#333333;
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_bg.gif");
background-repeat:repeat-y;
margin:0 auto;
padding:0;
width:900px;
}
a:link{
color:#000099;
text-decoration:none;
}
a:visited{
color:#0000ff;
text-decoration:none;
}
a:hover{
color:#ffffff;
text-decoration:none;
background-color:#000099;
}
a:active{
color:#ffff99;
text-decoration:none;
}
a img{
border:0px;
text-decoration :none;
}
h1{
font-size:18px;
line-height:30px;
margin:0px auto;
}
h2{
background-image: url("https://cart-imgs.fc2.com/template/custam/image/custam_title.gif");
background-repeat:no-repeat;
font-size:16px;
height:34px;
line-height: 34px;
margin-bottom:10px;
width:500px;
}
h3{
background-image: url("https://cart-imgs.fc2.com/template/custam/image/custam_menu.gif");
background-repeat:no-repeat;
font-size:12px;
height:34px;
line-height:30px;
margin: 0 auto 10px;
width:180px;
}
li{
list-style:none;}
#baseleft{
width:700px;
float:left;
overflow:hidden;
}
#baseright{
width:200px;
float:right;
overflow:hidden;
}
.line{
border-top:dotted #666666 1px;
margin:3px auto;
width:450px;
}
/*----------��g�b�v���S------------*/
#rogo{
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_top.gif");
background-repeat:no-repeat;
width:900px;
height:150px;
}
/*----------����C��---------------*/
#mainbox{
width:500px;
float:right;
overflow:hidden;
}
/*--�����e�i���X--*/
.maintenance{
background-color:#ffffff;
border:solid 1px;
border-color:#a9a9a9;
width:400px;
height:auto;
padding:20px;
margin-top:30px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
}
/*--�y�[�W�����N���-*/
.pagelink{
font-size:8px;
margin:0 auto 10px;
}
/*--�j���[�X--*/
.news{
width:400px;
text-align:left;
margin-left:20px;
margin-right:auto;
margin-top:10px;
margin-bottom:30px;
list-style: none;
}
/*--���[�U�[�y�[�W--*/
.userpage{
width:450px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:30px;
}
/*--�i���--*/
.sort{
border-bottom:1px dotted #CCC;
margin: 0 auto 5px;
text-align:left;
width:480px;
}
.sort a{
margin:0px 10px;
}
.pagelinks{
border-bottom:1px solid #CCC;
margin: 0 auto 10px;
padding-bottom: 5px;
width:480px;
}
.pagelinks .a{
border-bottom:1px dotted #CCCCCC;
padding-bottom:5px;
text-align:left;
}
.pagelinks .b{
width:460px;
margin-top:3px;
}
.pagelinks .b .ahead{
width:20%;
float:left;
}
.pagelinks .b .pageno{
width:60%;
float:left;
}
.pagelinks .b .next{
width:20%;
float:right;
}
.item_list{
float:left;
width:33%;
padding-left:0px;
}
.item{
width:130px;
text-align:center;
overflow:hidden;
padding-left:20px;
}
.item a img{
border:solid #dcdcdc 1px;
}
.item .name{
text-align:left;
margin:3px;
}
.item .comment{
text-align:left;
margin:3px;
}
.item .other{
margin:3px;
text-align:right;
}
/*--�i��-*/
.item_detail{
text-align: center;
font-size: 12px;
width: 480px;
}
.item_detail .thumb{
float:left;
margin-top:10px;
width:33%;
}
.item_detail .thumb img{
border:solid #dcdcdc 1px;
padding:0px;
margin:0px;
}
.item_detail .thumb a img {
background-color:none;
display:block;
}
.item_detail .img-comment{
padding:3px;
}
.item_detail .comment{
padding:3px;
text-align:left;
}
.item_detail .about{
text-align:right;
}
.item_detail .about .other{
padding:3px;
}
/*--�`�F�b�N--*/
#subtitle{
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_subtitle.gif");
background-repeat: no-repeat;
height:34px;
margin:10px auto;
}
.check{
margin:0;
padding:0 0 30px;
width:452px;
}
.pickupbase
{
font-size:10px;
font-family:Osaka, Verdana, "MS Pゴシック";
margin-right:15px;
padding-bottom:15px;
width:130px;
float:left;
overflow:hidden;
}
.pickupbase a img{
border:solid #dcdcdc 1px;
padding:0px;
margin:0px;
}
.pickupname
{
font-weight:bold;
text-align:center;
padding-bottom:3px;
overflow:hidden;
}
.pickupprice
{
text-align:center;
padding-top:5px;
overflow:hidden;
}
/*--�e�[�u���g--*/
.table1{
font-size:10px;
width:460px;
margin:15px auto;
}
.table1 td{
padding:3px;
border-top:1px solid #CCCCCC;
border-right:1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #CCCCCC;
}
.table1 .td1{
background-color:#666666;
color:#FFFFFF;
font-size:12px;
text-align:left;
line-height:20px;
}
.table1 .td2{
background-color:#EEEEEE;
text-align:center;
}
.table1 .td3{
background-color:#FFFFFF;
}
.table1 .td4{
background-color:#FFFFFF;
font-size:12px;
}
.table1 #left1{
text-align:left;
}
.table1 #nonitem{
text-align:center;
line-height:30px;
font-size:12px;
}
.table1 #right1{
text-align:right;
}
.over{
overflow:hidden;
}
/*----------�T�C�h�o�[�[-------------*/
.menucontent{
margin-bottom:10ox;
text-align:left;
}
/*--��T�C�h�o�[�[--*/
#menuleft{
width:200px;
float:left;
overflow:hidden;
}
/*--���j���[�E�J�e�S��--*/
.menucontent ul{
padding-right:0px;
padding-left:0px;
list-style:none outside;
margin-left:25px;
}
#menu a:link.Top , #category a:link.Top , #menu a:visited.Top , #category a:visited.Top
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#menu a:hover.Top , #category a:hover.Top
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#menu a:link.Main , #category a:link.Main , #menu a:visited.Main , #category a:visited.Main
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#menu a:hover.Main , #category a:hover.Main
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:25px;
}
#category a.Sub
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:40px;
}
#category a:hover.Sub
{
display:block;
padding-top:3px;
padding-bottom:3px;
padding-left:40px;
}
.cartin{
padding-left:5px;
}
/*--����E���O�C��--*/
p.plugin-search
{
text-align:center;
margin:0 auto;
padding:5px 0;
width:90%;
}
p.plugin-search input
{
color:#6e625c;
font-size:12px;
margin:0;
padding:0;
}
p.plugin-freearea
{
line-height:145%;
margin:0;
padding:0;
}
.menuTextL p.plugin-freearea
{
line-height:145%;
margin:0;
padding:0 10px 0 15px;
}

/*--�J�[�g����g--*/
.cartin
{
color:#6e625c;
margin:10px;
padding:5px;
border:double 3px #e7e2e0;
overflow:hidden;
}
.cartin_item
{
padding-bottom:2px;
border-bottom:1px solid #e7e2e0;
}
.cartin .name
{
text-align:left;
padding:3px;
}
.cartin .price
{
text-align:right;
padding:2px;
}
.cartin .subtotal
{
text-align:right;
padding:2px;
}
.cartin .total
{
font-weight:bold;
text-align:right;
padding:3px;
}
.cartin .submit
{
text-align:right;
margin:0;
padding:5px 0 0;
border-width:0;
}
.cartin a:link , .cartin a:visited
{
color:#e74b7b;
text-decoration:none;
border-width:0;
}
.cartin a:hover
{
color:#29a8a8;
text-decoration:none;
background-color:transparent;
}
/*----------��t�b�^�[-------------*/
#footblock_a{
color:#565656;
font-size:10px;
font-family:Verdana;
text-aligen:center;
margin:0px;
padding:0px;
width:900px;
height:40px;
clear:both;
}
#footblock_b{
background-image:url("https://cart-imgs.fc2.com/template/custam/image/custam_foot.gif");
background-repeat:no-repeat;
text-align:center;
width:900px;
height:100px;
clear:both;
}

.variation_width {
width:100%;
}





まさに強敵ですね~

でも大丈夫ですよとりあえず次回はわかりやすくロゴ画像をはめてみましょうね!!




関連記事
スポンサーサイト

コメントの投稿

非公開コメント

flower-digiclock

decoboko.jp

プロフィール

michiworkstaff

Author:michiworkstaff
代表の「michiwork」さんと全く違う情報発信していく手作り家具と雑貨のお店「michiwork」のstaffによるBlogです。

でも誤字脱字は気にしないで下さいねみなさん!!

カテゴリ
michiworkへのリンク
staffのTwitter
最新記事
ナチュラル家具と雑貨のお店 Welcome! 「michiwork 」

マウスで見る方向変えられます

タグクラウドとサーチ

最新トラックバック
月別アーカイブ
検索フォーム
RSSリンクの表示
てんとう虫がうろちょろするよ(Twitter連携してます!!)

てんとう虫がうろちょろします

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。