記事一覧

大きな画像が枠から絶対はみ出さないスタイルシートの設定

この記事はファンブログで大きな画像が絶対にはみ出さなくなる方法です。書いてあるものをコピーして貼り付けるだけでそうなります。

詳しい説明はメインブログ Big Bangの記事「 絶対はみ出さない画像!自動でサイズ調節するスタイルシート 」に書いてあります。他のブログで困っている方はそちらをお読みください。

貼り付けるのは、下のソースコードです。

.entryBox .text img,
.entry .entryBody img,
.entry .text img {
	max-width: 100%;
	height: auto;
}

2014/04/02 古いテンプレートで適用されないものがあったので、スタイルシートに1行追加しました。

これをスタイルシートに追記します。スタイルシートは次の手順で開きます。

ファンブログにログインした最初の画面で、設定したいブログの「 デザイン」をクリック。

plugin1.jpg

ログイン直後のページにいない場合は、画面上部の「 デザイン」にマウスを合わせ、出てきたメニューの「 デザイン設定」をクリックしても同じページが開きます。

css1.jpg

開いたページで「PC」「スマートフォン」「ケータイ」と並んでいる中の「 PC」がオレンジ色になっている事を確認して、その下の行の「 CSS」をクリック。

css2.jpg

正しく開かれれば「 CSSの編集」と書かれたページになります。

CSSはカスケードスタイルシート(Cascading Style Sheets)の頭文字です。

css3.jpg

このページの大きな編集エリアにたくさん書かれているのが スタイルシートです。このスタイルシートの いちばん最後に、先ほどのソースコードを貼り付けます。

そして忘れずに「 保存」ボタンを押して保存します。「 設定を変更し、CSSをビルドしました。」と表示されたら完了です。

設定終了後、まだ自分のブログの画像がはみ出しているようなら、ページを見ているブラウザをリロード(再読み込み)するために「 F5」ボタンを押してください。

スマホの方は設定しなくても、すでに画面からはみ出さない画像になっているので大丈夫です。

2014/04/02追記スマホはアップロードした画像しかサイズ調整されないみたいです。外から読み込んだ大きな画像ははみ出します。それが嫌な場合は、その記事の中に下の1行を追記してください。そうすれば、はみ出さなくなります。

<style type="text/css"> #content .text img { max-width: 100%; height: auto; } </style>
サイズ変更に関連するページ:

別のブログの最新記事一覧をサイドバーに表示する

rss.jpg

ファンブログは、ひとり5つまでブログを作れます。そして他のブログの更新情報をサイドバーに簡単に表示できます。

これには RSSというものを使いますが、取得ツールはサイドバーのアイテムにすでに用意されているので設定するだけで表示できます。

他のブログの記事一覧を 画像つきで表示したい場合は「 他のブログの最新記事一覧を記事内の画像付きでサイドバーに表示するプラグイン 」をご覧ください。

まず、サイドバーの設定画面を開かなければなりませんが、開き方がわからない場合は別の記事に書いてあるので参考にしてください。

プラグインの設置方法 サイドバーの設定画面の開き方が書いてあります。

ページを開くと左の「 追加コンテンツ」一覧に「 RSS取得」という名前があります。「RSSアイコン」というのもありますが「RSSアイコン」ではなく「 RSS取得」の方です。

これをサイドバーの表示させたい場所に、左クリックしたまま移動(ドラッグ)させます。

rss1.jpg

移動させたら、名前の「 RSS取得」という文字をクリックすると下の画面が開きます。

rss2.jpg

いちばん上の「タイトル」は「RSS取得」のままでも構いませんが、名前を変えるとサイドバーに表示されるときのタイトルも変わります。

2番目の「RSSのURL」に最新記事のタイトルリストを表示させたいブログのRSSを入れます。詳しくはこの後説明します。

3個目の「取り込み件数」の数で最新記事を何個表示するか決められます。

全部の設定が終わったら「保存する」ボタンを押します。「設定が完了しました」と表示されたら、ウインドウを閉じます。

ちなみに「挿入テキスト(上部/下部)」という文字をクリックすると編集用のエディタが開きます。「挿入テキスト(上部)」に文字を書き込むと、タイトルと記事一覧の間に、「挿入テキスト(下部)」に書き込むと記事一覧の下にそれが表示されます。

しかし、これだけではまだ設定は反映されていません。元の画面に戻ったら忘れずに「 設定を反映する」ボタンを押して反映させるとサイドバーに指定したブログの最新記事一覧が表示されます。

rss3.jpg

RSSのURL取得方法

RSSのURLはソースコードの<head>から</head>の間に書いてあるのですが、このブログの場合だと下のようになっています。

<link rel="alternate" href=" https://fanblogs.jp/techs/index1_0.rdf " type="application/rss+xml" title="RSS" />

ファンブログの場合、RSSのURLは全てのブログで次のパターンです。

https://fanblogs.jp/ そのブログ固有の部分 /index1_0.rdf

ちなみに ファンブログ以外のRSSも取得できますが、WordPressだとRSSは以下の様になります。

http:// そのブログのドメイン /feed