シリウスをおしゃれにカスタマイズ
ウェブサイトに装飾をする場合、スタイルシートでCSS指定をすれば通常は実装は可能
なのですが、シリウス構造では何かしらが邪魔立てして思うように導入できないことが
やや、いや多くございます
当サイトでは、できる限りシリウスでも反映する
もしくは、調整することにより実装ができるCSS装飾品を収集し、導入手順を
解説してまいります
シリウスは、基本構造がしっかりしているため、ウェブ上のものをすべてとは
言いませんが、制限アリでも、何とかいろんな装飾品が取り付けできると理解します
ヘッダー内に、記事内にと、もしくはサイトの隅、サイトの外とか、やりようは色々
しっくり、落ち着いてるから、派手々までとサイトを主張するあなたの好み次第で
いかようにもサイトイメージは変幻してまいります
ただいま、作り始めでコンテンツが全然不足していますが、日々追記してまいります
のでよろしくお願いいたします
意味もなくですが、面白い動画ありましたので,,,,
トップページ
なのですが、シリウス構造では何かしらが邪魔立てして思うように導入できないことが
やや、いや多くございます
当サイトでは、できる限りシリウスでも反映する
もしくは、調整することにより実装ができるCSS装飾品を収集し、導入手順を
解説してまいります
シリウスは、基本構造がしっかりしているため、ウェブ上のものをすべてとは
言いませんが、制限アリでも、何とかいろんな装飾品が取り付けできると理解します
ヘッダー内に、記事内にと、もしくはサイトの隅、サイトの外とか、やりようは色々
しっくり、落ち着いてるから、派手々までとサイトを主張するあなたの好み次第で
いかようにもサイトイメージは変幻してまいります
ただいま、作り始めでコンテンツが全然不足していますが、日々追記してまいります
のでよろしくお願いいたします
意味もなくですが、面白い動画ありましたので,,,,
トップページ
2018/05/30 22:45:30 | ソースコードコピーフォーム簡単導入方法
google-code-prettifyは、ダウンロード版も用意されておりますね。ま、こちらを利用しなくともライブラリアクセスで使えるとは思うんですけど？念のためのカスタマイズ備忘録として記載しておきます。ダウンロードは、こちらから...https://github.com/jmblog/color-themes-for-google-code-prettifyhead内...スタイルも確認（現在黒背景にしてます）<link href="prettify.css" type="text/css" rel="stylesheet"...
2017/07/10 01:35:10 | サイト内の画像をアニメーションで動かす手法まとめ
ページをスクロールするといきなり動的作動を備える、画像、テキストフォントが現れるというアクションイメージは、ショッピングサイトなどに限らずとも読者へインパクトを与えるという手段で..よく使われているアニメーション効果...言葉では説明が、いや、言い回しが何とも説明しがたいもので、現物確認のため上部に生上がりスタイルを二つ配置しております...せり下がりはもう少し下方に記事追加..もう少しページをスクロールして下さいこの辺に現れるかと思いますが？いきなり登場します、作動をご理解いただけましたか？画像でも実施...ＤＥＭＯは、フォントですが、画像でも同じ作動をします...以下に横3連で画像を並べて...
2017/05/07 00:38:07 | 丸画像各種仕様設定まとめ
何かしらのコンテンツに使えるかもしれない？..丸系画像の連続表示..古い映画の始まりに見られた丸グラフ内で黒カバーが回転するみたいな...簡単にいえば、丸画像のスライドとご理解くださいどんなことに使うのか？...私もイメージ浮かばず...お考え下さい5つの画像を連続表示...イメージ作動テキストテキストテキストテキストテキスト記事内配置ＨＴＭＬ...画像コードのみ書き換えてください<div id="stage"><div id="frame"><div id="photos"><div cla...
2017/05/07 00:29:07 | 丸画像各種仕様設定まとめ
記事内に置く画像は、加工しなければ、張り付けまたは読み込んでも四角形が基本でしょうね？でも、編集も面倒と思われるなら、私もそうですが、〇画像ならHTML記述で囲い指定すれば瞬間で作業終了となり定番で使用しています作業は、とっても簡単border-radius:で指定すればよいのですHTMLで指定しました、丸くなってますね記述を確認してください<img src="<% pageDepth %>img/catsample.jpg" style="width:150px;" alt="" />原本を書き換えました&l...
2017/03/21 02:40:21 | jquery採用の装飾系まとめ
シリウスサイトに導入仕様したお遊び的装飾品で、サイトが開くとわずかのずれ時差で上からちこっと落ちる画像、もしくは該当するコンテンツのタイトルを配置しましょうという無理にお勧めするほどではないが、たまにはいいかなコンテンツ当ページで左上に画像をおいてますが、多分少し落ちたと思います？原本は、ＣＳＳ３テンプレートで反応するものでして、記事やフッターを横移動で時差ずれ表示するものでしたが、シリウスのレスポンシブＴＰですとうまく反応しない...無理くりシリウス構造にＣＳＳ3を入れると操作画面上での記事入力方法が面倒になる..そこまでやる気はございませんで、致し方なく一つのみ、上から下へずれるを採用導入...
2017/02/25 07:29:25 | グーグル（Google） 関連サービスの導入まとめ
シリウス内にグーグルの検索ボックスを配置する解説ですサイト内サーチ検索ボックスは、標準機能で備えございますが、それはサイト内だけの範囲グーグル検索ボックスは、Google Chrome画面で使われるものと同様の機能で、取り入れる種類により、サイト内検索の反映も機能付けされますシリウスレスポンシブ機能同様に自動縮小また、記事幅に合わせサイズは適合します配置位置は、記事上部フリースペース１にコードを置けば見出し上に表示可能フリースペース３、4でも配置可能個別にページ配置が面倒、すべてのページでの同時表示をするなら、ＨＴＭｌ内にトップ、カテゴリー エントリーとコード配置してください以下例 （標準タイ...
2017/02/25 06:37:25 | グーグル（Google） 関連サービスの導入まとめ
ホームページなら自社の案内地図、紹介サイト、ブログならルートの案内をページ内に配置すれば読者様の利便性を補助できますねサイトの住所案内に従いグーグルマップサイトへ移動して探す方もおられるでしょうしかし、自分サイト内に配置しておけば即確認ができるのですね利用していただく...少しでも時間節約画像として取り込み配置される例も多くは見かけますが、できるならスクロールで動く、ストリートビューにも可変するグーグル連動の埋め込み式ファームを取り付けるがとても便利ですグーグルマップはシリウスに簡単導入できるので、読者に対して必要があるコンテンツなら即座に取り入れてみましょう導入手順へ進みます１、グーグルマッ...
2016/09/23 01:30:23 | サイト内の画像をアニメーションで動かす手法まとめ
ひし形の形状で、左右がずれ移動しますが、その際変形します右前 左後ろ移動<div id="img10" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>ＣＳＳ#img10 img {animation: animation10 2s infinite ease 1s both;}@keyframes a...
2016/09/22 05:23:22 | サイト内の画像をアニメーションで動かす手法まとめ
右からひだりへ移動して戻る繰り返し<div id="img05" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>ＣＳＳ#img05 img {animation: animation05 2s infinite ease 1s both;}@keyframes animation05 {from {t...
2016/09/22 04:30:22 | サイト内の画像をアニメーションで動かす手法まとめ
記事内に置いた画像が、外枠の一部を起点として全体が回る回転中、左右が少し隠れますが、記事枠からはみ出るとその下を通過するので見えなくなるのですwidth:320pxにしているのですが、そんな場合はサイズを小さくしてください風車<div id="img13" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style=";" alt="" /></div>ＣＳＳ#img13 ...
