スタイルシートを変更

Style今更の話題ですが・・・シナプスブログでのデザイン変更は、構造自体では弄れる範囲が限定されている為(管理画面での設定)、そのほとんどがスタイルシートを変更する事で対応するしかないようです。
構造.htmはプラウザでブログを表示し、右クリック「ソースを表示」あるいは「ページを保存」で調べます。
スタイルシート.cssがどのように作用しているかは、.cssファイルとブログのソース(htm)を注意深く見比べれば判ってくると思いますが、cssを解説してあるサイトとしては、超初心者のためのスタイルシート講座が判りやすそうです。
私の場合、cssは、NoEditorというテキストエディターで触ります。色の指定にはFE - Color Paletteを使用、最近は改さんのブログ「雲の雫」で紹介されていたBookmarkletも多用しています。Bookmarkletの中でも、DIVの表示や、スタイルシートを表示、スタイルをテストは特に便利です。

サイドバーに水平線

Hrタイプリストの不正な使い方です?スタイルシートを弄ると、全てのタイプリスト表示項目ごとにしか出来ない水平線を、サイドバーの任意の場所だけに表示する為に行った方法です。
新しいタイプリストを種類「メモ」で適当な名称で作成します。
項目を追加でメモ欄(テキストエリア)に<hr>と記述します。
設定のリストの名前をスペースに置き換えます。これで名称の表示されないタイプリストの出来上がりです----リストの名前を表示したくないタイプリスト(例えばカウンターなど)にも使える方法です----。
出来上がったタイプリストをサイドバーに配置して終わりです。

ブログのデザイン

110style
現在の1列のスタイルは、WORDPRESSのテンプレートで気に入ったのがあったので、シナプス用にコピー改造してみたものです。
非常に単純なデザインのテンプレートです。簡単な改造の仕方と、styles.cssを含めた使用ファイルをまとめて置いおきます(暫くの間になると思います)。参考にして下さい(なるかな~?)。

synapse-style.zipをダウンロード・・やはり公に晒しておけるほどの内容ではないので、「どうしても見てみたい・・・」と思われる方はコメントして下さい。直に送らせて頂きます。

決して作業自体は、難しくは無いと思いますが、ある程度の専門的な知識が必要となります。くれぐれも改造に際しては自己責任でお願いします。

ご質問には答えられる範囲でお答えしようと思います。

スタイルシート修正

今回のシナプスブログのメンテ(バージョンアップ)によってCSSレイアウトが崩れてしまいました。
styles.cssを修正しただけでは上手くいきません。
styles.cssをよくよく眺めてみると、styles.cssの最初のところで別のスタイルシートbase-weblog.cssを読み込む仕様に変更になっているようです。

/* base css */
@import url(/.shared-asp09/themes/common/base-weblog.css);

base-weblog.cssはファイル・マネージャーでは見えていないので、http://〇〇〇.synapse-blog.jp(ブログのURL)/.shared-asp09/themes/common/base-weblog.cssをプラウザで読み込んで.cssとしてローカルに保存し内容を適時変更後、トップディレクトリー(私の場合はstyles.cssもトップに置いているので・・・)にアップしstyles.cssの先ほどの記述を

/* base css */
@import url(/base-weblog.css);

に変更し変更しstyles.cssから修正したbase-weblog.cssを読み込むようにしています。
今回からはbase-weblog.cssとstyles.cssを同時に変更するか、base-weblog.cssの内容を全てstyles.cssに移して一本かしてしまうかになるようです。styles.cssが後述になる為、殆どは上書きされているようですが、一部base-weblog.cssによってしか修正できないところがありました。

画像の縦並べ

画像を縦並びにするつもりでも2つ目以降の画像がずれて表示されてしまう場合は、次の画像のタグの直前に<br clear="all" />を挿入することで縦並びにすることが出来ます。挿入は、HTMLの編集(プレーンテキスト表示)で行います。


以下に前回のポストのHTMLソース(プレーンテキスト表示)を参考において置きます。
<a href="http://tam.synapse-blog.jp/blog/images/nosekae-1.jpg" onclick="window.open(this.href, '_blank', 'width=800,height=600,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="nosekae-1" title="nosekae-1" src="http://tam.synapse-blog.jp/blog/images/nosekae-1_thumb.jpg" width="130" height="97" border="0" style="float: right; margin: 0px 0px 5px 5px;" />今日は暑かったですね。
暑さでヘタバリましたが、何とか本日のノルマ(既存のエンジンを降ろす事)を達成できました。
明日は筋肉痛、間違いないでしょう。
<br clear="all" /><a href="http://tam.synapse-blog.jp/blog/images/kuwagata_2.jpg" onclick="window.open(this.href, '_blank', 'width=800,height=600,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img alt="kuwagata" title="kuwagata" src="http://tam.synapse-blog.jp/blog/images/kuwagata_2_thumb.jpg" width="130" height="97" border="0" style="float: right; margin: 0px 0px 5px 5px;" />作業中に訪問してくれた小さなクワガタ君、一人の作業は淋しかろうと訪ねてくれたのでしょうか?

BlogPeopleへのPing

BlogPeopleへのPing問題解決しました。

ping.bloggers.jpへシナプスブログがPingを飛ばす際に http://tam.synapse-blog.jp/blog/ (blogは個々のメインフォルダー)のアドレスで登録?しているようです。

BlogPeopleのブログ登録アドレスを http://tam.synapse-blog.jp/ から http://tam.synapse-blog.jp/blog/ に変更する事で解決できました。BlogPeopleのサポートの方にはご丁寧に対応して頂き感謝しております。

ブログとHP

RedViperさんが「もはや」という記事中でブログと個人サイトHPについて言及されていましたが、私もシナプスブログを始めてから、鹿児島のブログサイトにあちこちお邪魔するようになりますますその感を強く持つようになりました。

私はブログ以外のHPも管理していますが、ほとんど更新する必要の無いサイト(仕事上のデータを載せるサイトなど)でしかなく、気軽に更新していけるブログが個人的なHPにするにはベストではないかと思っています。しかもブログも日々進化しているようで、ブログだけで今までのHPのようなページ構成も簡単に出来るようにもなってきています。

HTML等にとっつきにくい方でも気軽に参加できる地元密着型のシナプスブログのようなものがどんどん増えていけば、新しいウェッブコミュニケーションの形が出来上がっていくような気がしています。

Ping送信テスト

このブログの新規投稿がBlogPeopleへ反映されないのでping.bloggers.jpにPingが送信されているかチェック。

結果:ping.bloggers.jpには飛んでいるのが確認できたのでBlogPeopleの方の問題・・・。

ブログ改造最終章?

これ以上やると本末転倒、泥沼状態(立ち上がりが今でも遅くなったよう)になるのでひとまず改造は終わりにします。

  • 変更点1:標準のサイドバーのコンテンツのメールリンク、標準でついているくらいだからSPAM対策はされているだろうと思い追加したところ、即効で新種SPAMが来たので・・・POPFileという分類ソフトにより仕分け済みなので新たなSPAMが解かった?・・・新たにリンクとして設けた。その際はアドレスはHTMLエンティティ生成によりエンティティ化(暗号化?)している。メール連絡は必需品と思っているので、暫くはこの状態で様子見。
  • 変更点2:エントリーへのコメント以外の伝言方として小さなBBSをインラインフレーム(iflame)で追加。
  • 変更点3:BlogPeopleに登録し、ご当地ブログ(鹿児島)最新投稿サイト20件を表示するようにした。鹿児島のブログ情報を少しでも取り入れたいと思いました。
  • 変更点4:facet-diversさんの「続きを読む」スクリプトの実装。スクリプトを読み込むのに時間が掛かるのと、読み込むまでの間が気になるけど記事がスッキリするかも。ちなみに<hr>タグ挿入をスイッチにしてCSSにてhr { display: none; }指定で水平線の表示を消しました。

以上、大分重くなってしまいましたが・・・・・。

スタイルシートcssでカスタマイズ

style 手順を説明しようと思いましたが、既に詳しく説明されたサイトがありましたのでリンクを貼らせていただきます。

”晴れ時々曇り”さんのTypePad ベーシックでcssを変更する

注意点は新たなスタイルシートでオリジナルのstyles.cssを上書きするとサイトの再構築時にオリジナルに戻ってしまう点です。リネームするか別のディレクトリに設置しないといけないようです。

ちなみに私の場合は、右図のようにトップディレクトリーにstyle.cssとリネームの上(念のため)UPして、下記のようにhrefを指示しなおしました(相対指示・・・httpから始まる絶対指示でもOK)。

<link rel="stylesheet" type="text/css" href="/style.css"/>

なお、外の方のブログ等のHTMLソースを知りたいときはIEの場合、プラウザで開いているサイト上で右クリック”ソースの表示”を選択でテキスト表示されます・・・・参考まで。

Works blog-new

imocntjs