*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

 > カスタマイズ

レスポンシブテンプレートの使い方(CSS変更・その他)

その他の箇所のカスタマイズ(^-^;です。暗色系・シンプル系等、全く異なったイメージを作る際に是非変更してみて下さい。1) 薄く透過されている大枠の背景 [al_responsive〇c]のスタイルシート編集枠をほんの少し下げた所に有る#wrapper{ という部分の背景色を変更します。何も加工が無ければ←こんな感じです。(クリックで少し大きく表示)#wrapper の下記の部分が透過背景色です。 background-color:rgba(255,255,255,0.7...

続きを読む

まゆたん 様へ * by aki
まゆたん様、初めまして♪
数あるテンプレートの中から見つけて頂き、且つ永くご利用頂きまして有難うございます。m(__)m

貴殿ブログ、拝見致しました。
可愛く・素敵にカスタマイズして頂き、とても嬉しい限りです。(^-^)
記事も沢山更新されていて 読み応えありそうですね♪
また、記事中(7月下旬の夜間救急のお話)で弊ブログのテンプレートをご紹介及びお褒め頂き、嬉しいやら恥ずかしいやらで…誠に有難うございます。
その後お身体の具合は如何ですか?大事が無ければ良いのですが…。

この度、レスポンシブのテンプレートを作成するにあたり、不勉強なHTML5やCSS3(MediaQueries)、JavaScript(jQuery)等々、あれやこれや弄繰り回して何とか形にしております。
きちんとした学習も無く、本やNet情報を頼りに作っているため不具合が無いかと心配しております。
もし、何かお気付きの点などがございましたら 何なりとお申し出下さいませ。

素敵なデザインテンプレートは(難しくて作れないので^^;)他の方にお任せして、相も変わらず昔ながらの(ブログです!的な)レガシーテンプレートですが、是非是非、末永くお付き合い下さいます様 今後とも宜しくお願い致します。m(__)m

ありがとうございます! * by まゆたん
はじめまして!
いつも素敵なテンプレートをありがとうございます。
ブログ開設時よりテンプレートを使わせてもらってまして、特に「lace-al2」が大変気に入ってましたので、いちばん長期にわたり利用させてもらいました。
今回さらに「al_responsive2c-r」に惚れこんでしまいまして、スマホにもキレイに対応されますし本当に嬉しかったです!
こちらのサイトを参考に最初は全文にして…また要約に戻したり、あちこちカスタマイズしまして自己満足ではありますが、近年にないほどの大満足の完成度です(笑)
嬉しさのあまり唐突にコメントしてしまいましたが…これからも大切に使わせていただきます!
ありがとうございました(*'ω' *)

ゆきゆず 様へ * by aki
こちらこそ初めまして♪テンプレートのご利用 、誠に有難うございます。
早速ヘッダーの画像が猫ちゃん達になっていましたね。(^^)
当方のウサギの飼育歴は20年超有るのですが、猫に関しては20年位前に実家の祖父母が飼っていた程度で、あんまり手出しが出来ず知識がそれ程有りません。(^^;
夜鳴き(声がデカくて遠吠えに近い^^;)に悩み、トイレハイに戸惑い、マーキングの臭さと後始末に翻弄され、たった一匹の猫に悪戦苦闘の日々なので、ゆきゆず様宅の猫生活がどんなにか凄い事なのかと、ホントに感嘆しきりです。
でも、なんだかんだ言って 大変ながらも楽しいですよね。
うちの旦那さんは『元野良・成猫・雄(6キロ!)』という初めての猫が可愛くて仕方ないようです。
何歳なのか不明で どれ位一緒に居られるか分からないですが、素敵な出会いを大事に、末永く暮らせたら良いなと思っております。(^^)
分からない事は 是非是非、教えて下さいませね♪

テンプレート共々、今後とも末永くお付き合い下さいます様 宜しくお願い致します。m(__)m

はじめまして * by ゆきゆず
はじめまして!
こちらのテンプレートお借りしています。
とても可愛くてお気に入りになりました。
ありがとうございます!!
にゃんこさんの記事読みました♫
まるで私を見ているみたいでした笑
我が家も同じような経緯ではや9匹。
勝手に親近感です笑
毎日暑いですがにゃんことうさちゃんと
お元気にお過ごしください。
まずはお礼まで。
ありがとうございました。

名無し 様へ * by aki
いえいえこちらこそ。(^-^;
運営、頑張って下さい。陰ながら応援しています。

No Subject * by 名無し
何度もお手数かけてすいませんでした。
おかげで多くのスマホサイズに対応できるようになりました。
本当にありがとうございます。

また何かあったらよろしくお願いします。

名無し 様へ * by aki
テンプレート共々、無事表示できるようになって良かったです。(^^)
hr は、HTML4.01で非推奨だった size属性、width属性、align属性、とnoshade属性がHTML5で廃止されました。
この度のテンプレートはHTML5ですので、今後はCSSを使って記述して下さいませ。
それと一つご提案なのですが、当方のiPhoneSEで拝見するとブラウザサイズ(ベース解像度)が568×320なので、メニュー幅340pxでは右メニューの左端が欠けて表示されてしまいます。
iPhoneの最少幅が5やSEの320pxなので、このサイズに合わせればほぼどのスマホでも欠ける事無く表示できると思います。
修正箇所を下記に記しておきますので、是非改変をご検討下さい。
(現行の表示確認が出来ます。貴殿URLを入れてみて下さい。修正後の確認にもどうぞ。http://html5-lab.jp/checker/

/* メニューボタン */
#btn2 の width: 340px; を width: 320px;
#aside_close の padding-left: 295px; を padding-left: 265px;

/* メニュー */
aside の width: 340px; を width: 320px;
     right: -340px; を right: -320px;

HTML編集枠下のscript
$(function(){$("#aside_open") から .css({overflow:"visible",height:"auto"})})});
までの間に有る
{$("aside").animate({top:"0",right:"-340px"} を $("aside").animate({top:"0",right: "-320px"}

以上です。ご面倒でなければ、です。m(__)m

この度は(説明下手なもので)何度もお手数をお掛けして 申し訳ございませんでした。
また何かご不明な点がございましたら、何なりとお声掛け下さいませ。
今後とも末永くお付き合いの程、宜しくお願い致します。
p.s. 因みに関係無いですが、私のカラオケでの十八番は『syncopation』です。踊れませんが。(^-^;

No Subject * by 名無し
返事が遅れてすいませんでした。ご説明の通りしたら出来ました。
今までhtmlで
<hr size="2" color="#000000" width="100%">
のような単純な方法でラインを引いていたので今回は出来なかったようです。

今後も何か分からないことがあったら質問すると思いますので、その時はよろしくお願いします。



名無し 様へ * by aki
hr のスタイル変更ですが、記事投稿・編集の画面で『水平線(旧画面)』若しくは『横罫線(新投稿画面)』のボタンを使っていませんか?
ボタンを使って hr を入れると、そのままテンプレートのスタイルシートに設定されている線になります。
スタイルを変える方法は幾つか有るのですが、投稿画面(HTML)で直接タグを入れる方法が一番簡単です。
ボタンは使わずに、そのまま記事を書く画面にタグを入れて下さい。
例)<hr style="border-top: 1px dashed #3366ff;margin-right:100px;">
この例では右に100pxの余白を持った1pxの青い破線が出るはずです。(プレビューでも確認できます。)
幾つかスタイルシートに設定を作っておいて、その都度選んで hr を挿入したい場合は、テンプレートのスタイルシート編集枠内(できれば hr の下辺りに入れるとPCもモバイルも反映します)に数種類作っておいて、

hr.style1{
border-top: 1px solid #9900ff; /* 1px 直線 紫 */
}
hr.style2 {
border-top: 1px dashed #ff6600; /* 1px 破線 オレンジ */
}
hr.style3{
border-top: 1px dotted #ff69b4; /* 1px 点線 ピンク */
}

記事を書く際に入力画面(HTML)で
<hr class="style1">
とだけ入れれば、その部分に 1pxのsolidな紫線が表示されます。(プレビュー確認)
一度試してみて頂けますか?

No Subject * by 名無し
『✖』印は余白部分に移動しました。ありがとうございます。

それと、ライン(hr)の件ですが、cssの
h4{
margin:0 10px;
font-size:1.0em;
font-weight:normal;
color:#15adb3;
border-bottom:1px dotted #999;
}

の下にある
hr{
margin:10px 0;
border-top:dashed 1px #f0bdbd;
height:1px;
}

が影響してか、全てのラインがdashedになり、ここをsolidに変えると全てのラインがsolidになり、記事書き込み欄のhtml編集では線の太さも色も調整できません。

私の知識不足のせいだと思いますが、どうか教えていただけたらありがたいです。

レスポンシブテンプレートの使い方(トップ画像変更)

トップ画像の変更方法です。背景画像を横幅100%でレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と 背景画像変更② でのbackground-size:contein; を使った方法です。background-size:cover; では、画像の幅と高さの比率を固定して領域を覆うように表示されますが、はみ出した部分は表示されません。background-size:contain; も画像の幅と高さの比率を固定しますが、表示領域が変更された場合でも画像が全て表示さ...

続きを読む

レスポンシブテンプレートの使い方(背景画像変更 ② )

引き続き、背景画像の変更方法です。大きい画像を背景に、ディスプレイサイズに合わせて表示するようにします。←使用する画像はこちら。表示位置が分かり易いよう見本を表示するBoxに背景色(#e2eccb;)を付けています。 背景画像のサイズを調整するプロパティは、背景(background)に background-size: サイズの値; を使います。指定できる値は下記のとおりです。background-size:auto;background-size:auto;background-size :au...

続きを読む

レスポンシブテンプレートの使い方(背景画像変更 ① )

今時とってもLegacyな テンプレートですが、その分『見掛け』を自分流にカスタマイズ出来るように、CSSも(多分)分かり易く作っております。可愛い愛犬・愛猫や、旅先で撮った素敵な画像等々…お好きなように飾って下さい。(^-^)...

続きを読む

レスポンシブテンプレートの使い方(エントリー全文表示)

レスポンシブテンプレート、al_responsive 3c(3カラム), 2cr(2カラム右), 2cl (2カラム左)の記事表示の変更方法をです。共有テンプレートDL時のトップページのエントリー表示は、2・3カラムとも記事毎の要約表示になっています。これを従来の全文表示に変更する方法です。◎ テンプレートの設定画面を開いてHTMLを編集する。管理画面左の『テンプレートの設定』 →[al_responsive〇c]のHTML編集枠を開いて「トップページここ...

続きを読む

みやちゃん様へ * by aki
みやちゃん様
数あるテンプレートの中より 弊テンプレートのDL、誠に有難うございます。
トップページの要約表示を全文表示に切り替える方法の記事が少し間違っておりましたので、先程修正していたところです。

ご質問の件、大変失礼ながらお伺い致しますが、貴殿の行ったカスタマイズはどこまでですか?記事に有ったHTMLソースをコピペされましたか?
もしそのカスタマイズ後に表示がおかしくなったようであれば、改めて修正したHTMLをペーストし直してみて下さい。
ただ、その作業後でも表示が直らないのであれば、拝見させて頂きたいので 貴殿のブログURLを教えて頂けませんか?

大変お手数なのですが、何卒宜しくお願い致します。m(__)m

記事本文の表記に関してカスタマイズ * by みやちゃん
テンプレート製作ご苦労様です。

ブログのテンプレートを変更しようと探した所
al_responsive2c-rのデザインがとても気に入りました。

そこでテンプレートを少々カスタマイズしようとしましたが、
私のスキルでは無理なのでコメントしました。


現状記事を書くで「本文の編集・追記の編集」の2段で記事を書いた場合、
「本文の編集」の途中までしか表示されません。

それを「本文の編集」分を全て表記してさせたいので
HTML及びCSSのカスタマイズを御教授お願いできないでしょうか?