大百科かんたんテンプレートちょっとカスタマイズ２手順

　【大百科かんたんテンプレートちょっとカスタマイズ２手順】　
　
　バナータイプのテンプレートをちょっとカスタマイズします

　【タイルバージョンの背景をカスタマイズ♪】
　・大百科かんたんテンプレートバナータイプ(リビジョンコード一覧)を、いろいろ閲覧して
　 自分でも背景を変更してみたい！と思ってしまったそんなアナタに～

　【はじめの知識　背景を探す】＊簡単な画像編集ソフトが使えるといいかも、画像を加工します
　１：バナータイプ背景はコモンズのサムネ機能を使っています　
　　なので、コモンズで背景にしたい画像を探したり、自分で作ります　
　＊大きさや、比率が変更できる簡単な画像ソフトがあると便利です

　２：背景の素材を作る
　　バナーのサイズが７００ピクル×225０ピクセルなので、これを考慮します
　　コモンズから素材を探す→使いたい画像をコモンズから、ダウンロードします
　　自分で作る→お好きな画像を作ってください
　　（＊著作権に触れるアニメ・キャラクターなどはコモンズに登録できませんのご注意ください）

　　７００クセル×25０ピクセル大きさに加工します

　　　　

　　
　　【最重要】　コモンズの画像を大百科に使用する場合、
　　４００×４００のサムネもしくは１２８×１２８サムネサイズしか表示させることができないのです！
　　詳しはこちら

　　なので、　バナーに見せるテクニックとして、４００×４００のサムネを２枚並べて使用しています
　　じゃあ８００×４００でいいのでは？と思いたくなりますが、大百科の全幅が７２０ピクセル・・・・という罠が待っています
　　そこで、まず７００クセル×25０ピクセルを用意します

　　次に、A：左から４００×250　B:その残り００×250の画像に分割します
　　先ほど説明したように、１枚につき、最大４００×４００しか大百科に表示できないためです

　　　　

　　次にAの方のサイズを下側に余白ができるように高さを４００ピクセルに加工し、４００×４００にします

　　次にBの方のサイズを下側に余白ができるように高さを４００ピクセルに加工し、300×４００に
　　右側に余白ができるように幅を４００ピクセルに加工し、４００×４００にします

　　　　

　　ニコニ・コモンズに画像をアップします（新規の方はニコニ・コモンズの登録を忘れずに）
　　＊コモンズの画像を使用した場合は、使用した画像のコモンズを書く欄がありますので必ず書いてください?


　＃＃＃＃＃ここまでで、画像の準備は終わりです　お疲れ様でした＃＃＃＃＃＃＃＃

　　　
　【ちょっとカスタマイズ手順】

　コモンズ登録は少し時間がかかります・・じっとガマンです・・コモンズに登録されたら、
　そのコモンズのページのURL　　http://www.niconicommons.jp/material/ncXXXXX?　　
　をメモ帳などにA,Bの両方をコピーしておきます


　１：テンプレートを選ぶ　→　大百科かんたんテンプレートバナータイプ(リビジョンコード一覧)
　２：使用したいテンプレートの一番右側にある「基に執筆」をクリックして開きます
　３：そのままで編集モードになっていはずなので編集画面までスクロールさせます
　４：編集画面上部からhtmlエディタの有効無効を切り替えるボタンで、
　　 エディタを無効にする（コードが書いてあるページに切替える）
　　そのページ先頭１番目にある以下のコードを探します?

div style="width: 400px; height: 250px; font-size: 80%; color: #696969; background: #ffffff url('http://deliver.niconicommons.jp/thumbnail/ncXXXXX?size=l') no-repeat right top scroll; float: left;　　?

　赤字の部分を先ほどコピーしたAのコモンズのURLと入れ替えます
　その状態でページ全体を選択し、コピーします?


次に、２番目にある以下のコードを探します

div style="width: 300px; height: 250px; font-size: 80%; color: #696969; background: #ffffff url('http://deliver.niconicommons.jp/thumbnail/ncXXXXX?size=l') no-repeat left top scroll; float: left;"?

　赤字の部分を先ほどコピーしたBのコモンズのURLと入れ替えます
　その状態でページ全体を選択し、コピーします


５：htmlエディタの有効無効を切り替えるボタンでエディタをオンにして表示してみます
　　 上手く表示できていれば、エディタをオフにしてすべてのコードを選択して、メモ帳にコピーします
　　
　【ポイント】　両方共、タグの　height: 250pxを400pxまで増やすことができます（これ以上だとレイアウトが崩れるかも
　　　　　　　　heightタグの数値を変更して、余白の調節や高さ４００ピクセルの大きなバナーを表示することができます


　＃＃ここまでで好きな背景にしたテンプレートのコピー完了＃＃　６以降はかんたんテンプレの手順と同じです

　６：加工したい生主の大百科を開く
　７：その大百科のページを編集モードにする
　８：編集画面上部からhtmlエディタの有効無効を切り替えるボタンで、
　　 エディタを無効にする（コードが書いてあるページに切替える）
　　 そこにあるコードをすべて選択して、削除する
　 ? 【注意】既に内容が書いてある場合は、メモ帳などのコピーしてバックアップおきましょう

　９：メモ帳にあるテンプレートのコードをコピーして貼り付ける
　　htmlエディタの有効無効を切り替えるボタンでエディタモードに切替える
　　画面にテンプレートが表示されれば成功
　　エディタにて好きなように文字編集や色の編集をする　

　 ＃＃ここまでで編集完了＃＃

　１０：下にある投稿内容を実際に表示してみるボタンで仕上がりを確認する
　１１：完成したら、編集内容についての説明を書き込む＊ここを書きこまないと反映されないので、注意！
　１２：投稿するボタンで投稿する＊【注意】この状態ではまだ投稿になってません！！
　１３：最終確認をしたら、ページ下にある投稿ボタンを押して完了です　　
　　　 修正したい場合は修正ボタンを押してください

　【関連項目のリンク】

• 大百科かんたんテンプレート使用手順
• ニコニコ大百科:HTMLテンプレート集
• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座?