自作テンプレート小ネタ
先週末は機会があればキャンプへと思ってたんですが、次男→嫁→長男ときて、やはり僕にももれなくインフルエンザが来ました...。
おかげで先週はほとんど寝て過ごしてました。
来週は子供の学年末の試験前なんで僕一人遊びに行くとひんしゅくを買いそうなので、今月はノーキャンプほぼ確定です(泣)
でも一応キャンプに行ってもいいか聞いてみよっかな...
さて、ごく一部の方から支持を頂いている僕の公開しているテンプレートのカスタムネタです。
春だからでしょうか、最近またテンプレートを利用してくれる方がいらっしゃったので調子に乗ってテンプレネタの投稿ですｗ
今回はカスタムと言うか、ブログで使う画像サイズについてと、こういう書き方をするとこうなりますよ的な内容です。
まぁ、へぁ〜そぉなんだぁ...というぐらいの気持ちで見ていただければ幸いです。
ブログで使う画像について
画像の大きさについて
僕の公開しているテンプレートのコンテンツの幅は720pxなので長辺が720px以下の画像を用意すればいいと思います。
小さい画像だと折角の素敵な写真なのに小さくって何が写っているのか目を凝らせないとわからないっていうのも、もったいないのでできれば最大サイズの720pxを用意されてはいかがでしょうか。
重要！横幅の長さではなく長辺の長さであることに注意！
ブログで使う画像についてはこちらの記事もどうぞ
 |
記事を<div>「記事本文」</div>で囲むと
ブログの記事を書く時に最初に<div>最後に</div>と書くと以下のようになります。
記事中の画像が中央によって角が丸く処理がされます。
上の画像のように中央に配置され画像の四隅が丸くなります。
その他<p>とか<div>がわかる方向け
pタグは2行分下にマージンがつきます。divタグは3行。
記事作成時の参考にしてみてください。
使い方
記事を書く時に本文の欄とか追記の欄それぞれの最初に「<div>」を書いて一番最後に「</div>」を書けばいいだけです。
ただ、注意しないといけないのが<div>〜</div>を書き間違うとレイアウトが大きく崩れてしまうので、そこだけは間違えて記述しないように十分に注意をしてください。
見出しを付けて見やすく
記事の中の内容のまとまりごとに見出しをつけて区切ってやってブログを見やすくしようということです。
見出しの文言を<h2>◯◯</h2>で囲ってやると、ブラウザや検索エンジンなどは、それが見出しなんだと認識します。
さらに僕のテンプレートだと
見出し見出し見出し
↑<h2>◯◯</h2>で囲ってやるとこんなふうに装飾されて表示されます。
見出しをつけてやるとブログ本文がぐっと見やすくなるので、ぜひご利用ください！
テンプレートのダウンロードはこちらから
今回紹介したテンプレートのカスタマイズは、僕の公開しているテンプレートについての方法です。
僕の公開しているテンプレートはレスポンシブデザインで使っていただいている方からはスマフォやタブレットでとても見やすくなったと嬉しい声を頂いております。
よろしかったらどうぞｗ
バージョン3のテンプレート(クール)をご希望の方はこちらからどうぞ
バージョン2のテンプレート(ガーリー)をご希望の方はこちらからどうぞ
バージョン1のテンプレートをご希望の方はこちらからどうぞ
ナチュログと同じデザインのレスポンシブデザインテンプレートをご希望の方はこちらからどうぞ
最後に、僕はウエブデザイナーでも何でもございません。
趣味の領域で作成したテンプレートなので、テンプレート運用に関わるサポートはございません。
が、何かしらテンプレートの不具合があれば一緒に解決策を探っていきたいとは思っています。
このテンプレートで気になったことなどがあればお問い合わせください。
また、本職の方で「ここの記述はおかしい・ここはこうした方がいい」などアドバイスなどがあれば、大歓迎でお待ちしておりますので、どしどしコメントください。
お約束ですが、ご使用の際は自己責任でお願いします。
テンプレートの利用で不具合など生じても当方では責任は負えませんのでよろしくお願い致します。
また、このテンプレートは古いブラウザには対応していません。あしからずｗ
見出しのつけ方が、よ〜やく分かりました٩( ᐛ )و
次に記事を書く時にチャレンジしてみます。
見出しもどうやるのかなー？と思っていたのでタイムリーな記事でした！次回記事書くときやってみたいです。
写真の角を丸くするのもよいですねー。
いつもありがたい情報感謝です(^O^)／
早速「見だし」を使って自分の記事を修正してみました（笑）
いままで●を使っていただけなので、見やすさが格段に上がりました。
過去記事も修正しようかな？
どれも気になることだったので、こうやって記事にしてもらえて嬉しいです(^O^)
猛烈な支持者だなんて(*´∀｀*)ありがとうございます。
見出しが入ると、ブログがグッと読みやすくなるのでオススメですｗ
是非試してみてください！
見出しが入ると記事にメリハリも出るし、見やすくもなるし是非使ってくださいｗ
ｋさんの記事量だと、すべて変更するとなると相当な労力が必要でしょうね...。
もっと早く記事にしておけばよかったですね（笑）
一度にすべて変更すると大変なので少しずつ見直しがてら変更していってはいかがですか？
是非是非試してみてください！！！
でも、テンプレートネタもそろそろネタが切れてきちゃったかなぁ〜なんてｗ
早速やってみよっと。
ありがとうございました〜
で、もしできればで良いのですが、小見出しの後にかなり空白が生じるのですが、これを狭くする方法とかもあるのでしょうか？
手間のかかるやつでスイマセン、ほんとに。
ｈ2タグは文章が長いときに利用させていただいてました。こんなに簡単に見出しを付けられるようにしていただいて本当に初心者には助かります。
角丸は何故かうまくいかない時が多いので、最近やってないのですが、また可愛くしたい時にはやりたいなぁと思います。
一旦更新するといきなり最初のdivが消えたりして、そしていつの間に整合性がとれません！っていうエラーメッセージが出てしまうのが怖くって最近使ってなかったのですが。
作成支援ツールを使っているんですけど、そうすると改行がbrじゃなくてやたらdiv div 出てくるので、それとまぎれて分からなくなってしまうんですよねｗｗ
早速のご利用有難うございます
見出しが入るとぐっと見やすくなるでしょｗ
見出しの下方向マージンのサイズの指定箇所は270行目ぐらいの
.blogbody h2{
margin-bottom:1.5em;
}
ですので、そこで調整してみてくださいｗ
それと、ブログで使う画像についての過去記事もぜひ目を通しておいてくださいね！
書いたdivタグが消えるっていうのもわからないんですが、もしよかったら簡単投稿ではなく普通の記事投稿を使って見られたらいかがですか？
他の方のソースを見たら、改行にdivは使ってなかったので、結局はそっちのほうが見やすいのかもしれませんよ。
普通の記事投稿でも十分簡単ですので、よろしければぜひｗ
やってみます。
それから過去記事の件も。
気を付けていつもは外してたんですが、うっかりミスのようです。
助かりました。
とてもわかりやすくありがとうございます！
写真の角、どうやって丸くするんだろう？と思っていたので、今度試してみたいと思います。
人気急上昇じゃないのでしょうか？
タグ。書き損じて「？？？？」ってならないように注意しますwww
写真の角を丸くするのは、すべてマニュアルでやっていたので、助かります。
見出しも含めて、参考にさせていただきます。
ありがとうございますー
どういたしましてですｗ
見出しの下方向マージンは、改行のことを考えてなかったので、ちょっと多めに取りすぎてたみたいですね^^;
画像を角丸にする方法なら過去記事で簡単にですけど（でも今回よりは詳しく）書いてますんで、そちらも参考にしてみてください！
そうなんです。
新しいのから古いのまでここ最近利用していただける方が増えてきたんで、調子に乗ってテンプレネタ書いてみましたｗ
書き損じても、間違えた箇所がわかればすぐに直せるんで、是非チャレンジしてみてくださいｗ
書き込んだのに消えちゃった←あるある（笑）
画像一つ一つに設定するのって結構面倒くさいですもんね〜。
これなら一つの設定ですべての画像に適用されるので便利ですよｗ
ただ、角丸にしたくない画像ももれなく角丸になってしまうデメリットもあるんですけどね^^;
その画像だけdivの外に出すという手もありますが。
ありがとうございます、大変参考になりました♪
お役に立てましたようで＾＾
また何か役に立ちそうなネタ考えときますね。
この記事 超初心者の私が読んでもわかりやすいです。。
できる事からちょっとずつ勉強させてください。
ちょっと書き方がわかれば、ブログの記事もぐんと見やすくなりますんでネタがあれば、今後もテンプレ系の記事を書いていきたいと思いますｗ
またご訪問くださいねーｗ