忍者おまとめボタンを中央(Center)位置に表示 ~レスポンシブは任意の横幅に~

このブログでSNS(ソーシャル)ボタン表示に忍者ツールズの“忍者おまとめボタン”を使用しています。 このボタン文字通りSNSのシェアボタンをまとめて表示出来て便利なのですが、デフォルトだと横位置が「右」or「左」しかなくて微妙な位置に表示出来ないんですよね。 まずは真ん中に表示させたくて、web上で色々調べたら、忍者ツールズで『助太刀忍者(質問掲示板)』ってのがありまして、同じような質問をされて解答されていたのを見つけたので、それを利用しましたが・・・ 参考URL: http://csbbs.ninja.co.jp/Thread_View/52059/ 頭の <div class="ninja_onebutton"> を <div class="ninja_onebutton" style="width:200px;margin:0 auto;"> に変更すると真ん中に寄りますよとの事で試しました。 ※サイズの“200px”は例としてあげられています 概ね、真ん中に寄るのですが、微妙にど真ん中にはならなかったんです。 理由は、文中の「width:200px」部分でボタン一列分の横幅を指定するのですが、私が使用しているオリジナルボタン(丸型)だと、このサイズが微妙で、どうやってもドセンターにならず、「もうちょいでど真ん中や」と思って、数ピクセルずらすとボタン一個が下に入ってデザインが崩れて一列にならず、もう無理やしそこまでこだわらなく…

続きを読む

ウェブリブログにカスタマイズできる記事一覧を貼る ~FeedWind・忍者画像RSS~

ウェブリブログ標準装備の“新着記事一覧”のデザインがどうしても気に入らないので、なんとかならないものかとツールをいろいろと探し、今のようになりました。 また、過去記事をブログ上に表示できないかとも思い、フッター付近に過去記事をランダムに表示する一覧を設けました。 結果、サイドバーの新着記事一覧には『FeedWind』、ランダム表示する過去記事一覧には『忍者画像RSS』を使用しています。(2016/02/27時点) ※2018/07/24以降ウェブリブログがSSL化しましたが、『忍者画像RSS』はこの時点でSSL対応していません。 ※独自ドメイン使用のブログは、SSL化の対応が遅れていると運営側より発表されていますので(2018/08/27時点でhttpのままです)このブログでは『忍者画像RSS』を使用しています。 ※スマホ画面は『FeedWind』を使用しています。 ※『忍者画像RSS』のタグ内で“http:”となっている2箇所を“https:”とする事で表示される事に気づきました。(2018/10/17時点) ※2018/10/23に対応との発表がありました。タグの貼り直しでOKです。 どうして、このRSS表示ツールを使用するに至ったか、書いておかないと後で忘れそうなので、備忘録として記事にしておきます。 どちらのツールにもウェブリブログだと使えない機能があるんですよ。困ったことに。 さて、まずRSS表示ツールとして、私が必要とした条件が ・新着…

続きを読む

見やすいブログ ~テキストの改行・画像等を横並び~

前回の記事、見やすいブログ ~ウェブリブログのサイドバーに写真・画像を表示~の続きです。 今回は下のサンプルの写真横のテキスト類作成方法と、写真とテキスト類を横並びにする方法です。 横並びにする方法を流用すれば、複数枚の写真を横並びにする事も出来ます。 サンプル: 文字にURLを埋め込む: -------------------- <a href="トップページのURL">気になる…</a> -------------------- 赤文字にブログトップページのURL(あくまで私のブログをサンプルにしているのでトップページのURLですが、任意のURLを入れてください)、青文字に表示させたい文字を入れてください。 これで文字にURLが埋め込まれます。 文字を任意の位置で改行: 私は -------------------- <p> 文字 </p>ここで改行される -------------------- のやり方が簡単と思いしています。 サンプルの内容ならば -------------------- <p>←</p> <p>彼は日夜世界平和を考えています</p> <p>…私もいっしょに</p> -------------------- となっています。 他にも“範囲を指定して何文字で改行する”という方…

続きを読む

見やすいブログ ~ウェブリブログのサイドバーに写真・画像を表示~

いろいろなブログを拝見していると、「ブログのサイドに写真付きプロフィールを付けている人多いけど、ウェブリブログは出来ないのかな?」と思い、色々と試してみて今のようになりました。 最初に断っておきますが、私はCSSの勉強なんかした事ないので、セオリー無視でしています。 まぁ、素人のたわごとと思って、軽い気持ちで見てください(^-^) ちなみに、今回作成方法を紹介しようと思っているのはこの画像の写真部分です。 本来なら、「写真・画像を貼りつけて文字を回り込ませる」という事をするのが普通のようですが、これだとただの写真・画像の横に紹介文というようなものになり、おもしろくないので ■マウスオーバーで文字が出てくる ■写真クリックで違う写真が表示される  という事を出来るようにしてあります。 アクセスの解析をすると、私のブログの場合サイドバーの上にある画像をクリックした人は誰もいませんし、誰も見ていないようですw 完全に自己満足ですw この画像部分を作成するためには、他にも ■写真と文字部分を横並びにする ■文字の“気になる…”をクリックするとブログトップページが表示される ■文字列の任意の部分で改行する  と言う事が必要ですが、それはまた後日に順を追ってブログに書いていこうと思います。 ※2015/12/11 記事にしました→見やすいブログ ~テキストの改行・画像等を横並び~ さて、マウスオーバーで文字が表示されて、写真をクリックす…

続きを読む

見やすいブログ ~CSS フォント一括変更~

前に、見やすいブログ ~見た目は大事~という記事で、本文記事のフォントの変更方法を紹介させて頂き、プロフィールとかも同じように変更をしていました。 でも、個別にフォントを指定していくと「あれっ?ここ出来ていない?」という箇所も出てきて、CSS設定に慣れていない私としては簡単な方法がないものかなと模索しておりました。 するとCSSも“*”が使えるんですね。 “*(半角アスタリスク)”はワイルドカード。どんな文字にもどんな文字数にもなれるんです。 だから、 * { font-family:"メイリオ",Meiryo; } とCSSに付け加えれば、ブログ内のフォントを一括指定できるんですね。 それと私のブログでは、これにフォントの第2候補をプラス(もし、フォント“メイリオ”が入っていない場合に第2候補のフォントで表示させる)して、以下のようにしました。 * { font-family:"メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"; } これを(ウェブリブログ)CSSの出だしの部分に入れて、以下のようにしています。 /*----------------------------------------------*/ /* 共通スタイル */ /* (トップ、月別、テーマ別、記事ページ共通) *…

続きを読む

見やすいブログ ~幅・フォント変更(ウェブリブログ)~

※この記事はPC画面のお話です。スマホ版が表示されている場合は下記のURLクリックで開き直してください。 http://kotobuki1174takasui.xyz/201510/article_8.html ウェブリブログで、ブログを開始して4ヶ月が経ち、色々と記事を掲載しているうちに、ブログのレイアウトが気になりだしました。 ほんとに気まぐれで記事を作成しだしたのですが、いろんな人が見ている事を考えると、記事の良し悪しは今回抜きにして まず、見やすいブログを心がける のが礼儀だという考えに至ってしまいました。 そして、特にこの1週間、ブログのレイアウトを、どうすれば見やすくなるのかを調べ・考えて、今見て頂いているレイアウトになりました。 このブログは ■全体の幅 : 1024ピクセル ■トップの記事の幅 : 682ピクセル ■記事本文の幅 : 672ピクセル ■サイドバーの幅 : 328ピクセル ■使用フォント : メイリオ ■フォントサイズ : 15ピクセル となっています。 ※広告表示微調整の為 トップの記事の幅:680→682、記事本文の幅:670→672、サイドバーの幅:330→328 に2015/11/28に変更しました CSSの変更はネット情報を頼りに、何度も確認を繰り返し編集しました。その為、この作業でブログのアクセス数が増えちゃいましたwww そして、ブログ本文以外の情報は右側サイドバーに集…

続きを読む

このブログへのお問い合わせ

ブログ名:
きになるてん
読者メッセージを送る