旧システムテンプレートをレスポンシブデザインに改造できないものか

こことは別の旧デザインシステムで運用しているブログがあるのですが、そこでちょっと実験的に試していることがあります。 今日は、壁にぶつかっている嘆きを聞いてください~。 うまくいかないときもあるんです~。 旧システムのスマホテンプレートの困るところ 旧デザインシステムだと、PCはPC用テンプレートで表示され、スマホはスマホテンプレートで表示されます。 スマホテンプレートはCSSもHTMLもカスタマイズできないようになっています。まったくいじれないって、不自由なんですよねー。 そして、今までにも書いている問題。 スマホテンプレートだと広告が多すぎる。数えてみたら、8こ表示されました。広告枠ではなく、広告の個数ね。さらに、今は全面を覆う広告も出るようになってしまったでしょ。困ったものだ…。 広告を入れるなとは言いません。無料で使わせてもらっているのですから。でも、ユーザーにとって適切な量というものはあると思うんです。 スマホテンプレートはカスタマイズできないので、この多すぎる広告をどうにもできません。 今やスマホでの閲覧が多い時代だから、ここに広告を詰め込むし、カスタマイズさせないんでしょうけど、節度はほしいところですよねー。これじゃ閲覧している人に不快感しか与えないでしょうから。 テンプレートをいじれない以上、どうにもできません。 そうか、スマホテンプレートを使わなければいい 新デザインシステムのほうだと、レスポンシブデザインを選べ…

続きを読む

「この記事へのコメント」をカスタマイズする (2)

「この記事へのコメント」をカスタマイズする (1)の続きです。 前回は、コメント欄のタイトルのCSSをカスタマイズしました。 今回は、コメント欄のタイトルの言葉を変えます。 それから、テンプレートによっては調整が必要になりますので、CSSで調整していきます。

続きを読む

「この記事へのコメント」をカスタマイズする (1)

これ↑デフォルトのコメント欄のデザインです。 な~んか地味だよね~。 コメント欄が目立たなくてスルーしてしまいそうな気がしてしまうんです。 他社のブログのデザインを見ると、もう少しデザイン上のアクセント的なものが入っているます。 やっぱりね! だから、ここにも手を入れてみることにしました。 今回は、CSSをいじって、デザインを変えます。 表示する文言は次回やりますね。 というわけで、今日は前後編の前編です。 このデザインを… ↓ ↓ ↓ こんな風に変えます。 前後編の2回シリーズでお送りましす。 今回は、前編。 CSSをいじって、「この記事へのコメント」というタイトルのデザインを変えます。

続きを読む

コピペでトップへ戻るボタンを導入する

このブログにもようやく、ページトップへ戻るボタンを導入しました。 少し下へスクロールすると、画面の右下の隅に▲の印が表示されます。これがボタン。ボタンをクリックすると、するするとページのトップに戻ります。 ※今までも「このページの先頭へ」というリンクを一番下に表示していました。でも、ボタンを導入すると、ページのどの位置からでも戻れるようになります。 やり方やデザインはいろいろあります。 このブログで導入した方法は…半透明のボタンなので、文字が被っても見えます。▲は文字です。画像を用意する必要はありません。▲の代わりに、「ページトップへ」のような文字を使うこともできます。ページの一番上では非表示です。スクロールすると現れます。 「難しいことはわからないよー」という方も導入できます! 3回のコピペでできる方法を書きますので、安心してください。 では、いきます!

続きを読む

画像の横にも文章を(4) CSSで指定

画像回り込みシリーズも今回が4回目となりました。 画像の横にも文章を(1) 画像の横にも文章を(2) 余白を調整 画像の横にも文章を(3) 崩れた?! 一応、前回で完結しているんですけど、今回は他の方法を紹介します。 CSS(スタイルシート)で指定する方法です。 CSSの設定するページは、「文字の設定(7)ちょっと動くリンク」などで説明しているので参考にしてください。 開きました? それでは、いきましょう。(^-^)ノ 場所はどこでもいいんじゃないかと思うので(根拠はありません…^^;)、一番下のところに次のタグを入れましょう。 そのままコピー&ペーストすればOKです。 画像の横の余白を10pxにしてあります。ご自分の好みで調節してください。 /* 画像右寄せ */ img.right { float: right; margin-left: 10px } /* 画像左寄せ */ img.left { float: left; margin-right: 10px} [スタイルシートを変更する]ボタンを押します。画面の上部に、オレンジ色で「設定を変更し、CSSをビルドしました。」という文字が出ましたね。 CSSの設定はこれで終わりです。 次は、本文を書きます。 画像のアップロードの仕方は、「画像の横にも文章を(2) 余白を調整」を見てくださいね。 で、画像を本文中に挿入したところで、さっき書いたCSSを効かせます。 んー、…

続きを読む

文字の設定(7)ちょっと動くリンク

ホームページでもブログでも、リンクスタイルの初期設定は下線付きです。 これを消す方法は以前にこちら↓でご紹介しました。   文字の設定(6)リンク下の下線を消す 今回は、マウスを乗せるとちょっと動く設定をご紹介します。 では、CSSを設定するページを開きます。   マイ・ブログ > デザイン > デザイン一覧 ページの真ん中より下の表に現在登録しているCSSの一覧が表示されています。 例えば、「light pole(右サイドバー)」というデザインでは、 a{ color:#36C; text-decoration:none; } となっています。 これを、マウスを乗せたときに   ・1px下に動く   ・色が変わる   ・下線が付く という設定に変えてみます。 a{ color:#36C; text-decoration:none; } という箇所を下記に書き換えます。 a { text-decoration: none } a:link { color: #36c } a:hover { color: #cc0000; text-decoration: underline; position: relative; top: 1px;} hoverというのが、リンクにマウスを乗せたときの設定を書いている部分です。 一つひとつ解説しますね。 color: #cc0000   …> 濃い目の…

続きを読む

もっと見る