この『四つ這いおとな』のテーマ、『Simplicity』の作者の「わいひら」さんに、僕が勝手に親近感を持っている理由

この『四つ這いおとな』を始めようとしたとき、初めて”WordPress”のいろいろな基礎知識や設定を勉強することになった。そして、サーバーを選んだり、サイトのアドレスを決めたりして、とりあえずサイトを公開するスタートラインにまでは立てたとき、次にこの『四つ這いおとな』の基本的なデザインの枠組み、「テーマ」って呼ばれてるものを選ぶために、いろいろ見て回ってたんだ。

まず、いちばん重視した条件は、「無料」だということ。一応広告を載せたり、投げ銭を受け付けたりはしているけど、できたばかりのサイトに、そんなたくさんの「支援者」が現れるなんてのは現実的じゃない。それに僕は現金収入にそれほどゆとりがあるわけじゃないから、まずは「できるだけ支出を抑える」ということ、これがとても大切だった。そのぶんサーバーと独自ドメインには、少しお金をかけたけどね。

そして、僕にとってもうひとつ大切な条件は、「シンプルで、設定がわかりやすい」ってことだった。僕は文系だし、数字とかコードとかも見てるだけで疲れてしまう感じだから、「文章を書く」ということ以外のことは、できるだけシンプルに済ませるのが理想だ。

それで、この条件に当てはまるテーマをいろいろ探し回ってたどり着いたのが、この『Simplicity』だったんだ。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

簡単で、馴染みやすいのに高機能、そして無料。Simplicityは、ほとんど僕の理想そのものだった

そして見つけたSimplicityは、まさにその名前に表されているとおり、シンプルだった。それでいて高機能で、基本的な機能は初期設定のままでも盛り込まれているから、とりあえずはそのままでもなんの問題もない。そして開発者も日本人だし、利用者も既に多かったから情報も豊富にあるし、オプション機能もいろいろ試行錯誤しながら設定することができた。そして、すべての機能を最大限に活用しても無料だ。ここまで見ただけで、これはもうほとんど僕の理想そのものだと思った。それで迷わず、このSimplicityを導入させてもらうことにしたんだ。

作者の「わいひら」さんは、「ネタキリ系の人」だった

こんなにいいテーマを見つけた僕は、今度はその作者の「わいひら」さんってどんなひとなのかが、気になるようになった。そしてその「わいひら」さんの別サイト『寝ログ』を見つけたとき、そのプロフィール欄を見て、かなり驚いた。

ブログ運営者：わいひら（yhira）
@MrYhira
事故って首の骨を折っちゃったネタキリ系の人。（C4-5）
このブログは、基本的に寝ながら出来るコトや使えるモノを紹介しています。主に、生活の中から気づいたこと、寝ながらでもできる仕事、便利グッズなどのレビュー、アニメ・漫画、ブログ運営、Wordpressなど、雑多なことを書いています。
頸髄損傷で手足は動かないのですが、今は以前よりデバイスが進んできたので、パソコン操作なら何とかすることができます。
プロフィール
ブログ運営者の情報です。ブログ運営者：わいひら（yhira） @MrYhira 事故って首の骨を折っちゃったネタキリ系の人。（C4-5）このブログは、基本的に寝ながら出来るコトや使えるモノを紹介しています。主に、生活の中から気づ
web.archive.org

そう、わいひらさんは「ネタキリ系の人」だったんだ。そしてこれを知った僕は、勝手ながらさらに親近感を持ってしまった。そしてなおさら、このSimplicityを大切に遣わせてもらおうと、そう思ったんだ。

備忘録も兼ねて、僕がSimplicityに施したカスタマイズを記録しておく

それで僕は、どうせならこのSimplicityを最大限自分らしく活用しようと、公式の情報以外にいくつかのサイトの情報を組み合わせて、自分なりにカスタマイズを施してみた。といってもただコピペしただけなんだけど、これからの自分のための備忘録も兼ねて、そのコードと情報元を、まとめておこうと思う。この内容は、今後も随時追加していくよ。

じゃあまずは、『四つ這いおとな』のタイトルロゴから。

これは

【初心者向け】スキンの設定と無料ロゴの作成。~Simplicityをカスタマイズ~02

Simplicityのスキン設定で簡単にデザインを変更前回は、Simplicityというワードプレスのテーマをインストールしました。画面の配置が少し変わりましたが、まだ色味がありません。インストールするテンプレート（テー

web.archive.org

を参考に、

Squarespace

Create a beautiful, professional logo for your business in seconds with Squarespace's free logo maker. Choose from thousands of logo design options.

logo.squarespace.com

の機能を活用して作った。

次に、見出しの見た目は、これをそのままコピペしただけ。

.article h2 {
background-color: #1eae93;/* 見出し背景色 */
border-left: 0 none;
color: #fff;/* 文字の色 */
padding: 15px 30px;/* 文字の位置 */
margin-bottom: 35px;/* 見出し下の空白*/
}

.article h3 {
border-bottom: 10px solid #b5f2e7;
padding: 10px 0 0 0;
margin-bottom: 30px;
}

.article h4 {
border-left: 30px solid #b5f2e7;
border-bottom: 0px;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
【simplicity】見出しタグをカスタマイズ。h2,h3,h4を色変更でブログをあなた色に染める
Wordpressのテーマsimplicityの見出しタグカスタマイズ方法。コピペで出来ます。
web.archive.org

それから、段落の１字下げについては、いろいろ調べてみた結果、


#the-content.entry-content p {
padding-left:-1em;
text-indent:1em;
}

のコードで設定してるけど、今のところとりあえず快適だと思う。

あとは、サイトで本とか他のものを紹介するときに活用させてもらってる「ヨメレバ」や「カエレバ」については、このコードでボタンのデザインを変えている。


/*カエレバ・ヨメレバ（PC版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 90%;
max-width:680px;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
width:20%;
float: left;
}
.kaerebalink-image a img,.booklink-image a img {
width:100%;
}
.kaerebalink-info, .booklink-info {
width:70%;
margin-left: 2em;
float: left;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin-right: 5px;
margin-bottom:3px;
text-align: center;
float:left;
width: 30%;
}
.kaerebalink-link1 div:active, .booklink-link2 div:active {
border-top:3px solid #FFFFFF;
margin-bottom: none;
box-shadow:none;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: white;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
box-shadow: 0 3px #B16A00;
}
.shoplinkamazon:hover {
background: #FFB23F;
}
.shoplinkkindle {
background: #0079BA;
box-shadow: 0 3px #015684;
}
.shoplinkkindle:hover {
background: #2797D4;
}
.shoplinkrakuten {
background: #BF0000;
box-shadow: 0 3px #7B0101;
}
.shoplinkrakuten:hover {
background: #DC3939;
}
.shoplinkkakakucom {
background: #25388E;
box-shadow: 0 3px #081658;
}
.shoplinkkakakucom:hover {
background: #485CB7;
}
.shoplinkyahoo {
background: #750992;
box-shadow: 0 3px #3F0250;
}
.shoplinkyahoo:hover {
background: #8F0FB3;
}
.booklink-footer {
height:0;
clear: left;
}

style type=text/css>
/*カエレバ・ヨメレバ（スマホ版）*/
.kaerebalink-box, .booklink-box {
border: 2px solid #CCCCCC;
padding: 20px;
width: 80%;
margin:0 auto;
}
.kaerebalink-image, .booklink-image {
margin:0 auto;
text-align:center;
}
.kaerebalink-info, .booklink-info {
margin:10px auto;
padding-top:10px;
border-top:1px solid #CCCCCC;
}
.kaerebalink-name > a, .booklink-name > a {
font-size: 16px;
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 12px;
}
.kaerebalink-powered-date a, .booklink-powered-date a {
color: #256CC5;
text-decoration: underline;
}
.kaerebalink-link1, .booklink-link2 {
margin-top: 1em;
}
.kaerebalink-link1 div, .booklink-link2 div {
margin:5px auto;
text-align: center;
width: 100%;
}
.kaerebalink-link1 div a, .booklink-link2 div a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
display:block;
width: 100%;
height: 40px;
line-height: 40px;
}
.shoplinkamazon {
background: #FF9900;
}
.shoplinkkindle {
background: #0079BA;
}
.shoplinkrakuten {
background: #BF0000;
}
.shoplinkkakakucom {
background: #25388E;
}
.shoplinkyahoo {
background: #750992;
}
.booklink-footer {
height:0;
clear: left;
}

コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜

今回はカエレバ・ヨメレバのカスタマイズです。カエレバ・ヨメレバはわかったブログのかん吉さんが運営されているブログパーツで、Amazon、楽天などのリンクを載せるのに非常に便利です！カエレバはこちらで、ヨメレバはこちらになります。そんなカエレバ・ヨメレバのデザインをおしゃれにカスタマイズしていきますね！コピペのみ...

web.archive.org

それとYouTube動画をAMPに対応させるための


remove_action( 'init', 'wpcom_youtube_embed_crazy_url_init' );

をfunctions.phpに追記している。

それにこのページに書かれてるコード（設定）も加えることで、サイト全体の高速化を図っている。

[改訂版] .htaccess の見直しでWebページ高速化 | Thought is free

現在の当ブログのトップページの GTmetrix の解析結果です。改訂前の記事から、かなり点数落ちてますが、原因は、Google Adsense 貼り始めたからですｗ（以前は貼ってなかった） …

web.archive.org

あと今のところ利用頻度は少ないけど、公式の追加機能の「検索ボックス」の表示も一応取り入れている。

/*******************************
* 続きはWEBで的な検索ボックス
********************************/
.search-form{
  margin: 3em 0;
  font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height: 170%;
}
 
.search-form div{
  border: 1px solid #555;
  border-radius: 2px;
  padding: 5px;
  margin-left: 10px;
  display: inline-block;
}
 
.search-form div.sform{
  min-width: 280px;
  background-color: #fff;
}
 
.search-form div.sbtn{
  background-color: #1155EE;
  color: #fff;
  padding-left: 20px;
  padding-right: 30px;
  position: absolute;
}
 
.search-form div.sbtn:after{
  content: "\f25a";
  font-family: FontAwesome;
  color: #000;
  position: absolute;
  bottom: -28px;
  font-size: 25px;
}
 
@media screen and (max-width:450px){
  .search-form div{
    padding: 3px 5px;
    font-size: 75%;
  }
 
  .search-form div.sform{
    min-width: 180px;
  }
 
  .search-form div.sbtn{
    padding-left: 5px;
    padding-right: 10px;
  }
 
  .search-form div.sbtn:after{
    font-size: 20px;
    margin-left: -10px;
  }
}
続きはWEBで！的な検索を促す案内を表示するためのスタイルシート
ネットを利用するものとして何かわからないことがあれば検索するのは基本です。ただ中には、「調べようにも、なんと検索していかキーワードがわからない」なんて方もおられると思います。僕の場合、そういった方向けに記事を書くとき、わからない情報を調べて
web.archive.org