*Essence

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

Menu2
 

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

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

続きを読む

宜しければポチッと♪→FC2 Blog Ranking

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (14) * Trackback : (0)

名無し 様へ * 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編集では線の太さも色も調整できません。

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

名無し 様へ * by aki
こちらこそ、何度もスミマセン。m(__)m
×印の位置は前出のresで書いた箇所、CSSの /* メニューボタン */
#btn1#btn2
top:180px; を、5px(位で良いと思う^^;微調が必要ならそのように修正を。)に書き換えて下さい。

…レスポンシブチェッカー(http://html5-lab.jp/checker/)やブラウザのデベロッパーツールを使って確認しても、実際は広告枠等が入ったりするため、実機(iOSとAndroid)での確認をしてみると異なる表示になったりするので困りものです。(^-^;
色々とお手数をお掛けして申し訳ございません。

それとhr等の調整ですが、直接記事内にスタイルを指定する事ができます。
新規投稿(若しくは過去記事の編集)をHTML表示ができる画面にして、タグに直接記述します。
例)<hr style="border-top: 1px dashed #ff33cc;margin-right:100px;">

テンプレートのCSS以外のスタイルが欲しい場合は直接投稿・編集画面をHTMLにして記述するのが早いです。
的外れな回答?でしたらご指摘下さい。m(__)m

No Subject * by 名無し
何度もありがとうございます。

修正しましたところ閉じるための『✖』印が下がってしまいます。
下がった『✖』印を最上部の余白部分に戻すにはどうすればいいのか教えていただけるとありがたいです。

それと、これは別件ですが、ライン(hr)やテーブルラインを記事記入欄で調整することは出来ないのでしょうか?

名無し 様へ * by aki
名無し様、もう一点、修正箇所がございましたっっ!
この部分を直して頂かないと、iPhoneで左右のメニューボタンが表示されないもので…(^-^;

CSS編集枠1/4程の
/* メニューボタン */
#btn{
overflow:hidden;
width:100%;
height:30px;
top:10px;(元のテンプレートでは32pxになっている個所)
z-index:3;
position:fixed !important;
}
上記 赤文字部分も(左右ボタンの位置と合わせるため)180pxに変更して下さい。

当方の実機iPhoneSEとXperiaで確認がてら表示してみましたら、Xperia(Android6)では表示されるのに、iPhoneSE(iOS11)では左右のメニューボタンが表示されておりませんでした。(何故Androidは表示されるのか?は不明…)
見ましたところ、(当方が改変指示をしていなかった)前出の#btn部分の未修正が原因だったようなので、コチラの部分も修正をお願い致します。
何度もお手数をお掛けして申し訳ございません。m(__)m
改めて修正後に表示確認させて頂きたいので、もう一度 お声掛け頂けますか?

No Subject * by 名無し
丁寧なご説明ありがとうございました。
おかげさまで今のところ全ての問題が解決しました。

また何かあったら質問させていただくと思いますので、その時はまたよろしくお願いします。

本当にありがとうございました。

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

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

続きを読む

宜しければポチッと♪→FC2 Blog Ranking

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (0) * Trackback : (0)

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

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

続きを読む

宜しければポチッと♪→FC2 Blog Ranking

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (0) * Trackback : (0)

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

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

続きを読む

宜しければポチッと♪→FC2 Blog Ranking

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (0) * Trackback : (0)

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

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

続きを読む

宜しければポチッと♪→FC2 Blog Ranking

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (2) * Trackback : (0)

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

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

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

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

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

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


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

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